Dependabot/npm and yarn/vuetify 2.6.10

package.json

@@ -59,7 +59,7 @@
         "vue-resize": "^1.0.1",
         "vue-toast-notification": "^0.6.1",
         "vuedraggable": "^2.24.3",
-        "vuetify": "^2.6.1",
+        "vuetify": "^2.6.10",
         "vuex": "^3.6.2"
     },
     "devDependencies": {

src/App.vue

@@ -39,6 +39,7 @@
             <the-timelapse-rendering-snackbar></the-timelapse-rendering-snackbar>
             <the-fullscreen-upload></the-fullscreen-upload>
             <the-upload-snackbar></the-upload-snackbar>
+            <the-manual-probe-dialog />
         </template>
         <the-select-printer-dialog v-else-if="instancesDB !== 'moonraker'"></the-select-printer-dialog>
         <the-connecting-dialog v-else></the-connecting-dialog>
@@ -59,6 +60,7 @@ import { panelToolbarHeight, topbarHeight, navigationItemHeight } from '@/store/
 import TheTimelapseRenderingSnackbar from '@/components/TheTimelapseRenderingSnackbar.vue'
 import TheFullscreenUpload from '@/components/TheFullscreenUpload.vue'
 import TheUploadSnackbar from '@/components/TheUploadSnackbar.vue'
+import TheManualProbeDialog from '@/components/dialogs/TheManualProbeDialog.vue'
 
 @Component({
     components: {
@@ -71,6 +73,7 @@ import TheUploadSnackbar from '@/components/TheUploadSnackbar.vue'
         TheSidebar,
         TheFullscreenUpload,
         TheUploadSnackbar,
+        TheManualProbeDialog,
     },
     metaInfo() {
         const title = this.$store.getters['getTitle']

src/components/TheSidebar.vue

@@ -130,7 +130,7 @@
         <template #append>
             <v-list-item class="small-list-item mb-2">
                 <v-list-item-icon class="menu-item-icon">
-                    <about-modal></about-modal>
+                    <about-dialog></about-dialog>
                 </v-list-item-icon>
             </v-list-item>
         </template>
@@ -144,15 +144,15 @@ import { Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { PrinterStateKlipperConfig } from '@/store/printer/types'
 import TheSelectPrinterDialog from '@/components/TheSelectPrinterDialog.vue'
-import AboutModal from '@/components/modals/AboutModal.vue'
+import AboutDialog from '@/components/dialogs/AboutDialog.vue'
 import { navigationWidth, topbarHeight } from '@/store/variables'
 import MainsailLogo from '@/components/ui/MainsailLogo.vue'
 import { mdiViewDashboardOutline } from '@mdi/js'
 
 @Component({
     components: {
         TheSelectPrinterDialog,
-        AboutModal,
+        AboutDialog,
         MainsailLogo,
     },
 })

src/components/dialogs/AboutDialog.vue

@@ -0,0 +1,59 @@
+<template>
+    <v-tooltip right color="panel">
+        <template #activator="{ on, attrs }">
+            <v-icon v-bind="attrs" v-on="on">
+                {{ mdiHelpCircleOutline }}
+            </v-icon>
+        </template>
+        <v-container class="version-container pa-0">
+            <div><img height="12" src="/img/logo.svg" alt="mainsail-logo" /></div>
+            <div>v{{ mainsailVersion }}</div>
+            <div>
+                <v-icon small class="moonraker-logo">{{ mdiMoonWaningCrescent }}</v-icon>
+            </div>
+            <div>{{ moonrakerVersion }}</div>
+            <div><img height="12" src="/img/klipper.svg" class="klipper-logo" alt="klipper-logo" /></div>
+            <div>{{ klipperVersion }}</div>
+        </v-container>
+    </v-tooltip>
+</template>
+
+<script lang="ts">
+import BaseMixin from '../mixins/base'
+import { Mixins } from 'vue-property-decorator'
+import Component from 'vue-class-component'
+import { mdiCloseThick, mdiHelpCircleOutline, mdiMoonWaningCrescent } from '@mdi/js'
+
+@Component({})
+export default class AboutDialog extends Mixins(BaseMixin) {
+    mdiHelpCircleOutline = mdiHelpCircleOutline
+    mdiCloseThick = mdiCloseThick
+    mdiMoonWaningCrescent = mdiMoonWaningCrescent
+
+    get mainsailVersion(): string {
+        return this.$store.state.packageVersion
+    }
+
+    get klipperVersion(): string {
+        return this.$store.state.printer?.software_version ?? ''
+    }
+
+    get moonrakerVersion(): string {
+        return this.$store.state.server?.moonraker_version ?? ''
+    }
+}
+</script>
+
+<style scoped>
+.klipper-logo {
+    transform: rotate(90deg);
+}
+.moonraker-logo {
+    transform: rotate(45deg);
+    color: #ebc815;
+}
+.version-container {
+    display: grid;
+    grid-template-columns: 20px auto;
+}
+</style>

src/components/dialogs/TheManualProbeDialog.vue

@@ -0,0 +1,222 @@
+<template>
+    <v-dialog :value="showDialog" width="400" persistent :fullscreen="isMobile">
+        <panel
+            :title="$t('ManualProbe.Headline').toString()"
+            :icon="mdiArrowCollapseDown"
+            card-class="manual_probe-dialog"
+            :margin-bottom="false"
+            style="overflow: hidden"
+            :height="isMobile ? 0 : 548">
+            <template #buttons>
+                <v-btn icon tile @click="sendAbort">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-container>
+                <v-row>
+                    <v-col class="d-flex align-center justify-center">
+                        <span class="text-h5">{{ z_position_lower }}</span>
+                        <v-icon class="mx-2">{{ mdiChevronTripleRight }}</v-icon>
+                        <span class="text-h4">{{ z_position }}</span>
+                        <v-icon class="mx-2">{{ mdiChevronTripleLeft }}</v-icon>
+                        <span class="text-h5">{{ z_position_upper }}</span>
+                    </v-col>
+                </v-row>
+                <v-row>
+                    <v-col class="text-left">
+                        <v-btn class="" color="primary" @click="sendTestZ('--')">
+                            <v-icon small>{{ mdiMinusThick }}</v-icon>
+                            <v-icon small>{{ mdiMinusThick }}</v-icon>
+                        </v-btn>
+                    </v-col>
+                    <v-col class="text-left">
+                        <v-btn class="" color="primary" @click="sendTestZ('-')">
+                            <v-icon small>{{ mdiMinusThick }}</v-icon>
+                        </v-btn>
+                    </v-col>
+                    <v-col class="text-right">
+                        <v-btn class="" color="primary" @click="sendTestZ('+')">
+                            <v-icon small>{{ mdiPlusThick }}</v-icon>
+                        </v-btn>
+                    </v-col>
+                    <v-col class="text-right">
+                        <v-btn class="" color="primary" @click="sendTestZ('++')">
+                            <v-icon small>{{ mdiPlusThick }}</v-icon>
+                            <v-icon small>{{ mdiPlusThick }}</v-icon>
+                        </v-btn>
+                    </v-col>
+                </v-row>
+            </v-container>
+            <sub-panel :title="$t('ManualProbe.Advanced')" sub-panel-class="manual-probe-dialog-advanced" class="mb-n2">
+                <v-container>
+                    <v-item-group class="_btn-group">
+                        <v-btn
+                            v-for="(offset, index) in offsetsZ"
+                            :key="`offsetsUp-${index}`"
+                            small
+                            class="_btn-qs flex-grow-1 px-1"
+                            @click="sendTestZ(offset.toString())">
+                            <v-icon v-if="index === 0" left small class="mr-1 ml-n1">
+                                {{ mdiArrowExpandUp }}
+                            </v-icon>
+                            <span>&plus;{{ offset }}</span>
+                        </v-btn>
+                    </v-item-group>
+                    <v-item-group class="_btn-group mt-3">
+                        <v-btn
+                            v-for="(offset, index) in offsetsZ"
+                            :key="`offsetsDown-${index}`"
+                            small
+                            class="_btn-qs flex-grow-1 px-1"
+                            @click="sendTestZ((offset * -1).toString())">
+                            <v-icon v-if="index === 0" left small class="mr-1 ml-n1">
+                                {{ mdiArrowCollapseDown }}
+                            </v-icon>
+                            <span>&minus;{{ offset }}</span>
+                        </v-btn>
+                    </v-item-group>
+                </v-container>
+            </sub-panel>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn text :loading="loadingAbort" @click="sendAbort">
+                    {{ $t('ManualProbe.Abort') }}
+                </v-btn>
+                <v-btn color="primary" text :loading="loadingAccept" @click="sendAccept">
+                    {{ $t('ManualProbe.Accept') }}
+                </v-btn>
+            </v-card-actions>
+        </panel>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import Panel from '@/components/ui/Panel.vue'
+import Responsive from '@/components/ui/Responsive.vue'
+
+import {
+    mdiArrowCollapseDown,
+    mdiArrowExpandUp,
+    mdiInformation,
+    mdiPlusThick,
+    mdiMinusThick,
+    mdiChevronTripleLeft,
+    mdiChevronTripleRight,
+    mdiCloseThick,
+} from '@mdi/js'
+@Component({
+    components: { Panel, Responsive },
+})
+export default class TheManualProbeDialog extends Mixins(BaseMixin) {
+    mdiArrowCollapseDown = mdiArrowCollapseDown
+    mdiArrowExpandUp = mdiArrowExpandUp
+    mdiInformation = mdiInformation
+    mdiPlusThick = mdiPlusThick
+    mdiMinusThick = mdiMinusThick
+    mdiChevronTripleLeft = mdiChevronTripleLeft
+    mdiChevronTripleRight = mdiChevronTripleRight
+    mdiCloseThick = mdiCloseThick
+
+    get showDialog() {
+        return this.$store.state.printer.manual_probe?.is_active ?? false
+    }
+
+    get offsetsZ() {
+        const offsets = [1, 0.1, 0.05, 0.01, 0.005]
+
+        return offsets.sort()
+    }
+
+    get z_position() {
+        return (this.$store.state.printer.manual_probe?.z_position ?? 0).toFixed(3)
+    }
+
+    get z_position_lower() {
+        const value = this.$store.state.printer.manual_probe?.z_position_lower ?? null
+        if (value === null) return '??????'
+
+        return value.toFixed(3)
+    }
+
+    get z_position_upper() {
+        const value = this.$store.state.printer.manual_probe?.z_position_upper ?? null
+        if (value === null) return '??????'
+
+        return value.toFixed(3)
+    }
+
+    get loadingAbort() {
+        return this.loadings.includes('manualProbeAbort')
+    }
+
+    get loadingAccept() {
+        return this.loadings.includes('manualProbeAccept')
+    }
+
+    sendTestZ(offset: string) {
+        const gcode = `TESTZ Z=${offset}`
+        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: gcode })
+    }
+
+    sendAbort() {
+        const gcode = `ABORT`
+        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: gcode }, { loading: 'manualProbeAbort' })
+    }
+
+    sendAccept() {
+        const gcode = `ACCEPT`
+        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: gcode }, { loading: 'manualProbeAccept' })
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.v-btn-toggle {
+    width: 100%;
+}
+
+._btn-group {
+    border-radius: 4px;
+    display: inline-flex;
+    flex-wrap: nowrap;
+    max-width: 100%;
+    min-width: 100%;
+    width: 100%;
+
+    .v-btn {
+        border-radius: 0;
+        border-color: rgba(255, 255, 255, 0.12) !important;
+        border-style: solid;
+        border-width: thin;
+        box-shadow: none;
+        height: 28px;
+        opacity: 0.8;
+        min-width: auto !important;
+    }
+
+    .v-btn:first-child {
+        border-top-left-radius: inherit;
+        border-bottom-left-radius: inherit;
+    }
+
+    .v-btn:last-child {
+        border-top-right-radius: inherit;
+        border-bottom-right-radius: inherit;
+    }
+
+    .v-btn:not(:first-child) {
+        border-left-width: 0;
+    }
+}
+
+._btn-qs {
+    font-size: 0.8rem !important;
+    font-weight: 400;
+    max-height: 28px;
+}
+</style>