Add personal calendar event length, title, and location modifications (#203)

Author: albi005

StartSch.Wasm/Components/EventSettingsDialog.razor

@@ -22,7 +22,7 @@
     </md-icon-button>
 
     <h2>
-        @EditContext.EventContext.OriginalEvent.Title
+        @RenderStringDiff(originalEvent.Title, modifiedEvent.Title)
     </h2>
     <ul class="property-list">
         @if (modifiedEvent is { SourceCalendar: PersonalMoodleCalendarLive, Subject: { } subject })
@@ -34,13 +34,13 @@
         }
         <li>
             <md-icon>event</md-icon>
-            @RenderDateDiff(originalEvent.Start, modifiedEvent.Start)
+            @RenderDateDiff(EditContext.EventContext)
         </li>
         @if (!string.IsNullOrWhiteSpace(originalEvent.Location) || !string.IsNullOrWhiteSpace(modifiedEvent.Location))
         {
             <li>
                 <md-icon>location_on</md-icon>
-                @modifiedEvent.Location
+                @RenderStringDiff(originalEvent.Location, modifiedEvent.Location)
             </li>
         }
         @if (modifiedEvent.Teachers is [_, ..])
@@ -156,7 +156,7 @@
                     : null;
             }
             <connected-button-select
-                value="@selectedCategoryId"
+                value="@(selectedCategoryId ?? -1)"
                 @onchange="@(async ev =>
                            {
                                int categoryId = int.Parse((string)ev.Value!);
@@ -175,6 +175,100 @@
                 ResetCallback="@(() => ResetModifications(typeof(CategoryModification)))"/>
         </div>
 
+        @{
+            Duration? commonOriginalLength = selectedEvents
+                .Select(e => e.OriginalEvent.End - e.OriginalEvent.Start)
+                .Distinct()
+                .SingleOtherwiseNull();
+            Duration? commonModifiedLength = selectedEvents
+                .Select(e => e.ModifiedEvent.End - e.ModifiedEvent.Start)
+                .Distinct()
+                .SingleOtherwiseNull();
+            bool anyLengthModifications = selectedEvents.Any(e => e.Modifications.Any(m => m.Action is LengthModification));
+        }
+        @if (commonOriginalLength is { TotalMinutes: 60 + 45 or 120 + 45 } || anyLengthModifications)
+        {
+            <div style="margin-top: 16px">
+                Hossz
+            </div>
+            <div class="option-with-reset-button">
+                @{
+                    Duration? commonLengthModification =
+                        commonOriginalLength is { } original && commonModifiedLength is { } modified
+                            ? modified - original
+                            : null;
+                }
+                <div>
+                    @if (commonOriginalLength is { TotalMinutes: 60 + 45 or 120 + 45 })
+                    {
+                        <connected-button-select>
+                            <connected-button-select-option
+                                selected="@(commonLengthModification is { TotalTicks: 0 })"
+                                @onclick="@(() => ResetModifications(typeof(LengthModification)))">
+                                Eredeti (15 p szünet)
+                            </connected-button-select-option>
+                            <connected-button-select-option
+                                selected="@(commonLengthModification is { TotalMinutes: -15 })"
+                                @onclick="@(() => AddModification(new LengthModification { Length = commonOriginalLength.Value - Duration.FromMinutes(15) }))">
+                                Szünet nélkül (-15 p)
+                            </connected-button-select-option>
+                        </connected-button-select>
+                    }
+                </div>
+                <ResetButton
+                    IsVisible="@(anyLengthModifications)"
+                    ResetCallback="@(() => ResetModifications(typeof(LengthModification)))"/>
+            </div>
+        }
+
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); margin-top: 16px; gap: 8px">
+            @{
+                string? commonTitle = selectedEvents
+                    .Select(e => e.ModifiedEvent.Title)
+                    .Distinct()
+                    .SingleOtherwiseNullClass();
+                bool anyTitleModifications = selectedEvents.Any(e => e.Modifications.Any(m => m.Action is TitleModification));
+            }
+            @if (commonTitle is { } || anyTitleModifications)
+            {
+                <MdOutlinedTextField label="Cím"
+                                     Value="@commonTitle"
+                                     ValueChanged="@((string? newTitle) =>
+                                                   {
+                                                       if (newTitle == null)
+                                                           return Task.CompletedTask;
+                                                       return AddModification(new TitleModification { NewTitle = newTitle });
+                                                   })">
+                    <ResetButton slot="trailing-icon"
+                                 IsVisible="@(anyTitleModifications)"
+                                 ResetCallback="@(() => ResetModifications(typeof(TitleModification)))"/>
+                </MdOutlinedTextField>
+            }
+
+            @{
+                string? commonLocation = selectedEvents
+                    .Select(e => e.ModifiedEvent.Location)
+                    .Distinct()
+                    .SingleOtherwiseNullClass();
+                bool anyLocationModifications = selectedEvents.Any(e => e.Modifications.Any(m => m.Action is LocationModification));
+            }
+            @if (commonLocation is { } || anyLocationModifications)
+            {
+                <MdOutlinedTextField
+                    label="Hely"
+                    Value="@commonLocation"
+                    ValueChanged="@((string? newLocation) =>
+                                  {
+                                      if (newLocation == null)
+                                          return Task.CompletedTask;
+                                      return AddModification(new LocationModification { NewLocation = newLocation });
+                                  })">
+                    <ResetButton slot="trailing-icon"
+                                 IsVisible="@(anyLocationModifications)"
+                                 ResetCallback="@(() => ResetModifications(typeof(LocationModification)))"/>
+                </MdOutlinedTextField>
+            }
+        </div>
     </div>
 </div>
 
@@ -244,23 +338,19 @@
         await CalendarUpdatedCallback.InvokeAsync();
     }
 
-    private static RenderFragment RenderDateDiff(Instant original, Instant modified)
+    private static RenderFragment RenderStringDiff(string original, string modified)
+    {
+        if (original == modified || string.IsNullOrWhiteSpace(original))
+            return @<text>@modified</text>;
+        return @<text><del>@original</del> @modified</text>;
+    }
+
+    private static RenderFragment RenderDateDiff(EventContext eventContext)
     {
-        var ogZonedDateTime = original.InZone(SharedUtils.HungarianTimeZone);
-        var modZonedDateTime = modified.InZone(SharedUtils.HungarianTimeZone);
-        var ogDate = ogZonedDateTime.Date;
-        var ogTime = ogZonedDateTime.TimeOfDay;
-        var modDate = modZonedDateTime.Date;
-        var modTime = modZonedDateTime.TimeOfDay;
-        bool datesEqual = ogDate == modDate;
-        bool timesEqual = ogTime == modTime;
-        if (datesEqual && timesEqual)
-            return @<text>@Format(modDate), @Format(modTime)</text>;
-        if (!datesEqual && !timesEqual)
-            return @<text><sub>@Format(ogDate), @Format(ogTime)</sub> @Format(modDate), @Format(modTime)</text>;
-        if (!datesEqual)
-            return @<text><sub>@Format(ogDate)</sub> @Format(modDate), @Format(modTime)</text>;
-        return @<text>@Format(ogDate), <sub>@Format(ogTime)</sub> @Format(modTime)</text>;
+        Instant currentInstant = SystemClock.Instance.GetCurrentInstant();
+        string original = DateFormatter.Format(eventContext.OriginalEvent.Start, eventContext.OriginalEvent.End, currentInstant);
+        string modified = DateFormatter.Format(eventContext.ModifiedEvent.Start, eventContext.ModifiedEvent.End, currentInstant);
+        return RenderStringDiff(original, modified);
     }
 
     private static string Format(LocalDate localDate)

StartSch.Wasm/Components/MdFilledTextField.razor

@@ -1,45 +1,8 @@
-@*
-Wrapper around md-filled-text-field that fixes updates to the value
-from Blazor not being reflected.
-Usage:
-  @bind-Value="@myValue"
-
-https://stackoverflow.com/questions/77583025/how-to-use-bind-not-bind-property-or-bind-on-dom-property-for-custom-element
-*@
-
-@inject IJSRuntime Js
+@inherits MdTextField
 
 <md-filled-text-field
-    @ref="_elementRef"
+    @ref="@_elementRef"
     @onchange="@OnChangeHandler"
-    @attributes="AdditionalAttributes"
-/>
-
-@code {
-    private ElementReference _elementRef;
-    private string? _lastValue;
-
-    [Parameter] public string? Value { get; set; }
-    [Parameter] public EventCallback<string?> ValueChanged { get; set; }
-    [Parameter] public EventCallback<ChangeEventArgs> OnChange { get; set; }
-
-    [Parameter(CaptureUnmatchedValues = true)]
-    public Dictionary<string, object>? AdditionalAttributes { get; set; }
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (Value != _lastValue)
-        {
-            await Js.InvokeVoidAsync("setElementProperty", _elementRef, "value", Value ?? "");
-            _lastValue = Value;
-        }
-    }
-
-    private async Task OnChangeHandler(ChangeEventArgs e)
-    {
-        var newValue = (string?)e.Value;
-        _lastValue = newValue;
-        await ValueChanged.InvokeAsync(newValue);
-        await OnChange.InvokeAsync(e);
-    }
-}
+    @attributes="@AdditionalAttributes">
+    @ChildContent
+</md-filled-text-field>

StartSch.Wasm/Components/MdOutlinedTextField.razor

@@ -0,0 +1,8 @@
+@inherits MdTextField
+
+<md-outlined-text-field
+    @ref="@_elementRef"
+    @onchange="@OnChangeHandler"
+    @attributes="@AdditionalAttributes">
+    @ChildContent
+</md-outlined-text-field>

StartSch.Wasm/Components/MdTextField.cs

@@ -0,0 +1,44 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace StartSch.Wasm.Components;
+
+/// Wrapper around md-filled-text-field that fixes updates to the value
+/// from Blazor not being reflected.
+/// 
+/// Usage:
+///     @bind-Value="@myValue"
+/// 
+/// https://stackoverflow.com/questions/77583025/how-to-use-bind-not-bind-property-or-bind-on-dom-property-for-custom-element
+public class MdTextField : ComponentBase
+{
+    protected ElementReference _elementRef;
+    private string? _lastValue;
+
+    [Inject] private IJSRuntime Js { get; set; } = null!;
+
+    [Parameter] public string? Value { get; set; }
+    [Parameter] public EventCallback<string?> ValueChanged { get; set; }
+    [Parameter] public EventCallback<ChangeEventArgs> OnChange { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (Value != _lastValue)
+        {
+            await Js.InvokeVoidAsync("setElementProperty", _elementRef, "value", Value ?? "");
+            _lastValue = Value;
+        }
+    }
+
+    protected async Task OnChangeHandler(ChangeEventArgs e)
+    {
+        var newValue = (string?)e.Value;
+        _lastValue = newValue;
+        await ValueChanged.InvokeAsync(newValue);
+        await OnChange.InvokeAsync(e);
+    }
+}

StartSch.Wasm/Components/PersonalCalendarEventDescription.razor

@@ -8,8 +8,7 @@
 
 @*
 Google Calendar uses white-space: pre so we have to make sure not to have any useless whitespace.
-Whitespace seems to get removed around C# expressions.
-https://learn.microsoft.com/en-us/aspnet/core/blazor/components#whitespace-rendering-behavior
+Blazor seems to remove whitespace only before and after C# expressions: https://learn.microsoft.com/en-us/aspnet/core/blazor/components#whitespace-rendering-behavior
 *@
 
 @if (modifiedEvent is { SourceCalendar: PersonalMoodleCalendarLive, Subject: { } })

StartSch.Wasm/Components/ResetButton.razor

@@ -1,6 +1,7 @@
 @if (!IsVisible) return;
 
-<md-icon-button @onclick="@ResetCallback" class="reset-button">
+<md-icon-button @onclick="@ResetCallback" class="reset-button"
+                @attributes="AdditionalAttributes">
     <md-icon>
         reset_wrench
     </md-icon>
@@ -9,4 +10,8 @@
 @code {
     [Parameter, EditorRequired] public bool IsVisible { get; set; }
     [Parameter, EditorRequired] public EventCallback ResetCallback { get; set; }
+
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
 }

StartSch/DateFormatter.cs StartSch.Wasm/DateFormatter.csStartSch/DateFormatter.cs renamed to StartSch.Wasm/DateFormatter.cs

@@ -1,7 +1,7 @@
 using System.Text;
 using NodaTime.Extensions;
 
-namespace StartSch;
+namespace StartSch.Wasm;
 
 /// Outputs time in Hungary, formatted according to Hungarian rules
 //
@@ -180,8 +180,8 @@ private static DateFormat GetDateFormat(LocalDate today, LocalDate date)
             }
         }
 
-        var mondayOfDate = Utils.GetMondayOfWeekOf(date);
-        var mondayOfThisWeek = Utils.GetMondayOfWeekOf(today);
+        var mondayOfDate = SharedUtils.GetMondayOfWeekOf(date);
+        var mondayOfThisWeek = SharedUtils.GetMondayOfWeekOf(today);
         if (mondayOfThisWeek == mondayOfDate)
             return DateFormat.ThisWeek;
         if (mondayOfThisWeek.PlusWeeks(1) == mondayOfDate)
@@ -206,8 +206,8 @@ private static DateFormat GetEndDateFormat(LocalDate from, LocalDate to, LocalDa
             }
         }
 
-        var mondayOfDate = Utils.GetMondayOfWeekOf(to);
-        var mondayOfThisWeek = Utils.GetMondayOfWeekOf(today);
+        var mondayOfDate = SharedUtils.GetMondayOfWeekOf(to);
+        var mondayOfThisWeek = SharedUtils.GetMondayOfWeekOf(today);
         if (mondayOfThisWeek == mondayOfDate)
             return DateFormat.ThisWeek;
         if (mondayOfThisWeek.PlusDays(7) == mondayOfDate)

StartSch.Wasm/PersonalCalendars/IModificationAction.cs

@@ -4,6 +4,9 @@ namespace StartSch.Wasm.PersonalCalendars;
 
 [JsonDerivedType(typeof(CategoryModification), nameof(CategoryModification))]
 [JsonDerivedType(typeof(StartModification), nameof(StartModification))]
+[JsonDerivedType(typeof(LengthModification), nameof(LengthModification))]
+[JsonDerivedType(typeof(TitleModification), nameof(TitleModification))]
+[JsonDerivedType(typeof(LocationModification), nameof(LocationModification))]
 public interface IModificationAction
 {
     void Apply(PersonalCalendarEvent target);
@@ -23,3 +26,23 @@ public class StartModification : IModificationAction
     public void Apply(PersonalCalendarEvent target) => target.Start += Offset;
 }
 
+public class LengthModification : IModificationAction
+{
+    public required Duration Length { get; init; }
+
+    public void Apply(PersonalCalendarEvent target) => target.End = target.Start + Length;
+}
+
+public class TitleModification : IModificationAction
+{
+    public required string NewTitle { get; init; }
+
+    public void Apply(PersonalCalendarEvent target) => target.Title = NewTitle;
+}
+
+public class LocationModification : IModificationAction
+{
+    public required string NewLocation { get; init; }
+    
+    public void Apply(PersonalCalendarEvent target) => target.Location = NewLocation;
+}