More dialogs (#26)

* Add emergency stop confirmation * Add cancel print confirmation * Reset state after confirmation * Add select temperature preset dialog * Add load/unload button to extrude screen * Paddings and gaps --------- Signed-off-by: Frank Roth <developer@freakydu.de>
freakydude · Nov 29, 2023 · 665ace2 · 665ace2
1 parent f436924
commit 665ace2
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 23 deletions.
diff --git a/src/lib/BottomNavigation.svelte b/src/lib/BottomNavigation.svelte
@@ -5,6 +5,8 @@
   let printStatsState = moonraker.printStats.State;
   let clockFormatter = values.clockFormatter;
   let clock = values.clock;
+
+  let confirmKill = false;
 </script>
 
 <div class="flex h-11 w-full flex-row gap-x-1 bg-neutral-700 px-1 pb-1">
@@ -51,8 +53,30 @@
     <p class="pb-1 pr-1 text-sm text-neutral-50">{clockFormatter.format($clock)}</p>
   </div>
   <button
-    class="flex w-16 items-center justify-center rounded-b-lg bg-neutral-600 px-3 py-2 font-semibold text-red-700 drop-shadow-md active:bg-red-500 disabled:opacity-50"
-    on:click|preventDefault="{() => commands.emergencyStop()}">
+    on:click|preventDefault="{() => (confirmKill = true)}"
+    class="flex w-16 items-center justify-center rounded-b-lg bg-neutral-600 px-3 py-2 font-semibold text-red-700 drop-shadow-md active:bg-red-500 disabled:opacity-50">
     Kill
   </button>
 </div>
+{#if confirmKill}
+  <div class="absolute flex h-full w-full items-center justify-center bg-black bg-opacity-50">
+    <div class="flex flex-col items-center justify-center gap-4 rounded-lg border-neutral-600 bg-neutral-700 bg-opacity-50 p-4 drop-shadow-md backdrop-blur">
+      <p class=" text-center text-neutral-100">Are you sure you want to emergency stop the printer?</p>
+      <span class="flex w-1/2 gap-3">
+        <button
+          on:click|preventDefault="{() => {
+            commands.emergencyStop();
+            confirmKill = false;
+          }}"
+          class="flex w-1/2 items-center justify-center rounded-lg bg-red-700 px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-neutral-500 disabled:opacity-50">
+          Kill
+        </button>
+        <button
+          on:click|preventDefault="{() => (confirmKill = false)}"
+          class="flex w-1/2 items-center justify-center rounded-lg bg-neutral-600 px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50">
+          Abort
+        </button>
+      </span>
+    </div>
+  </div>
+{/if}
diff --git a/src/routes/babysteps/+page.svelte b/src/routes/babysteps/+page.svelte
@@ -34,9 +34,9 @@
 <div class="page-dark flex-col items-stretch justify-between">
   <StatusLine />
   <div class="flex h-full flex-row">
-    <div class="flex w-5/6 justify-around">
-      <div class="flex flex-col items-center gap-2 rounded-lg bg-neutral-700 px-2 py-2">
-        <table class="self-stretch text-sm text-neutral-50">
+    <div class="flex w-5/6 items-center justify-around">
+      <div class="flex flex-col items-center gap-2 rounded-lg bg-neutral-700 p-1">
+        <table class="text-sm text-neutral-50">
           <tr class="border-b border-neutral-800">
             <td class="px-2 text-end">Z</td>
             <td class=" text-start">{$motionReportLivePosition[2].toFixed(3)} mm</td>
@@ -47,7 +47,7 @@
           </tr>
         </table>
         <span class="flex items-center gap-x-6">
-          <span class="flex flex-col gap-y-3">
+          <span class="flex flex-col gap-3">
             <button
               on:click|preventDefault="{() => commands.changeOffset(stepsArr[selectedStep])}"
               class="flex h-14 w-20 items-center justify-center rounded-lg bg-neutral-600 px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50">

diff --git a/src/routes/extrusion/+page.svelte b/src/routes/extrusion/+page.svelte
@@ -56,14 +56,14 @@
         <button
           disabled="{$printState === 'printing' || $canExtrude === false}"
           on:click|preventDefault="{() => commands.extrude(-stepsArr[selectedStep], speedArr[selectedSpeed])}"
-          class="flex h-14 items-center justify-center rounded-lg bg-neutral-600 px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50">
+          class="flex h-14 w-full items-center justify-center rounded-lg bg-neutral-600 px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50">
           Retract
         </button>
 
         <button
           disabled="{$printState === 'printing' || $canExtrude === false}"
           on:click|preventDefault="{() => commands.extrude(stepsArr[selectedStep], speedArr[selectedSpeed])}"
-          class="flex h-14 items-center justify-center rounded-lg bg-neutral-600 px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50">
+          class="flex h-14 w-full items-center justify-center rounded-lg bg-neutral-600 px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50">
           Extrude
         </button>
       </div>
@@ -95,7 +95,12 @@
       <button
         disabled="{true}"
         class="flex h-14 items-center justify-center rounded-l-lg bg-neutral-600 px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50">
-        Preset
+        Load
+      </button>
+      <button
+        disabled="{true}"
+        class="flex h-14 items-center justify-center rounded-l-lg bg-neutral-600 px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50">
+        Unload
       </button>
     </span>
   </div>

diff --git a/src/routes/move/+page.svelte b/src/routes/move/+page.svelte
@@ -43,8 +43,8 @@
   <StatusLine />
   <div class="flex h-full flex-row">
     <div class="flex w-5/6 items-center justify-around gap-1">
-      <div class="flex flex-col justify-center gap-1 rounded-lg bg-neutral-700 p-1">
-        <table class="self-center text-sm text-neutral-50">
+      <div class="flex flex-col items-center justify-center gap-1 rounded-lg bg-neutral-700 p-1">
+        <table class="text-sm text-neutral-50">
           <tr class="border-b border-neutral-800">
             <td class="pr-3 text-end">Current</td>
             <td class="w-16 pr-2 text-start">X {$motionReportLivePosition[0].toFixed(2)}</td>
@@ -104,16 +104,15 @@
         <span class="flex flex-col items-center justify-center gap-3">
           <button
             disabled="{!isHomedZ}"
-            class="flex h-14 w-full items-center justify-center rounded-lg bg-neutral-600 px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50"
-            on:click|preventDefault="{() => commands.moveAbsolute(undefined, undefined, getAbsolutePosition(2, -stepsArr[selectedStep]))}">
-            Down
+            class="flex h-14 w-20 items-center justify-center rounded-lg bg-neutral-600 px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50"
+            on:click|preventDefault="{() => commands.moveAbsolute(undefined, undefined, getAbsolutePosition(2, +stepsArr[selectedStep]))}">
+            Up
           </button>
-
           <button
             disabled="{!isHomedZ}"
-            class="flex h-14 w-full items-center justify-center rounded-lg bg-neutral-600 px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50"
-            on:click|preventDefault="{() => commands.moveAbsolute(undefined, undefined, getAbsolutePosition(2, +stepsArr[selectedStep]))}">
-            Up
+            class="flex h-14 w-20 items-center justify-center rounded-lg bg-neutral-600 px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50"
+            on:click|preventDefault="{() => commands.moveAbsolute(undefined, undefined, getAbsolutePosition(2, -stepsArr[selectedStep]))}">
+            Down
           </button>
         </span>
       </div>

diff --git a/src/routes/printstate/+page.svelte b/src/routes/printstate/+page.svelte
@@ -38,6 +38,8 @@
   let objectHeight = 0;
   let eta = '';
 
+  let confirmCancelPrint = false;
+
   $: updatePropertiesOnPrintingFile($printStatsFilename);
 
   function updatePropertiesOnPrintingFile(name: string) {
@@ -218,7 +220,7 @@
           Pause
         </button>
         <button
-          on:click|preventDefault="{() => commands.cancelPrint()}"
+          on:click|preventDefault="{() => (confirmCancelPrint = true)}"
           class="flex h-14 w-full items-center justify-center rounded-l-lg bg-neutral-700 px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50">
           Cancel
         </button>
@@ -229,7 +231,7 @@
           Continue
         </button>
         <button
-          on:click|preventDefault="{() => commands.cancelPrint()}"
+          on:click|preventDefault="{() => (confirmCancelPrint = true)}"
           class="flex h-14 w-full items-center justify-center rounded-l-lg bg-neutral-700 px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50">
           Cancel
         </button>
@@ -239,3 +241,25 @@
 
   <BottomNavigation />
 </div>
+{#if confirmCancelPrint}
+  <div class="absolute flex h-full w-full items-center justify-center bg-black bg-opacity-50">
+    <div class="flex flex-col items-center justify-center gap-4 rounded-lg border-neutral-600 bg-neutral-700 bg-opacity-50 p-4 drop-shadow-md backdrop-blur">
+      <p class=" text-center text-neutral-100">Are you sure you want to cancel the print?</p>
+      <span class="flex w-1/2 gap-3">
+        <button
+          on:click|preventDefault="{() => {
+            commands.cancelPrint();
+            confirmCancelPrint = false;
+          }}"
+          class="flex w-1/2 items-center justify-center rounded-lg bg-red-700 px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-neutral-500 disabled:opacity-50">
+          Cancel
+        </button>
+        <button
+          on:click|preventDefault="{() => (confirmCancelPrint = false)}"
+          class="flex w-1/2 items-center justify-center rounded-lg bg-neutral-600 px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50">
+          Abort
+        </button>
+      </span>
+    </div>
+  </div>
+{/if}
diff --git a/src/routes/temperature/+page.svelte b/src/routes/temperature/+page.svelte
@@ -9,6 +9,7 @@
   let nozzleCurrentTemperature = moonraker.extruder.Temperature;
   let stepsArr = [1, 5, 10, 20, 50, 100];
   let selectedStep = 3;
+  let preselectDialog = false;
 
   let valuesStepsTemp = values.stepsTemp;
 
@@ -42,7 +43,7 @@
   <StatusLine />
   <div class="flex h-full flex-row">
     <div class="flex w-5/6 items-center justify-around gap-1">
-      <div class="flex flex-col items-center gap-2 rounded-lg bg-neutral-700 p-2">
+      <div class="flex flex-col items-center gap-2 rounded-lg bg-neutral-700 p-1">
         <table class="text-sm text-neutral-50">
           <tr class="border-b border-neutral-800">
             <td class="pr-1 text-end">Nozzle</td>
@@ -66,7 +67,7 @@
           Down
         </button>
       </div>
-      <div class="flex flex-col items-center gap-2 rounded-lg bg-neutral-700 p-2">
+      <div class="flex flex-col items-center gap-2 rounded-lg bg-neutral-700 p-1">
         <table class=" text-sm text-neutral-50">
           <tr class="border-b border-neutral-800">
             <td class="pr-1 text-end">Bed</td>
@@ -101,7 +102,7 @@
         Off
       </button>
       <button
-        disabled="{true}"
+        on:click|preventDefault="{() => (preselectDialog = true)}"
         class="flex h-14 w-20 items-center justify-center rounded-l-lg bg-neutral-700 px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50">
         Preset
       </button>
@@ -126,3 +127,92 @@
   </span>
   <BottomNavigation />
 </div>
+{#if preselectDialog}
+  <div class="absolute flex h-full w-full items-center justify-center bg-black bg-opacity-50">
+    <div
+      class="flex w-3/4 flex-col items-center justify-center gap-4 rounded-lg border-neutral-600 bg-neutral-700 bg-opacity-50 p-4 drop-shadow-md backdrop-blur">
+      <p class="text-center text-neutral-100">Choose a Preset</p>
+      <span class="flex flex-wrap justify-center gap-3">
+        <button
+          on:click|preventDefault="{() => {
+            commands.setNozzleTemperature(200);
+            commands.setBedTemperature(60);
+            preselectDialog = false;
+          }}"
+          class="flex items-center justify-center rounded-lg bg-neutral-600 px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50">
+          <span class="flex flex-col">
+            <p>PLA</p>
+            <p class="text-sm font-normal">200 / 60 °C</p>
+          </span>
+        </button>
+        <button
+          on:click|preventDefault="{() => {
+            commands.setNozzleTemperature(235);
+            commands.setBedTemperature(70);
+            preselectDialog = false;
+          }}"
+          class="flex items-center justify-center rounded-lg bg-neutral-600 px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50">
+          <span class="flex flex-col">
+            <p>PETG</p>
+            <p class="text-sm font-normal">235 / 70 °C</p>
+          </span>
+        </button>
+        <button
+          on:click|preventDefault="{() => {
+            commands.setNozzleTemperature(250);
+            commands.setBedTemperature(110);
+            preselectDialog = false;
+          }}"
+          class="flex items-center justify-center rounded-lg bg-neutral-600 px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50">
+          <span class="flex flex-col">
+            <p>ABS</p>
+            <p class="text-sm font-normal">250 / 110 °C</p>
+          </span>
+        </button>
+        <button
+          on:click|preventDefault="{() => {
+            commands.setNozzleTemperature(220);
+            commands.setBedTemperature(0);
+            preselectDialog = false;
+          }}"
+          class="flex items-center justify-center rounded-lg bg-neutral-600 px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50">
+          <span class="flex flex-col">
+            <p>TPU</p>
+            <p class="text-sm font-normal">220 / 0 °C</p>
+          </span>
+        </button>
+        <button
+          on:click|preventDefault="{() => {
+            commands.setNozzleTemperature(170);
+            commands.setBedTemperature(60);
+            preselectDialog = false;
+          }}"
+          class="flex items-center justify-center rounded-lg bg-neutral-600 px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50">
+          <span class="flex flex-col">
+            <p>Heatup</p>
+            <p class="text-sm font-normal">170 / 60 °C</p>
+          </span>
+        </button>
+        <button
+          on:click|preventDefault="{() => {
+            commands.setNozzleTemperature(110);
+            commands.setBedTemperature(0);
+            preselectDialog = false;
+          }}"
+          class="flex items-center justify-center rounded-lg bg-neutral-600 px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50">
+          <span class="flex flex-col">
+            <p>Coldpull</p>
+            <p class="text-sm font-normal">110 / 0 °C</p>
+          </span>
+        </button>
+      </span>
+      <span class="flex flex-wrap justify-center gap-3">
+        <button
+          on:click|preventDefault="{() => (preselectDialog = false)}"
+          class="flex items-center justify-center rounded-lg bg-neutral-600 px-4 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50">
+          Abort
+        </button>
+      </span>
+    </div>
+  </div>
+{/if}