Add The Language Change And Chinese

package.json

@@ -17,6 +17,7 @@
     "vue-context": "^6.0.0",
     "vue-github-api": "^0.1.7",
     "vue-headful": "^2.1.0",
+    "vue-i18n": "^8.22.4",
     "vue-plotly": "^1.1.0",
     "vue-prism-editor": "^1.2.2",
     "vue-resource": "^1.5.1",

src/App.vue

@@ -57,7 +57,7 @@
                             v-if="category.title === 'Settings' && isUpdateAvailable"
                         >mdi-progress-upload</v-icon>
                         <span class="nav-title">
-                            {{ category.title }}
+                            {{ $t(`Router.${category.title}`) }}
                         </span>
                         <v-icon class="nav-arrow" v-if="category.children && category.children.length > 0">mdi-chevron-down</v-icon>
                     </router-link>
@@ -66,7 +66,7 @@
                         <li v-for="(page, pageIndex) in category.children" class="nav-item" v-bind:key="`${index}-${pageIndex}`">
                             <router-link :to="page.path" class="nav-link" @click.prevent v-if="klippy_state !== 'error' || page.alwaysShow">
                                 <v-icon>mdi-{{ page.icon }}</v-icon>
-                                <span class="nav-title">{{ page.title }}</span>
+                                <span class="nav-title">{{ $t(`Router.${page.title}`) }}</span>
                             </router-link>
                         </li>
                     </ul>
@@ -81,9 +81,9 @@
             <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
             <v-spacer></v-spacer>
             <input type="file" ref="fileUploadAndStart" accept=".gcode, .ufp" style="display: none" @change="uploadAndStart" />
-            <v-btn color="primary" class="mr-5 d-none d-sm-flex" v-if="isConnected && save_config_pending" :disabled="['printing', 'paused'].includes(printer_state)" :loading="loadings.includes['topbarSaveConfig']" @click="clickSaveConfig">SAVE CONFIG</v-btn>
-            <v-btn color="primary" class="mr-5 d-none d-sm-flex" v-if="isConnected && ['standby', 'complete'].includes(printer_state)" :loading="loadings.includes['btnUploadAndStart']" @click="btnUploadAndStart"><v-icon class="mr-2">mdi-file-upload</v-icon>Upload & Print</v-btn>
-            <v-btn color="error" class="button-min-width-auto px-3" v-if="isConnected" :loading="loadings.includes['topbarEmergencyStop']" @click="clickEmergencyStop"><v-icon class="mr-sm-2">mdi-alert-circle-outline</v-icon><span class="d-none d-sm-flex">Emergency Stop</span></v-btn>
+            <v-btn color="primary" class="mr-5 d-none d-sm-flex" v-if="isConnected && save_config_pending" :disabled="['printing', 'paused'].includes(printer_state)" :loading="loadings.includes['topbarSaveConfig']" @click="clickSaveConfig">{{ $t("App.SAVECONFIG")}}</v-btn>
+            <v-btn color="primary" class="mr-5 d-none d-sm-flex" v-if="isConnected && ['standby', 'complete'].includes(printer_state)" :loading="loadings.includes['btnUploadAndStart']" @click="btnUploadAndStart"><v-icon class="mr-2">mdi-file-upload</v-icon>{{ $t("App.UploadPrint")}}</v-btn>
+            <v-btn color="error" class="button-min-width-auto px-3" v-if="isConnected" :loading="loadings.includes['topbarEmergencyStop']" @click="clickEmergencyStop"><v-icon class="mr-sm-2">mdi-alert-circle-outline</v-icon><span class="d-none d-sm-flex">{{ $t("App.EmergencyStop")}}</span></v-btn>
             <top-corner-menu></top-corner-menu>
         </v-app-bar>
 
@@ -106,7 +106,7 @@
             dark
             v-model="uploadSnackbar.status"
         >
-            <strong>Uploading {{ uploadSnackbar.filename }}</strong><br />
+            <strong>{{ $t("App.Uploading")}} {{ uploadSnackbar.filename }}</strong><br />
             {{ Math.round(uploadSnackbar.percent) }} % @ {{ formatFilesize(Math.round(uploadSnackbar.speed)) }}/s<br />
             <v-progress-linear class="mt-2" :value="uploadSnackbar.percent"></v-progress-linear>
             <template v-slot:action="{ attrs }">

src/components/ConnectingDialog.vue

@@ -8,7 +8,7 @@
             <v-toolbar flat dense color="primary">
                 <v-toolbar-title>
                     <span class="subheading">
-                        <v-icon class="mdi mdi-connection" left></v-icon>Connecting<span v-if="connectingFailed"> failed</span><span v-if="isConnecting"> to {{ parseInt(port) !== 80 && port !== "" ? hostname+":"+port : hostname }}</span>
+                        <v-icon class="mdi mdi-connection" left></v-icon>{{ $t("App.Connecting") }}<span v-if="connectingFailed"> {{ $t("App.Failed") }}</span><span v-if="isConnecting"> {{ $t("App.To") }} {{ parseInt(port) !== 80 && port !== "" ? hostname+":"+port : hostname }}</span>
                     </span>
                 </v-toolbar-title>
             </v-toolbar>
@@ -16,9 +16,9 @@
                 <v-progress-linear color="white" indeterminate></v-progress-linear>
             </v-card-text>
             <v-card-text class="pt-5" v-if="!isConnecting && connectingFailed">
-                <p>Cannot not connect to {{ parseInt(port) !== 80 && port !== "" ? hostname+":"+port : hostname }}.</p>
+                <p>{{ $t("App.CannotNotConnectTo") }} {{ parseInt(port) !== 80 && port !== "" ? hostname+":"+port : hostname }}.</p>
                 <div class="text-center">
-                    <v-btn @click="reconnect" color="primary">try again</v-btn>
+                    <v-btn @click="reconnect" color="primary">{{ $t("App.TryAgain") }}</v-btn>
                 </div>
             </v-card-text>
         </v-card>

src/components/SelectPrinterDialog.vue

@@ -9,11 +9,11 @@
                 <v-toolbar-title>
                     <span class="subheading">
                         <v-icon class="mdi mdi-connection" left></v-icon>
-                        <span v-if="isConnecting">Connection to {{ parseInt(port) !== 80 ? hostname+':'+port : hostname }}</span>
-                        <span v-if="connectingFailed">Connection failed</span>
-                        <span v-if="!isConnecting && !connectingFailed && !dialogAddPrinter.bool && !dialogEditPrinter.bool">Select Printer</span>
-                        <span v-if="dialogAddPrinter.bool">Add Printer</span>
-                        <span v-if="dialogEditPrinter.bool">Edit Printer</span>
+                        <span v-if="isConnecting">{{ $t("App.ConnectionTo") }}{{ parseInt(port) !== 80 ? hostname+':'+port : hostname }}</span>
+                        <span v-if="connectingFailed">{{ $t("App.ConnectionFailed") }}</span>
+                        <span v-if="!isConnecting && !connectingFailed && !dialogAddPrinter.bool && !dialogEditPrinter.bool">{{ $t("App.SelectPrinter") }}</span>
+                        <span v-if="dialogAddPrinter.bool">{{ $t("App.AddPrinter") }}</span>
+                        <span v-if="dialogEditPrinter.bool">{{ $t("App.EditPrinter") }}</span>
                     </span>
                 </v-toolbar-title>
                 <v-spacer></v-spacer>
@@ -25,10 +25,10 @@
                 <v-progress-linear color="white" indeterminate></v-progress-linear>
             </v-card-text>
             <v-card-text class="pt-5" v-if="!isConnecting && connectingFailed">
-                <p>Cannot not connect to {{ parseInt(port) !== 80 ? hostname+":"+port : hostname }}.</p>
+                <p>{{ $t("App.CannotNotConnectTo") }} {{ parseInt(port) !== 80 ? hostname+":"+port : hostname }}.</p>
                 <div class="text-center">
-                    <v-btn @click="switchToChangePrinter" color="white" outlined class="mr-3">change printer</v-btn>
-                    <v-btn @click="reconnect" color="primary">try again</v-btn>
+                    <v-btn @click="switchToChangePrinter" color="white" outlined class="mr-3">{{ $t("App.ChangePrinter") }}</v-btn>
+                    <v-btn @click="reconnect" color="primary">{{ $t("App.TryAgain") }}</v-btn>
                 </div>
             </v-card-text>
             <v-card-text class="pt-3" v-if="!isConnecting && dialogAddPrinter.bool">
@@ -63,7 +63,7 @@
                                 class="middle"
                                 @click="addPrinter"
                             >
-                                add printer
+                                {{ $t("App.AddPrinter") }}
                             </v-btn>
                         </v-col>
                     </v-row>
@@ -111,7 +111,7 @@
                                 class="middle"
                                 @click="updatePrinter"
                             >
-                                update printer
+                                {{ $t("App.UpdatePrinter") }}
                             </v-btn>
                         </v-col>
                     </v-row>
@@ -140,14 +140,14 @@
                     </v-row>
                     <v-row v-if="showCorsInfo">
                         <v-col>
-                            <p class="text-center" v-if="this['farm/countPrinters'] === 0">Hello and welcome to the remote mode of Mainsail!</p>
-                            <p class="text-center">Please remember to add <code>{{ currentUrl }}</code> in moonraker.conf within "cors_domains".</p>
-                            <p class="text-center">You can find more details at <a href="https://docs.mainsail.xyz/remotemode" target="_blank">docs.mainsail.xyz/remotemode</a>.</p>
+                            <p class="text-center" v-if="this['farm/countPrinters'] === 0">{{ $t("App.Hello") }}</p>
+                            <p class="text-center">{{ $t("App.PleaseRememberToAdd") }}<code>{{ currentUrl }}</code> {{ $t("App.InMoonrakerConf") }}</p>
+                            <p class="text-center">{{ $t("App.YouCanFindMore") }}<a href="https://docs.mainsail.xyz/remotemode" target="_blank">{{ $t("App.Remotemode") }}</a>.</p>
                         </v-col>
                     </v-row>
                     <v-row>
                         <v-col class="text-center mt-0">
-                            <v-btn @click="dialogAddPrinter.bool = true">add printer</v-btn>
+                            <v-btn @click="dialogAddPrinter.bool = true">{{ $t("App.AddPrinter") }}</v-btn>
                         </v-col>
                     </v-row>
                 </v-container>

src/components/TopCornerMenu.vue

@@ -13,24 +13,24 @@
         </template>
 
         <v-list dense>
-            <v-subheader class="" style="height: auto;">Klipper Control</v-subheader>
+            <v-subheader class="" style="height: auto;">{{ $t("App.KlipperControl") }}</v-subheader>
             <v-list-item class="minheight30" link @click="doRestart()">
-                <v-list-item-title><v-icon class="mr-2" small>mdi-restart</v-icon>Restart</v-list-item-title>
+                <v-list-item-title><v-icon class="mr-2" small>mdi-restart</v-icon>{{ $t("App.Restart") }}</v-list-item-title>
             </v-list-item>
             <v-list-item class="minheight30" link @click="doFirmwareRestart()">
-                <v-list-item-title><v-icon class="mr-2" small>mdi-restart</v-icon>Firmware Restart</v-list-item-title>
+                <v-list-item-title><v-icon class="mr-2" small>mdi-restart</v-icon>{{ $t("App.FirmwareRestart") }}</v-list-item-title>
             </v-list-item>
             <v-divider class="mt-0"></v-divider>
-            <v-subheader class="pt-2" style="height: auto;">Restart Services</v-subheader>
+            <v-subheader class="pt-2" style="height: auto;">{{ $t("App.RestartServices") }}</v-subheader>
             <v-list-item class="minheight30"  link @click="doServiceRestartKlipper()">
-                <v-list-item-title><v-icon class="mr-2" small>mdi-restart</v-icon>Klipper</v-list-item-title>
+                <v-list-item-title><v-icon class="mr-2" small>mdi-restart</v-icon>{{ $t("App.Klipper") }}</v-list-item-title>
             </v-list-item>
             <v-list-item class="minheight30"  link @click="doServiceRestartMoonraker()">
-                <v-list-item-title><v-icon class="mr-2" small>mdi-restart</v-icon>Moonraker</v-list-item-title>
+                <v-list-item-title><v-icon class="mr-2" small>mdi-restart</v-icon>{{ $t("App.Moonraker") }}</v-list-item-title>
             </v-list-item>
             <div v-if="countPowerDevices">
                 <v-divider class="mt-0"></v-divider>
-                <v-subheader class="pt-2" style="height: auto;">Power Devices</v-subheader>
+                <v-subheader class="pt-2" style="height: auto;">{{ $t("App.PowerDevices") }}</v-subheader>
                 <v-list-item v-for="(device, index) in devices" v-bind:key="index" class="minheight30" @click="changeSwitch(device, device.status)" :disabled="(device.status === 'error' || device.locked_while_printing && ['printing', 'paused'].includes(printer_state))">
                     <v-list-item-title>
                         <v-icon class="mr-2" :color="device.status === 'on' ? '' : 'grey darken-2'">mdi-{{ device.status === 'on' ? 'toggle-switch' : 'toggle-switch-off' }}</v-icon>{{ device.device }}
@@ -38,12 +38,12 @@
                 </v-list-item>
             </div>
             <v-divider class="mt-0"></v-divider>
-            <v-subheader class="pt-2" style="height: auto;">Host Control</v-subheader>
+            <v-subheader class="pt-2" style="height: auto;">{{ $t("App.HostControl") }}</v-subheader>
             <v-list-item class="minheight30" link @click="doHostReboot()">
-                <v-list-item-title><v-icon class="mr-2" small>mdi-power</v-icon>Reboot</v-list-item-title>
+                <v-list-item-title><v-icon class="mr-2" small>mdi-power</v-icon>{{ $t("App.Reboot") }}</v-list-item-title>
             </v-list-item>
             <v-list-item class="minheight30" link @click="doHostShutdown()">
-                <v-list-item-title><v-icon class="mr-2" small>mdi-power</v-icon>Shutdown</v-list-item-title>
+                <v-list-item-title><v-icon class="mr-2" small>mdi-power</v-icon>{{ $t("App.Shutdown") }}</v-list-item-title>
             </v-list-item>
         </v-list>
     </v-menu>

src/components/UpdateDialog.vue

@@ -25,7 +25,7 @@
             </template>
             <v-toolbar flat dense >
                 <v-toolbar-title>
-                    <span class="subheading"><v-icon left>mdi-update</v-icon>Updating {{ application }}{{ complete ? " done!" : "..." }}</span>
+                    <span class="subheading"><v-icon left>mdi-update</v-icon>{{ $t("App.Updating")}} {{ application }}{{ complete ? " done!" : "..." }}</span>
                 </v-toolbar-title>
             </v-toolbar>
             <v-card-text class="py-6">
@@ -45,7 +45,7 @@
                     color="primary"
                 >
                     <template #no-data>
-                        <div class="py-2">empty</div>
+                        <div class="py-2">{{ $t("App.Empty")}}</div>
                     </template>
 
                     <template #item="{ item }">
@@ -61,7 +61,7 @@
                 </v-data-table>
                 <v-row>
                     <v-col class="text-center pt-5">
-                        <v-btn @click="close" :disabled="!complete" color="primary">close</v-btn>
+                        <v-btn @click="close" :disabled="!complete" color="primary">{{ $t("App.Close")}}</v-btn>
                     </v-col>
                 </v-row>
             </v-card-text>

src/components/charts/TempChart.vue

@@ -62,7 +62,7 @@ export default {
                                 if (datasetPower) {
                                   output += " at "+datasetPower.dataPoint.y.toFixed(0)+"%"
                                 }
-
+                                
                                 const datasetSpeed = e.entries.find(datasetPower => datasetPower.dataSeries.name === dataset.dataSeries.name+"_speed")
                                 if (datasetSpeed) {
                                   output += " at "+datasetSpeed.dataPoint.y.toFixed(0)+"%"

src/components/panels/ControlPanel.vue

@@ -14,9 +14,9 @@
         <v-container class="pt-0">
             <v-row no-gutters class="" v-if="['standby', 'paused', 'complete', 'error'].includes(printer_state)">
                 <v-col class="col-12 mt-3 pb-0 text-center">
-                    <v-btn small @click="doHome" :loading="loadings.includes('homeAll')" :color="homedAxes.includes('xyz') ? 'primary' : 'warning'"><v-icon class="mr-1">mdi-home</v-icon><span class="d-none d-sm-inline">Home </span>all</v-btn>
-                    <v-btn small @click="doQGL" :loading="loadings.includes('qgl')" color="primary" class="ml-2" v-if="'quad_gantry_level' in config">QGL</v-btn>
-                    <v-btn small @click="doZtilt" :loading="loadings.includes('zTilt')" color="primary" class="ml-2" v-if="'z_tilt' in config">Z Tilt</v-btn>
+                    <v-btn small @click="doHome" :loading="loadings.includes('homeAll')" :color="homedAxes.includes('xyz') ? 'primary' : 'warning'"><v-icon class="mr-1">mdi-home</v-icon><span class="d-none d-sm-inline">{{ $t("Dashboard.Home")}} </span>{{ $t("Dashboard.All")}}</v-btn>
+                    <v-btn small @click="doQGL" :loading="loadings.includes('qgl')" color="primary" class="ml-2" v-if="'quad_gantry_level' in config">{{ $t("Dashboard.QGL")}}</v-btn>
+                    <v-btn small @click="doZtilt" :loading="loadings.includes('zTilt')" color="primary" class="ml-2" v-if="'z_tilt' in config">{{ $t("Dashboard.ZTilt")}}</v-btn>
                 </v-col>
             </v-row>
             <v-row no-gutters class="mt-3" v-if="['standby', 'paused', 'complete', 'error'].includes(printer_state)">

src/components/panels/ExtruderPanel.vue

@@ -7,13 +7,13 @@
         <v-container>
             <v-row class="">
                 <v-col class="col col-md-6">
-                    <v-label>Feed amount in mm:</v-label>
+                    <v-label>{{ $t("Dashboard.FeedAmountIn") }} mm:</v-label>
                     <v-btn-toggle class="mt-2" dense no-gutters style="flex-wrap: nowrap; width: 100%;" >
                         <v-btn v-for="amount in feedamountsSorted" v-bind:key="amount" @click="setFeedAmount(amount)" dense :class="(amount === feedAmount ? 'v-btn--active' : '') + ' btnMinWidthAuto flex-grow-1 px-0 _btnFeedrate'">{{ amount }}</v-btn>
                     </v-btn-toggle>
                 </v-col>
                 <v-col class="col col-md-6">
-                    <v-label>Feedrate in mm/s:</v-label>
+                    <v-label>{{ $t("Dashboard.FeedrateIn") }} mm/s:</v-label>
                     <v-btn-toggle class="mt-2" dense no-gutters style="flex-wrap: nowrap; width: 100%;" >
                         <v-btn v-for="rate in feedratesSorted" v-bind:key="rate" @click="setFeedrate(rate)" dense :class="(feedrate === rate ? 'v-btn--active' : '') + ' btnMinWidthAuto flex-grow-1 px-0 _btnFeedrate'">{{ rate }}</v-btn>
                     </v-btn-toggle>
@@ -21,8 +21,8 @@
             </v-row>
             <v-row class="">
                 <v-col class="col text-center">
-                    <v-btn small @click="sendRetract()" class="mx-2" :loading="loadings.includes('btnRetract')" :disabled="!this['printer/getExtrudePossible']"><v-icon small class="mr-1">mdi-arrow-up-bold</v-icon> Retract</v-btn>
-                    <v-btn small @click="sendDetract()" class="mx-2" :loading="loadings.includes('btnDetract')" :disabled="!this['printer/getExtrudePossible']"><v-icon small class="mr-1">mdi-arrow-down-bold</v-icon> Extrude</v-btn>
+                    <v-btn small @click="sendRetract()" class="mx-2" :loading="loadings.includes('btnRetract')" :disabled="!this['printer/getExtrudePossible']"><v-icon small class="mr-1">mdi-arrow-up-bold</v-icon> {{ $t("Dashboard.Retract") }}</v-btn>
+                    <v-btn small @click="sendDetract()" class="mx-2" :loading="loadings.includes('btnDetract')" :disabled="!this['printer/getExtrudePossible']"><v-icon small class="mr-1">mdi-arrow-down-bold</v-icon> {{ $t("Dashboard.Extrude") }}</v-btn>
                 </v-col>
             </v-row>
         </v-container>
@@ -40,7 +40,7 @@
         data: function() {
             return {
                 feedAmount: 25,
-                feedrate: 5,
+                feedrate: 5
             }
         },
         computed: {
@@ -49,7 +49,6 @@
                 printer_state: state => state.printer.print_stats.state,
                 extruder: state => state.printer.extruder,
                 config: state => state.printer.configfile.config,
-
                 feedamounts: state => state.gui.dashboard.extruder.feedamounts,
                 feedrates: state => state.gui.dashboard.extruder.feedrates,
             }),

src/components/panels/KlippyStatePanel.vue

@@ -2,21 +2,21 @@
     <v-card>
         <v-toolbar flat dense >
             <v-toolbar-title>
-                <span class="subheading"><v-icon left>mdi-alert-circle</v-icon>Klippy-State: {{ klippy_state}}</span>
+                <span class="subheading"><v-icon left>mdi-alert-circle</v-icon>{{ $t('Setting.KlippyState')}}{{ klippy_state}}</span>
             </v-toolbar-title>
         </v-toolbar>
         <v-card-text class="py-0">
             <v-layout wrap class=" text-center">
                 <v-flex col class="text-left" v-if="klippy_connected"><pre style="white-space: pre-wrap;">{{ klippy_message }}</pre></v-flex>
                 <v-flex col class="text-left" v-if="!klippy_connected">
-                    <p>Moonraker can't connect to Klippy!<br />Please check if the Klipper service is running and an UDS (Unix Domain Socket) is configured.</p>
+                    <p style="white-space:pre-wrap">{{ $t('Setting.KlippyInfo') }}</p>
                 </v-flex>
             </v-layout>
         </v-card-text>
         <v-divider class="my-2" v-if="klippy_connected" ></v-divider>
         <v-card-text class="px-4 pt-2 pb-4 content text-center text-lg-left" v-if="klippy_connected">
-            <v-btn small @click="doRestart" color="error" class=""><v-icon class="mr-sm-2">mdi-restart</v-icon>Restart</v-btn>
-            <v-btn small @click="doRestartFirmware" class="ml-4" color="error"><v-icon class="mr-sm-2">mdi-restart</v-icon>FIRMWARE Restart</v-btn>
+            <v-btn small @click="doRestart" color="error" class=""><v-icon class="mr-sm-2">mdi-restart</v-icon>{{ $t('Setting.Restart') }}</v-btn>
+            <v-btn small @click="doRestartFirmware" class="ml-4" color="error"><v-icon class="mr-sm-2">mdi-restart</v-icon>{{ $t('Setting.FIRMWARERestart') }}</v-btn>
         </v-card-text>
     </v-card>
 </template>

src/components/panels/MinSettingsPanel.vue

@@ -12,21 +12,21 @@
         <v-toolbar flat dense color="orange darken-2">
             <v-toolbar-title>
                     <span class="subheading">
-                        <v-icon class="mdi mdi-alert-circle" left></v-icon>Missing configuration
+                        <v-icon class="mdi mdi-alert-circle" left></v-icon>{{ $t("Dashboard.MissingConfiguration") }}
                     </span>
             </v-toolbar-title>
         </v-toolbar>
         <v-card-text class="px-0 pt-0 pb-2 content">
             <v-layout wrap class=" text-center">
                 <v-flex col class="text-left">
-                    <p v-if="!boolVirtualSdcard" class="orange--text"><code>virtual_sdcard</code> is not defined in config.</p>
-                    <p v-if="!boolPauseResume" class="orange--text"><code>pause_resume</code> is not defined in config.</p>
-                    <p v-if="!boolDisplayStatus" class="orange--text"><code>display_status</code> is not defined in config.</p>
-                    <p v-if="!boolMacroPause" class="orange--text"><code>gcode_macro PAUSE</code> is not defined in config.</p>
-                    <p v-if="!boolMacroResume" class="orange--text"><code>gcode_macro RESUME</code> is not defined in config.</p>
-                    <p v-if="!boolMacroCancelPrint" class="orange--text"><code>gcode_macro CANCEL_PRINT</code> is not defined in config.</p>
+                    <p v-if="!boolVirtualSdcard" class="orange--text"><code>virtual_sdcard</code> {{ $t("Dashboard.IsNotDefinedInConfig") }}</p>
+                    <p v-if="!boolPauseResume" class="orange--text"><code>pause_resume</code> {{ $t("Dashboard.IsNotDefinedInConfig") }}</p>
+                    <p v-if="!boolDisplayStatus" class="orange--text"><code>display_status</code> {{ $t("Dashboard.IsNotDefinedInConfig") }}</p>
+                    <p v-if="!boolMacroPause" class="orange--text"><code>gcode_macro PAUSE</code> {{ $t("Dashboard.IsNotDefinedInConfig") }}</p>
+                    <p v-if="!boolMacroResume" class="orange--text"><code>gcode_macro RESUME</code> {{ $t("Dashboard.IsNotDefinedInConfig") }}</p>
+                    <p v-if="!boolMacroCancelPrint" class="orange--text"><code>gcode_macro CANCEL_PRINT</code> {{ $t("Dashboard.IsNotDefinedInConfig") }}</p>
                     <div class="text-center">
-                        <v-btn href="https://docs.mainsail.xyz/necessary-configuration" target="_blank" color="white" outlined small><v-icon small class="mr-1">mdi-information</v-icon>more information</v-btn>
+                        <v-btn href="https://docs.mainsail.xyz/necessary-configuration" target="_blank" color="white" outlined small><v-icon small class="mr-1">mdi-information</v-icon>{{ $t("Dashboard.MoreInformation") }}</v-btn>
                     </div>
                 </v-flex>
             </v-layout>

src/components/panels/MiniconsolePanel.vue

@@ -23,19 +23,19 @@
     <v-card>
         <v-toolbar flat dense>
             <v-toolbar-title>
-                <span class="subheading"><v-icon left>mdi-console-line</v-icon>Console</span>
+                <span class="subheading"><v-icon left>mdi-console-line</v-icon>{{ $t("Dashboard.Console") }}</span>
             </v-toolbar-title>
             <v-spacer></v-spacer>
-            <v-menu :offset-y="true" :close-on-content-click="false" title="Setup Console">
+            <v-menu :offset-y="true" :close-on-content-click="false" :title="$t('Dashboard.SetupConsole')">
                 <template v-slot:activator="{ on, attrs }">
                     <v-btn small class="px-2 minwidth-0" color="grey darken-3" v-bind="attrs" v-on="on"><v-icon small>mdi-cog</v-icon></v-btn>
                 </template>
                 <v-list>
                     <v-list-item class="minHeight36">
-                        <v-checkbox class="mt-0" v-model="hideWaitTemperatures" hide-details label="Hide temperatures"></v-checkbox>
+                        <v-checkbox class="mt-0" v-model="hideWaitTemperatures" hide-details :label="$t('Dashboard.HideTemperatures')"></v-checkbox>
                     </v-list-item>
                     <v-list-item class="minHeight36">
-                        <v-checkbox class="mt-0" v-model="boolCustomFilters" hide-details label="Custom filters"></v-checkbox>
+                        <v-checkbox class="mt-0" v-model="boolCustomFilters" hide-details :label="$t('Dashboard.CustomFilters')"></v-checkbox>
                     </v-list-item>
                 </v-list>
             </v-menu>
@@ -45,7 +45,7 @@
                 <v-row>
                     <v-col>
                         <v-text-field
-                            label="Send code..."
+                            :label="$t('Dashboard.SendCode')"
                             ref="gcodeCommandField"
                             solo
                             hide-details
@@ -60,7 +60,7 @@
                     </v-col>
                     <v-col class="col-auto align-content-center">
                         <v-btn color="info" class="gcode-command-btn" @click="doSend" :loading="loadings.includes('sendGcode')" :disabled="loadings.includes('sendGcode')" >
-                            <v-icon class="mr-2">mdi-send</v-icon> send
+                            <v-icon class="mr-2">mdi-send</v-icon> {{ $t("Dashboard.Send") }}
                         </v-btn>
                     </v-col>
                 </v-row>
@@ -81,7 +81,7 @@
                 sort-by="date"
             >
                 <template #no-data>
-                    <div class="py-2">empty</div>
+                    <div class="py-2">{{ $t("Dashboard.Empty") }}</div>
                 </template>
 
                 <template #item="{ item }">

src/components/panels/MiscellaneousPanel.vue

@@ -20,7 +20,7 @@
         <v-card class="mt-6" v-if="['printing', 'paused'].includes(printer_state)">
             <v-toolbar flat dense >
                 <v-toolbar-title>
-                    <span class="subheading"><v-icon class="mdi mdi-printer-3d" left></v-icon>Print Settings</span>
+                    <span class="subheading"><v-icon class="mdi mdi-printer-3d" left></v-icon>{{ $t("Dashboard.PrintSettings") }}</span>
                 </v-toolbar-title>
             </v-toolbar>
             <tool-slider label="Speed factor" :target="speed_factor" :max="200" :multi="100" :step="5" command="M220" attribute-name="S" ></tool-slider>
@@ -30,7 +30,7 @@
         <v-card class="mt-6" v-if="this['printer/getMiscellaneous'].length">
             <v-toolbar flat dense >
                 <v-toolbar-title>
-                    <span class="subheading"><v-icon left>mdi-dip-switch</v-icon>Miscellaneous</span>
+                    <span class="subheading"><v-icon left>mdi-dip-switch</v-icon>{{ $t("Dashboard.Miscellaneous") }}</span>
                 </v-toolbar-title>
             </v-toolbar>
             <div v-for="(object, index) of this['printer/getMiscellaneous']" v-bind:key="index">

src/components/panels/MoonrakerFailedPluginsPanel.vue

@@ -4,15 +4,15 @@
         <v-toolbar flat dense color="orange darken-2">
             <v-toolbar-title>
                 <span class="subheading">
-                    <v-icon class="mdi mdi-alert-circle" left></v-icon>Moonraker Failed Plugins
+                    <v-icon class="mdi mdi-alert-circle" left></v-icon>{{ $t("Dashboard.MoonrakerFailedPlugins") }}
                 </span>
             </v-toolbar-title>
         </v-toolbar>
         <v-card-text class="px-0 pt-0 pb-2 content">
             <v-layout wrap class=" text-center">
                 <v-flex col class="text-left">
-                    <p class="orange--text">An error was detected while loading the moonraker plugins. Please check the logfile and fix the issue.</p>
-                    <p class="mb-2 orange--text">Following plugin has an error:</p>
+                    <p class="orange--text">{{ $t("Dashboard.MoonrakerErrorInfo") }}</p>
+                    <p class="mb-2 orange--text">{{ $t("Dashboard.FollowingPluginHasAnError") }}</p>
                     <ul class="mt-0 pt-0">
                         <li v-for="plugin in failedPlugins" v-bind:key="plugin" class="orange--text"><code>{{ plugin }}</code></li>
                     </ul>
@@ -21,7 +21,7 @@
         </v-card-text>
         <v-divider class="my-2"></v-divider>
         <v-card-text class="px-4 pt-2 pb-4 content text-center text-lg-left">
-            <v-btn small :href="'//'+hostname+':'+port+'/server/files/moonraker.log'" color="primary" class=""><v-icon class="mr-2">mdi-download</v-icon>Download Log</v-btn>
+            <v-btn small :href="'//'+hostname+':'+port+'/server/files/moonraker.log'" color="primary" class=""><v-icon class="mr-2">mdi-download</v-icon>{{ $t("Dashboard.DownloadLog") }}</v-btn>
         </v-card-text>
     </v-card>
 </template>

src/components/panels/Settings/ConfigFilesPanel.vue

@@ -29,7 +29,7 @@
         <v-col>
             <v-card>
                 <v-card-title>
-                    Config Files
+                    {{ $t('Setting.ConfigFiles') }}
                     <v-spacer class="d-none d-sm-block"></v-spacer>
                     <input type="file" ref="fileUpload" style="display: none" multiple @change="uploadFile" />
                     <v-item-group class="v-btn-toggle my-5 my-sm-0 col-12 col-sm-auto px-0 py-0">
@@ -43,13 +43,13 @@
                             </template>
                             <v-list>
                                 <v-list-item class="minHeight36">
-                                    <v-checkbox class="mt-0" hide-details v-model="showHiddenFiles" label="Hidden files"></v-checkbox>
+                                    <v-checkbox class="mt-0" hide-details v-model="showHiddenFiles" :label="$t('Setting.HiddenFiles')"></v-checkbox>
                                 </v-list-item>
                             </v-list>
                         </v-menu>
                     </v-item-group>
                 </v-card-title>
-                <v-card-subtitle>Current path: {{ this.currentPath === "" ? "/" : this.currentPath }}</v-card-subtitle>
+                <v-card-subtitle>{{ $t('Setting.CurrentPath') }} {{ this.currentPath === "" ? "/" : this.currentPath }}</v-card-subtitle>
                 <v-data-table
                     :items="files"
                     class="files-table"
@@ -61,13 +61,13 @@
                     :sort-desc.sync="sortDesc"
                     :items-per-page.sync="countPerPage"
                     :footer-props="{
-                        itemsPerPageText: 'Files'
+                        itemsPerPageText:  $t('Setting.Files') 
                     }"
                     mobile-breakpoint="0"
                     item-key="name">
 
                     <template #no-data>
-                        <div class="text-center">empty</div>
+                        <div class="text-center">{{ $t('Setting.Empty')  }}</div>
                     </template>
 
                     <template slot="body.prepend" v-if="(currentPath !== '')">
@@ -99,26 +99,26 @@
             <v-menu v-model="contextMenu.shown" :position-x="contextMenu.x" :position-y="contextMenu.y" absolute offset-y>
                 <v-list>
                     <v-list-item @click="clickRow(contextMenu.item)" v-if="!contextMenu.item.isDirectory">
-                        <v-icon class="mr-1">mdi-file-document-edit-outline</v-icon> Edit file
+                        <v-icon class="mr-1">mdi-file-document-edit-outline</v-icon>  {{ $t('Setting.EditFile') }}
                     </v-list-item>
                     <v-list-item @click="downloadFile" v-if="!contextMenu.item.isDirectory">
-                        <v-icon class="mr-1">mdi-cloud-download</v-icon> Download
+                        <v-icon class="mr-1">mdi-cloud-download</v-icon> {{ $t('Setting.Download') }}
                     </v-list-item>
                     <v-list-item @click="renameFile(contextMenu.item)" v-if="!contextMenu.item.isDirectory && currentPath !== '/config_examples'">
-                        <v-icon class="mr-1">mdi-rename-box</v-icon> Rename
+                        <v-icon class="mr-1">mdi-rename-box</v-icon> {{ $t('Setting.Rename') }}
                     </v-list-item>
                     <v-list-item @click="removeFile" v-if="!contextMenu.item.isDirectory && currentPath !== '/config_examples'">
-                        <v-icon class="mr-1">mdi-delete</v-icon> Delete
+                        <v-icon class="mr-1">mdi-delete</v-icon> {{ $t('Setting.Delete') }}
                     </v-list-item>
                     <v-list-item @click="deleteDirectoryAction" v-if="contextMenu.item.isDirectory && currentPath !== '' && currentPath !== '/config_examples'">
-                        <v-icon class="mr-1">mdi-delete</v-icon> Delete
+                        <v-icon class="mr-1">mdi-delete</v-icon> {{ $t('Setting.Delete') }}
                     </v-list-item>
                 </v-list>
             </v-menu>
             <v-dialog v-model="editor.showLoader" hide-overlay persistent width="300" >
                 <v-card color="primary" dark >
                     <v-card-text>
-                        Please stand by
+                        {{ $t('Setting.PleaseStandBy') }}
                         <v-progress-linear indeterminate color="white" class="mb-0" ></v-progress-linear>
                     </v-card-text>
                 </v-card>
@@ -132,11 +132,11 @@
                         <v-toolbar-title>{{ editor.item.filename }}</v-toolbar-title>
                         <v-spacer></v-spacer>
                         <v-toolbar-items>
-                            <v-btn dark text href="https://www.klipper3d.org/Config_Reference.html" target="_blank" class="d-none d-md-flex"><v-icon small class="mr-1">mdi-help</v-icon>Config Reference</v-btn>
+                            <v-btn dark text href="https://www.klipper3d.org/Config_Reference.html" target="_blank" class="d-none d-md-flex"><v-icon small class="mr-1">mdi-help</v-icon>{{ $t('Setting.ConfigReference') }}</v-btn>
                             <v-divider white vertical v-if="currentPath !== '/config_examples'" class="d-none d-md-flex"></v-divider>
-                            <v-btn dark text @click="saveFile(false)" v-if="currentPath !== '/config_examples'"><v-icon small class="mr-1">mdi-content-save</v-icon><span class="d-none d-sm-inline">Save</span></v-btn>
+                            <v-btn dark text @click="saveFile(false)" v-if="currentPath !== '/config_examples'"><v-icon small class="mr-1">mdi-content-save</v-icon><span class="d-none d-sm-inline">{{ $t('Setting.Save') }}</span></v-btn>
                             <v-divider white vertical v-if="currentPath !== '/config_examples' && !['printing', 'paused'].includes(printer_state)" class="d-none d-sm-flex"></v-divider>
-                            <v-btn dark text @click="saveFile(true)" v-if="currentPath !== '/config_examples' && !['printing', 'paused'].includes(printer_state)" class="d-none d-sm-flex"><v-icon small class="mr-1">mdi-restart</v-icon>Save & restart</v-btn>
+                            <v-btn dark text @click="saveFile(true)" v-if="currentPath !== '/config_examples' && !['printing', 'paused'].includes(printer_state)" class="d-none d-sm-flex"><v-icon small class="mr-1">mdi-restart</v-icon>{{ $t('Setting.SaveRestart') }}</v-btn>
                         </v-toolbar-items>
                     </v-toolbar>
                     <prism-editor class="my-editor" v-model="editor.sourcecode" :readonly="editor.readonly" :highlight="highlighter" line-numbers></prism-editor>
@@ -144,40 +144,40 @@
             </v-dialog>
             <v-dialog v-model="dialogRenameFile.show" max-width="400">
                 <v-card>
-                    <v-card-title class="headline">Rename File</v-card-title>
+                    <v-card-title class="headline">{{ $t('Setting.RenameFile') }}</v-card-title>
                     <v-card-text>
-                        <v-text-field label="Name" required v-model="dialogRenameFile.newName"></v-text-field>
+                        <v-text-field  :label="$t('Setting.Name')" required v-model="dialogRenameFile.newName"></v-text-field>
                     </v-card-text>
                     <v-card-actions>
                         <v-spacer></v-spacer>
-                        <v-btn color="" text @click="dialogRenameFile.show = false">Cancel</v-btn>
-                        <v-btn color="primary" text @click="renameFileAction">rename</v-btn>
+                        <v-btn color="" text @click="dialogRenameFile.show = false">{{ $t('Setting.Cancel') }}</v-btn>
+                        <v-btn color="primary" text @click="renameFileAction">{{ $t('Setting.Rename') }}</v-btn>
                     </v-card-actions>
                 </v-card>
             </v-dialog>
             <v-dialog v-model="dialogCreateFile.show" max-width="400">
                 <v-card>
-                    <v-card-title class="headline">Create File</v-card-title>
+                    <v-card-title class="headline">{{ $t('Setting.CreateFile') }}</v-card-title>
                     <v-card-text>
-                        <v-text-field label="Name" required v-model="dialogCreateFile.name"></v-text-field>
+                        <v-text-field  :label="$t('Setting.Name')" required v-model="dialogCreateFile.name"></v-text-field>
                     </v-card-text>
                     <v-card-actions>
                         <v-spacer></v-spacer>
-                        <v-btn color="" text @click="dialogCreateFile.show = false">Cancel</v-btn>
-                        <v-btn color="primary" text @click="createFileAction">create</v-btn>
+                        <v-btn color="" text @click="dialogCreateFile.show = false">{{ $t('Setting.Cancel') }}</v-btn>
+                        <v-btn color="primary" text @click="createFileAction">{{ $t('Setting.Create') }}</v-btn>
                     </v-card-actions>
                 </v-card>
             </v-dialog>
             <v-dialog v-model="dialogCreateFolder.show" max-width="400">
                 <v-card>
-                    <v-card-title class="headline">Create Folder</v-card-title>
+                    <v-card-title class="headline">{{ $t('Setting.CreateFolder') }}</v-card-title>
                     <v-card-text>
-                        <v-text-field label="Name" required v-model="dialogCreateFolder.name"></v-text-field>
+                        <v-text-field :label="$t('Setting.Name')" required v-model="dialogCreateFolder.name"></v-text-field>
                     </v-card-text>
                     <v-card-actions>
                         <v-spacer></v-spacer>
-                        <v-btn color="" text @click="dialogCreateFolder.show = false">Cancel</v-btn>
-                        <v-btn color="primary" text @click="createFolderAction">create</v-btn>
+                        <v-btn color="" text @click="dialogCreateFolder.show = false">{{ $t('Setting.Cancel') }}</v-btn>
+                        <v-btn color="primary" text @click="createFolderAction">{{ $t('Setting.Create') }}</v-btn>
                     </v-card-actions>
                 </v-card>
             </v-dialog>
@@ -190,7 +190,7 @@
                 dark
                 v-model="uploadSnackbar.status"
             >
-                <span v-if="uploadSnackbar.max > 1" class="mr-1">({{ uploadSnackbar.number }}/{{ uploadSnackbar.max }})</span><strong>Uploading {{ uploadSnackbar.filename }}</strong><br />
+                <span v-if="uploadSnackbar.max > 1" class="mr-1">({{ uploadSnackbar.number }}/{{ uploadSnackbar.max }})</span><strong>{{ $t('Setting.Uploading') }} {{ uploadSnackbar.filename }}</strong><br />
                 {{ Math.round(uploadSnackbar.percent) }} % @ {{ formatFilesize(Math.round(uploadSnackbar.speed)) }}/s<br />
                 <v-progress-linear class="mt-2" :value="uploadSnackbar.percent"></v-progress-linear>
                 <template v-slot:action="{ attrs }">
@@ -234,9 +234,9 @@
                 selected: [],
                 headers: [
                     { text: '', value: '', },
-                    { text: 'Name', value: 'filename', },
-                    { text: 'Filesize', value: 'size', align: 'right', },
-                    { text: 'Last modified', value: 'modified', align: 'right', },
+                    { text: this.$t('Setting.Name'), value: 'filename', },
+                    { text: this.$t('Setting.Filesize'), value: 'size', align: 'right', },
+                    { text: this.$t('Setting.LastModified'), value: 'modified', align: 'right', },
                 ],
                 options: {
                 },

src/components/panels/Settings/ConsolePanel.vue

@@ -6,26 +6,26 @@
     <v-card>
         <v-toolbar flat dense >
             <v-toolbar-title>
-                <span class="subheading"><v-icon left>mdi-console-line</v-icon>Console</span>
+                <span class="subheading"><v-icon left>mdi-console-line</v-icon>{{ $t('Setting.Console') }}</span>
             </v-toolbar-title>
         </v-toolbar>
         <v-card-text class="py-3">
             <v-container px-0 py-0>
                 <v-row>
                     <v-col class="py-2">
-                        <v-switch v-model="hideWaitTemperatures" label="Hide temperatures" hide-details class="mt-0"></v-switch>
+                        <v-switch v-model="hideWaitTemperatures" :label="$t('Setting.HideTemperatures')" hide-details class="mt-0"></v-switch>
                     </v-col>
                 </v-row>
                 <v-row>
                     <v-col class="py-2">
-                        <v-switch v-model="boolCustomFilters" label="Custom filter" hide-details class="mt-0"></v-switch>
+                        <v-switch v-model="boolCustomFilters" :label="$t('Setting.CustomFilter')" hide-details class="mt-0"></v-switch>
                     </v-col>
                 </v-row>
                 <v-row v-if="boolCustomFilters">
                     <v-col class="py-2">
                         <v-textarea
                             outlined
-                            label="Rules"
+                            :label="$t('Setting.Rules')"
                             v-model="customFilters"
                             hide-details
                             class="mb-2"

src/components/panels/Settings/ControlPanel.vue

@@ -1,137 +1,31 @@
 <style>
-
+    .webcamImage {
+        width: 100%;
+    }
 </style>
 
 <template>
-    <v-form ref="formControlExtruder">
-        <v-card>
-            <v-toolbar flat dense >
-                <v-toolbar-title>
-                    <span class="subheading"><v-icon left>mdi-tune</v-icon>Control</span>
-                </v-toolbar-title>
-            </v-toolbar>
-            <v-card-text class="pa-0">
-                <v-container>
-                    <v-row>
-                        <v-col col-6>
-                            <v-text-field
-                                label="Speed XY"
-                                v-model="feedrateXY"
-                                @blur="blurFeedrateXY"
-                                type="number"
-                                suffix="mm/s"
-                                hide-details="auto"
-                                :rules="[
-                                    v => v > 0 || 'Minimum speed is 1'
-                                ]"
-                            ></v-text-field>
-                        </v-col>
-                        <v-col col-6>
-                            <v-text-field
-                                label="Speed Z"
-                                v-model="feedrateZ"
-                                @blur="blurFeedrateZ"
-                                type="number"
-                                suffix="mm/s"
-                                hide-details="auto"
-                                ref="feedrateZ"
-                                :rules="[
-                                    v => v > 1 || 'Minimum speed is 1'
-                                ]"
-                            ></v-text-field>
-                        </v-col>
-                    </v-row>
-                    <v-row>
-                        <v-col>
-                            <v-combobox
-                                label="Move distances XY in mm"
-                                v-model="stepsXY"
-                                hide-selected
-                                hide-details="auto"
-                                multiple
-                                small-chips
-                                :deletable-chips="true"
-                                append-icon=""
-                                type="number"
-                                :rules="[
-                                    v => v.length > 0 || 'Minimum 1 value',
-                                    v => v.length < 4 || 'For narrow screens it is recommended to enter max. 3 values.',
-                                ]"
-                            ></v-combobox>
-                        </v-col>
-                    </v-row>
-                    <v-row>
-                        <v-col>
-                            <v-combobox
-                                label="Move distances Z in mm"
-                                v-model="stepsZ"
-                                hide-selected
-                                hide-details="auto"
-                                multiple
-                                small-chips
-                                :deletable-chips="true"
-                                append-icon=""
-                                type="number"
-                                :rules="[
-                                    v => v.length > 0 || 'Minimum 1 value',
-                                    v => v.length < 4 || 'For narrow screens it is recommended to enter max. 3 values.',
-                                ]"
-                            ></v-combobox>
-                        </v-col>
-                    </v-row>
-                </v-container>
-            </v-card-text>
-        </v-card>
-        <v-card class="mt-6">
-            <v-toolbar flat dense >
-                <v-toolbar-title>
-                    <span class="subheading"><v-icon left>mdi-tune</v-icon>Extruder</span>
-                </v-toolbar-title>
-            </v-toolbar>
-            <v-card-text class="pa-0">
-                <v-container>
-                    <v-row>
-                        <v-col>
-                            <v-combobox
-                                label="Move distances E in mm"
-                                v-model="feedamountsE"
-                                hide-selected
-                                hide-details="auto"
-                                multiple
-                                small-chips
-                                :deletable-chips="true"
-                                append-icon=""
-                                type="number"
-                                :rules="[
-                                    v => v.length > 0 || 'Minimum 1 value',
-                                    v => v.length < 6 || 'For narrow screens it is recommended to enter max. 5 values.',
-                                ]"
-                            ></v-combobox>
-                        </v-col>
-                    </v-row>
-                    <v-row>
-                        <v-col>
-                            <v-combobox
-                                label="Speed E in mm/s"
-                                v-model="feedratesE"
-                                hide-selected
-                                hide-details="auto"
-                                multiple
-                                small-chips
-                                :deletable-chips="true"
-                                append-icon=""
-                                type="number"
-                                :rules="[
-                                    v => v.length > 0 || 'Minimum 1 value',
-                                    v => v.length < 6 || 'For narrow screens it is recommended to enter max. 5 values.',
-                                ]"
-                            ></v-combobox>
-                        </v-col>
-                    </v-row>
-                </v-container>
-            </v-card-text>
-        </v-card>
-    </v-form>
+    <v-card>
+        <v-toolbar flat dense >
+            <v-toolbar-title>
+                <span class="subheading"><v-icon left>mdi-tune</v-icon>{{ $t('Setting.ControlExtruder') }}</span>
+            </v-toolbar-title>
+        </v-toolbar>
+        <v-card-text class="pt-2 pb-0">
+            <v-text-field
+                :label="$t('Setting.FeedrateXY')"
+                v-model="feedrateXY"
+                type="number"
+                suffix="mm/s"
+            ></v-text-field>
+            <v-text-field
+                :label="$t('Setting.FeedrateZ')"
+                v-model="feedrateZ"
+                type="number"
+                suffix="mm/s"
+            ></v-text-field>
+        </v-card-text>
+    </v-card>
 </template>
 
 <script>
@@ -149,19 +43,8 @@
                 get() {
                     return this.$store.state.gui.dashboard.control.feedrateXY
                 },
-                set(feedrate) {
-                    return this.$store.dispatch('gui/setSettings', { dashboard: { control: { feedrateXY: feedrate } } })
-                }
-            },
-            stepsXY: {
-                get() {
-                    const steps = this.$store.state.gui.dashboard.control.stepsXY
-                    return steps.sort(function (a,b) { return b-a })
-                },
-                set(steps) {
-                    const absSteps = []
-                    for(const value of steps) absSteps.push(Math.abs(value))
-                    return this.$store.dispatch('gui/setSettings', { dashboard: { control: { stepsXY: absSteps } } })
+                set(value) {
+                    return this.$store.dispatch('gui/setSettings', { dashboard: { control: { feedrateXY: value } } })
                 }
             },
             feedrateZ: {
@@ -172,50 +55,9 @@
                     return this.$store.dispatch('gui/setSettings', { dashboard: { control: { feedrateZ: value } } })
                 }
             },
-            stepsZ: {
-                get() {
-                    const steps = this.$store.state.gui.dashboard.control.stepsZ
-                    return steps.sort(function (a,b) { return b-a })
-                },
-                set(steps) {
-                    const absSteps = []
-                    for(const value of steps) absSteps.push(Math.abs(value))
-                    return this.$store.dispatch('gui/setSettings', { dashboard: { control: { stepsZ: absSteps } } })
-                }
-            },
-            feedamountsE: {
-                get() {
-                    const steps = this.$store.state.gui.dashboard.extruder.feedamounts
-                    return steps.sort(function (a,b) { return b-a })
-                },
-                set(amounts) {
-                    const absAmounts = []
-                    for(const value of amounts) absAmounts.push(Math.abs(value))
-                    return this.$store.dispatch('gui/setSettings', { dashboard: { extruder: { feedamounts: absAmounts } } })
-                }
-            },
-            feedratesE: {
-                get() {
-                    const steps = this.$store.state.gui.dashboard.extruder.feedrates
-                    return steps.sort(function (a,b) { return b-a })
-                },
-                set(rates) {
-                    const absRates = []
-                    for(const value of rates) absRates.push(Math.abs(value))
-                    return this.$store.dispatch('gui/setSettings', { dashboard: { extruder: { feedrates: absRates } } })
-                }
-            },
-        },
-        mounted() {
-            this.$refs.formControlExtruder.validate()
         },
         methods: {
-            blurFeedrateXY() {
-                if (!(this.feedrateXY > 0)) this.feedrateXY = 100
-            },
-            blurFeedrateZ() {
-                if (!(this.feedrateZ > 0)) this.feedrateZ = 25
-            }
+
         }
     }
 </script>

src/components/panels/Settings/DashboardPanel.vue

@@ -6,24 +6,24 @@
     <v-card>
         <v-toolbar flat dense >
             <v-toolbar-title>
-                <span class="subheading"><v-icon left>mdi-view-dashboard</v-icon>Dashboard</span>
+                <span class="subheading"><v-icon left>mdi-view-dashboard</v-icon>{{ $t('Setting.Dashboard') }}</span>
             </v-toolbar-title>
         </v-toolbar>
         <v-card-text>
             <v-container px-0 py-0>
                 <v-row>
                     <v-col class="py-2">
-                        <v-switch v-model="boolShowWebcamOnDashboard" label="Webcam" hide-details class="mt-0"></v-switch>
+                        <v-switch v-model="boolShowWebcamOnDashboard" :label="$t('Setting.Webcam')" hide-details class="mt-0"></v-switch>
                     </v-col>
                 </v-row>
                 <v-row>
                     <v-col class="py-2">
-                        <v-switch v-model="boolShowTempchartOnDashboard" label="Tempchart" hide-details class="mt-0"></v-switch>
+                        <v-switch v-model="boolShowTempchartOnDashboard" :label="$t('Setting.Tempchart')" hide-details class="mt-0"></v-switch>
                     </v-col>
                 </v-row>
                 <v-row>
                     <v-col class="py-2">
-                        <v-switch v-model="boolShowConsoleOnDashboard" label="Console" hide-details class="mt-0"></v-switch>
+                        <v-switch v-model="boolShowConsoleOnDashboard" :label="$t('Setting.Console')" hide-details class="mt-0"></v-switch>
                     </v-col>
                 </v-row>
             </v-container>

src/components/panels/Settings/EndstopPanel.vue

@@ -2,20 +2,20 @@
     <v-card>
         <v-toolbar flat dense >
             <v-toolbar-title>
-                <span class="subheading"><v-icon left>mdi-arrow-expand-vertical</v-icon>Endstops</span>
+                <span class="subheading"><v-icon left>mdi-arrow-expand-vertical</v-icon>{{ $t('Setting.Endstops')}}</span>
             </v-toolbar-title>
         </v-toolbar>
         <v-card-text class="pb-0">
             <v-container px-0 py-0>
                 <v-row v-for="(status, index) of sortEndstops" v-bind:key="index">
                     <v-col>
-                        <label class="mt-1 d-inline-block">Endstop <b>{{ index.toUpperCase() }}</b></label>
+                        <label class="mt-1 d-inline-block">{{ $t('Setting.Endstop')}} <b>{{ index.toUpperCase() }}</b></label>
                         <v-chip class="float-right" :color="status === 'open' ? 'green' : 'red' " text-color="white">{{ status }}</v-chip>
                     </v-col>
                 </v-row>
                 <v-row v-if="(Object.keys(endstops).length === 0 && endstops.constructor === Object)" >
                     <v-col>
-                        <p>Press the sync-button on the right-bottom to load the current endstop status.</p>
+                        <p>{{ $t('Setting.EndstopInfo')}}</p>
                     </v-col>
                 </v-row>
             </v-container>

src/components/panels/Settings/GeneralPanel.vue

@@ -8,13 +8,13 @@
     <v-card>
         <v-toolbar flat dense >
             <v-toolbar-title>
-                <span class="subheading"><v-icon left>mdi-cog</v-icon>General</span>
+                <span class="subheading"><v-icon left>mdi-cog</v-icon>{{ $t('Setting.General') }}</span>
             </v-toolbar-title>
         </v-toolbar>
         <v-card-text class="pt-2 pb-0">
             <v-text-field
                 v-model="printerName"
-                label="Printer Name"
+                :label="$t('Setting.PrinterName')"
             ></v-text-field>
         </v-card-text>
     </v-card>

src/components/panels/Settings/LanguagePanel.vue

@@ -0,0 +1,68 @@
+<style>
+    .webcamImage {
+        width: 100%;
+    }
+</style>
+
+<template>
+    <v-card>
+        <v-toolbar flat dense >
+            <v-toolbar-title>
+                <span class="subheading"><v-icon left>mdi-translate</v-icon>{{ $t('Setting.Language') }}</span>
+            </v-toolbar-title> 
+        </v-toolbar>
+        <v-card-text class="pt-2 pb-0">
+            <v-select
+            v-model="lang"
+            @change="changeLanguage"
+          :items="items"
+          :label="$t('Setting.Language')"
+        ></v-select>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script>
+    export default {
+        components: {
+
+        },
+        data: function() {
+            return {
+                items: [
+                    {
+                        text: "English",
+                        value: "en"
+                    },
+                    {
+                        text: "简体中文",
+                        value: "zh"
+                    }
+                ]
+            }
+        },
+        computed: {
+            lang: {
+                get() {
+                    return localStorage.getItem("lang")
+                },
+                set(newName){
+                    return localStorage.setItem("lang",newName)
+                }
+            },
+            printerName: {
+                get() {
+                    return this.$store.state.gui.general.printername;
+                },
+                set(newName) {
+                    return this.$store.dispatch('gui/setSettings', { general: { printername: newName } });
+                }
+            },
+        },
+        methods: {
+            changeLanguage(val){
+                this.$i18n.locale = this.lang = val
+            }
+        }
+    }
+</script>

src/components/panels/Settings/LimitsPanel.vue

@@ -2,16 +2,16 @@
     <v-card>
         <v-toolbar flat dense >
             <v-toolbar-title>
-                <span class="subheading"><v-icon left>mdi-speedometer</v-icon>Machine Limits</span>
+                <span class="subheading"><v-icon left>mdi-speedometer</v-icon>{{ $t('Setting.MachineLimits')}}</span>
             </v-toolbar-title>
         </v-toolbar>
-        <tool-slider label="Velocity" unit="mm/s" :target="current_velocity" :max="max_velocity" command="SET_VELOCITY_LIMIT" attribute-name="VELOCITY=" ></tool-slider>
+        <tool-slider :label="$t('Setting.Velocity')" unit="mm/s" :target="current_velocity" :max="max_velocity" command="SET_VELOCITY_LIMIT" attribute-name="VELOCITY=" ></tool-slider>
         <v-divider></v-divider>
-        <tool-slider label="Acceleration" unit="mm/s²" :target="current_accel" :max="max_accel" command="SET_VELOCITY_LIMIT" attribute-name="ACCEL=" ></tool-slider>
+        <tool-slider :label="$t('Setting.Acceleration')" unit="mm/s²" :target="current_accel" :max="max_accel" command="SET_VELOCITY_LIMIT" attribute-name="ACCEL=" ></tool-slider>
         <v-divider></v-divider>
-        <tool-slider label="Deceleration" unit="mm/s²" :target="current_accel_to_decel" :max="max_accel_to_decel" command="SET_VELOCITY_LIMIT" attribute-name="ACCEL_TO_DECEL=" ></tool-slider>
+        <tool-slider :label="$t('Setting.Deceleration')" unit="mm/s²" :target="current_accel_to_decel" :max="max_accel_to_decel" command="SET_VELOCITY_LIMIT" attribute-name="ACCEL_TO_DECEL=" ></tool-slider>
         <v-divider></v-divider>
-        <tool-slider label="Square corner velocity" unit="mm/s" :target="current_square_corner_velocity" :max="max_square_corner_velocity" command="SET_VELOCITY_LIMIT" attribute-name="SQUARE_CORNER_VELOCITY=" ></tool-slider>
+        <tool-slider :label="$t('Setting.SquareCornerVelocity')" unit="mm/s" :target="current_square_corner_velocity" :max="max_square_corner_velocity" command="SET_VELOCITY_LIMIT" attribute-name="SQUARE_CORNER_VELOCITY=" ></tool-slider>
     </v-card>
 </template>
 

src/components/panels/Settings/LogfilesPanel.vue

@@ -2,7 +2,7 @@
     <v-card>
         <v-toolbar flat dense >
             <v-toolbar-title>
-                <span class="subheading"><v-icon left>mdi-file-document-edit</v-icon>Logfiles</span>
+                <span class="subheading"><v-icon left>mdi-file-document-edit</v-icon>{{ $t("Setting.Logfiles")}}</span>
             </v-toolbar-title>
         </v-toolbar>
         <v-card-text :class="'text-center text-lg-left py-0'">

src/components/panels/Settings/MacrosPanel.vue

@@ -3,7 +3,7 @@
     <v-card>
         <v-toolbar flat dense >
             <v-toolbar-title>
-                <span class="subheading"><v-icon left>mdi-code-tags</v-icon>Macros</span>
+                <span class="subheading"><v-icon left>mdi-code-tags</v-icon>{{ $t('Setting.Macros') }}</span>
             </v-toolbar-title>
         </v-toolbar>
         <v-card-text class="py-3">

src/components/panels/Settings/PresetsPanel.vue

@@ -4,7 +4,7 @@
         <v-card>
             <v-toolbar flat dense >
                 <v-toolbar-title>
-                    <span class="subheading"><v-icon left>mdi-fire</v-icon>Preheat Presets</span>
+                    <span class="subheading"><v-icon left>mdi-fire</v-icon>{{ $t('Setting.PreheatPresets') }}</span>
                 </v-toolbar-title>
             </v-toolbar>
             <v-card-text class="py-3">
@@ -28,7 +28,7 @@
                         <v-col class="rounded transition-swing secondary py-2 px-2 mb-6" style="cursor: pointer;">
                             <v-row align="center">
                                 <v-col class="pl-6">
-                                    <strong>Cooldown</strong>
+                                    <strong>{{ $t('Setting.Cooldown')}}</strong>
                                 </v-col>
                                 <v-col class="col-auto text-right"><v-btn small class="minwidth-0 float-right" v-on:click.stop.prevent="editCooldown"><v-icon small>mdi-pencil</v-icon></v-btn></v-col>
                             </v-row>
@@ -36,7 +36,7 @@
                     </v-row>
                     <v-row>
                         <v-col class="text-center mt-0">
-                            <v-btn @click="createPreset">add preset</v-btn>
+                            <v-btn @click="createPreset">{{ $t('Setting.AddPreset')}}</v-btn>
                         </v-col>
                     </v-row>
                 </v-container>
@@ -48,7 +48,7 @@
                     <v-toolbar-title>
                     <span class="subheading">
                         <v-icon class="mdi mdi-fire" left></v-icon>
-                        {{ dialog.index === null ? "Create" : "Edit" }} Preset
+                        {{ dialog.index === null ? $t('Setting.Create') : $t('Setting.Edit') }} {{ $t('Setting.Preset') }}
                     </span>
                     </v-toolbar-title>
                     <v-spacer></v-spacer>
@@ -67,7 +67,7 @@
                                             <v-col class="col-12">
                                                 <v-text-field
                                                     v-model="dialog.name"
-                                                    label="Name"
+                                                    :label="$t('Setting.Name')"
                                                     hide-details="auto"
                                                     :rules="[rules.required, rules.unique]"
                                                     dense
@@ -107,7 +107,7 @@
                                         <v-textarea
                                             outlined
                                             name="input-7-4"
-                                            label="Custom G-Code"
+                                            :label="$t('Setting.CustomGCode')"
                                             v-model="dialog.gcode"
                                             hide-details="auto"
                                         ></v-textarea>
@@ -115,7 +115,7 @@
                                 </v-row>
                                 <v-row class="mt-3" v-if="dialog.boolInvalidMin">
                                     <v-col class="py-0">
-                                        <v-alert dense text type="error">You have to set minimum a target temperature or a custom gcode.</v-alert>
+                                        <v-alert dense text type="error">{{ $t('Setting.PresetInfo')}}</v-alert>
                                     </v-col>
                                 </v-row>
                                 <v-row class="mt-3">
@@ -135,7 +135,7 @@
                                             :class="dialog.index !== null ? 'float-right' : '' "
                                             type="submit"
                                         >
-                                            {{ dialog.index === null ? "store" : "update" }} preset
+                                            {{ dialog.index === null ? $t('Setting.Store') : $t('Setting.Update') }} {{ $t('Setting.Preset') }}
                                         </v-btn>
                                     </v-col>
                                 </v-row>
@@ -150,7 +150,7 @@
                 <v-toolbar flat dense color="primary">
                     <v-toolbar-title>
                     <span class="subheading">
-                        <v-icon class="mdi mdi-fire" left></v-icon> Edit Cooldown
+                        <v-icon class="mdi mdi-fire" left></v-icon> {{ $t('Setting.EditCooldown')}}
                     </span>
                     </v-toolbar-title>
                     <v-spacer></v-spacer>
@@ -167,7 +167,7 @@
                                     <v-textarea
                                         outlined
                                         name="input-7-4"
-                                        label="Custom G-Code"
+                                        :label="$t('Setting.CustomGCode')"
                                         v-model="cooldownDialog.gcode"
                                         :rules="[rules.required]"
                                     ></v-textarea>
@@ -180,7 +180,7 @@
                                         outlined
                                         type="submit"
                                     >
-                                        update cooldown
+                                        {{ $t('Setting.UpdateCooldown')}}
                                     </v-btn>
                                 </v-col>
                             </v-row>

src/components/panels/Settings/RemotePrintersPanel.vue

@@ -4,7 +4,7 @@
         <v-card>
             <v-toolbar flat dense >
                 <v-toolbar-title>
-                    <span class="subheading"><v-icon left>mdi-printer-3d</v-icon>Remote Printers</span>
+                    <span class="subheading"><v-icon left>mdi-printer-3d</v-icon>{{ $t('Setting.RemotePrinters') }}</span>
                 </v-toolbar-title>
             </v-toolbar>
             <v-card-text class="py-3">
@@ -30,7 +30,7 @@
                     </v-row>
                     <v-row>
                         <v-col class="text-center mt-0">
-                            <v-btn @click="dialogAddPrinter.bool = true">add printer</v-btn>
+                            <v-btn @click="dialogAddPrinter.bool = true">{{ $t('Setting.AddPrinter')}}</v-btn>
                         </v-col>
                     </v-row>
                 </v-container>
@@ -42,7 +42,7 @@
                     <v-toolbar-title>
                     <span class="subheading">
                         <v-icon class="mdi mdi-connection" left></v-icon>
-                        Add Printer
+                        {{ $t('Setting.AddPrinter')}}
                     </span>
                     </v-toolbar-title>
                     <v-spacer></v-spacer>
@@ -80,7 +80,7 @@
                                     class="middle"
                                     @click="addPrinter"
                                 >
-                                    add printer
+                                    {{ $t('Setting.AddPrinter')}}
                                 </v-btn>
                             </v-col>
                         </v-row>
@@ -128,7 +128,7 @@
                                     class="middle"
                                     @click="addPrinter"
                                 >
-                                    add printer
+                                    {{ $t('Setting.AddPrinter')}}
                                 </v-btn>
                             </v-col>
                         </v-row>
@@ -142,7 +142,7 @@
                     <v-toolbar-title>
                     <span class="subheading">
                         <v-icon class="mdi mdi-connection" left></v-icon>
-                        Edit Printer
+                        {{ $t('Setting.EditPrinter')}}
                     </span>
                     </v-toolbar-title>
                     <v-spacer></v-spacer>
@@ -190,7 +190,7 @@
                                     class="middle"
                                     @click="updatePrinter"
                                 >
-                                    update printer
+                                    {{ $t('Setting.UpdatePrinter')}}
                                 </v-btn>
                             </v-col>
                         </v-row>
@@ -248,7 +248,7 @@
                                     class="middle"
                                     @click="updatePrinter"
                                 >
-                                    update printer
+                                    {{ $t('Setting.UpdatePrinter')}}
                                 </v-btn>
                             </v-col>
                         </v-row>

src/components/panels/Settings/RunoutPanel.vue

@@ -10,7 +10,7 @@
                     <v-switch v-model="runout.enabled" hide-details @change="changeSensor(runout)" class="settingsRunoutSwitchInput my-0"></v-switch>
                 </v-toolbar>
                 <v-card-text v-if="runout.enabled">
-                    <v-chip label block :color="runout.filament_detected ? 'green' : 'red' " class="d-block text-center">{{ runout.filament_detected ? 'detected' : 'empty' }}</v-chip>
+                    <v-chip label block :color="runout.filament_detected ? 'green' : 'red' " class="d-block text-center">{{ runout.filament_detected ? $t('Setting.detected') : $t('Setting.Empty') }}</v-chip>
                 </v-card-text>
             </v-card>
         </div>

src/components/panels/Settings/UpdatePanel.vue

@@ -2,14 +2,14 @@
     <v-card>
         <v-toolbar flat dense >
             <v-toolbar-title>
-                <span class="subheading"><v-icon left>mdi-update</v-icon>Update Manager</span>
+                <span class="subheading"><v-icon left>mdi-update</v-icon>{{ $t('Setting.UpdateManager')}}</span>
             </v-toolbar-title>
             <v-spacer></v-spacer>
             <v-tooltip top>
                 <template v-slot:activator="{ on, attrs }">
                     <v-btn small class="px-2 minwidth-0" color="primary" :loading="loadings.includes('loadingBtnSyncUpdateManager')" :disabled="['printing', 'paused'].includes(printer_state)" @click="btnSync" v-bind="attrs" v-on="on"><v-icon small>mdi-refresh</v-icon></v-btn>
                 </template>
-                <span>Check for updates</span>
+                <span>{{ $t('Setting.CheckForUpdates')}}</span>
             </v-tooltip>
         </v-toolbar>
         <v-card-text class="px-0 py-0">
@@ -39,14 +39,14 @@
                     <v-divider class="my-0 border-top-2" ></v-divider>
                     <v-row class="pt-2">
                         <v-col class="col-auto pl-6 text-no-wrap">
-                            <strong>System</strong><br />
+                            <strong>{{ $t('Setting.System')}}</strong><br />
                             <v-tooltip top v-if="version_info.system.package_count > 0" :max-width="300">
                                 <template v-slot:activator="{ on, attrs }">
-                                    <span v-bind="attrs" v-on="on">{{ version_info.system.package_count }} packages can be upgraded</span>
+                                    <span v-bind="attrs" v-on="on">{{ version_info.system.package_count }} {{ $t('Setting.PackagesCanBeUpgraded')}}</span>
                                 </template>
                                 <span>{{ version_info.system.package_list.join(', ') }}</span>
                             </v-tooltip>
-                            <span v-if="version_info.system.package_count === 0">OS-Packages</span>
+                            <span v-if="version_info.system.package_count === 0">{{ $t('Setting.OSPackages')}}</span>
                         </v-col>
                         <v-col class="pr-6 text-right" align-self="center">
                             <v-chip

src/components/panels/Settings/WebcamPanel.vue

@@ -6,7 +6,7 @@
     <v-card>
         <v-toolbar flat dense >
             <v-toolbar-title>
-                <span class="subheading"><v-icon left>mdi-webcam</v-icon>Webcam</span>
+                <span class="subheading"><v-icon left>mdi-webcam</v-icon>{{ $t('Setting.Webcam') }}</span>
             </v-toolbar-title>
         </v-toolbar>
         <v-card-text>
@@ -16,13 +16,13 @@
                         <v-text-field
                             v-model="webcamUrl"
                             hide-details
-                            label="Webcam URL"
+                            :label="$t('Setting.WebcamURL')"
                         ></v-text-field>
                     </v-col>
                 </v-row>
                 <v-row v-if="rotationEnabled">
                     <v-col class="py-2" col-auto>
-                        <v-switch v-model="rotate" hide-details label="Rotate" class="mt-0"></v-switch>
+                        <v-switch v-model="rotate" hide-details :label="$t('Setting.Rotate')" class="mt-0"></v-switch>
                     </v-col>
                     <v-col>
                         <v-select :items="[{ text: '90 degrees', value: 90 }, { text: '270 degrees', value: 270 }]" v-model="rotateDegrees" hide-details></v-select>
@@ -30,17 +30,17 @@
                 </v-row>
                 <v-row>
                     <v-col class="py-2">
-                        <v-switch v-model="flipX" hide-details label="Flip webcam horizontally" class="mt-0"></v-switch>
+                        <v-switch v-model="flipX" hide-details :label="$t('Setting.FlipWebcamHorizontally')" class="mt-0"></v-switch>
                     </v-col>
                 </v-row>
                 <v-row>
                     <v-col class="py-2">
-                        <v-switch v-model="flipY" hide-details label="Flip webcam vertically" class="mt-0"></v-switch>
+                        <v-switch v-model="flipY" hide-details :label="$t('Setting.FlipWebcamVertically')" class="mt-0"></v-switch>
                     </v-col>
                 </v-row>
                 <v-row>
                     <v-col class="py-2">
-                        <v-switch v-model="boolNavi" hide-details label="Show in navigation" class="mt-0"></v-switch>
+                        <v-switch v-model="boolNavi" hide-details :label="$t('Setting.ShowInNavigation')" class="mt-0"></v-switch>
                     </v-col>
                 </v-row>
             </v-container>

src/components/panels/Settings/index.js

@@ -14,6 +14,7 @@ import LogfilesPanel from "./LogfilesPanel";
 import UpdatePanel from "./UpdatePanel";
 import RemotePrintersPanel from "./RemotePrintersPanel";
 import PresetsPanel from "./PresetsPanel";
+import LanguagePanel from "./LanguagePanel";
 
 Vue.component('settings-general-panel', GeneralPanel);
 Vue.component('settings-control-panel', ControlPanel);
@@ -29,6 +30,7 @@ Vue.component('settings-config-files-panel', ConfigFilesPanel);
 Vue.component('settings-update-panel', UpdatePanel);
 Vue.component('settings-remote-printers-panel', RemotePrintersPanel);
 Vue.component('settings-presets-panel', PresetsPanel);
+Vue.component('settings-language-panel', LanguagePanel);
 
 export default {
 

src/components/panels/StatusPanel.vue

@@ -17,7 +17,7 @@
         <v-toolbar flat dense>
             <v-toolbar-title>
                 <span class="subheading align-baseline">
-                    <v-icon left>mdi-information</v-icon>{{ (printer_state !== "" ? printer_state.charAt(0).toUpperCase() + printer_state.slice(1) : "Unknown") }}
+                    <v-icon left>mdi-information</v-icon>{{ (printer_state !== "" ? printer_state.charAt(0).toUpperCase() + printer_state.slice(1) : $t("Dashboard.Unknown")) }}
                 </span>
             </v-toolbar-title>
             <v-spacer></v-spacer>
@@ -27,7 +27,7 @@
                         <template v-slot:activator="{ on, attrs }">
                             <v-icon v-bind="attrs" v-on="on" small>mdi-pause</v-icon>
                         </template>
-                        <span>Pause print</span>
+                        <span>{{ $t("Dashboard.PausePrint") }}</span>
                     </v-tooltip>
                 </v-btn>
                 <v-btn small class="px-2 minwidth-0" color="red" v-if="(printer_state === 'paused')" :loading="loadings.includes('statusPrintCancel')" @click="btnCancelJob">
@@ -35,7 +35,7 @@
                         <template v-slot:activator="{ on, attrs }">
                             <v-icon v-bind="attrs" v-on="on" small>mdi-stop</v-icon>
                         </template>
-                        <span>Cancel print</span>
+                        <span>{{ $t("Dashboard.CancelPrint") }}</span>
                     </v-tooltip>
                 </v-btn>
                 <v-btn small class="px-2 minwidth-0" color="orange" v-if="(printer_state === 'paused')" :loading="loadings.includes('statusPrintResume')" @click="btnResumeJob">
@@ -43,7 +43,7 @@
                         <template v-slot:activator="{ on, attrs }">
                             <v-icon v-bind="attrs" v-on="on" small>mdi-play</v-icon>
                         </template>
-                        <span>Resume print</span>
+                        <span>{{ $t("Dashboard.ResumePrint") }}</span>
                     </v-tooltip>
                 </v-btn>
                 <v-btn small class="px-2 minwidth-0" color="primary" v-if="['error', 'complete'].includes(printer_state)" :loading="loadings.includes('statusPrintClear')" @click="btnClearJob">
@@ -51,7 +51,7 @@
                         <template v-slot:activator="{ on, attrs }">
                             <v-icon v-bind="attrs" v-on="on" small>mdi-broom</v-icon>
                         </template>
-                        <span>Clear print stats</span>
+                        <span>{{ $t("Dashboard.ClearPrintStats") }}</span>
                     </v-tooltip>
                 </v-btn>
                 <v-btn small class="px-2 minwidth-0" color="primary" v-if="['error', 'complete'].includes(printer_state)" :loading="loadings.includes('statusPrintReprint')" @click="btnReprintJob">
@@ -59,7 +59,7 @@
                         <template v-slot:activator="{ on, attrs }">
                             <v-icon v-bind="attrs" v-on="on" small>mdi-printer</v-icon>
                         </template>
-                        <span>Reprint job</span>
+                        <span>{{ $t("Dashboard.ReprintJob") }}</span>
                     </v-tooltip>
                 </v-btn>
             </v-item-group>
@@ -145,7 +145,7 @@
                                 <v-icon>mdi-poll</v-icon>
                             </v-col>
                             <v-col class="equal-width py-2">
-                                <v-row><v-col class="px-0 pb-1"><strong>Filament</strong></v-col></v-row>
+                                <v-row><v-col class="px-0 pb-1"><strong>{{ $t("Dashboard.Filament") }}</strong></v-col></v-row>
                                 <v-row>
                                     <v-col class="px-0 pt-1">
                                         <v-tooltip top>
@@ -159,11 +159,11 @@
                                 </v-row>
                             </v-col>
                             <v-col class="equal-width py-2">
-                                <v-row><v-col class="px-0 pb-1"><strong>Print</strong></v-col></v-row>
+                                <v-row><v-col class="px-0 pb-1"><strong>{{ $t("Dashboard.Print") }}</strong></v-col></v-row>
                                 <v-row><v-col class="px-0 pt-1">{{ formatTime(print_time) }}</v-col></v-row>
                             </v-col>
                             <v-col class="equal-width py-2">
-                                <v-row><v-col class="px-0 pb-1"><strong>Total</strong></v-col></v-row>
+                                <v-row><v-col class="px-0 pb-1"><strong>{{ $t("Dashboard.Total") }}</strong></v-col></v-row>
                                 <v-row><v-col class="px-0 pt-1">{{ formatTime(print_time_total) }}</v-col></v-row>
                             </v-col>
                         </v-row>
@@ -177,15 +177,15 @@
                                 <v-icon>mdi-printer-3d</v-icon>
                             </v-col>
                             <v-col class="equal-width py-2">
-                                <v-row><v-col class="px-0 pb-1"><strong>Speed</strong></v-col></v-row>
+                                <v-row><v-col class="px-0 pb-1"><strong>{{ $t("Dashboard.Speed") }}</strong></v-col></v-row>
                                 <v-row><v-col class="px-0 pt-1 text-no-wrap">{{ (requested_speed / 60).toFixed(0) }} mm/s</v-col></v-row>
                             </v-col>
                             <v-col class="equal-width py-2">
-                                <v-row><v-col class="px-0 pb-1"><strong>Layer</strong></v-col></v-row>
+                                <v-row><v-col class="px-0 pb-1"><strong>{{ $t("Dashboard.Layer") }}</strong></v-col></v-row>
                                 <v-row><v-col class="px-0 pt-1 text-no-wrap">{{ current_layer }} of {{ max_layers }}</v-col></v-row>
                             </v-col>
                             <v-col class="equal-width py-2">
-                                <v-row><v-col class="px-0 pb-1"><strong>ETA</strong></v-col></v-row>
+                                <v-row><v-col class="px-0 pb-1"><strong>{{ $t("Dashboard.ETA") }}</strong></v-col></v-row>
                                 <v-row><v-col class="px-0 pt-1">{{ eta ? formatDateTime(eta) : '--' }}</v-col></v-row>
                             </v-col>
                         </v-row>
@@ -199,15 +199,15 @@
                                 <v-icon>mdi-clock-outline</v-icon>
                             </v-col>
                             <v-col class="equal-width py-2 ">
-                                <v-row><v-col class="px-0 pb-1"><strong>File</strong></v-col></v-row>
+                                <v-row><v-col class="px-0 pb-1"><strong>{{ $t("Dashboard.File") }}</strong></v-col></v-row>
                                 <v-row><v-col class="px-0 pt-1">{{ estimated_time_file ? formatTime(estimated_time_file) : '--' }}</v-col></v-row>
                             </v-col>
                             <v-col class="equal-width py-2">
-                                <v-row><v-col class="px-0 pb-1"><strong>Filament</strong></v-col></v-row>
+                                <v-row><v-col class="px-0 pb-1"><strong>{{ $t("Dashboard.Filament") }}</strong></v-col></v-row>
                                 <v-row><v-col class="px-0 pt-1">{{ estimated_time_filament ? formatTime(estimated_time_filament) : '--' }}</v-col></v-row>
                             </v-col>
                             <v-col class="equal-width py-2">
-                                <v-row><v-col class="px-0 pb-1"><strong>Slicer</strong></v-col></v-row>
+                                <v-row><v-col class="px-0 pb-1"><strong>{{ $t("Dashboard.Slicer") }}</strong></v-col></v-row>
                                 <v-row><v-col class="px-0 pt-1">{{ estimated_time_slicer ? formatTime(estimated_time_slicer) : '--' }}</v-col></v-row>
                             </v-col>
                         </v-row>

src/components/panels/ToolsPanel.vue

@@ -18,13 +18,13 @@
         <v-card>
             <v-toolbar flat dense>
                 <v-toolbar-title>
-                    <span class="subheading"><v-icon left>mdi-thermometer-lines</v-icon>Temperatures</span>
+                    <span class="subheading"><v-icon left>mdi-thermometer-lines</v-icon>{{ $t("Dashboard.Temperatures") }}</span>
                 </v-toolbar-title>
                 <v-spacer></v-spacer>
                 <v-item-group class="v-btn-toggle" name="controllers">
                     <v-menu :offset-y="true" title="Preheat" v-if="this['gui/getPreheatPresets'].length">
                         <template v-slot:activator="{ on, attrs }">
-                            <v-btn small class="px-2 minwidth-0" color="primary" v-bind="attrs" v-on="on" :disabled="['printing', 'paused'].includes(printer_state)">Presets <v-icon small>mdi-menu-down</v-icon></v-btn>
+                            <v-btn small class="px-2 minwidth-0" color="primary" v-bind="attrs" v-on="on" :disabled="['printing', 'paused'].includes(printer_state)">{{ $t("Dashboard.Presets") }} <v-icon small>mdi-menu-down</v-icon></v-btn>
                         </template>
                         <v-list dense class="py-0">
                             <v-list-item v-for="preset of this['gui/getPreheatPresets']" v-bind:key="preset.index" link @click="preheat(preset)">
@@ -43,22 +43,22 @@
                                     <v-icon small>mdi-snowflake</v-icon>
                                 </v-list-item-icon>
                                 <v-list-item-content>
-                                    <v-list-item-title>Cooldown</v-list-item-title>
+                                    <v-list-item-title>{{ $t("Dashboard.Cooldown") }}</v-list-item-title>
                                 </v-list-item-content>
                             </v-list-item>
                         </v-list>
                     </v-menu>
-                    <v-btn small class="px-2 minwidth-0" color="primary" @click="cooldown()" v-if="this['gui/getPreheatPresets'].length === 0"><v-icon small class="mr-1">mdi-snowflake</v-icon>Cooldown</v-btn>
-                    <v-menu :offset-y="true" :close-on-content-click="false" title="Setup Temperatures">
+                    <v-btn small class="px-2 minwidth-0" color="primary" @click="cooldown()" v-if="this['gui/getPreheatPresets'].length === 0"><v-icon small class="mr-1">mdi-snowflake</v-icon>{{ $t("Dashboard.Cooldown") }}</v-btn>
+                    <v-menu :offset-y="true" :close-on-content-click="false" :title="$t('Dashboard.SetupTemperatures')">
                         <template v-slot:activator="{ on, attrs }">
                             <v-btn small class="px-2 minwidth-0" color="grey darken-3" v-bind="attrs" v-on="on"><v-icon small>mdi-cog</v-icon></v-btn>
                         </template>
                         <v-list>
                             <v-list-item class="minHeight36">
-                                <v-checkbox class="mt-0" v-model="boolTempchart" hide-details label="Show Chart"></v-checkbox>
+                                <v-checkbox class="mt-0" v-model="boolTempchart" hide-details :label="$t('Dashboard.ShowChart')"></v-checkbox>
                             </v-list-item>
                             <v-list-item class="minHeight36">
-                                <v-checkbox class="mt-0" v-model="autoscaleTempchart" hide-details label="Autoscale Chart"></v-checkbox>
+                                <v-checkbox class="mt-0" v-model="autoscaleTempchart" hide-details :label="$t('Dashboard.AutoscaleChart')"></v-checkbox>
                             </v-list-item>
                         </v-list>
                     </v-menu>
@@ -67,10 +67,10 @@
             <v-card-text class="px-0 py-2 content">
                 <v-container class="px-0">
                     <v-row align="center">
-                        <v-col class="py-2 font-weight-bold" style="padding-left: 68px;">Name</v-col>
-                        <v-col class="py-2 text-center font-weight-bold d-none d-sm-block">State</v-col>
-                        <v-col class="py-2 text-center font-weight-bold">Current</v-col>
-                        <v-col class="py-2 pr-8 text-center font-weight-bold">Target</v-col>
+                        <v-col class="py-2 font-weight-bold" style="padding-left: 68px;">{{ $t("Dashboard.Name") }}</v-col>
+                        <v-col class="py-2 text-center font-weight-bold d-none d-sm-block">{{ $t("Dashboard.State") }}</v-col>
+                        <v-col class="py-2 text-center font-weight-bold">{{ $t("Dashboard.Current") }}</v-col>
+                        <v-col class="py-2 pr-8 text-center font-weight-bold">{{ $t("Dashboard.Target") }}</v-col>
                     </v-row>
                     <div v-for="(heater, index) in heaters" v-bind:key="index" >
                         <v-divider class="my-2"></v-divider>
@@ -110,7 +110,7 @@
                         <v-divider class="my-2"></v-divider>
                         <v-row align="center">
                             <v-col class="flex-grow-0 py-2 pl-8 pr-0 colHeaterIcons">
-                                <v-icon color="grey darken-2" :title="'min: '+sensor.min_temp+'° / max: '+sensor.max_temp+'°'">{{ sensor.icon }}</v-icon>
+                                <v-icon color="grey darken-2" :title="$t('Dashboard.Min')+sensor.min_temp+'° / ' + $t('Dashboard.Max')+sensor.max_temp+'°'">{{ sensor.icon }}</v-icon>
                             </v-col>
                             <v-col class="py-2 font-weight-bold">
                               <span style="cursor: pointer;" @click="openHeater(sensor)">{{ convertName(sensor.name) }}</span>
@@ -126,7 +126,7 @@
                                       v-on="on"
                                   >{{ sensor.temperature ? sensor.temperature.toFixed(1) : 0 }}°C</span>
                                 </template>
-                                <span>min: {{ sensor.measured_min_temp ? sensor.measured_min_temp.toFixed(1) : 0}}°<br />max: {{ sensor.measured_max_temp ? sensor.measured_max_temp.toFixed(1) : 0 }}°</span>
+                                <span>{{ $t('Dashboard.Min') }}{{ sensor.measured_min_temp ? sensor.measured_min_temp.toFixed(1) : 0}}°<br />{{ $t('Dashboard.Max')}}{{ sensor.measured_max_temp ? sensor.measured_max_temp.toFixed(1) : 0 }}°</span>
                               </v-tooltip>
                               <span v-for="(values, key) of sensor.tempListAdditionValues" v-bind:key="key" class="d-block">{{ values.value.toFixed(1) }} {{ values.unit }}</span>
                             </v-col>
@@ -160,7 +160,7 @@
                             <v-col class="col-12">
                                 <v-checkbox
                                     v-model="editHeater.boolTemperature"
-                                    label="Show current temperature in chart"
+                                    :label="$t('Dashboard.ShowCurrentTemperatureInChart')"
                                     hide-details
                                     class="mt-0"
                                     @change="setVisible('temperature')"
@@ -171,7 +171,7 @@
                             <v-col class="col-12">
                                 <v-checkbox
                                     v-model="editHeater.boolTarget"
-                                    label="Show target temperature in chart"
+                                    :label="$t('Dashboard.ShowTargetTemperatureInChart')"
                                     hide-details
                                     class="mt-0"
                                     @change="setVisible('target')"
@@ -182,7 +182,7 @@
                             <v-col class="col-12">
                                 <v-checkbox
                                     v-model="editHeater.boolPower"
-                                    label="Show PWM-power in chart"
+                                    :label="$t('Dashboard.ShowPWMPowerInChart')"
                                     hide-details
                                     class="mt-0"
                                     @change="setVisible('power')"
@@ -193,7 +193,7 @@
                             <v-col class="col-12">
                                 <v-checkbox
                                     v-model="editHeater.boolSpeed"
-                                    label="Show PWM-power in chart"
+                                    :label="$t('Dashboard.ShowPWMPowerInChart')"
                                     hide-details
                                     class="mt-0"
                                     @change="setVisible('speed')"
@@ -204,7 +204,7 @@
                             <v-col class="col-12">
                                 <v-checkbox
                                     v-model="editHeater.additionSensors[key]"
-                                    :label="'Show '+key+' in list'"
+                                    :label="$t('Dashboard.Show')+key+$t('Dashboard.InList')"
                                     hide-details
                                     class="mt-0"
                                     @change="setVisibleAdditionalSensor(key)"

src/components/panels/WebcamPanel.vue

@@ -8,11 +8,11 @@
     <v-card>
         <v-toolbar flat dense >
             <v-toolbar-title>
-                <span class="subheading"><v-icon left>mdi-webcam</v-icon>Webcam</span>
+                <span class="subheading"><v-icon left>mdi-webcam</v-icon>{{ $t('Setting.Webcam')}}</span>
             </v-toolbar-title>
         </v-toolbar>
         <v-card-text class="px-0 py-0 content">
-            <img :src="url" class="webcamImage" :style="webcamStyle"  alt="Webcam"/>
+            <img :src="url" class="webcamImage" :style="webcamStyle"  :alt="$t('Setting.Webcam')"/>
         </v-card-text>
     </v-card>
 </template>

src/components/panels/ZOffsetPanel.vue

@@ -6,7 +6,7 @@
     <v-card v-if="(['printing', 'paused'].includes(printer_state))">
         <v-toolbar flat dense >
             <v-toolbar-title>
-                <span class="subheading"><v-icon class="mdi mdi-arrow-collapse-vertical" left></v-icon>Z Baby Stepping</span>
+                <span class="subheading"><v-icon class="mdi mdi-arrow-collapse-vertical" left></v-icon>{{ $t("Dashboard.ZBabyStepping") }}</span>
             </v-toolbar-title>
         </v-toolbar>
 
@@ -14,7 +14,7 @@
             <v-container>
                 <v-row class="py-0">
                     <v-col class="col text-center">
-                        <p class="mb-0">Current Offset: {{ homing_origin.length > 1 ? homing_origin[2].toFixed(2) : 0.00 }}mm</p>
+                        <p class="mb-0">{{ $t("Dashboard.CurrentOffset") }} {{ homing_origin.length > 1 ? homing_origin[2].toFixed(2) : 0.00 }}mm</p>
                     </v-col>
                 </v-row>
                 <v-row>

src/locales/en.json

@@ -0,0 +1,237 @@
+{
+  "App": {
+    "SAVECONFIG": "SAVE CONFIG",
+    "UploadPrint": "Upload & Print",
+    "EmergencyStop": "Emergency Stop",
+    "Uploading": "Uploading",
+    "Connecting": "Connecting",
+    "To": "to",
+    "Failed": "failed",
+    "CannotNotConnectTo": "Cannot not connect to",
+    "TryAgain": "try again",
+    "ConnectionTo": "Connection to",
+    "ConnectionFailed": "Connection failed",
+    "SelectPrinter": "Select Printer",
+    "AddPrinter": "Add Printer",
+    "EditPrinter": "Edit Printer",
+    "UpdatePrinter": "Update Printer",
+    "ChangePrinter": "Change Printer",
+    "Hello": "Hello and welcome to the remote mode of Mainsail!",
+    "PleaseRememberToAdd": "Please remember to add",
+    "InMoonrakerConf": "in moonraker.conf within 'cors_domains'.",
+    "YouCanFindMore": "You can find more details at",
+    "Remotemode": "docs.mainsail.xyz/remotemode",
+    "Empty": "Empty",
+    "Close": "Close",
+    "KlipperControl": "Klipper Control",
+    "Restart": "Restart",
+    "FirmwareRestart": "Firmware Restart",
+    "RestartServices": "Restart Services",
+    "Klipper": "Klipper",
+    "Moonraker": "Moonraker",
+    "PowerDevices": "Power Devices",
+    "HostControl": "Host Control",
+    "Reboot": "Reboot",
+    "Shutdown": "Shutdown"
+  },
+  "Router" : {
+    "Dashboard": "Dashboard",
+    "Printers": "Printers",
+    "Settings": "Settings",
+    "Webcam": "Webcam",
+    "Console": "Console",
+    "Heightmap": "Heightmap",
+    "G-Code Files": "G-Code Files",
+    "Machine": "Machine",
+    "Interface": "Interface"
+  },
+  "Dashboard": {
+    "MissingConfiguration": "Missing configuration",
+    "IsNotDefinedInConfig": "is not defined in config.",
+    "MoreInformation": "more information",
+    "MoonrakerFailedPlugins": "Moonraker Failed Plugins",
+    "MoonrakerErrorInfo": "An error was detected while loading the moonraker plugins. Please check the logfile and fix the issue.",
+    "FollowingPluginHasAnError": "Following plugin has an error:",
+    "DownloadLog": "Download Log",
+    "PausePrint": "Pause print",
+    "CancelPrint": "Cancel print",
+    "ResumePrint": "Resume print",
+    "ClearPrintStats": "Clear print stats",
+    "ReprintJob": "Reprint job",
+    "Filament": "Filament",
+    "Print": "Print",
+    "Total": "Total",
+    "Speed": "Speed",
+    "Layer": "Layer",
+    "ETA": "ETA",
+    "File": "File",
+    "Slicer": "Slicer",
+    "ZBabyStepping": "Z Baby Stepping",
+    "CurrentOffset": "Current Offset: ",
+    "Home": "Home",
+    "All": "All",
+    "QGL": "QGL",
+    "ZTilt": "Z Tilt",
+    "FeedAmountIn": "Feed amount in",
+    "FeedrateIn": "Feedrate in",
+    "Retract": "Retract",
+    "Extrude": "Extrude",
+    "PrintSettings": "Print Settings",
+    "Miscellaneous": "Miscellaneous",
+    "Temperatures": "Temperatures",
+    "Presets": "Presets",
+    "Cooldown": "Cooldown",
+    "Name": "Name",
+    "State": "State",
+    "Current": "Current",
+    "Target": "Target",
+    "Min": "min: ",
+    "Max": "max: ",
+    "ShowCurrentTemperatureInChart": "Show current temperature in chart",
+    "ShowTargetTemperatureInChart": "Show target temperature in chart",
+    "ShowPWMPowerInChart": "Show PWM-power in chart",
+    "Show": "Show",
+    "InList": "in list",
+    "SetupTemperatures": "Setup Temperatures",
+    "ShowChart": "Show Chart",
+    "AutoscaleChart": "Autoscale Chart",
+    "Console": "Console",
+    "SendCode": "Send code...",
+    "Send": "Send",
+    "Empty": "Empty",
+    "Setup Console": "Setup Console",
+    "Hide temperatures": "Hide temperatures",
+    "Custom filters": "Custom filters",
+    "Unknown": "Unknown"
+  },
+  "Files": {
+    "GCodeFiles": "G-Code Files",
+    "UploadNewGcode": "Upload new Gcode",
+    "CreateNewDirectory": "Create new Directory",
+    "RefreshCurrentDirectory":"Refresh current Directory",
+    "SetupCurrentList":"Setup current list",
+    "HiddenFiles":"Hidden files",
+    "FreeDisk":"Free disk: ",
+    "Used":"Used: ",
+    "Free":"Free: ",
+    "Total":"Total: ",
+    "Files": "Files",
+    "Search":"Search",
+    "Empty": "Empty",
+    "blabla": "bla bla",
+    "DropFilesToAddGcode": "Drop files to add gcode.",
+    "PrintStart": "Print start",
+    "Preheat": "Preheat",
+    "Download": "Download",
+    "Rename": "Rename",
+    "Delete": "Delete",
+    "StartJob": "Start Job",
+    "DoYouWantToStart": "Do you want to start",
+    "No": "No",
+    "Yes": "Yes",
+    "NewDirectory": "New Directory",
+    "PleaseEnterANewDirectoryName": "Please enter a new directory name:",
+    "RenameFile": "Rename File",
+    "Name": "Name",
+    "Cancel": "Cancel",
+    "Create": "Create",
+    "RenameDirectory": "Rename Directory",
+    "Uploading": "Uploading",
+    "CurrentPath": "Current path",
+    "Filesize": "Filesize",
+    "LastModified": "Last modified",
+    "ObjectHeight": "Object Height",
+    "LayerHeight": "Layer Height",
+    "FilamentUsage": "Filament Usage",
+    "PrintTime": "Print Time",
+    "Slicer": "Slicer"
+  },
+  "Console": {
+    "send": "send",
+    "SetupConsole": "Setup Console",
+    "SendCode": "Send code...",
+    "Empty": "Empty",
+    "HideTemperatures": "Hide temperatures",
+    "CustomFilters": "Custom filters",
+    "Date": "Date",
+    "Event": "Event"
+  },
+  "Setting": {
+    "Language": "Language",
+    "General": "General",
+    "PrinterName": "Printer Name",
+    "ControlExtruder": "Control & Extruder",
+    "PreheatPresets": "Preheat Presets",
+    "Webcam": "Webcam",
+    "Tempchart": "Tempchart",
+    "Macros": "Macros",
+    "Dashboard": "Dashboard",
+    "Console": "Console",
+    "RemotePrinters": "Remote Printers",
+    "ConfigFiles": "Config Files",
+    "SetupCurrentList": "Setup current list",
+    "HiddenFiles": "Hidden files",
+    "CurrentPath: ": "Current path: ",
+    "Empty": "Empty",
+    "EditFile": "Edit file",
+    "Download": "Download",
+    "Rename": "Rename",
+    "Delete": "Delete",
+    "PleaseStandBy": "Please stand by",
+    "ConfigReference": "Config Reference",
+    "Save": "Save",
+    "SaveRestart": "Save & restart",
+    "RenameFile": "Rename File",
+    "Name": "Name",
+    "Cancel": "Cancel",
+    "Create": "Create",
+    "Edit": "Edit",
+    "CreateFile": "Create File",
+    "CreateFolder": "Create Folder",
+    "Uploading": "Uploading",
+    "Files": "Files",
+    "Filesize": "Filesize",
+    "LastModified": "Last modified",
+    "MachineLimits": "Machine Limits",
+    "Velocity": "Velocity",
+    "Acceleration": "Acceleration",
+    "Deceleration": "Deceleration",
+    "SquareCornerVelocity": "Square corner velocity",
+    "KlippyState": "Klippy-State: ",
+    "KlippyInfo": "Moonraker can't connect to Klippy!\nPlease check if the Klipper service is running and an UDS (Unix Domain Socket) is configured.",
+    "Restart": "Restart",
+    "FIRMWARERestart": "FIRMWARE Restart",
+    "UpdateManager": "Update Manager",
+    "CheckForUpdates": "Check for updates",
+    "System": "System",
+    "PackagesCanBeUpgraded": "packages can be upgraded",
+    "OSPackages": "OS-Packages",
+    "Endstops": "Endstops",
+    "Endstop": "Endstop",
+    "EndstopInfo": "Press the sync-button on the right-bottom to load the current endstop status.",
+    "Logfiles": "Logfiles",
+    "WebcamURL": "Webcam URL",
+    "Rotate": "Rotate",
+    "FlipWebcamHorizontally": "Flip webcam horizontally",
+    "FlipWebcamVertically": "Flip webcam vertically",
+    "ShowInNavigation": "Show in navigation",
+    "HideTemperatures": "Hide temperatures",
+    "CustomFilter": "Custom filter",
+    "Rules": "Rules",
+    "FeedrateXY": "Feedrate XY",
+    "FeedrateZ": "Feedrate Z",
+    "Cooldown": "Cooldown",
+    "AddPreset": "add preset",
+    "Preset": "Preset",
+    "CustomGCode": "Custom G-Code",
+    "PresetInfo": "You have to set minimum a target temperature or a custom gcode.",
+    "Store": "Store",
+    "Update": "Update",
+    "EditCooldown": "Edit Cooldown",
+    "UpdateCooldown": "Update Cooldown",
+    "AddPrinter": "Add Printer",
+    "EditPrinter": "Edit Printer",
+    "UpdatePrinter": "Update Printer",
+    "detected": "detected"
+  }
+}

src/locales/zh.json

@@ -0,0 +1,237 @@
+{
+  "App": {
+    "SAVECONFIG": "保存配置",
+    "UploadPrint": "上传并打印",
+    "EmergencyStop": "紧急停止",
+    "Uploading": "上传",
+    "Connecting": "连接",
+    "To": "到",
+    "Failed": "失败",
+    "CannotNotConnectTo": "无法连接到",
+    "TryAgain": "重试",
+    "ConnectionTo": "连接到",
+    "ConnectionFailed": "连接失败",
+    "SelectPrinter": "选择打印机",
+    "AddPrinter": "添加打印机",
+    "EditPrinter": "编辑打印机",
+    "UpdatePrinter": "更新打印机",
+    "ChangePrinter": "更换打印机",
+    "Hello": "大家好，欢迎来到主帆遥控模式!",
+    "PleaseRememberToAdd": "请记得添加",
+    "InMoonrakerConf": "在 moonraker.conf 的 'cors_domains' 中.",
+    "YouCanFindMore": "详情请浏览",
+    "Remotemode": "docs.mainsail.xyz/remotemode",
+    "Empty": "空的",
+    "Close": "关闭",
+    "KlipperControl": "Klipper 控制",
+    "Restart": "重启",
+    "FirmwareRestart": "固件重启",
+    "RestartServices": "重启服务",
+    "Klipper": "Klipper",
+    "Moonraker": "Moonraker",
+    "PowerDevices": "电力设备",
+    "HostControl": "主机控制",
+    "Reboot": "重启",
+    "Shutdown": "关机"
+  },
+  "Router" : {
+    "Dashboard": "仪表盘",
+    "Printers": "打印机",
+    "Settings": "设置",
+    "Webcam": "摄像头",
+    "Console": "控制台",
+    "Heightmap": "Heightmap",
+    "G-Code Files": "G-Code 文件",
+    "Machine": "机器",
+    "Interface": "界面"
+  },
+  "Dashboard": {
+    "MissingConfiguration": "缺少配置",
+    "IsNotDefinedInConfig": "未在配置中定义.",
+    "MoreInformation": "更多信息",
+    "MoonrakerFailedPlugins": "Moonraker 失败的插件",
+    "MoonrakerErrorInfo": "加载moonraker插件时检测到一个错误. 请检查日志文件并修复这个问题.",
+    "FollowingPluginHasAnError": "以下插件有一个错误:",
+    "DownloadLog": "下载日志",
+    "PausePrint": "暂停打印",
+    "CancelPrint": "取消打印",
+    "ResumePrint": "继续打印",
+    "ClearPrintStats": "清除打印统计信息",
+    "ReprintJob": "重新打印工作",
+    "Filament": "Filam耗材ent",
+    "Print": "打印",
+    "Total": "总计",
+    "Speed": "速度",
+    "Layer": "层",
+    "ETA": "ETA",
+    "File": "文件",
+    "Slicer": "切片",
+    "ZBabyStepping": "Z Baby Stepping",
+    "CurrentOffset": "当前偏移量: ",
+    "Home": "Home",
+    "All": "All",
+    "QGL": "QGL",
+    "ZTilt": "Z 倾斜",
+    "FeedAmountIn": "进料量",
+    "FeedrateIn": "输入",
+    "Retract": "回抽",
+    "Extrude": "挤出",
+    "PrintSettings": "打印设置",
+    "Miscellaneous": "其他",
+    "Temperatures": "温度",
+    "Presets": "预设",
+    "Cooldown": "冷却",
+    "Name": "名称",
+    "State": "状态",
+    "Current": "当前",
+    "Target": "目标",
+    "Min": "最小: ",
+    "Max": "最大: ",
+    "ShowCurrentTemperatureInChart": "在图表中显示当前温度",
+    "ShowTargetTemperatureInChart": "在图表中显示目标温度",
+    "ShowPWMPowerInChart": "在图表中显示PWM功率",
+    "Show": "显示",
+    "InList": "在列表中",
+    "SetupTemperatures": "设置温度",
+    "ShowChart": "显示图表",
+    "AutoscaleChart": "自动缩放图表",
+    "Console": "控制台",
+    "SendCode": "发送代码...",
+    "Send": "发送",
+    "Empty": "空的",
+    "SetupConsole": "设置控制台",
+    "HideTemperatures": "隐藏温度",
+    "CustomFilters": "自定义筛选器",
+    "Unknown": "未知"
+  },
+  "Files": {
+    "GCodeFiles": "G-Code 文件",
+    "UploadNewGcode": "上传新 Gcode",
+    "CreateNewDirectory": "创建新目录",
+    "RefreshCurrentDirectory":"刷新当前目录",
+    "SetupCurrentList":"设置当前列表",
+    "HiddenFiles":"隐藏文件",
+    "FreeDisk":"可用磁盘: ",
+    "Used":"使用: ",
+    "Free":"空闲: ",
+    "Total":"总共: ",
+    "Files": "文件",
+    "Search":"搜索",
+    "Empty": "空的",
+    "blabla": "巴拉巴拉",
+    "DropFilesToAddGcode": "Drop files to add gcode.",
+    "PrintStart": "开始打印",
+    "Preheat": "预热",
+    "Download": "下载",
+    "Rename": "重命名",
+    "Delete": "删除",
+    "StartJob": "开始作业",
+    "DoYouWantToStart": "你想开始吗",
+    "No": "否",
+    "Yes": "是",
+    "NewDirectory": "新建目录",
+    "PleaseEnterANewDirectoryName": "请输入新的目录名称:",
+    "RenameFile": "重命名文件",
+    "Name": "名称",
+    "Cancel": "取消",
+    "Create": "创建",
+    "RenameDirectory": "重命名目录",
+    "Uploading": "上传",
+    "CurrentPath": "当前路径",
+    "Filesize": "文件大小",
+    "LastModified": "上次修改",
+    "ObjectHeight": "对象高度",
+    "LayerHeight": "层高",
+    "FilamentUsage": "耗材使用",
+    "PrintTime": "打印时间",
+    "Slicer": "切片"
+  },
+  "Console": {
+    "send": "发送",
+    "SetupConsole": "设置控制台",
+    "SendCode": "发送代码...",
+    "Empty": "空的",
+    "HideTemperatures": "隐藏温度",
+    "CustomFilters": "自定义筛选器",
+    "Date": "时间",
+    "Event": "事件"
+  },
+  "Setting": {
+    "Language": "语言",
+    "General": "一般",
+    "PrinterName": "打印机名称",
+    "ControlExtruder": "控制 & 挤出机",
+    "PreheatPresets": "预热预设",
+    "Webcam": "摄像头",
+    "Tempchart": "温度图",
+    "Macros": "宏",
+    "Dashboard": "仪表盘",
+    "Console": "控制台",
+    "RemotePrinters": "远程打印机",
+    "ConfigFiles": "配置文件",
+    "SetupCurrentList": "设置当前列表",
+    "HiddenFiles": "隐藏文件",
+    "CurrentPath": "当前路径: ",
+    "Empty": "空的",
+    "EditFile": "编辑文件",
+    "Download": "下载",
+    "Rename": "重命名",
+    "Delete": "删除",
+    "PleaseStandBy": "请等待",
+    "ConfigReference": "配置参考",
+    "Save": "保存",
+    "SaveRestart": "保存 & 重启",
+    "RenameFile": "重命名文件",
+    "Name": "名称",
+    "Cancel": "取消",
+    "Create": "创建",
+    "Edit": "编辑",
+    "CreateFile": "创建文件",
+    "CreateFolder": "创建文件夹",
+    "Uploading": "上传",
+    "Files": "文件",
+    "Filesize": "文件大小",
+    "LastModified": "上次修改",
+    "MachineLimits": "机器限制",
+    "Velocity": "速度",
+    "Acceleration": "加速",
+    "Deceleration": "减速",
+    "SquareCornerVelocity": "直角速度",
+    "KlippyState": "Klippy 状态: ",
+    "KlippyInfo": "Moonraker 不能连接到 Klippy! \n请检查Klipper服务是否正在运行, 并且是否配置了UDS (Unix域套接字). ",
+    "Restart": "重启",
+    "FIRMWARERestart": "固件重启",
+    "UpdateManager": "更新管理器",
+    "CheckForUpdates": "检查更新",
+    "System": "系统",
+    "PackagesCanBeUpgraded": "软件包可以升级",
+    "OSPackages": "OS包",
+    "Endstops": "限位开关",
+    "Endstop": "限位",
+    "EndstopInfo": "按右下角的同步按钮加载当前的限位状态。",
+    "Logfiles": "日志文件",
+    "WebcamURL": "摄像头链接",
+    "Rotate": "旋转",
+    "FlipWebcamHorizontally": "水平翻转摄像头 ",
+    "FlipWebcamVertically": "垂直翻转摄像头",
+    "ShowInNavigation": "在导航中显示 ",
+    "HideTemperatures": "隐藏温度",
+    "CustomFilter": "自定义筛选器",
+    "Rules": "规则",
+    "FeedrateXY": "XY 步进速度",
+    "FeedrateZ": "Z 步进速度",
+    "Cooldown": "冷却",
+    "AddPreset": "添加预设",
+    "Preset": "预设",
+    "CustomGCode": "自定义 G-Code",
+    "PresetInfo": "您必须设置最低目标温度或自定义gcode.",
+    "Store": "储存",
+    "Update": "更新",
+    "EditCooldown": "编辑冷却",
+    "UpdateCooldown": "更新冷却",
+    "AddPrinter": "添加打印机",
+    "EditPrinter": "编辑打印机",
+    "UpdatePrinter": "更新打印机",
+    "detected": "发现"
+  }
+}

src/main.js

@@ -2,12 +2,14 @@ import Vue from 'vue'
 import WebSocketClient from './plugins/wsClient'
 import App from './App.vue'
 import vuetify from './plugins/vuetify'
+import i18n from './plugins/i18n'
 import VueResource from 'vue-resource'
 import './components'
 import store from './store'
 import router from './plugins/router'
 import vueHeadful from 'vue-headful';
 
+
 Vue.config.productionTip = false;
 
 Vue.use(VueResource);
@@ -19,6 +21,7 @@ Vue.http.headers.common['Access-Control-Allow-Methods'] = 'POST, GET, PUT, OPTIO
 
 Vue.component('vue-headful', vueHeadful);
 
+
 fetch('/config.json')
 .then(res => res.json())
 .then(file => {
@@ -37,8 +40,10 @@ fetch('/config.json')
       vuetify,
       router,
       store,
+      i18n,
       render: h => h(App)
     }).$mount('#app')
+
 })
 .catch((error) => {
     let p = document.createElement("p");
@@ -47,3 +52,5 @@ fetch('/config.json')
     document.getElementById('app').append(p);
     window.console.error('Error:', error);
 });
+
+

src/pages/Console.vue

@@ -34,7 +34,7 @@
                 <v-text-field
                     v-model="gcode"
                     :items="items"
-                    label="Send code..."
+                    :label="$t('Console.SendCode')"
                     solo
                     class="gcode-command-field"
                     ref="gcodeCommandField"
@@ -48,21 +48,21 @@
 
             <v-col class="col-auto align-content-center">
                 <v-btn color="info" class="gcode-command-btn" @click="doSend" :loading="loadings.includes('sendGcode')" :disabled="loadings.includes('sendGcode')" >
-                    <v-icon class="mr-2">mdi-send</v-icon> send
+                    <v-icon class="mr-2">mdi-send</v-icon> {{ $t('Console.send')}}
                 </v-btn>
             </v-col>
 
             <v-col class="col-auto align-content-center">
-                <v-menu :offset-y="true" :close-on-content-click="false" title="Setup Console">
+                <v-menu :offset-y="true" :close-on-content-click="false" :title="$t('Console.SetupConsole')">
                     <template v-slot:activator="{ on, attrs }">
                         <v-btn class="gcode-command-btn px-2 minwidth-0" color="lightgray" v-bind="attrs" v-on="on"><v-icon>mdi-cog</v-icon></v-btn>
                     </template>
                     <v-list>
                         <v-list-item class="minHeight36">
-                            <v-checkbox class="mt-0" v-model="hideWaitTemperatures" hide-details label="Hide temperatures"></v-checkbox>
+                            <v-checkbox class="mt-0" v-model="hideWaitTemperatures" hide-details :label="$t('Console.HideTemperatures')"></v-checkbox>
                         </v-list-item>
                         <v-list-item class="minHeight36">
-                            <v-checkbox class="mt-0" v-model="boolCustomFilters" hide-details label="Custom filters"></v-checkbox>
+                            <v-checkbox class="mt-0" v-model="boolCustomFilters" hide-details :label="$t('Console.CustomFilters')"></v-checkbox>
                         </v-list-item>
                     </v-list>
                 </v-menu>
@@ -83,7 +83,7 @@
                     mobile-breakpoint="0"
                 >
                     <template #no-data>
-                        <div class="text-center">empty</div>
+                        <div class="text-center">{{ $t("Console.Empty")}}</div>
                     </template>
 
                     <template #item="{ item }">
@@ -116,13 +116,13 @@
                 sortBy: 'date',
                 headers: [
                     {
-                        text: 'Date',
+                        text: this.$t('Console.Date'),
                         value: 'date',
                         width: '15%',
                         dateType: 'Date',
                     },
                     {
-                        text: 'Event',
+                        text: this.$t('Console.Event'),
                         sortable: false,
                         value: 'message',
                         width: '85%'

src/pages/Files.vue

@@ -51,20 +51,20 @@
     <div>
         <v-card class="fileupload-card my-3" @dragover="dragOverUpload" @dragleave="dragLeaveUpload" @drop.prevent.stop="dragDropUpload">
             <v-card-title>
-                G-Code Files
+                {{ $t("Files.GCodeFiles")}}
                 <v-spacer class="d-none d-sm-block"></v-spacer>
                 <input type="file" ref="fileUpload" accept=".gcode, .ufp" style="display: none" multiple @change="uploadFile" />
                 <v-item-group class="v-btn-toggle my-5 my-sm-0 col-12 col-sm-auto px-0 py-0" name="controllers">
-                    <v-btn @click="clickUploadButton" title="Upload new Gcode" class="primary flex-grow-1" :loading="loadings.includes('gcodeUpload')"><v-icon>mdi-upload</v-icon></v-btn>
-                    <v-btn @click="createDirectory" title="Create new Directory" class="flex-grow-1"><v-icon>mdi-folder-plus</v-icon></v-btn>
-                    <v-btn @click="refreshFileList" title="Refresh current Directory" class="flex-grow-1"><v-icon>mdi-refresh</v-icon></v-btn>
-                    <v-menu :offset-y="true" :close-on-content-click="false" title="Setup current list">
+                    <v-btn @click="clickUploadButton" :title="$t('Files.UploadNewGcode')" class="primary flex-grow-1" :loading="loadings.includes('gcodeUpload')"><v-icon>mdi-upload</v-icon></v-btn>
+                    <v-btn @click="createDirectory" :title="$t('Files.CreateNewDirectory')" class="flex-grow-1"><v-icon>mdi-folder-plus</v-icon></v-btn>
+                    <v-btn @click="refreshFileList" :title="$t('Files.RefreshCurrentDirectory')" class="flex-grow-1"><v-icon>mdi-refresh</v-icon></v-btn>
+                    <v-menu :offset-y="true" :close-on-content-click="false" :title="$t('Files.SetupCurrentList')">
                         <template v-slot:activator="{ on, attrs }">
                             <v-btn class="flex-grow-1" v-bind="attrs" v-on="on"><v-icon class="">mdi-cog</v-icon></v-btn>
                         </template>
                         <v-list>
                             <v-list-item class="minHeight36">
-                                <v-checkbox class="mt-0" hide-details v-model="showHiddenFiles" label="Hidden files"></v-checkbox>
+                                <v-checkbox class="mt-0" hide-details v-model="showHiddenFiles" :label="$t('Files.HiddenFiles')"></v-checkbox>
                             </v-list-item>
                             <v-divider></v-divider>
                             <v-list-item class="minHeight36" v-for="header of configHeaders" v-bind:key="header.key">
@@ -75,16 +75,16 @@
                 </v-item-group>
             </v-card-title>
             <v-card-subtitle>
-                Current path: {{ this.currentPath !== 'gcodes' ? "/"+this.currentPath.substring(7) : "/" }}<br />
+                {{ $t("Files.CurrentPath") }} {{  this.currentPath !== 'gcodes' ? "/"+this.currentPath.substring(7) : "/" }}<br />
                 <div v-if="this.disk_usage !== null">
                     <v-tooltip top>
                         <template v-slot:activator="{ on, attrs }">
-                            <span v-bind="attrs" v-on="on">Free disk: {{ formatFilesize(disk_usage.free) }}</span>
+                            <span v-bind="attrs" v-on="on">{{ $t('Files.FreeDisk') + formatFilesize(disk_usage.free) }}</span>
                         </template>
                         <span>
-                            Used: {{ formatFilesize(this.disk_usage.used) }}<br />
-                            Free: {{ formatFilesize(this.disk_usage.free) }}<br />
-                            Total: {{ formatFilesize(this.disk_usage.total) }}
+                            {{ $t('Files.Used') + formatFilesize(this.disk_usage.used) }}<br />
+                            {{ $t('Files.Free') + formatFilesize(this.disk_usage.free) }}<br />
+                            {{ $t('Files.Total') + formatFilesize(this.disk_usage.total) }}
                         </span>
                     </v-tooltip>
                 </div>
@@ -93,7 +93,7 @@
                 <v-text-field
                   v-model="search"
                   append-icon="mdi-magnify"
-                  label="Search"
+                  :label="$t('Files.Search')"
                   single-line
                   hide-details
                 ></v-text-field>
@@ -108,7 +108,7 @@
                 :sort-desc.sync="sortDesc"
                 :items-per-page.sync="countPerPage"
                 :footer-props="{
-                    itemsPerPageText: 'Files'
+                    itemsPerPageText: $t('Files.Files')
                 }"
                 item-key="name"
                 :search="search"
@@ -121,7 +121,7 @@
                 </template>
 
                 <template #no-data>
-                    <div class="text-center">empty</div>
+                    <div class="text-center">{{ $t('Files.empty') }}</div>
                 </template>
 
                 <template slot="body.prepend" v-if="(currentPath !== 'gcodes')">
@@ -167,16 +167,16 @@
                         <td class="text-no-wrap text-right" v-if="headers.filter(header => header.value === 'slicer')[0].visible">{{ item.slicer ? item.slicer : '--' }}<br /><small v-if="item.slicer_version">{{ item.slicer_version}}</small></td>
                     </tr>
                 </template>
-                <v-data-footer>bla bla</v-data-footer>
+                <v-data-footer>{{ $t('Files.blabla')}}</v-data-footer>
             </v-data-table>
             <div class="dragzone" :style="'visibility: '+dropzone.visibility+'; opacity: '+dropzone.hidden">
-                <div class="textnode">Drop files to add gcode.</div>
+                <div class="textnode">{{ $t('Files.DropFilesToAddGcode')}}</div>
             </div>
         </v-card>
         <v-menu v-model="contextMenu.shown" :position-x="contextMenu.x" :position-y="contextMenu.y" absolute offset-y>
             <v-list>
                 <v-list-item @click="clickRow(contextMenu.item)" :disabled="is_printing" v-if="!contextMenu.item.isDirectory">
-                    <v-icon class="mr-1">mdi-play</v-icon> Print start
+                    <v-icon class="mr-1">mdi-play</v-icon> {{ $t("Files.PrintStart")}}
                 </v-list-item>
                 <v-list-item
                     @click="preheat"
@@ -188,22 +188,22 @@
                     "
                     :disabled="['error', 'printing', 'paused'].includes(printer_state)"
                     >
-                    <v-icon class="mr-1">mdi-fire</v-icon> Preheat
+                    <v-icon class="mr-1">mdi-fire</v-icon> {{ $t('Files.Preheat')}}
                 </v-list-item>
                 <v-list-item @click="downloadFile" v-if="!contextMenu.item.isDirectory">
-                    <v-icon class="mr-1">mdi-cloud-download</v-icon> Download
+                    <v-icon class="mr-1">mdi-cloud-download</v-icon> {{ $t('Filse.Download')}}
                 </v-list-item>
                 <v-list-item @click="renameDirectory(contextMenu.item)" v-if="contextMenu.item.isDirectory">
-                    <v-icon class="mr-1">mdi-rename-box</v-icon> Rename
+                    <v-icon class="mr-1">mdi-rename-box</v-icon> {{ $t('Filse.Rename')}}
                 </v-list-item>
                 <v-list-item @click="renameFile(contextMenu.item)" v-if="!contextMenu.item.isDirectory">
-                    <v-icon class="mr-1">mdi-rename-box</v-icon> Rename
+                    <v-icon class="mr-1">mdi-rename-box</v-icon> {{ $t('Filse.Rename')}}
                 </v-list-item>
                 <v-list-item @click="removeFile" v-if="!contextMenu.item.isDirectory">
-                    <v-icon class="mr-1">mdi-delete</v-icon> Delete
+                    <v-icon class="mr-1">mdi-delete</v-icon> {{ $t('Filse.Delete')}}
                 </v-list-item>
                 <v-list-item @click="deleteDirectoryAction" v-if="contextMenu.item.isDirectory">
-                    <v-icon class="mr-1">mdi-delete</v-icon> Delete
+                    <v-icon class="mr-1">mdi-delete</v-icon> {{ $t('Filse.Delete')}}
                 </v-list-item>
             </v-list>
         </v-menu>
@@ -214,52 +214,52 @@
                     v-if="existsBigThumbnail(dialogPrintFile.item)"
                     :src="'data:image/gif;base64,'+getBigThumbnail(dialogPrintFile.item)"
                 ></v-img>
-                <v-card-title class="headline">Start Job</v-card-title>
-                <v-card-text>Do you want to start {{ dialogPrintFile.item.filename }}?</v-card-text>
+                <v-card-title class="headline">{{ $t('Files.StartJob') }}</v-card-title>
+                <v-card-text>{{ $t('Files.DoYouWantToStart') + dialogPrintFile.item.filename }}?</v-card-text>
                 <v-card-actions>
                     <v-spacer></v-spacer>
-                    <v-btn color="red darken-1" text @click="dialogPrintFile.show = false">No</v-btn>
-                    <v-btn color="green darken-1" text @click="startPrint(dialogPrintFile.item.filename)">Yes</v-btn>
+                    <v-btn color="red darken-1" text @click="dialogPrintFile.show = false">{{ $t('Files.No')}}</v-btn>
+                    <v-btn color="green darken-1" text @click="startPrint(dialogPrintFile.item.filename)">{{$t('Files.Yes')}}</v-btn>
                 </v-card-actions>
             </v-card>
         </v-dialog>
         <v-dialog v-model="dialogCreateDirectory.show" max-width="400">
             <v-card>
-                <v-card-title class="headline">New Directory</v-card-title>
+                <v-card-title class="headline">{{ $t('Files.NewDirectory') }}</v-card-title>
                 <v-card-text>
-                    Please enter a new directory name:
+                   {{ $t('Files.PleaseEnterANewDirectoryName') }}
                     <v-text-field label="Name" :rules="input_rules" @keypress.enter="createDirectoryAction" required v-model="dialogCreateDirectory.name"></v-text-field>
                 </v-card-text>
                 <v-card-actions>
                     <v-spacer></v-spacer>
-                    <v-btn color="" text @click="dialogCreateDirectory.show = false">Cancel</v-btn>
-                    <v-btn color="primary" text @click="createDirectoryAction">create</v-btn>
+                    <v-btn color="" text @click="dialogCreateDirectory.show = false">{{ $t('Files.Cancel') }}</v-btn>
+                    <v-btn color="primary" text @click="createDirectoryAction">{{ $t('Files.Create') }}</v-btn>
                 </v-card-actions>
             </v-card>
         </v-dialog>
         <v-dialog v-model="dialogRenameFile.show" max-width="400">
             <v-card>
-                <v-card-title class="headline">Rename File</v-card-title>
+                <v-card-title class="headline">{{ $t('Files.RenameFile')}}</v-card-title>
                 <v-card-text>
-                    <v-text-field label="Name" required v-model="dialogRenameFile.newName" ref="inputFieldNewName"></v-text-field>
+                    <v-text-field :label="$t('Files.Name')" required v-model="dialogRenameFile.newName" ref="inputFieldNewName"></v-text-field>
                 </v-card-text>
                 <v-card-actions>
                     <v-spacer></v-spacer>
-                    <v-btn color="" text @click="dialogRenameFile.show = false">Cancel</v-btn>
-                    <v-btn color="primary" text @click="renameFileAction">rename</v-btn>
+                    <v-btn color="" text @click="dialogRenameFile.show = false">{{ $t('Files.Cancel') }}</v-btn>
+                    <v-btn color="primary" text @click="renameFileAction">{{ $t('Files.Rename') }}</v-btn>
                 </v-card-actions>
             </v-card>
         </v-dialog>
         <v-dialog v-model="dialogRenameDirectory.show" max-width="400">
             <v-card>
-                <v-card-title class="headline">Rename Directory</v-card-title>
+                <v-card-title class="headline">{{ $t('Files.RenameDirectory') }}</v-card-title>
                 <v-card-text>
                     <v-text-field label="Name" required v-model="dialogRenameDirectory.newName"></v-text-field>
                 </v-card-text>
                 <v-card-actions>
                     <v-spacer></v-spacer>
-                    <v-btn color="" text @click="dialogRenameDirectory.show = false">Cancel</v-btn>
-                    <v-btn color="primary" text @click="renameDirectoryAction">rename</v-btn>
+                    <v-btn color="" text @click="dialogRenameDirectory.show = false">{{ $t('Files.Cancel') }}</v-btn>
+                    <v-btn color="primary" text @click="renameDirectoryAction">{{ $t('Files.Rename') }}</v-btn>
                 </v-card-actions>
             </v-card>
         </v-dialog>
@@ -272,7 +272,7 @@
             dark
             v-model="uploadSnackbar.status"
         >
-            <span v-if="uploadSnackbar.max > 1" class="mr-1">({{ uploadSnackbar.number }}/{{ uploadSnackbar.max }})</span><strong>Uploading {{ uploadSnackbar.filename }}</strong><br />
+            <span v-if="uploadSnackbar.max > 1" class="mr-1">({{ uploadSnackbar.number }}/{{ uploadSnackbar.max }})</span><strong>{{ $t("Files.Uploading") + uploadSnackbar.filename }}</strong><br />
             {{ Math.round(uploadSnackbar.percent) }} % @ {{ formatFilesize(Math.round(uploadSnackbar.speed)) }}/s<br />
             <v-progress-linear class="mt-2" :value="uploadSnackbar.percent"></v-progress-linear>
             <template v-slot:action="{ attrs }">
@@ -322,14 +322,14 @@
                 },
                 headers: [
                     { text: '',               value: '',                align: 'left',  configable: false,  visible: true, filterable: false },
-                    { text: 'Name',           value: 'filename',        align: 'left',  configable: false,  visible: true },
-                    { text: 'Filesize',       value: 'size',            align: 'right', configable: true,   visible: true },
-                    { text: 'Last modified',  value: 'modified',        align: 'right', configable: true,   visible: true },
-                    { text: 'Object Height',  value: 'object_height',   align: 'right', configable: true,   visible: true },
-                    { text: 'Layer Height',   value: 'layer_height',    align: 'right', configable: true,   visible: true },
-                    { text: 'Filament Usage', value: 'filament_total',  align: 'right', configable: true,   visible: true },
-                    { text: 'Print Time',     value: 'estimated_time',  align: 'right', configable: true,   visible: true },
-                    { text: 'Slicer',         value: 'slicer',          align: 'right', configable: true,   visible: true },
+                    { text: this.$t('Files.Name'),           value: 'filename',        align: 'left',  configable: false,  visible: true },
+                    { text: this.$t('Files.Filesize'),       value: 'size',            align: 'right', configable: true,   visible: true },
+                    { text: this.$t('Files.LastModified'),  value: 'modified',        align: 'right', configable: true,   visible: true },
+                    { text: this.$t('Files.ObjectHeight'),  value: 'object_height',   align: 'right', configable: true,   visible: true },
+                    { text: this.$t('Files.LayerHeight'),   value: 'layer_height',    align: 'right', configable: true,   visible: true },
+                    { text: this.$t('Files.FilamentUsage'), value: 'filament_total',  align: 'right', configable: true,   visible: true },
+                    { text: this.$t('Files.PrintTime'),     value: 'estimated_time',  align: 'right', configable: true,   visible: true },
+                    { text: this.$t('Files.Slicer'),         value: 'slicer',          align: 'right', configable: true,   visible: true },
                 ],
                 options: {
 

src/pages/settings/interface.vue

@@ -3,6 +3,7 @@
         <v-row>
             <v-col class="col-12 col-md-6 col-lg-4">
                 <settings-general-panel></settings-general-panel>
+                <settings-language-panel class="mt-6"></settings-language-panel>
                 <settings-webcam-panel class="mt-6"></settings-webcam-panel>
                 <settings-dashboard-panel class="mt-6"></settings-dashboard-panel>
                 <settings-console-panel class="mt-6"></settings-console-panel>

src/plugins/i18n.js

@@ -0,0 +1,26 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n'
+Vue.use(VueI18n)
+
+function loadLocaleMessages () {
+    const locales = require.context('../locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
+    const messages = {}
+    locales.keys().forEach(key => {
+      const matched = key.match(/([A-Za-z0-9-_]+)\./i)
+      if (matched && matched.length > 1) {
+        const locale = matched[1]
+        messages[locale] = locales(key)
+      }
+    })
+    return messages
+  }
+  
+  let lang = localStorage.getItem("lang") || 'en'
+
+  localStorage.setItem("lang",lang);
+
+  export default new VueI18n({
+    locale: process.env.VUE_APP_I18N_LOCALE || lang,
+    fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || lang,
+    messages: loadLocaleMessages()
+  })

src/store/gui/actions.js

@@ -7,7 +7,6 @@ export default {
 
 	getData({ commit, dispatch }, payload) {
 		commit('setData', payload)
-
 		if (
 			'state' in payload &&
 			'tempchart' in payload.state &&
@@ -22,6 +21,7 @@ export default {
 				}
 			}
 		}
+
 	},
 
 	setSettings({ commit, dispatch }, payload) {
@@ -36,7 +36,7 @@ export default {
 	},
 
 	upload({ state, rootState }) {
-		let file = new File([JSON.stringify({ state })], '.mainsail.json')
+		let file = new File([JSON.stringify({ state })], '.mainsail.json');
 
 		let formData = new FormData();
 		formData.append('file', file);

src/store/gui/getters.js

@@ -22,7 +22,6 @@ export default {
 
 		return false
 	},
-
 	getDatasetAdditionalSensorValue: (state) => (payload) => {
 		if (
 			payload.name in state.tempchart.datasetSettings &&
@@ -34,7 +33,6 @@ export default {
 			'boolList': true
 		}
 	},
-
 	getPresetsFromHeater: state => (payload) => {
 		const output = []
 

src/store/gui/mutations.js

@@ -85,5 +85,6 @@ export default {
 			Vue.set(state.tempchart.datasetSettings[payload.name]['additionalSensors'], payload.sensor, {})
 
 		Vue.set(state.tempchart.datasetSettings[payload.name]['additionalSensors'][payload.sensor], 'boolList', payload.value)
+
 	}
 }

src/store/printer/getters.js

@@ -323,7 +323,7 @@ export default {
 
 		return additionValues
 	},
-
+	
 	getTempListAdditionSensors: (state, getters, rootState, rootGetters) => (name) => {
 		let additionValues = {}
 		additionalSensors.forEach(sensorName => {

src/store/variables.js

@@ -15,7 +15,7 @@ export const themeDir = '.theme'
 export const datasetTypes = [
 	"temperature",
 	"target",
-	"power",
+    "power",
 	"speed",
 ]
 

vue.config.js

@@ -9,6 +9,14 @@ module.exports = {
   "transpileDependencies": [
     "vuetify"
   ],
+  pluginOptions: {
+    i18n: {
+      locale: 'en',
+      fallbackLocale: 'en',
+      localeDir: 'locales',
+      enableInSFC: true
+    }
+  },
   configureWebpack: {
     plugins: [
       new webpack.DefinePlugin({