Utopia-Canteen-System/Views/ScannerView.xaml

261 lines
14 KiB
XML

<UserControl x:Class="UtopiaCanteenSystem.Views.ScannerView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<UserControl.Resources>
<SolidColorBrush x:Key="AccentBrush" Color="#5BA3A0"/>
<SolidColorBrush x:Key="AccentBorderBrush" Color="#995BA3A0"/>
<SolidColorBrush x:Key="MutedTextBrush" Color="#718096"/>
<SolidColorBrush x:Key="TitleTextBrush" Color="#2D3748"/>
<SolidColorBrush x:Key="ErrorTextBrush" Color="#E53E3E"/>
<SolidColorBrush x:Key="ConnectedBrush" Color="#38A169"/>
<SolidColorBrush x:Key="SuccessTextBrush" Color="#38A169"/>
<Style x:Key="RoundedButtonStyle" TargetType="Button">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="{StaticResource AccentBrush}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Padding" Value="24,12"/>
<Setter Property="MinHeight" Value="50"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}"
CornerRadius="8"
SnapsToDevicePixels="True">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SecondaryButtonStyle" TargetType="Button">
<Setter Property="Foreground" Value="{StaticResource TitleTextBrush}"/>
<Setter Property="Background" Value="#f4f7f7"/>
<Setter Property="BorderBrush" Value="#e2e8f0"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Padding" Value="14,8"/>
<Setter Property="MinHeight" Value="40"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="ButtonBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="8">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ButtonBorder" Property="Background" Value="#eef2f2"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="ButtonBorder" Property="Background" Value="#e6eded"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="LogoutLinkButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Foreground" Value="{StaticResource MutedTextBrush}"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="{StaticResource TitleTextBrush}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Opacity" Value="0.75"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="StatusTextStyle" TargetType="TextBlock">
<Setter Property="Foreground" Value="{StaticResource MutedTextBrush}"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ScannerStatus}" Value="Connected">
<Setter Property="Foreground" Value="{StaticResource ConnectedBrush}"/>
</DataTrigger>
<DataTrigger Binding="{Binding ScannerStatus}" Value="Disconnected">
<Setter Property="Foreground" Value="{StaticResource MutedTextBrush}"/>
</DataTrigger>
</Style.Triggers>
</Style>
<Style x:Key="StatusIconStyle" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe MDL2 Assets"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Text" Value=""/>
<Setter Property="Foreground" Value="{StaticResource MutedTextBrush}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ScannerStatus}" Value="Connected">
<Setter Property="Foreground" Value="{StaticResource ConnectedBrush}"/>
</DataTrigger>
<DataTrigger Binding="{Binding ScannerStatus}" Value="Disconnected">
<Setter Property="Foreground" Value="{StaticResource ErrorTextBrush}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<Grid Background="#F0F2F5">
<Viewbox Stretch="Uniform"
HorizontalAlignment="Center"
VerticalAlignment="Center"
MaxWidth="600"
MaxHeight="800">
<Border HorizontalAlignment="Center"
VerticalAlignment="Center"
Padding="40"
MinWidth="400"
MaxWidth="500"
Background="White"
CornerRadius="12">
<Border.Effect>
<DropShadowEffect BlurRadius="24"
ShadowDepth="0"
Opacity="0.08"
Color="#000000"/>
</Border.Effect>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- Row 0: main scanner content -->
<StackPanel Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Center">
<Image Source="pack://siteoforigin:,,,/assets/scanner.png"
Height="120"
MaxWidth="320"
Stretch="Uniform"
HorizontalAlignment="Center"
Margin="0,0,0,12"/>
<TextBlock Text="Scan your card to record"
FontSize="16"
Foreground="{StaticResource MutedTextBrush}"
Margin="0,0,0,24"
HorizontalAlignment="Center"/>
<Border Margin="0,0,0,0"
MinHeight="50"
CornerRadius="8"
BorderBrush="{StaticResource AccentBorderBrush}"
BorderThickness="2">
<Grid>
<TextBox x:Name="RfidInputTextBox"
Text="{Binding CardIdInput, UpdateSourceTrigger=PropertyChanged}"
Background="Transparent"
BorderThickness="0"
FontSize="18"
MinHeight="50"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Center"
Focusable="True"
KeyDown="RfidInputTextBox_OnKeyDown"
LostKeyboardFocus="RfidInputTextBox_OnLostKeyboardFocus"/>
<TextBlock Text="Scan Card ID"
Foreground="Gray"
FontSize="18"
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextAlignment="Center"
IsHitTestVisible="False"
Visibility="{Binding IsWatermarkVisible, Converter={StaticResource BoolToVisibility}}"/>
</Grid>
</Border>
<Button Content="SCAN"
Command="{Binding ScanCommand}"
MinHeight="50"
Margin="0,24,0,0"
HorizontalAlignment="Stretch"
Style="{StaticResource RoundedButtonStyle}"/>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center"
Margin="0,24,0,0">
<TextBlock Style="{StaticResource StatusIconStyle}"
Margin="0,0,8,0"/>
<TextBlock Text="{Binding ScannerStatusDisplay}"
Style="{StaticResource StatusTextStyle}"/>
</StackPanel>
<TextBlock Text="{Binding CurrentScanTime, StringFormat={}{0:MM/dd/yyyy\, hh:mm:ss tt}}"
FontSize="14"
Foreground="{StaticResource MutedTextBrush}"
Margin="0,12,0,0"
HorizontalAlignment="Center"/>
<TextBlock Text="{Binding Message}"
FontSize="14"
FontWeight="SemiBold"
Margin="0,12,0,0"
HorizontalAlignment="Center"
TextAlignment="Center"
TextWrapping="Wrap">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="{StaticResource ErrorTextBrush}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsSuccess}" Value="True">
<Setter Property="Foreground" Value="{StaticResource SuccessTextBrush}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
<!-- Row 1: Logout bottom-right -->
<Grid Grid.Row="1" Margin="0,24,0,0">
<Button Command="{Binding LogoutCommand}"
Style="{StaticResource LogoutLinkButtonStyle}"
Focusable="False"
IsTabStop="False"
HorizontalAlignment="Right"
VerticalAlignment="Bottom">
<StackPanel Orientation="Horizontal">
<TextBlock Text="⎋" FontSize="14" Margin="0,0,8,0" VerticalAlignment="Center"/>
<TextBlock Text="Logout" FontSize="14" VerticalAlignment="Center"/>
</StackPanel>
</Button>
</Grid>
</Grid>
</Border>
</Viewbox>
</Grid>
</UserControl>