302 lines
14 KiB
XML
302 lines
14 KiB
XML
<?xml version="1.0" encoding="utf-8" ?>
|
|
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
|
|
x:Class="LSFE.MobApp.Pages.Attendance.AttendancePage"
|
|
xmlns:viewmodels="clr-namespace:LSFE.MobApp.ViewModels"
|
|
x:DataType="viewmodels:AttendanceVM"
|
|
Title="Attendance"
|
|
Shell.NavBarIsVisible="True">
|
|
|
|
<ScrollView>
|
|
<Grid RowDefinitions="Auto,*"
|
|
Padding="20"
|
|
RowSpacing="20">
|
|
|
|
<!-- Header Card with Time and Date -->
|
|
<Border StrokeThickness="0"
|
|
BackgroundColor="{AppThemeBinding Light=#2196F3, Dark=#1976D2}"
|
|
StrokeShape="RoundRectangle 20"
|
|
Padding="20"
|
|
Grid.Row="0">
|
|
<Border.Shadow>
|
|
<Shadow Brush="{AppThemeBinding Light=#40000000, Dark=#80000000}"
|
|
Offset="0,4"
|
|
Radius="8"
|
|
Opacity="0.3" />
|
|
</Border.Shadow>
|
|
|
|
<VerticalStackLayout Spacing="8">
|
|
<Label Text="{Binding CurrentTime}"
|
|
FontSize="48"
|
|
FontAttributes="Bold"
|
|
TextColor="White"
|
|
HorizontalOptions="Center" />
|
|
|
|
<Label Text="{Binding CurrentDate}"
|
|
FontSize="18"
|
|
TextColor="White"
|
|
Opacity="0.9"
|
|
HorizontalOptions="Center" />
|
|
</VerticalStackLayout>
|
|
</Border>
|
|
|
|
<!-- Main Content -->
|
|
<VerticalStackLayout Grid.Row="1" Spacing="20">
|
|
|
|
<!-- Status Cards -->
|
|
<Grid ColumnDefinitions="*,*" ColumnSpacing="15">
|
|
<!-- Time In Card -->
|
|
<Border StrokeThickness="0"
|
|
BackgroundColor="{AppThemeBinding Light=#ffffff, Dark=#2C2C2C}"
|
|
StrokeShape="RoundRectangle 15"
|
|
Padding="15"
|
|
Grid.Column="0">
|
|
<Border.Shadow>
|
|
<Shadow Brush="{AppThemeBinding Light=#20000000, Dark=#60000000}"
|
|
Offset="0,2"
|
|
Radius="6"
|
|
Opacity="0.2" />
|
|
</Border.Shadow>
|
|
|
|
<VerticalStackLayout Spacing="8">
|
|
<Label Text=""
|
|
FontFamily="FontAwesome"
|
|
FontSize="32"
|
|
TextColor="{AppThemeBinding Light=#4CAF50, Dark=#66BB6A}"
|
|
HorizontalOptions="Center" />
|
|
|
|
<Label Text="Time In"
|
|
FontSize="14"
|
|
FontAttributes="Bold"
|
|
TextColor="{AppThemeBinding Light=#666666, Dark=#AAAAAA}"
|
|
HorizontalOptions="Center" />
|
|
|
|
<Label Text="{Binding TimeInText}"
|
|
FontSize="16"
|
|
FontAttributes="Bold"
|
|
TextColor="{AppThemeBinding Light=#4CAF50, Dark=#66BB6A}"
|
|
HorizontalOptions="Center" />
|
|
</VerticalStackLayout>
|
|
</Border>
|
|
|
|
<!-- Time Out Card -->
|
|
<Border StrokeThickness="0"
|
|
BackgroundColor="{AppThemeBinding Light=#ffffff, Dark=#2C2C2C}"
|
|
StrokeShape="RoundRectangle 15"
|
|
Padding="15"
|
|
Grid.Column="1">
|
|
<Border.Shadow>
|
|
<Shadow Brush="{AppThemeBinding Light=#20000000, Dark=#60000000}"
|
|
Offset="0,2"
|
|
Radius="6"
|
|
Opacity="0.2" />
|
|
</Border.Shadow>
|
|
|
|
<VerticalStackLayout Spacing="8">
|
|
<Label Text=""
|
|
FontFamily="FontAwesome"
|
|
FontSize="32"
|
|
TextColor="{AppThemeBinding Light=#FF5722, Dark=#FF7043}"
|
|
HorizontalOptions="Center" />
|
|
|
|
<Label Text="Time Out"
|
|
FontSize="14"
|
|
FontAttributes="Bold"
|
|
TextColor="{AppThemeBinding Light=#666666, Dark=#AAAAAA}"
|
|
HorizontalOptions="Center" />
|
|
|
|
<Label Text="{Binding TimeOutText}"
|
|
FontSize="16"
|
|
FontAttributes="Bold"
|
|
TextColor="{AppThemeBinding Light=#FF5722, Dark=#FF7043}"
|
|
HorizontalOptions="Center" />
|
|
</VerticalStackLayout>
|
|
</Border>
|
|
</Grid>
|
|
|
|
<!-- Location Card -->
|
|
<Border StrokeThickness="0"
|
|
BackgroundColor="{AppThemeBinding Light=#ffffff, Dark=#2C2C2C}"
|
|
StrokeShape="RoundRectangle 15"
|
|
Padding="20">
|
|
<Border.Shadow>
|
|
<Shadow Brush="{AppThemeBinding Light=#20000000, Dark=#60000000}"
|
|
Offset="0,2"
|
|
Radius="6"
|
|
Opacity="0.2" />
|
|
</Border.Shadow>
|
|
|
|
<VerticalStackLayout Spacing="12">
|
|
<HorizontalStackLayout Spacing="10">
|
|
<Label Text=""
|
|
FontFamily="FontAwesome"
|
|
FontSize="24"
|
|
TextColor="{AppThemeBinding Light=#2196F3, Dark=#64B5F6}"
|
|
VerticalOptions="Center" />
|
|
|
|
<Label Text="Current Location"
|
|
FontSize="18"
|
|
FontAttributes="Bold"
|
|
TextColor="{AppThemeBinding Light=#333333, Dark=#DDDDDD}"
|
|
VerticalOptions="Center" />
|
|
</HorizontalStackLayout>
|
|
|
|
<Label Text="{Binding LocationAddress}"
|
|
FontSize="14"
|
|
TextColor="{AppThemeBinding Light=#666666, Dark=#AAAAAA}"
|
|
LineBreakMode="WordWrap"
|
|
MaxLines="3" />
|
|
|
|
<Button Text="Sync to cloud"
|
|
Command="{Binding SyncCommand}"
|
|
BackgroundColor="{AppThemeBinding Light=#2196F3, Dark=#1976D2}"
|
|
TextColor="White"
|
|
CornerRadius="10"
|
|
HeightRequest="40"
|
|
Margin="0,10,0,0" />
|
|
</VerticalStackLayout>
|
|
</Border>
|
|
|
|
<!-- Photo Capture Section -->
|
|
<Grid ColumnDefinitions="*,*" ColumnSpacing="15" Margin="0,10,0,0">
|
|
|
|
<!-- Time In Photo -->
|
|
<Border Grid.Column="0"
|
|
StrokeThickness="1"
|
|
Stroke="{AppThemeBinding Light=#E0E0E0, Dark=#404040}"
|
|
StrokeShape="RoundRectangle 12"
|
|
HeightRequest="250"
|
|
BackgroundColor="{AppThemeBinding Light=#FAFAFA, Dark=#1E1E1E}"
|
|
VerticalOptions="Center"
|
|
HorizontalOptions="Fill">
|
|
<VerticalStackLayout Padding="10" Spacing="8">
|
|
<Label Text="Time In Photo"
|
|
FontAttributes="Bold"
|
|
FontSize="14"
|
|
TextColor="{AppThemeBinding Light=#333333, Dark=#DDDDDD}"
|
|
HorizontalOptions="Center" />
|
|
<Image Source="{Binding CapturedImageIn, TargetNullValue='no_photo.svg'}"
|
|
Aspect="AspectFill"
|
|
HeightRequest="200"
|
|
WidthRequest="200"
|
|
HorizontalOptions="Center"
|
|
VerticalOptions="Center">
|
|
<Image.Shadow>
|
|
<Shadow Brush="#40000000" Offset="0,2" Radius="6" Opacity="0.3" />
|
|
</Image.Shadow>
|
|
</Image>
|
|
</VerticalStackLayout>
|
|
</Border>
|
|
|
|
<!-- Time Out Photo -->
|
|
<Border Grid.Column="1"
|
|
StrokeThickness="1"
|
|
Stroke="{AppThemeBinding Light=#E0E0E0, Dark=#404040}"
|
|
StrokeShape="RoundRectangle 12"
|
|
HeightRequest="250"
|
|
BackgroundColor="{AppThemeBinding Light=#FAFAFA, Dark=#1E1E1E}"
|
|
VerticalOptions="Center"
|
|
HorizontalOptions="Fill">
|
|
<VerticalStackLayout Padding="10" Spacing="8">
|
|
<Label Text="Time Out Photo"
|
|
FontAttributes="Bold"
|
|
FontSize="14"
|
|
TextColor="{AppThemeBinding Light=#333333, Dark=#DDDDDD}"
|
|
HorizontalOptions="Center" />
|
|
<Image Source="{Binding CapturedImageOut, TargetNullValue='no_photo.svg'}"
|
|
Aspect="AspectFill"
|
|
HeightRequest="200"
|
|
WidthRequest="200"
|
|
HorizontalOptions="Center"
|
|
VerticalOptions="Center">
|
|
<Image.Shadow>
|
|
<Shadow Brush="#40000000" Offset="0,2" Radius="6" Opacity="0.3" />
|
|
</Image.Shadow>
|
|
</Image>
|
|
</VerticalStackLayout>
|
|
</Border>
|
|
</Grid>
|
|
|
|
|
|
<!-- Action Buttons -->
|
|
<Grid ColumnDefinitions="*,*" ColumnSpacing="15" Margin="0,10,0,20">
|
|
<Button Text="Time In"
|
|
Command="{Binding TimeInCommand}"
|
|
BackgroundColor="{AppThemeBinding Light=#4CAF50, Dark=#388E3C}"
|
|
TextColor="White"
|
|
FontSize="18"
|
|
FontAttributes="Bold"
|
|
CornerRadius="15"
|
|
HeightRequest="60"
|
|
Grid.Column="0"
|
|
IsEnabled="{Binding HasTimeIn, Converter={StaticResource InverseBoolConverter}}">
|
|
<Button.Shadow>
|
|
<Shadow Brush="#40000000"
|
|
Offset="0,4"
|
|
Radius="8"
|
|
Opacity="0.3" />
|
|
</Button.Shadow>
|
|
</Button>
|
|
|
|
<Button Text="Time Out"
|
|
Command="{Binding TimeOutCommand}"
|
|
BackgroundColor="{AppThemeBinding Light=#FF5722, Dark=#E64A19}"
|
|
TextColor="White"
|
|
FontSize="18"
|
|
FontAttributes="Bold"
|
|
CornerRadius="15"
|
|
HeightRequest="60"
|
|
Grid.Column="1"
|
|
IsEnabled="{Binding HasTimeOut, Converter={StaticResource InverseBoolConverter}}">
|
|
<Button.Shadow>
|
|
<Shadow Brush="#40000000"
|
|
Offset="0,4"
|
|
Radius="8"
|
|
Opacity="0.3" />
|
|
</Button.Shadow>
|
|
</Button>
|
|
</Grid>
|
|
|
|
</VerticalStackLayout>
|
|
|
|
<!-- Fullscreen Loading Overlay -->
|
|
<Grid
|
|
Grid.RowSpan="3"
|
|
BackgroundColor="#80000000"
|
|
IsVisible="{Binding IsLoading}"
|
|
ZIndex="999"
|
|
HorizontalOptions="Fill"
|
|
VerticalOptions="Fill">
|
|
|
|
<!-- Centered white rounded box -->
|
|
<Border
|
|
StrokeShape="RoundRectangle 16"
|
|
BackgroundColor="White"
|
|
Padding="32"
|
|
WidthRequest="200"
|
|
HeightRequest="150"
|
|
HorizontalOptions="Center"
|
|
VerticalOptions="Center">
|
|
|
|
<VerticalStackLayout Spacing="16"
|
|
HorizontalOptions="Center"
|
|
VerticalOptions="Center">
|
|
<ActivityIndicator
|
|
IsRunning="True"
|
|
Color="#0EA5E9"
|
|
WidthRequest="40"
|
|
HeightRequest="40" />
|
|
<Label
|
|
Text="Processing..."
|
|
TextColor="#0EA5E9"
|
|
FontAttributes="Bold"
|
|
FontSize="16"
|
|
HorizontalOptions="Center" />
|
|
</VerticalStackLayout>
|
|
|
|
</Border>
|
|
</Grid>
|
|
|
|
</Grid>
|
|
</ScrollView>
|
|
</ContentPage> |