From ec6782160c80c78188f4a9e1b94ae85efb6e95fc Mon Sep 17 00:00:00 2001
From: ChiaraBm <chiara.bm04@gmail.com>
Date: Sat, 27 Dec 2025 23:33:33 +0100
Subject: [PATCH] Added update model with progress animations. Backend not
 implemented

---
 .../UI/Admin/Modals/UpdateInstanceModal.razor | 119 ++++++++++++++++++
 .../UI/Admin/Views/Overview.razor             |  10 +-
 2 files changed, 128 insertions(+), 1 deletion(-)
 create mode 100644 Moonlight.Frontend/UI/Admin/Modals/UpdateInstanceModal.razor

diff --git a/Moonlight.Frontend/UI/Admin/Modals/UpdateInstanceModal.razor b/Moonlight.Frontend/UI/Admin/Modals/UpdateInstanceModal.razor
new file mode 100644
index 00000000..ba8e6dab
--- /dev/null
+++ b/Moonlight.Frontend/UI/Admin/Modals/UpdateInstanceModal.razor
@@ -0,0 +1,119 @@
+@inherits ShadcnBlazor.Extras.Dialogs.DialogBase
+
+@using LucideBlazor
+@using ShadcnBlazor.Dialogs
+@using ShadcnBlazor.Extras.AlertDialogs
+@using ShadcnBlazor.Progresses
+@using ShadcnBlazor.Spinners
+
+@inject AlertDialogService AlertService
+
+<DialogHeader>
+    <DialogTitle>
+        Updating...
+    </DialogTitle>
+</DialogHeader>
+
+<div class="text-base flex flex-col p-2 gap-y-0.5">
+    @for (var i = 0; i < Steps.Length; i++)
+    {
+        if (CurrentStep == i)
+        {
+            <div class="flex flex-row items-center gap-x-2">
+                <Spinner ClassName="size-4" />
+                <span>
+                    @Steps[i]
+                </span>
+            </div>
+        }
+        else
+        {
+            if (i < CurrentStep)
+            {
+                <div class="flex flex-row items-center gap-x-2">
+                    <CheckIcon ClassName="text-green-500 size-4" />
+                    <span>
+                        @Steps[i]
+                    </span>
+                </div>
+            }
+            else
+            {
+                <div class="text-muted-foreground flex flex-row items-center gap-x-2">
+                    <span class="size-4"></span>
+                    @Steps[i]
+                </div>
+            }
+        }
+    }
+</div>
+
+<DialogFooter>
+    <Progress Value="@Progress"></Progress>
+</DialogFooter>
+
+@code
+{
+    private int Progress = 0;
+
+    private int CurrentStep;
+
+    private string[] Steps =
+    [
+        "Preparing",
+        "Updating configuration files",
+        "Building docker image",
+        "Redeploying container instance",
+        "Waiting for container instance to start up",
+        "Update complete"
+    ];
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!firstRender)
+            return;
+
+        CurrentStep = 0;
+        Progress = 0;
+        await InvokeAsync(StateHasChanged);
+
+        await Task.Delay(2000);
+
+        CurrentStep = 1;
+        Progress = 20;
+        await InvokeAsync(StateHasChanged);
+
+        await Task.Delay(6000);
+
+        CurrentStep = 2;
+        Progress = 40;
+        await InvokeAsync(StateHasChanged);
+
+        await Task.Delay(2000);
+
+        CurrentStep = 3;
+        Progress = 60;
+        await InvokeAsync(StateHasChanged);
+
+        await Task.Delay(4000);
+
+        CurrentStep = 4;
+        Progress = 80;
+        await InvokeAsync(StateHasChanged);
+
+        await Task.Delay(4000);
+        
+        CurrentStep = 5;
+        Progress = 100;
+        await InvokeAsync(StateHasChanged);
+        
+        await Task.Delay(1000);
+
+        await AlertService.SuccessAsync(
+            "Update completed",
+            "Update successfully completed. Please refresh the page to load new frontend changes"
+        );
+
+        await CloseAsync();
+    }
+}
diff --git a/Moonlight.Frontend/UI/Admin/Views/Overview.razor b/Moonlight.Frontend/UI/Admin/Views/Overview.razor
index aa664bc3..43e861f7 100644
--- a/Moonlight.Frontend/UI/Admin/Views/Overview.razor
+++ b/Moonlight.Frontend/UI/Admin/Views/Overview.razor
@@ -1,11 +1,14 @@
 @page "/admin"
 @using LucideBlazor
+@using Moonlight.Frontend.UI.Admin.Modals
 @using Moonlight.Shared.Http.Responses.Admin
 @using ShadcnBlazor.Buttons
 @using ShadcnBlazor.Cards
+@using ShadcnBlazor.Extras.Dialogs
 @using ShadcnBlazor.Spinners
 
 @inject HttpClient HttpClient
+@inject DialogService DialogService
 
 <h1 class="text-xl font-semibold">Overview</h1>
 <div class="text-muted-foreground">
@@ -130,7 +133,7 @@
                 {
                     <CardTitle ClassName="text-lg text-primary">Update available</CardTitle>
                     <CardAction ClassName="self-center">
-                        <Button>Update</Button>
+                        <Button @onclick="LaunchUpdateModalAsync">Update</Button>
                     </CardAction>
                 }
             </CardHeader>
@@ -153,4 +156,9 @@
 
         await InvokeAsync(StateHasChanged);
     }
+
+    private async Task LaunchUpdateModalAsync() => await DialogService.LaunchAsync<UpdateInstanceModal>(onConfigure: model =>
+    {
+        model.ShowCloseButton = false;
+    });
 }