Skip to content

Commit

Permalink
Merge pull request #1761 from fdm-monster/feat/implement-essential-ti…
Browse files Browse the repository at this point in the history 
…le-tooltips

Feat/implement essential tile tooltips
  • Loading branch information
@davidzwa
davidzwa authored Dec 4, 2024
2 parents 645b343 + 6645857 commit df35036
Show file tree
Hide file tree
Showing 2 changed files with 131 additions and 72 deletions.
197 changes: 128 additions & 69 deletions src/components/PrinterGrid/PrinterGridTile.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -83,68 +90,120 @@

<!-- 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-btn
v-if="!isOperational && isOnline"
small
color="darkgray"
style="border-radius: 7px"
elevation="0"
@click.prevent.stop="clickConnectUsb()"
>
<v-icon>usb</v-icon>
</v-btn>
<v-btn
small
color="darkgray"
style="border-radius: 7px"
elevation="0"
@click.prevent.stop="clickRefreshSocket()"
>
<v-icon>refresh</v-icon>
</v-btn>
<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-if="!isOperational && isOnline"
v-bind="attrs"
v-on="on"
small
color="darkgray"
style="border-radius: 7px"
elevation="0"
@click.prevent.stop="clickConnectUsb()"
>
<v-icon>usb</v-icon>
</v-btn>
</template>
<template v-slot:default>Connect USB (only for OctoPrint)</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="clickRefreshSocket()"
>
<v-icon>refresh</v-icon>
</v-btn>
</template>
<template v-slot:default>Reload printer websocket and refresh all states</template>
</v-tooltip>

<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 -->
Expand Down
6 changes: 3 additions & 3 deletions src/store/printer-state.store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit df35036

Please sign in to comment.