From 2712eb4f6ae91afc34ca643aad14e69ab9902cb9 Mon Sep 17 00:00:00 2001
From: Jan Lauber <jan.lauber@protonmail.ch>
Date: Sat, 4 Nov 2023 13:58:08 +0100
Subject: [PATCH] feat: add confirmation for lab stop

Signed-off-by: Jan Lauber <jan.lauber@protonmail.ch>
---
 .../src/lib/components/base/SideOver.svelte   | 28 +++++++++++++------
 .../dashboard/RunningExercises.svelte         |  1 +
 .../src/lib/components/labs/Exercise.svelte   | 25 +++++++++++------
 .../src/routes/app/profile/+page.svelte       |  2 +-
 .../src/routes/labs/[id]/[id]/+layout.svelte  |  2 +-
 5 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/kubelab-ui/src/lib/components/base/SideOver.svelte b/kubelab-ui/src/lib/components/base/SideOver.svelte
index c7bcfa4..a388681 100644
--- a/kubelab-ui/src/lib/components/base/SideOver.svelte
+++ b/kubelab-ui/src/lib/components/base/SideOver.svelte
@@ -6,7 +6,7 @@
     LabSessionsResponse
   } from "$lib/pocketbase/generated-types";
   import { exercise_sessions, lab_sessions, updateDataStores } from "$lib/stores/data";
-  import { Pause, Play, TestTube2, X } from "lucide-svelte";
+  import { AlertTriangle, Pause, Play, TestTube2, X } from "lucide-svelte";
   import SvelteMarkdown from "svelte-markdown";
   import CodeSpanComponent from "$lib/components/markdown/CodeSpanComponent.svelte";
   import CodeComponent from "$lib/components/markdown/CodeComponent.svelte";
@@ -16,9 +16,11 @@
   import { client } from "$lib/pocketbase";
   import { sidebar_exercise_sessions, sidebar_lab, sidebar_lab_session } from "$lib/stores/sidebar";
   import Exercise from "../labs/Exercise.svelte";
+  import { Button, Modal } from "flowbite-svelte";
 
   let docs: string;
   export let drawerHidden = true;
+  let confirmation = false;
 
   async function getMarkdown() {
     fetch($sidebar_lab.docs)
@@ -227,17 +229,25 @@
               {/if}
             </button>
           {:else}
-            <button
-              class="btn btn-outline btn-error"
-              on:click={() => stopLab($sidebar_lab_session.id)}
-            >
-              {#if $loadingLabs.has($sidebar_lab_session.id)}
+            {#if $loadingLabs.has($sidebar_lab_session.id)}
+              <button class="btn btn-outline btn-disabled">
                 <span class="loading loading-dots loading-md" />
-              {:else}
+                Stopping lab
+              </button>
+            {:else if confirmation}
+              <button
+                class="btn btn-outline btn-warning"
+                on:click={() => stopLab($sidebar_lab_session.id)}
+              >
+                <AlertTriangle class="w-5 h-5 mr-2 inline-block" />
+                Are you sure?
+              </button>
+            {:else}
+              <button class="btn btn-outline btn-error" on:click={() => (confirmation = true)}>
                 <Pause class="w-5 h-5 mr-2 inline-block" />
                 Stop lab
-              {/if}
-            </button>
+              </button>
+            {/if}
           {/if}
         </div>
         <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
diff --git a/kubelab-ui/src/lib/components/dashboard/RunningExercises.svelte b/kubelab-ui/src/lib/components/dashboard/RunningExercises.svelte
index 3a96e74..df5ccb3 100644
--- a/kubelab-ui/src/lib/components/dashboard/RunningExercises.svelte
+++ b/kubelab-ui/src/lib/components/dashboard/RunningExercises.svelte
@@ -18,6 +18,7 @@
   import { Pause, Terminal } from "lucide-svelte";
   import toast from "svelte-french-toast";
 
+
   let running_exercises: ExerciseSessionsResponse[] = $exercise_sessions.filter(
     (exercise_session) => exercise_session.agentRunning
   );
diff --git a/kubelab-ui/src/lib/components/labs/Exercise.svelte b/kubelab-ui/src/lib/components/labs/Exercise.svelte
index 2609565..d07f251 100644
--- a/kubelab-ui/src/lib/components/labs/Exercise.svelte
+++ b/kubelab-ui/src/lib/components/labs/Exercise.svelte
@@ -23,12 +23,13 @@
     sidebar_lab_session
   } from "$lib/stores/sidebar";
   import { getDeltaTime } from "$lib/utils/time";
-  import { CheckCircle, Info, MoreHorizontal, Pause, Play, Terminal } from "lucide-svelte";
+  import { AlertTriangle, CheckCircle, Info, MoreHorizontal, Pause, Play, Terminal } from "lucide-svelte";
   import { onMount } from "svelte";
   import toast from "svelte-french-toast";
   export let this_exercise_session: ExerciseSessionsResponse;
   export let index: number;
   let this_exercise: ExercisesResponse;
+  let confirmation = false;
 
   onMount(() => {
     let exercise = $sidebar_exercises.find(
@@ -150,9 +151,7 @@
           client
             .collection("exercise_session_logs")
             .create(exercise_session_log_data)
-            .then((response) => {
-
-            })
+            .then((response) => {})
             .catch((error) => {
               console.log(error);
             });
@@ -185,9 +184,7 @@
               <ul class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52 gap-2">
                 <li>
                   <!-- exercise is starting... -->
-                  <button
-                    class="border-2 "
-                  >
+                  <button class="border-2 ">
                     <Info class="w-4 h-4 mr-1 inline-block" />
                     Starting Exercise</button
                   >
@@ -216,13 +213,23 @@
                 </li>
                 {#if this_exercise_session.agentRunning}
                   <li>
+                    {#if confirmation}
                     <button
-                      class="border-2 text-error border-error hover:bg-error hover:text-primary"
+                    class="border-2 text-warning border-warning hover:bg-warning hover:text-primary"
                       on:click={() => stopExercise(this_exercise.id)}
+                    >
+                      <AlertTriangle class="w-5 h-5 mr-2 inline-block" />
+                      Are you sure?
+                    </button>
+                    {:else}
+                    <div
+                      class="border-2 text-error border-error hover:bg-error hover:text-primary"
+                      on:click={() => (confirmation = true)}
                     >
                       <Pause class="w-4 h-4 mr-1 inline-block" />
-                      Stop Exercise</button
+                      Stop Exercise</div
                     >
+                    {/if}
                   </li>
                 {:else}
                   <li>
diff --git a/kubelab-ui/src/routes/app/profile/+page.svelte b/kubelab-ui/src/routes/app/profile/+page.svelte
index f086377..7ed9dc5 100644
--- a/kubelab-ui/src/routes/app/profile/+page.svelte
+++ b/kubelab-ui/src/routes/app/profile/+page.svelte
@@ -10,7 +10,7 @@
     accept: "image/*",
     multiple: false,
     placeholder: "Choose file",
-    class: "w-64 dark:text-white",
+    class: "w-64 dark:text-white border-none",
     style: "width: 100%;"
   };
 
diff --git a/kubelab-ui/src/routes/labs/[id]/[id]/+layout.svelte b/kubelab-ui/src/routes/labs/[id]/[id]/+layout.svelte
index 1540c98..b7bc8d1 100644
--- a/kubelab-ui/src/routes/labs/[id]/[id]/+layout.svelte
+++ b/kubelab-ui/src/routes/labs/[id]/[id]/+layout.svelte
@@ -143,7 +143,7 @@
               });
           } else {
             let filteredText = filterDuplicateLines(text);
-            toast.error("❌ not completed: " + filteredText, {
+            toast.error("Not completed: " + filteredText, {
               style: "border: 1px solid #B22222; padding: 16px; color: #B22222;", // red-themed style
               iconTheme: {
                 primary: "#B22222",