Merge branch 'develop' into editor-structure

.prettierrc

@@ -18,6 +18,14 @@
             "options": {
                 "tabWidth": 2
             }
+        },
+        {
+            "files": "src/locales/*.json",
+            "options": {
+                "plugins": ["prettier-plugin-sort-json"],
+                "jsonRecursiveSort": true,
+                "jsonSortOrder": "{ \"placeThisFirst\": null, \"/^[a-zA-Z0-9]/\": \"caseInsensitiveNumeric\"  }"
+            }
         }
     ]
 }

package.json

@@ -35,7 +35,7 @@
         "@lezer/highlight": "^1.0.0",
         "@sindarius/gcodeviewer": "^3.7.11",
         "@uiw/codemirror-theme-vscode": "^4.19.11",
-        "axios": "^1.6.0",
+        "axios": "^1.7.4",
         "codemirror": "^6.0.1",
         "core-js": "^3.16.0",
         "detect-browser": "^5.3.0",
@@ -90,9 +90,10 @@
         "eslint-plugin-vue": "^9.0.0",
         "postcss": "^8.4.31",
         "postcss-nesting": "^12.0.1",
-        "prettier": "^3.0.0",
+        "prettier": "^3.3.3",
+        "prettier-plugin-sort-json": "^4.0.0",
         "sass": "~1.32",
-        "start-server-and-test": "^2.0.0",
+        "start-server-and-test": "^2.0.5",
         "typescript": "^4.5.5",
         "unplugin-vue-components": "^0.22.12",
         "vite": "^4.5.3",

public/css/themes/vzbot.css

@@ -0,0 +1,3 @@
+div.v-navigation-drawer__image div.v-image__image {
+    background-position: bottom center !important;
+}

src/App.vue

@@ -347,6 +347,26 @@ export default class App extends Mixins(BaseMixin, ThemeMixin) {
         this.drawFavicon(this.print_percent)
     }
 
+    @Watch('themeCss')
+    themeCssChanged(newVal: string | null): void {
+        // remove linked CSS file if it exists
+        const style = document.getElementById('theme-css')
+        if (style) style.remove()
+
+        // if themeCss does not exist, stop here and load no CSS file
+        if (newVal === null) return
+
+        // fetch the CSS file and append it to the head
+        fetch(newVal)
+            .then((response) => response.text())
+            .then((css) => {
+                const newStyle = document.createElement('style')
+                newStyle.id = 'theme-css'
+                newStyle.innerHTML = css
+                document.head.appendChild(newStyle)
+            })
+    }
+
     @Watch('print_percent')
     print_percentChanged(newVal: number): void {
         this.drawFavicon(newVal)

src/components/console/ConsoleTableEntry.vue

@@ -1,7 +1,13 @@
 <template>
     <v-row :class="entryStyle">
         <v-col class="col-auto pr-0 text--disabled console-time">{{ entryFormatTime }}</v-col>
-        <v-col :class="messageClass" style="min-width: 0" @click.capture="commandClick" v-html="event.formatMessage" />
+        <v-col
+            v-if="!rawOutput"
+            :class="messageClass"
+            style="min-width: 0"
+            @click.capture="commandClick"
+            v-html="event.formatMessage" />
+        <v-col v-else :class="messageClass" style="min-width: 0" @click.capture="commandClick" v-text="event.message" />
     </v-row>
 </template>
 
@@ -19,7 +25,7 @@ export default class ConsoleTableEntry extends Mixins(BaseMixin) {
     get entryStyle() {
         const classes = ['ma-0', 'flex-nowrap']
         classes.push(this.$store.state.gui.console.entryStyle ?? 'default')
-        if (this.event.type === 'action') classes.push('text--disabled')
+        if (['action', 'debug'].includes(this.event.type)) classes.push('text--disabled')
 
         return classes
     }
@@ -31,13 +37,17 @@ export default class ConsoleTableEntry extends Mixins(BaseMixin) {
     get messageClass() {
         const classes = ['console-message']
 
-        if (this.event.type === 'action') classes.push('text--disabled')
+        if (['action', 'debug'].includes(this.event.type)) classes.push('text--disabled')
         else if (this.event.message.startsWith('!! ')) classes.push('error--text')
         else classes.push('text--primary')
 
         return classes
     }
 
+    get rawOutput() {
+        return this.$store.state.gui.console.rawOutput ?? false
+    }
+
     commandClick(event: Event) {
         const eventTarget = event.target as Element
         if (eventTarget.localName === 'a' && eventTarget.className.indexOf('command') !== -1) {

src/components/dialogs/CancelJobDialog.vue

@@ -0,0 +1,50 @@
+<template>
+    <v-dialog :value="showDialog" width="400" persistent>
+        <panel
+            :title="$t('CancelJobDialog.CancelJob')"
+            toolbar-color="normal"
+            card-class="cancel-job-dialog"
+            :icon="mdiStopCircleOutline"
+            :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="closePrompt">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text>{{ $t('CancelJobDialog.AreYouSure') }}</v-card-text>
+            <v-card-actions>
+                <v-spacer />
+                <v-btn text @click="closePrompt">{{ $t('CancelJobDialog.No') }}</v-btn>
+                <v-btn color="primary" text @click="cancelJob">{{ $t('CancelJobDialog.Yes') }}</v-btn>
+            </v-card-actions>
+        </panel>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import Panel from '@/components/ui/Panel.vue'
+
+import { mdiCloseThick, mdiStopCircleOutline } from '@mdi/js'
+
+@Component({
+    components: { Panel },
+})
+export default class CancelJobDialog extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiStopCircleOutline = mdiStopCircleOutline
+
+    @Prop({ type: Boolean, default: false }) showDialog!: boolean
+
+    cancelJob() {
+        this.$emit('cancel-job')
+    }
+
+    closePrompt() {
+        this.$emit('close')
+    }
+}
+</script>
+
+<style scoped></style>