formatting

postcss.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-    "plugins": {
-        "postcss-nesting": {}
-    }
+    plugins: {
+        'postcss-nesting': {},
+    },
 }

src/App.vue

@@ -164,7 +164,7 @@ export default class App extends Mixins(BaseMixin) {
 
     @Watch('language')
     async languageChanged(newVal: string): Promise<void> {
-       await  setAndLoadLocale(newVal);
+        await setAndLoadLocale(newVal)
     }
 
     @Watch('customStylesheet')

src/assets/styles/utils.css

@@ -1,4 +1,3 @@
-
 .user-select-none {
     -webkit-touch-callout: none;
     -webkit-user-select: none;

src/components/settings/SettingsGeneralTab.vue

@@ -82,23 +82,23 @@ export default class SettingsGeneralTab extends Mixins(BaseMixin, SettingsGenera
     mdiHelpCircle = mdiHelpCircle
     mdiCloseThick = mdiCloseThick
 
-    availableLanguages: {text: string, value: string}[] = []
+    availableLanguages: { text: string; value: string }[] = []
 
-    async created(){
-        const locales = import.meta.glob<string>('../../locales/*.json', {import: "title"});
-        const languages: { text: string; value: string }[] = [];
+    async created() {
+        const locales = import.meta.glob<string>('../../locales/*.json', { import: 'title' })
+        const languages: { text: string; value: string }[] = []
 
-        for(const file in locales) {
-            const langKey = file.slice(file.lastIndexOf('.') - 2, file.lastIndexOf('.'));
-            const title = await locales[file]();
+        for (const file in locales) {
+            const langKey = file.slice(file.lastIndexOf('.') - 2, file.lastIndexOf('.'))
+            const title = await locales[file]()
 
             languages.push({
                 text: title,
                 value: langKey,
             })
         }
 
-        this.availableLanguages = languages;
+        this.availableLanguages = languages
     }
 
     get printerName() {

src/components/webcams/WebcamWrapperItem.vue

@@ -38,7 +38,7 @@ import Component from 'vue-class-component'
 import { Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
-import {DynamicCamLoader} from "@/components/webcams/streamers/DynamicCamLoader";
+import { DynamicCamLoader } from '@/components/webcams/streamers/DynamicCamLoader'
 
 @Component({
     components: {

src/components/webcams/streamers/DynamicCamLoader.ts

@@ -1,43 +1,39 @@
 import Vue from 'vue'
 
-type StreamerTypes = "Hlsstreamer" |
-    "Ipstreamer" |
-    "JanusStreamer" |
-    "JMuxerStream" |
-    "Mjpegstreamer" |
-    "MjpegstreamerAdaptive" |
-    "Uv4lMjpeg" |
-    "WebrtcCameraStreamer" |
-    "WebrtcMediaMTX";
+type StreamerTypes =
+    | 'Hlsstreamer'
+    | 'Ipstreamer'
+    | 'JanusStreamer'
+    | 'JMuxerStream'
+    | 'Mjpegstreamer'
+    | 'MjpegstreamerAdaptive'
+    | 'Uv4lMjpeg'
+    | 'WebrtcCameraStreamer'
+    | 'WebrtcMediaMTX'
 
 function getDynamicCamImport(componentName: StreamerTypes) {
-
     // split each webcam streamer into its own chunk
     switch (componentName) {
-        case "Hlsstreamer":
-            return () => import('@/components/webcams/streamers/Hlsstreamer.vue');
-        case "Ipstreamer":
-            return () => import('@/components/webcams/streamers/Ipstreamer.vue');
-        case "JanusStreamer":
-            return () => import('@/components/webcams/streamers/JanusStreamer.vue');
-        case "JMuxerStream":
-            return () => import('@/components/webcams/streamers/JMuxerStream.vue');
-        case "Mjpegstreamer":
-            return () => import('@/components/webcams/streamers/Mjpegstreamer.vue');
-        case "MjpegstreamerAdaptive":
-            return () => import('@/components/webcams/streamers/MjpegstreamerAdaptive.vue');
-        case "Uv4lMjpeg":
-            return () => import('@/components/webcams/streamers/Uv4lMjpeg.vue');
-        case "WebrtcCameraStreamer":
-            return () => import('@/components/webcams/streamers/WebrtcCameraStreamer.vue');
-        case "WebrtcMediaMTX":
-            return () => import('@/components/webcams/streamers/WebrtcMediaMTX.vue');
+        case 'Hlsstreamer':
+            return () => import('@/components/webcams/streamers/Hlsstreamer.vue')
+        case 'Ipstreamer':
+            return () => import('@/components/webcams/streamers/Ipstreamer.vue')
+        case 'JanusStreamer':
+            return () => import('@/components/webcams/streamers/JanusStreamer.vue')
+        case 'JMuxerStream':
+            return () => import('@/components/webcams/streamers/JMuxerStream.vue')
+        case 'Mjpegstreamer':
+            return () => import('@/components/webcams/streamers/Mjpegstreamer.vue')
+        case 'MjpegstreamerAdaptive':
+            return () => import('@/components/webcams/streamers/MjpegstreamerAdaptive.vue')
+        case 'Uv4lMjpeg':
+            return () => import('@/components/webcams/streamers/Uv4lMjpeg.vue')
+        case 'WebrtcCameraStreamer':
+            return () => import('@/components/webcams/streamers/WebrtcCameraStreamer.vue')
+        case 'WebrtcMediaMTX':
+            return () => import('@/components/webcams/streamers/WebrtcMediaMTX.vue')
     }
 }
 
-export const DynamicCamLoader = (componentName: StreamerTypes) => Vue.component(
-    componentName,
-    getDynamicCamImport(componentName)
-);
-
-
+export const DynamicCamLoader = (componentName: StreamerTypes) =>
+    Vue.component(componentName, getDynamicCamImport(componentName))

src/main.ts

@@ -3,12 +3,12 @@ import 'resize-observer-polyfill' // polyfill needed by the responsive class det
 import Vue from 'vue'
 import App from '@/App.vue'
 import vuetify from '@/plugins/vuetify'
-import i18n, {setAndLoadLocale} from '@/plugins/i18n'
+import i18n, { setAndLoadLocale } from '@/plugins/i18n'
 import store from '@/store'
 import router from '@/plugins/router'
-import {WebSocketPlugin} from '@/plugins/webSocketClient'
+import { WebSocketPlugin } from '@/plugins/webSocketClient'
 // vue-observe-visibility
-import {ObserveVisibility} from 'vue-observe-visibility'
+import { ObserveVisibility } from 'vue-observe-visibility'
 //vue-meta
 import VueMeta from 'vue-meta'
 //vue-load-image
@@ -17,20 +17,20 @@ import VueLoadImage from 'vue-load-image'
 import VueToast from 'vue-toast-notification'
 import 'vue-toast-notification/dist/theme-sugar.css'
 //overlayerscrollbars-vue
-import {OverlayScrollbarsPlugin} from 'overlayscrollbars-vue'
+import { OverlayScrollbarsPlugin } from 'overlayscrollbars-vue'
 import 'overlayscrollbars/css/OverlayScrollbars.css'
 // Directives
 import './directives/longpress'
 import './directives/responsive-class'
 
 // Echarts
 import ECharts from 'vue-echarts'
-import {use} from 'echarts/core'
+import { use } from 'echarts/core'
 
 // import ECharts modules manually to reduce bundle size
-import {SVGRenderer} from 'echarts/renderers'
-import {BarChart, LineChart, PieChart} from 'echarts/charts'
-import {DatasetComponent, GridComponent, LegendComponent, TooltipComponent} from 'echarts/components'
+import { SVGRenderer } from 'echarts/renderers'
+import { BarChart, LineChart, PieChart } from 'echarts/charts'
+import { DatasetComponent, GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
 // vue-resize
 import 'vue-resize/dist/vue-resize.css'
 // @ts-ignore
@@ -65,24 +65,23 @@ Vue.use(VueResize)
 
 const initLoad = async () => {
     try {
-
         //load config.json
-        const res = await fetch('/config.json');
-        const file = await res.json() as Record<string, unknown>;
+        const res = await fetch('/config.json')
+        const file = (await res.json()) as Record<string, unknown>
 
         window.console.debug('Loaded config.json')
 
         await store.dispatch('importConfigJson', file)
         if ('defaultLocale' in file) {
-            await setAndLoadLocale(file.defaultLocale as string);
+            await setAndLoadLocale(file.defaultLocale as string)
         }
     } catch (e) {
         window.console.error('Failed to load config.json')
         window.console.error(e)
     }
 
     const url = store.getters['socket/getWebsocketUrl']
-    Vue.use(WebSocketPlugin, {url, store})
+    Vue.use(WebSocketPlugin, { url, store })
     if (store?.state?.instancesDB === 'moonraker') Vue.$socket.connect()
 }
 

src/plugins/i18n.ts

@@ -2,21 +2,21 @@ import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 Vue.use(VueI18n)
 
-import defaultLocale from "../locales/en.json";
+import defaultLocale from '../locales/en.json'
 
-const locale  =(import.meta.env.VUE_APP_I18N_LOCALE as string) || 'en';
+const locale = (import.meta.env.VUE_APP_I18N_LOCALE as string) || 'en'
 
 const i18n = new VueI18n({
     locale,
     fallbackLocale: (import.meta.env.VUE_APP_I18N_FALLBACK_LOCALE as string) || 'en',
-    messages: {en: defaultLocale}
+    messages: { en: defaultLocale },
 })
 
-export default i18n;
+export default i18n
 
-export async function setAndLoadLocale(lang: string){
+export async function setAndLoadLocale(lang: string) {
     const locales = await import(`../locales/${lang}.json`)
     i18n.setLocaleMessage(lang, locales)
-    i18n.locale = lang;
+    i18n.locale = lang
     return locales
 }

src/store/socket/index.ts

@@ -6,7 +6,7 @@ import { getters } from '@/store/socket/getters'
 import { RootState } from '@/store/types'
 
 export const getDefaultState = (): SocketState => {
-    const hostname = (import.meta.env.VUE_APP_HOSTNAME as string) || "tamo.pataar.nl"
+    const hostname = (import.meta.env.VUE_APP_HOSTNAME as string) || 'tamo.pataar.nl'
     const defaultPort = window.location.port || (window.location.protocol === 'https:' ? 443 : 80)
     const port = import.meta.env.VUE_APP_PORT ? Number(import.meta.env.VUE_APP_PORT) : Number(7125)
 

vite.config.ts

@@ -81,26 +81,24 @@ export default defineConfig({
         target: 'safari12',
         rollupOptions: {
             output: {
-                manualChunks: (id: string ) => {
-                    if(id.includes('node_modules')) {
-
+                manualChunks: (id: string) => {
+                    if (id.includes('node_modules')) {
                         // split codemirror into its own chunk
                         if (id.includes('/codemirror/') || id.includes('/@codemirror/')) {
                             return 'codemirror'
                         }
 
                         // split these libs into their own chunks
-                        const chunkedLibs = ['vuetify', 'echarts', 'overlayscrollbars'];
+                        const chunkedLibs = ['vuetify', 'echarts', 'overlayscrollbars']
                         for (const lib of chunkedLibs) {
                             if (id.includes(`/node_modules/${lib}/`)) {
-                                return lib.replace(".js", "");
+                                return lib.replace('.js', '')
                             }
                         }
                     }
-                }
-
-            }
-        }
+                },
+            },
+        },
     },
 
     envPrefix: 'VUE_',