Skip to content

Commit

Permalink
Add display for learning progress in LessonModesView.axaml
Browse files Browse the repository at this point in the history 
- 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.
  • Loading branch information
@duck-dev
duck-dev committed May 6, 2023
1 parent a7bab0c commit abbd5ea
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 38 deletions.
41 changes: 41 additions & 0 deletions src/ViewModels/LearningModesViewModel.cs
View file
Original file line number Diff line number Diff line change
@@ -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.",
Expand All @@ -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)
Expand Down
118 changes: 80 additions & 38 deletions src/Views/OpenLesson/LearningModesView.axaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

0 comments on commit abbd5ea

Please sign in to comment.