desktop support pausing cycle

metalizzsas · Aug 18, 2023 · a83bf8d · a83bf8d
1 parent bec6da4
commit a83bf8d
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 12 deletions.
diff --git a/.changeset/lemon-jobs-boil.md b/.changeset/lemon-jobs-boil.md
@@ -0,0 +1,8 @@
+---
+"@metalizzsas/nuster-desktop": patch
+"@metalizzsas/nuster-turbine": patch
+"@metalizzsas/nuster-typings": patch
+"@metalizzsas/nuster-misc": patch
+---
+
+feat: cycles can now be paused
diff --git a/libs/misc/i18n/desktop/en.json b/libs/misc/i18n/desktop/en.json
@@ -226,7 +226,8 @@
     "eta": {
       "null": "Unknown",
       "remaining": "Remaining time:",
-      "estimated": "Estimated duration:"
+      "estimated": "Estimated duration:",
+      "paused": "Paused time:"
     },
     "end": {
       "lead": "Cycle has ended.",
@@ -244,6 +245,8 @@
     "buttons": {
       "start": "Start cycle",
       "nextStep": "Next step",
+      "pause": "Pause cycle",
+      "resume": "Resume cycle",
       "stop": "Stop cycle",
       "complete": "Complete cycle"
     }

diff --git a/libs/misc/i18n/desktop/fr.json b/libs/misc/i18n/desktop/fr.json
@@ -226,7 +226,8 @@
     "eta": {
       "null": "Inconnu",
       "remaining": "Temps restant:",
-      "estimated": "Temps estimé:"
+      "estimated": "Temps estimé:",
+      "paused": "Temps de pause:"
     },
     "end": {
       "lead": "Le cycle est terminé.",
@@ -243,6 +244,8 @@
     },
     "buttons": {
       "start": "Démarrer le cycle",
+      "pause": "Pause",
+      "resume": "Reprendre le cycle",
       "nextStep": "Sauter l'étape",
       "stop": "Arrêter le cycle",
       "complete": "Terminer le cycle"

diff --git a/packages/desktop/src/routes/(connected)/Cycle.svelte b/packages/desktop/src/routes/(connected)/Cycle.svelte
@@ -6,7 +6,7 @@
 	import CycleStep from "./CycleStep.svelte";
 
     import { parseDurationToString } from "$lib/utils/dateparser";
-    import { ArrowRight, Check, CheckCircle, Clock, ExclamationCircle, InformationCircle, Square3Stack3d, XMark } from "@steeze-ui/heroicons";
+    import { ArrowRight, Check, CheckCircle, Clock, ExclamationCircle, Forward, InformationCircle, Pause, Play, Square3Stack3d, Stop, XMark } from "@steeze-ui/heroicons";
     import { Icon } from "@steeze-ui/svelte-icon";
 	import { _ } from "svelte-i18n";
 	import { translateProfileName } from "$lib/utils/i18n/i18nprofile";
@@ -36,6 +36,13 @@
         await fetch(`/api/v1/cycle`, { method: "PUT"});
     }
 
+    const pauseCycle = async () => {
+        if($machine.model !== "uscleaner")
+            return;
+
+        await fetch(`/api/v1/cycle/pause`, { method: "PUT" });
+    }
+
     const patchCycle = () => {
         patched();
         void fetch(`/api/v1/cycle`, { method: "PATCH" });
@@ -122,14 +129,18 @@
         {/each}
     </Flex>
 
-{:else if cycleData !== undefined && cycleData.status.mode === "started"}
+{:else if cycleData !== undefined && (cycleData.status.mode === "started" || cycleData.status.mode === "paused")}
     <Flex>
         <Flex direction="col" gap={1}>
             <p class="text-sm text-zinc-600 dark:text-zinc-300">{$_(`cycle.names.${cycleData.name}`)}</p>
             {#if cycleData.profile}
                 <h1 class="leading-6 mb-2">{translateProfileName($_, cycleData.profile)}</h1>
             {/if}
 
+            {#if cycleData.status.mode === "paused"}
+                <h2 class="leading-4 mb-2 text-amber-500 animate-pulse"><Icon src={ExclamationCircle} class="inline h-5 w-5 mr-2 mb-0.5" />Cycle en pause</h2>
+            {/if}
+
             {#if cycleData.status.estimatedRunTime}
                 <p>
                     <Icon src={Clock} class="h-4 w-4 mb-0.5 inline-block text-indigo-500" />
@@ -142,9 +153,18 @@
                 <p>
                     <Icon src={Clock} class="h-4 w-4 mb-0.5 inline-block text-indigo-500" />
                     <span class="text-sm font-semibold">{$_('cycle.eta.remaining')}</span>
-                    <span>{parseDurationToString(cycleData.status.estimatedRunTime - (Date.now() - cycleData.status.startDate) / 1000)}</span>
+                    <span>{parseDurationToString((cycleData.status.estimatedRunTime + (cycleData.status.overallPausedTime ?? 0)) - (Date.now() - cycleData.status.startDate) / 1000)}</span>
                 </p>
             {/if}
+
+            {#if cycleData.status.overallPausedTime !== undefined && cycleData.status.overallPausedTime > 0}
+                <p>
+                    <Icon src={Clock} class="h-4 w-4 mb-0.5 inline-block text-yellow-500" />
+                    <span class="text-sm font-semibold">{$_('cycle.eta.paused')}</span>
+                    <span>{parseDurationToString(cycleData.status.overallPausedTime)}</span>
+                </p>
+            {/if}
+
         </Flex>
 
         <Flex gap={4} class="ml-auto self-start">
@@ -154,17 +174,33 @@
                     color="hover:bg-amber-500"
                     ringColor={"ring-amber-500"}
                     on:click={nextStepCycle}
+                    disabled={cycleData.status.mode === "paused"}
                 >
+                    <Icon src={Forward} class="h-5 w-5 mb-0.5 mr-1 inline" />
                     {$_('cycle.buttons.nextStep')}
                 </Button>
             {/if}
+
+            {#if cycleData.status.pausable && $machine.model === "uscleaner"}
+                <Button 
+                    class="group self-start" 
+                    color="hover:bg-yellow-500"
+                    ringColor={"ring-yellow-500"}
+                    on:click={pauseCycle}
+                >
+                    <Icon src={cycleData.status.mode === "paused" ? Play : Pause} class="h-5 w-5 mr-1 mb-0.5 inline" />
+                    {$_(`cycle.buttons.${cycleData.status.mode === "paused" ? "resume" : "pause"}`)}
+                </Button>
+            {/if}
 
             <Button 
                 class="group self-start" 
                 color="hover:bg-red-500"
                 ringColor={"ring-red-500"}
                 on:click={stopCycle}
+                disabled={cycleData.status.mode === "paused"}
             >
+                <Icon src={Stop} class="h-5 w-5 mr-1 mb-0.5 inline" />
                 {$_('cycle.buttons.stop')}
             </Button>
         </Flex>
@@ -198,12 +234,13 @@
 
 {:else if cycleData !== undefined && ["ending", "ended"].includes(cycleData.status.mode)}
 
-    {@const isSuccess = cycleData.status.endReason === "finished" && !cycleData.steps.some(s => s.state === "crashed")}
+    {@const isSuccess = cycleData.status.endReason === "finished"}
+    {@const hasOneStepErrored = cycleData.status.endReason === "finished" && cycleData.steps.some(s => s.state === "crashed" && s.endReason != "ending")}
 
     <Flex justify="between">
         <div>
             <p class="text-sm text-zinc-600 dark:text-zinc-300">{$_('cycle.end.lead')}</p>
-            <h1 class="leading-6">{$_(`cycle.end_reasons.${(isSuccess) ? $realtime.cycle?.status.endReason ?? 'error' : 'error'}`)}</h1>
+            <h1 class="leading-6">{$_(`cycle.end_reasons.${(!hasOneStepErrored) ? ($realtime.cycle?.status.endReason ?? 'error') : 'error'}`)}</h1>
 
             {#if cycleData.status.endDate && cycleData.status.startDate}
                 <p class="leading-10">
@@ -212,9 +249,18 @@
                     <span>{parseDurationToString((cycleData.status.endDate - cycleData.status.startDate) / 1000)}</span>
                 </p>
             {/if}
+
+            {#if cycleData.status.overallPausedTime !== undefined && cycleData.status.overallPausedTime > 0}
+                <p>
+                    <Icon src={Clock} class="h-4 w-4 mb-0.5 inline-block text-yellow-500" />
+                    <span class="text-sm font-semibold">{$_('cycle.eta.paused')}</span>
+                    <span>{parseDurationToString(cycleData.status.overallPausedTime)}</span>
+                </p>
+            {/if}
+
         </div>
 
-        <Icon src={isSuccess ? Check : XMark} class="h-10 w-10 self-start {isSuccess ? "text-emerald-500" : "text-red-500"}" />
+        <Icon src={isSuccess && !hasOneStepErrored ? Check : XMark} class="h-10 w-10 self-start {isSuccess && !hasOneStepErrored ? "text-emerald-500" : "text-red-500"}" />
     </Flex>
 
     <Button on:click={patchCycle} class="mt-4 mb-6">{$_('cycle.buttons.complete')}</Button>

diff --git a/packages/desktop/src/routes/(connected)/CycleStep.svelte b/packages/desktop/src/routes/(connected)/CycleStep.svelte
@@ -50,7 +50,7 @@
 </script>
 
 <div class="p-4 rounded-md border-[1px] border-zinc-400">
-    <Flex items="center" justify="between" class={(step.state === "started" || (step.endReason === "skipped" && step.progress > 0) || step.state === "crashed") ? "mb-2" : ""}>
+    <Flex items="center" justify="between" class={(step.state === "started" || (step.endReason === "skipped" && step.progress > 0) || (step.state === "crashed" && step.endReason != "ending")) ? "mb-2" : ""}>
         <Flex 
             gap={1} 
             items={step.state === "started" ? "start" : "center"} 
@@ -70,7 +70,7 @@
                 <Label>{step.runCount} / {step.runAmount.data}</Label>
             {/if}
 
-            {#if step.state === "crashed"}
+            {#if step.state === "crashed" && step.endReason !== "ending"}
                 <Label>
                     {$_(`cycle.end_reasons.${step.endReason ?? 'error'}`)}
                 </Label>
@@ -82,7 +82,7 @@
 
     </Flex>
 
-    {#if step.state === "started" || (step.endReason === "skipped" && step.progress > 0) || step.state === "crashed"}
+    {#if step.state === "started" || (step.endReason === "skipped" && step.progress > 0) || (step.state === "crashed" && step.endReason !== "ending")}
         <ProgressBar dots={$machine.settings.hideMultilayerIndications ? undefined : step.runAmount?.data} bind:progress={step.progress} showNumbers />
     {/if}
 </div>
diff --git a/packages/desktop/src/routes/(connected)/PillMenu.svelte b/packages/desktop/src/routes/(connected)/PillMenu.svelte
@@ -44,7 +44,8 @@
         {#if $realtime.cycle}
             <div 
                 class="h-2.5 aspect-square rounded-full"
-                class:bg-blue-500={$realtime.cycle?.status.mode !== "started"}
+                class:bg-blue-500={$realtime.cycle?.status.mode !== "started" && $realtime.cycle?.status.mode !== "paused"}
+                class:bg-amber-500={$realtime.cycle?.status.mode === "paused"}
                 class:bg-green-500={$realtime.cycle?.status.mode === "started"}
                 class:animate-pulse={$realtime.cycle?.status.mode === "started"}
             />