fix: add tooltips, fix: add pausing as paused state

fdm-monster · Dec 4, 2024 · 6645857 · 6645857
1 parent 43c5c6d
commit 6645857
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 53 deletions.
diff --git a/src/components/PrinterGrid/PrinterGridTile.vue b/src/components/PrinterGrid/PrinterGridTile.vue
@@ -62,15 +62,22 @@
       </div>
 
       <div class="printer-menu" v-if="printer && !gridStore.gridEditMode">
-        <v-btn
-          small
-          color="darkgray"
-          style="border-radius: 7px"
-          elevation="0"
-          @click.prevent.stop="clickInfo()"
-        >
-          <v-icon dark>menu</v-icon>
-        </v-btn>
+        <v-tooltip top>
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn
+              v-bind="attrs"
+              v-on="on"
+              small
+              color="darkgray"
+              style="border-radius: 7px"
+              elevation="0"
+              @click.prevent.stop="clickInfo()"
+            >
+              <v-icon dark>menu</v-icon>
+            </v-btn>
+          </template>
+          <template v-slot:default>Open printer details</template>
+        </v-tooltip>
       </div>
 
       <div
@@ -83,17 +90,24 @@
 
       <!-- Hover controls -->
       <div class="centered-controls" v-if="printer && !gridStore.gridEditMode">
-        <v-btn
-          v-if="hasPrinterControlFeature"
-          :disabled="!isOnline || !isOperational"
-          small
-          color="darkgray"
-          style="border-radius: 7px"
-          elevation="0"
-          @click.prevent.stop="clickOpenPrinterControlDialog()"
-        >
-          <v-icon>open_with</v-icon>
-        </v-btn>
+        <v-tooltip top>
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn
+              v-bind="attrs"
+              v-on="on"
+              v-if="hasPrinterControlFeature"
+              :disabled="!isOnline || !isOperational"
+              small
+              color="darkgray"
+              style="border-radius: 7px"
+              elevation="0"
+              @click.prevent.stop="clickOpenPrinterControlDialog()"
+            >
+              <v-icon>open_with</v-icon>
+            </v-btn>
+          </template>
+          <template v-slot:default>Move and home printer</template>
+        </v-tooltip>
 
         <!-- Connect USB -->
         <v-tooltip top>
@@ -131,36 +145,65 @@
           <template v-slot:default>Reload printer websocket and refresh all states</template>
         </v-tooltip>
 
-        <v-btn
-          :disabled="!isOnline || (!isPaused && !isPrinting)"
-          small
-          color="darkgray"
-          style="border-radius: 7px"
-          elevation="0"
-          @click.prevent.stop="isPaused ? clickResumePrint() : clickPausePrint()"
-        >
-          <v-icon v-if="!isPaused">pause</v-icon>
-          <v-icon v-if="isPaused">play_arrow</v-icon>
-        </v-btn>
-        <v-btn
-          small
-          :disabled="!isOnline || (preferCancelOverQuickStop && !isPrinting && !isPaused)"
-          color="darkgray"
-          style="border-radius: 7px"
-          elevation="0"
-          @click.prevent.stop="preferCancelOverQuickStop ? clickStop() : clickQuickStop()"
-        >
-          <v-icon>{{ preferCancelOverQuickStop ? "stop" : "dangerous" }} </v-icon>
-        </v-btn>
-        <v-btn
-          small
-          color="darkgray"
-          style="border-radius: 7px"
-          elevation="0"
-          @click.prevent.stop="clickOpenSettings()"
-        >
-          <v-icon>settings</v-icon>
-        </v-btn>
+        <v-tooltip top>
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn
+              v-bind="attrs"
+              v-on="on"
+              :disabled="!isOnline || (!isPaused && !isPrinting)"
+              small
+              color="darkgray"
+              style="border-radius: 7px"
+              elevation="0"
+              @click.prevent.stop="isPaused ? clickResumePrint() : clickPausePrint()"
+            >
+              <v-icon v-if="!isPaused">pause</v-icon>
+              <v-icon v-if="isPaused">play_arrow</v-icon>
+            </v-btn>
+          </template>
+          <template v-slot:default>
+            {{ isPaused ? "Resume print" : "Pause print" }}
+          </template>
+        </v-tooltip>
+
+        <v-tooltip top>
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn
+              v-bind="attrs"
+              v-on="on"
+              small
+              :disabled="!isOnline || (preferCancelOverQuickStop && !isPrinting && !isPaused)"
+              color="darkgray"
+              style="border-radius: 7px"
+              elevation="0"
+              @click.prevent.stop="preferCancelOverQuickStop ? clickStop() : clickQuickStop()"
+            >
+              <v-icon>{{ preferCancelOverQuickStop ? "stop" : "dangerous" }} </v-icon>
+            </v-btn>
+          </template>
+          <template v-slot:default>{{
+            preferCancelOverQuickStop
+              ? "Cancel current print gracefully"
+              : "Perform quick stop of printer"
+          }}</template>
+        </v-tooltip>
+
+        <v-tooltip top>
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn
+              v-bind="attrs"
+              v-on="on"
+              small
+              color="darkgray"
+              style="border-radius: 7px"
+              elevation="0"
+              @click.prevent.stop="clickOpenSettings()"
+            >
+              <v-icon>settings</v-icon>
+            </v-btn>
+          </template>
+          <template v-slot:default>Open printer settings</template>
+        </v-tooltip>
       </div>
 
       <!-- Progress Bar -->

diff --git a/src/store/printer-state.store.ts b/src/store/printer-state.store.ts
@@ -62,15 +62,15 @@ export const usePrinterStateStore = defineStore("PrinterState", {
         const printerEvents = this.printerEventsById[printerId];
         if (!printerEvents) return false;
         const flags = printerEvents?.current?.payload?.state?.flags;
-        return flags?.printing || flags?.paused;
+        return flags?.printing || flags?.paused || flags?.pausing;
       };
     },
     isPrinterPaused(): (printerId: IdType) => boolean {
       return (printerId: IdType) => {
         const printerEvents = this.printerEventsById[printerId];
         if (!printerEvents) return false;
         const flags = printerEvents?.current?.payload?.state?.flags;
-        return flags?.paused;
+        return flags?.paused || flags?.pausing;
       };
     },
     printerCurrentEventReceivedAtById() {
@@ -137,7 +137,7 @@ export const usePrinterStateStore = defineStore("PrinterState", {
       this.printerIds.forEach((id) => {
         const printerEvents = this.printerEventsById[id];
         const flags = printerEvents?.current?.payload?.state?.flags;
-        if (flags?.printing || flags?.paused) {
+        if (flags?.printing || flags?.paused || flags?.pausing) {
           const printer = printerStore.printer(id);
           if (printer) {
             printersWithJobById[printer.id] = printerEvents?.current?.payload;