From abbd5ea223d488d1e443d6e6a34a935f32c77458 Mon Sep 17 00:00:00 2001
From: Duck <61479436+duck-dev@users.noreply.github.com>
Date: Sat, 6 May 2023 12:15:32 +0200
Subject: [PATCH] Add display for learning progress in LessonModesView.axaml

- Added two progress bars for the learning progress (known and wrong words) to the LessonModesView, which is displayed in the LessonView (LessonView.axaml), meaning the view of an opened already existing lesson, which can be edited.
---
 src/ViewModels/LearningModesViewModel.cs     |  41 +++++++
 src/Views/OpenLesson/LearningModesView.axaml | 118 +++++++++++++------
 2 files changed, 121 insertions(+), 38 deletions(-)

diff --git a/src/ViewModels/LearningModesViewModel.cs b/src/ViewModels/LearningModesViewModel.cs
index 5f2384b..8c11b5a 100644
--- a/src/ViewModels/LearningModesViewModel.cs
+++ b/src/ViewModels/LearningModesViewModel.cs
@@ -1,12 +1,32 @@
 using System;
+using System.Collections.Generic;
+using System.Linq;
+using ReactiveUI;
 using VocabularyTrainer.Enums;
+using VocabularyTrainer.Extensions;
 using VocabularyTrainer.Models;
+using VocabularyTrainer.UtilityCollection;
 using VocabularyTrainer.ViewModels.LearningModes;
 
 namespace VocabularyTrainer.ViewModels;
 
 public sealed class LearningModesViewModel : ViewModelBase
 {
+    private readonly Lesson? _currentLesson;
+    private int _knownWords;
+    private int _wrongWords;
+    
+    public LearningModesViewModel()
+    {
+        _currentLesson = MainWindowViewModel.CurrentLesson;
+        if (_currentLesson is null)
+            return;
+
+        var words = _currentLesson.VocabularyItems;
+        words.CollectionChanged += (sender, args) => RetrieveLearningProgress(words);
+        RetrieveLearningProgress(words);
+    }
+    
     private LearningModeItem[] LearningModes { get; } =
     {
         new ("Flashcards.png", "Flashcards", "Memorize vocabulary super fast by flipping flashcards.",
@@ -23,6 +43,27 @@ public sealed class LearningModesViewModel : ViewModelBase
             OpenLearningMode<VocabularyListViewModel>, LearningModeType.VocabularyList),
     };
 
+    private int MaximumItems => _currentLesson is not { } lesson ? 0 : lesson.VocabularyItems.Count;
+
+    private int KnownWords
+    {
+        get => _knownWords; 
+        set => this.RaiseAndSetIfChanged(ref _knownWords, value);
+    }
+
+    private int WrongWords
+    {
+        get => _wrongWords; 
+        set => this.RaiseAndSetIfChanged(ref _wrongWords, value);
+    }
+
+    private void RetrieveLearningProgress(ICollection<Word> words)
+    {
+        this.KnownWords = words.Count(x => x.LearningStatus.CustomHasFlag(Utilities.KnownFlags));
+        this.WrongWords = words.Count(x => x.LearningStatus.CustomHasFlag(Utilities.WrongFlags));
+        this.RaisePropertyChanged(nameof(MaximumItems));
+    }
+
     private static void OpenLearningMode<T>() where T : LearningModeViewModelBase
     {
         if (MainWindowViewModel.CurrentLesson is null)
diff --git a/src/Views/OpenLesson/LearningModesView.axaml b/src/Views/OpenLesson/LearningModesView.axaml
index e395b0a..1245575 100644
--- a/src/Views/OpenLesson/LearningModesView.axaml
+++ b/src/Views/OpenLesson/LearningModesView.axaml
@@ -9,44 +9,86 @@
     <UserControl.DataContext>
         <viewModels:LearningModesViewModel/>
     </UserControl.DataContext>
+    
+    <UserControl.Styles>
+        <StyleInclude Source="/src/Styles/ProgressSliderStyle.axaml"/>
+    </UserControl.Styles>
 
-    <Grid RowDefinitions="Auto,Auto" HorizontalAlignment="Stretch" Margin="30,0">
-        <TextBlock Grid.Row="0" FontSize="24" Foreground="{StaticResource MainGrey}" Text="Learn"
-                   FontWeight="Light"/>
-        <ItemsControl Grid.Row="1" Items="{Binding LearningModes}" HorizontalAlignment="Stretch"
-                      BorderBrush="{StaticResource MainGrey}" BorderThickness="0,1,0,0" 
-                      Padding="0,7.5,0,0">
-            <ItemsControl.ItemsPanel>
-                <ItemsPanelTemplate>
-                    <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch"/>
-                </ItemsPanelTemplate>
-            </ItemsControl.ItemsPanel>
-            <ItemsControl.ItemTemplate>
-                <DataTemplate>
-                    <Button Classes="selectable-button-effect" Command="{Binding ClickCommand}" 
-                            Margin="0,5" Background="{StaticResource FullyTransparent}" Padding="4"
-                            CornerRadius="5" HorizontalAlignment="Stretch" IsEnabled="{Binding Enabled}">
-                        <Button.Styles>
-                            <Style Selector="Button:pointerover /template/ ContentPresenter">
-                                <Setter Property="Background" Value="{StaticResource VeryLightGrey}"/>
-                            </Style>
-                        </Button.Styles>
-                        <Grid RowDefinitions="Auto,Auto">
-                            <Grid Grid.Row="0" ColumnDefinitions="Auto,Auto" Margin="0,0,0,5">
-                                <Image Grid.Column="0" Width="28" Height="28"
-                                       Source="{Binding ModeIcon}" VerticalAlignment="Center"/>
-                                <TextBlock Grid.Column="1" Foreground="{StaticResource AppBlue}" 
-                                           FontSize="24" FontWeight="Bold" Margin="15,0,0,0" 
-                                           Text="{Binding Name}" VerticalAlignment="Center"/>
-                            </Grid>
-                            <TextBlock Grid.Row="1" FontSize="14" Foreground="{StaticResource MainGrey}" 
-                                       Text="{Binding Description}" TextWrapping="Wrap" TextTrimming="WordEllipsis"
-                                       IsVisible="{Binding $parent[Button].IsPointerOver}"
-                                       HorizontalAlignment="Stretch"/>
-                        </Grid>
-                    </Button>
-                </DataTemplate>
-            </ItemsControl.ItemTemplate>
-        </ItemsControl>
+    <Grid RowDefinitions="*,Auto" HorizontalAlignment="Stretch" Margin="30,0">
+        <Grid Grid.Row="0" RowDefinitions="Auto,*" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+            <TextBlock Grid.Row="0" FontSize="24" Foreground="{StaticResource MainGrey}" Text="Learn"
+                       FontWeight="Light"/>
+            <Border Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Top" Padding="0,7.5,0,0"
+                    BorderBrush="{StaticResource MainGrey}" BorderThickness="0,1,0,0">
+                <ScrollViewer HorizontalAlignment="Stretch" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
+                    <ItemsControl Items="{Binding LearningModes}" HorizontalAlignment="Stretch">
+                        <ItemsControl.ItemsPanel>
+                            <ItemsPanelTemplate>
+                                <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch"/>
+                            </ItemsPanelTemplate>
+                        </ItemsControl.ItemsPanel>
+                        <ItemsControl.ItemTemplate>
+                            <DataTemplate>
+                                <Button Classes="selectable-button-effect" Command="{Binding ClickCommand}" 
+                                        Margin="0,5" Background="{StaticResource FullyTransparent}" Padding="4"
+                                        CornerRadius="5" HorizontalAlignment="Stretch" IsEnabled="{Binding Enabled}">
+                                    <Button.Styles>
+                                        <Style Selector="Button:pointerover /template/ ContentPresenter">
+                                            <Setter Property="Background" Value="{StaticResource VeryLightGrey}"/>
+                                        </Style>
+                                    </Button.Styles>
+                                    <Grid RowDefinitions="Auto,Auto">
+                                        <Grid Grid.Row="0" ColumnDefinitions="Auto,Auto" Margin="0,0,0,5">
+                                            <Image Grid.Column="0" Width="28" Height="28"
+                                                   Source="{Binding ModeIcon}" VerticalAlignment="Center"/>
+                                            <TextBlock Grid.Column="1" Foreground="{StaticResource AppBlue}" 
+                                                       FontSize="24" FontWeight="Bold" Margin="15,0,0,0" 
+                                                       Text="{Binding Name}" VerticalAlignment="Center"/>
+                                        </Grid>
+                                        <TextBlock Grid.Row="1" FontSize="14" Foreground="{StaticResource MainGrey}" 
+                                                   Text="{Binding Description}" TextWrapping="Wrap" TextTrimming="WordEllipsis"
+                                                   IsVisible="{Binding $parent[Button].IsPointerOver}"
+                                                   HorizontalAlignment="Stretch"/>
+                                    </Grid>
+                                </Button>
+                            </DataTemplate>
+                        </ItemsControl.ItemTemplate>
+                    </ItemsControl>
+                </ScrollViewer>
+            </Border>
+        </Grid>
+        <Grid Grid.Row="1" RowDefinitions="Auto,Auto" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"
+              Margin="0,10,0,0">
+            <Grid Grid.Row="0" RowDefinitions="Auto,Auto" Margin="0,0,0,10">
+                <Slider Grid.Row="0" Classes="progress-slider" Margin="0,0,0,12.5"
+                        Minimum="0" Maximum="{Binding MaximumItems}"
+                        Value="{Binding KnownWords}" Background="{StaticResource LightGrey}"
+                        Foreground="{StaticResource MainGreen}"/>
+                <TextBlock Grid.Row="1" Foreground="{StaticResource MainGrey}" FontSize="20"
+                           HorizontalAlignment="Center">
+                    <TextBlock.Text>
+                        <MultiBinding StringFormat="\{0\}/\{1\} correct">
+                            <Binding Path="KnownWords"/>
+                            <Binding Path="MaximumItems"/>
+                        </MultiBinding>
+                    </TextBlock.Text>
+                </TextBlock>
+            </Grid>
+            <Grid Grid.Row="1" RowDefinitions="Auto,Auto">
+                <Slider Grid.Row="0" Classes="progress-slider" Margin="0,0,0,12.5"
+                        Minimum="0" Maximum="{Binding MaximumItems}"
+                        Value="{Binding WrongWords}" Background="{StaticResource LightGrey}"
+                        Foreground="{StaticResource MainRed}"/>
+                <TextBlock Grid.Row="1" Foreground="{StaticResource MainGrey}" FontSize="20"
+                           HorizontalAlignment="Center">
+                    <TextBlock.Text>
+                        <MultiBinding StringFormat="\{0\}/\{1\} wrong">
+                            <Binding Path="WrongWords"/>
+                            <Binding Path="MaximumItems"/>
+                        </MultiBinding>
+                    </TextBlock.Text>
+                </TextBlock>
+            </Grid>
+        </Grid>
     </Grid>
 </UserControl>
\ No newline at end of file