Version 2.0.0-RC5

Finished i18n support Restructured Settings pages Added the Diagnostics button again to the Settings page Improved upload button appearance and file selection when opening the context menu Excluded JSON files from uploads to /www again Removed HTML links from file lists Updated Vuetify framework Make Vue globally accessible via window Bug fix: Compensation button wraps correctly on mobile devices Bug fix: Move buttons became unresponsive after the first click when performing manual height compensation Bug fix: Temperature inputs were not properly initialized in some cases Bug fix: Uploads of very big files could cause a crash in Chromium Bug fix: When printing a file, a missing firstLayerHeight property could cause an unwanted disconnect Bug fix: When restarting a machine, the job path would not be reset to the default path Bug fix: When navigating into empty macro directories, the 'Go up' option was hidden Bug fix: Sometimes the layer chart stayed empty Bug fix: The tool fan could not be hidden Bug fix: config.g could not be created if it did not exist before and fixed possible related race condition
Duet3D · Feb 28, 2019 · d8f5cbf · d8f5cbf
1 parent 79b61e4
commit d8f5cbf
Show file tree

Hide file tree

Showing 69 changed files with 1,384 additions and 681 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "vue": "^2.6.7",
     "vue-i18n": "^8.8.2",
     "vue-router": "^3.0.1",
-    "vuetify": "^1.5.2",
+    "vuetify": "^1.5.4",
     "vuex": "^3.1.0"
   },
   "devDependencies": {

diff --git a/src/components/buttons/SDCardBtn.vue b/src/components/buttons/SDCardBtn.vue
@@ -1,13 +1,13 @@
 <template>
 	<v-menu offset-y v-if="storages.length > 1" v-tab-control.dynamic>
 		<v-btn slot="activator" color="success">
-			<v-icon class="mr-1">sd_storage</v-icon> SD Card {{ storageIndex }} <v-icon class="ml-1">arrow_drop_down</v-icon>
+			<v-icon class="mr-1">sd_storage</v-icon> {{ $t('generic.sdCard', [storageIndex]) }} <v-icon class="ml-1">arrow_drop_down</v-icon>
 		</v-btn>
 
 		<v-list ref="list">
 			<v-list-tile v-for="(storage, index) in storages" :key="index" @click="$emit('storageSelected', index)" v-tab-control>
 				<v-icon class="mr-1">{{ storage.mounted ? 'done' : 'clear' }}</v-icon>
-				SD Card {{ index }} ({{ storage.mounted ? 'mounted' : 'not mounted' }})
+				{{ $t('generic.sdCard', [index]) }} ({{ $t(storage.mounted ? 'generic.mounted' : 'generic.notMounted') }})
 			</v-list-tile>
 		</v-list>
 	</v-menu>

diff --git a/src/components/buttons/UploadBtn.vue b/src/components/buttons/UploadBtn.vue
@@ -1,11 +1,15 @@
 <template>
 	<div>
-		<v-btn v-bind="$props" @click="chooseFile" :disabled="$props.disabled || !canUpload" :loading="uploading" :title="$t(`button.upload['${target}'].title`)" :color="innerColor" @dragover="dragOver" @dragleave="dragLeave" @drop.prevent.stop="dragDrop" tabindex="0">
-			<v-icon class="mr-2">cloud_upload</v-icon> {{ $t(`button.upload['${target}'].caption`) }}
+		<v-btn v-bind="$props" @click="chooseFile" :disabled="$props.disabled || !canUpload" :loading="isBusy" :title="$t(`button.upload['${target}'].title`)" :color="innerColor" @dragover="dragOver" @dragleave="dragLeave" @drop.prevent.stop="dragDrop" tabindex="0">
+			<template slot="loader">
+				<v-progress-circular indeterminate :size="23" :width="2" class="mr-2"></v-progress-circular>
+				{{ caption }}
+			</template>
+			<v-icon class="mr-2">cloud_upload</v-icon> {{ caption }}
 		</v-btn>
 
 		<input ref="fileInput" type="file" :accept="accept" hidden @change="fileSelected" multiple>
-		<confirm-dialog :shown.sync="confirmUpdate" question="Install updates?" prompt="You have uploaded at least one firmware update. Would you like to install them now?" @confirmed="startUpdate"></confirm-dialog>
+		<confirm-dialog :shown.sync="confirmUpdate" :question="$t('dialog.update.title')" :prompt="$t('dialog.update.prompt')" @confirmed="startUpdate"></confirm-dialog>
 	</div>
 </template>
 
@@ -18,13 +22,22 @@ import VBtn from 'vuetify/es5/components/VBtn'
 import { mapState, mapGetters, mapActions } from 'vuex'
 import Path from '../../utils/path.js'
 
-const webExtensions = ['.json', '.htm', '.html', '.ico', '.xml', '.css', '.map', '.js', '.ttf', '.eot', '.svg', '.woff', '.woff2', '.jpeg', '.jpg', '.png']
+const webExtensions = ['.htm', '.html', '.ico', '.xml', '.css', '.map', '.js', '.ttf', '.eot', '.svg', '.woff', '.woff2', '.jpeg', '.jpg', '.png']
 
 export default {
 	computed: {
 		...mapState(['isLocal']),
 		...mapGetters(['isConnected', 'uiFrozen']),
 		...mapGetters('machine/model', ['board']),
+		caption() {
+			if (this.extracting) {
+				return this.$t('generic.extracting');
+			}
+			if (this.uploading) {
+				return this.$t('generic.uploading');
+			}
+			return this.$t(`button.upload['${this.target}'].caption`);
+		},
 		canUpload() {
 			return this.isConnected && !this.uiFrozen;
 		},
@@ -57,11 +70,15 @@ export default {
 				case 'update': return Path.sys;
 			}
 			return undefined;
+		},
+		isBusy() {
+			return this.extracting || this.uploading;
 		}
 	},
 	data() {
 		return {
 			innerColor: this.color,
+			extracting: false,
 			uploading: false,
 
 			confirmUpdate: false,
@@ -87,7 +104,7 @@ export default {
 	methods: {
 		...mapActions('machine', ['sendCode', 'upload']),
 		chooseFile() {
-			if (!this.uploading) {
+			if (!this.isBusy) {
 				this.$refs.fileInput.click();
 			}
 		},
@@ -123,23 +140,25 @@ export default {
 				}
 
 				if (files[0].name.toLowerCase().endsWith('.zip')) {
-					// Open the ZIP file and read its content
 					const zip = new JSZip(), zipFiles = [], target = this.target;
-					await zip.loadAsync(files[0], { checkCRC32: true });
-					zip.forEach(function(file) {
-						if (!file.endsWith('/') && (file.split('/').length === 2 || target !== 'filaments')) {
-							zipFiles.push(file);
-						}
-					});
+					this.extracting = true;
+					try {
+						// Open the ZIP file and read its content
+						await zip.loadAsync(files[0], { checkCRC32: true });
+						zip.forEach(function(file) {
+							if (!file.endsWith('/') && (file.split('/').length === 2 || target !== 'filaments')) {
+								zipFiles.push(file);
+							}
+						});
 
-					// Could we get anything useful?
-					if (!zipFiles.length) {
-						this.$makeNotification('error', this.$t(`button.upload['${this.target}'].caption`), this.$t('error.uploadNoFiles'));
-						return;
-					}
+						// Could we get anything useful?
+						if (!zipFiles.length) {
+							this.extracting = false;
+							this.$makeNotification('error', this.$t(`button.upload['${this.target}'].caption`), this.$t('error.uploadNoFiles'));
+							return;
+						}
 
-					// Extract everything and start the upload
-					try {
+						// Extract everything and start the upload
 						for (let i = 0; i < zipFiles.length; i++) {
 							const name = zipFiles[i];
 							zipFiles[i] = await zip.file(name).async('blob');
@@ -150,6 +169,7 @@ export default {
 						console.warn(e);
 						this.$makeNotification('error', this.$t('error.uploadDecompressionFailed'), e.message);
 					}
+					this.extracting = false;
 					return;
 				}
 			}
@@ -243,7 +263,9 @@ export default {
 		dragOver(e) {
 			e.preventDefault();
 			e.stopPropagation();
-			this.innerColor = 'success';
+			if (!this.isBusy) {
+				this.innerColor = 'success';
+			}
 		},
 		dragLeave(e) {
 			e.preventDefault();
@@ -252,7 +274,7 @@ export default {
 		},
 		async dragDrop(e) {
 			this.innerColor = this.color;
-			if (e.dataTransfer.files.length) {
+			if (!this.isBusy && e.dataTransfer.files.length) {
 				await this.doUpload(e.dataTransfer.files);
 			}
 		}

diff --git a/src/components/charts/LayerChart.vue b/src/components/charts/LayerChart.vue
@@ -20,11 +20,11 @@
 	<v-card class="card">
 		<v-card-title>
 			<span>
-				<v-icon small class="mr-1">timeline</v-icon> Layer Chart
+				<v-icon small class="mr-1">timeline</v-icon> {{ $t('chart.layer.caption') }}
 			</span>
 			<v-spacer></v-spacer>
 			<a v-show="job.layers.length > 30" href="#" @click.prevent="showAllLayers = !showAllLayers">
-				{{ showAllLayers ? 'Show Last 30 Layers' : 'Show All Layers' }}
+				{{ showAllLayers ? $t('chart.layer.showLastLayers', [30]) : $t('chart.layer.showAllLayers') }}
 			</a>
 		</v-card-title>
 
@@ -48,7 +48,7 @@ let layers
 export default {
 	computed: {
 		...mapState('machine/model', ['job']),
-		...mapState('settings', ['darkTheme'])
+		...mapState('settings', ['darkTheme', 'language'])
 	},
 	data() {
 		return {
@@ -88,6 +88,7 @@ export default {
 	},
 	mounted() {
 		// Create new chart options. Don't use data for the following because it should not be reactive
+		const that = this;
 		this.options = {
 			elements: {
 				line: {
@@ -148,13 +149,13 @@ export default {
 			tooltips: {
 				displayColors: false,
 				callbacks: {
-					title: tooltipItems => `Layer ${tooltipItems[0].index + 1}`,
+					title: tooltipItems => that.$t('chart.layer.layer', [tooltipItems[0].index + 1]),
 					label(tooltipItem) {
 						const layer = layers[tooltipItem.index];
-						let result = [`Duration: ${displayTime(layer.duration, false)}`];
-						if (layer.height) { result.push(`Layer Height: ${displayZ(layer.height)}`); }
-						if (layer.filament) { result.push(`Filament Usage: ${display(layer.filament, 1, 'mm')}`); }
-						if (layer.fractionPrinted) { result.push(`File Progress: ${display(layer.fractionPrinted * 100, 1, '%')}`); }
+						let result = [that.$t('chart.layer.layerDuration', [displayTime(layer.duration, false)])];
+						if (layer.height) { result.push(that.$t('chart.layer.layerHeight', [displayZ(layer.height)])); }
+						if (layer.filament) { result.push(that.$t('chart.layer.filamentUsage', [display(layer.filament, 1, 'mm')])); }
+						if (layer.fractionPrinted) { result.push(that.$t('chart.layer.fractionPrinted', [display(layer.fractionPrinted * 100, 1, '%')])); }
 						return result;
 					}
 				}
@@ -170,7 +171,7 @@ export default {
 					borderColor: 'rgba(0, 129, 214, 0.8)',
 					backgroundColor: 'rgba(0, 129, 214, 0.8)',
 					fill: false,
-					label: 'Layer Time'
+					label: this.$t('chart.layer.layerTime')
 				}]
 			}
 		});
@@ -181,6 +182,9 @@ export default {
 		darkTheme(to) {
 			this.applyDarkTheme(to);
 		},
+		language() {
+			this.chart.data.datasets[0].label = this.$t('chart.layer.layerTime');
+		},
 		'job.layers'() {
 			this.updateChart();
 		},

diff --git a/src/components/charts/TemperatureChart.vue b/src/components/charts/TemperatureChart.vue
@@ -52,6 +52,7 @@ function makeDataset(heaterIndex, extra, label) {
 		borderDash: extra ? [10, 5] : undefined,
 		borderWidth: 2,
 		data: [],
+		locale: i18n.locale,
 		pointRadius: 0,
 		pointHitRadius: 0,
 		showLine: true
@@ -70,17 +71,21 @@ const tempSamples = {
 function pushSeriesData(machine, heaterIndex, heater, extra) {
 	// Get series from dataset
 	const machineData = tempSamples[machine];
-	let dataset;
-	machineData.temps.forEach(function(item) {
+	let dataset = machineData.temps.find(function(item) {
 		if (item.heaterIndex === heaterIndex && item.extra === extra) {
-			dataset = item;
+			return item;
 		}
 	});
 
-	if (!dataset) {
+	if (!dataset || dataset.locale !== i18n.locale) {
 		const label = heater.name ? heater.name : i18n.t('chart.temperature.heater', [heaterIndex]);
-		dataset = makeDataset(heaterIndex, extra, label);
-		machineData.temps.push(dataset);
+		if (dataset) {
+			dataset.label = label;
+			dataset.locale = i18n.locale;
+		} else {
+			dataset = makeDataset(heaterIndex, extra, label);
+			machineData.temps.push(dataset);
+		}
 	}
 
 	// Add new sample

diff --git a/src/components/dialogs/ConnectionDialog.vue b/src/components/dialogs/ConnectionDialog.vue
@@ -20,15 +20,15 @@ export default {
 		...mapState('machine', ['isReconnecting']),
 		message() {
 			if (this.isConnecting) {
-				return 'Connecting...';
+				return this.$t('dialog.connection.connecting');
 			}
 			if (this.isReconnecting) {
-				return 'Connection lost, attempting to reconnect...';
+				return this.$t('dialog.connection.reconnecting');
 			}
 			if (this.isDisconnecting) {
-				return 'Disconnecting...';
+				return this.$t('dialog.connection.disconnecting');
 			}
-			return 'Please stand by...';
+			return this.$t('dialog.connection.standBy');
 		}
 	}
 }

diff --git a/src/components/dialogs/FileEditDialog.vue b/src/components/dialogs/FileEditDialog.vue
@@ -45,13 +45,13 @@
 
 				<v-toolbar-items>
 					<v-btn v-if="showGCodeHelp" dark flat href="https://duet3d.dozuki.com/Wiki/Gcode" target="_blank">
-						<v-icon class="mr-1">help</v-icon> G-Code Reference
+						<v-icon class="mr-1">help</v-icon> {{ $t('dialog.fileEdit.gcodeReference') }}
 					</v-btn>
 					<v-btn v-if="showDisplayHelp" dark flat href="https://duet3d.dozuki.com/Wiki/Duet_2_Maestro_12864_display_menu_system" target="_blank">
-						<v-icon class="mr-1">help</v-icon> Menu Reference
+						<v-icon class="mr-1">help</v-icon> {{ $t('dialog.fileEdit.menuReference') }} 
 					</v-btn>
 					<v-btn dark flat @click="save">
-						<v-icon class="mr-1">save</v-icon> Save
+						<v-icon class="mr-1">save</v-icon> {{ $t('dialog.fileEdit.save') }}
 					</v-btn>
 				</v-toolbar-items>
 			</v-toolbar>

diff --git a/src/components/dialogs/MeshEditDialog.vue b/src/components/dialogs/MeshEditDialog.vue
@@ -4,44 +4,44 @@
 			<v-card>
 				<v-form ref="form" @submit.prevent="apply">
 					<v-card-title>
-						<span class="headline">Set Mesh Parameters</span>
+						<span class="headline">{{ $t('dialog.meshEdit.title') }}</span>
 					</v-card-title>
 					<v-card-text>
 						<v-container grid-list-md>
 							<v-layout wrap v-if="geometry === 'delta'">
 								<v-flex xs12 sm6 md6>
-									<v-text-field type="number" label="Probe radius" v-model.number="radius" required></v-text-field>
+									<v-text-field type="number" :label="$t('dialog.meshEdit.radius')" v-model.number="radius" required></v-text-field>
 								</v-flex>
 								<v-flex xs12 sm6 md6>
-									<v-text-field type="number" label="Spacing" v-model.number="spacing" required></v-text-field>
+									<v-text-field type="number" :label="$t('dialog.meshEdit.spacing')" v-model.number="spacing" required></v-text-field>
 								</v-flex>
 							</v-layout>
 							<v-layout wrap v-else>
 								<v-flex xs12 sm6 md6>
-									<v-text-field type="number" label="Start coordinate in X direction" v-model.number="minX" required></v-text-field>
+									<v-text-field type="number" :label="$t('dialog.meshEdit.startCoordinate', ['X'])" v-model.number="minX" required></v-text-field>
 								</v-flex>
 								<v-flex xs12 sm6 md6>
-									<v-text-field type="number" label="End coordinate in X direction" v-model.number="maxX" required></v-text-field>
+									<v-text-field type="number" :label="$t('dialog.meshEdit.endCoordinate', ['X'])" v-model.number="maxX" required></v-text-field>
 								</v-flex>
 								<v-flex xs12 sm6 md6>
-									<v-text-field type="number" label="Start coordinate in Y direction" v-model.number="minY" required></v-text-field>
+									<v-text-field type="number" :label="$t('dialog.meshEdit.startCoordinate', ['Y'])" v-model.number="minY" required></v-text-field>
 								</v-flex>
 								<v-flex xs12 sm6 md6>
-									<v-text-field type="number" label="End coordinate in Y direction" v-model.number="maxY" required></v-text-field>
+									<v-text-field type="number" :label="$t('dialog.meshEdit.endCoordinate', ['Y'])" v-model.number="maxY" required></v-text-field>
 								</v-flex>
 								<v-flex xs12 sm6 md6>
-									<v-text-field type="number" label="Spacing in X direction" v-model.number="spacingX" required></v-text-field>
+									<v-text-field type="number" :label="$t('dialog.meshEdit.spacingDirection', ['X'])" v-model.number="spacingX" required></v-text-field>
 								</v-flex>
 								<v-flex xs12 sm6 md6>
-									<v-text-field type="number" label="Spacing in Y direction" v-model.number="spacingY" required></v-text-field>
+									<v-text-field type="number" :label="$t('dialog.meshEdit.spacingDirection', ['Y'])" v-model.number="spacingY" required></v-text-field>
 								</v-flex>
 							</v-layout>
 						</v-container>
 					</v-card-text>
 					<v-card-actions>
 						<v-spacer></v-spacer>
-						<v-btn color="blue darken-1" flat @click="hide">Close</v-btn>
-						<v-btn color="blue darken-1" flat type="submit">Apply</v-btn>
+						<v-btn color="blue darken-1" flat @click="hide">{{ $t('generic.cancel') }}</v-btn>
+						<v-btn color="blue darken-1" flat type="submit">{{ $t('generic.ok') }}</v-btn>
 					</v-card-actions>
 				</v-form>
 			</v-card>

diff --git a/src/components/dialogs/MessageBoxDialog.vue b/src/components/dialogs/MessageBoxDialog.vue
@@ -18,7 +18,7 @@
 							<v-flex v-for="index in numMoveSteps" :key="-index" :class="getMoveCellClass(index - 1)">
 								<v-layout column>
 									<v-flex v-for="axis in displayedAxes" :key="axis.letter">
-										<code-btn :code="`G91\nG1 ${axis.letter}${-moveSteps(axis.letter)[index - 1]} F${moveFeedrate}\nG90`" block>
+										<code-btn :code="`G91\nG1 ${axis.letter}${-moveSteps(axis.letter)[index - 1]} F${moveFeedrate}\nG90`" no-wait block>
 											<v-icon>keyboard_arrow_left</v-icon> {{ axis.letter + -moveSteps(axis.letter)[index - 1] }}
 										</code-btn>
 									</v-flex>
@@ -35,7 +35,7 @@
 							<v-flex v-for="index in numMoveSteps" :key="index" :class="getMoveCellClass(numMoveSteps - index)">
 								<v-layout column>
 									<v-flex v-for="axis in displayedAxes" :key="axis.letter">
-										<code-btn :code="`G91\nG1 ${axis.letter}${moveSteps(axis.letter)[numMoveSteps - index]} F${moveFeedrate}\nG90`" block>
+										<code-btn :code="`G91\nG1 ${axis.letter}${moveSteps(axis.letter)[numMoveSteps - index]} F${moveFeedrate}\nG90`" no-wait block>
 											{{ axis.letter + '+' + moveSteps(axis.letter)[numMoveSteps - index] }} <v-icon>keyboard_arrow_right</v-icon>
 										</code-btn>
 									</v-flex>