feature: add disk usage to gcode-files

Signed-off-by: Stefan Dej <meteyou@gmail.com>

src/pages/Files.vue

@@ -74,7 +74,21 @@
                     </v-menu>
                 </v-item-group>
             </v-card-title>
-            <v-card-subtitle>Current path: {{ this.currentPath !== 'gcodes' ? "/"+this.currentPath.substring(7) : "/" }}</v-card-subtitle>
+            <v-card-subtitle>
+                Current path: {{ 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>
+                        </template>
+                        <span>
+                            Used: {{ formatFilesize(this.disk_usage.used) }}<br />
+                            Free: {{ formatFilesize(this.disk_usage.free) }}<br />
+                            Total: {{ formatFilesize(this.disk_usage.total) }}
+                        </span>
+                    </v-tooltip>
+                </div>
+            </v-card-subtitle>
             <v-card-text>
                 <v-text-field
                   v-model="search"
@@ -153,6 +167,7 @@
                         <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-table>
             <div class="dragzone" :style="'visibility: '+dropzone.visibility+'; opacity: '+dropzone.hidden">
                 <div class="textnode">Drop files to add gcode.</div>
@@ -386,6 +401,11 @@
                     return this.$store.dispatch("gui/setSettings", { gcodefiles: { hideMetadataColums: newVal } })
                 }
             },
+            disk_usage: {
+                get: function() {
+                    return this.$store.getters["files/getDiskUsage"](this.currentPath)
+                }
+            }
         },
         created() {
             this.loadPath()

src/store/files/actions.js

@@ -7,6 +7,15 @@ export default {
 
 	getDirectory({ commit }, payload) {
 		commit('setDirectory', payload)
+
+		if (
+			'requestParams' in payload &&
+			'path' in payload.requestParams &&
+			'disk_usage' in payload
+		) commit('setDiskUsage', {
+			disk_usage: payload.disk_usage,
+			path: payload.requestParams.path
+		})
 	},
 
 	getMetadata({ commit, rootState }, payload) {

src/store/files/getters.js

@@ -60,4 +60,17 @@ export default {
 
 		return [favicon16Default, favicon32Default]
 	},
+
+	getDiskUsage: (state) => (path) => {
+		if (path.indexOf('/') !== -1) path = path.substr(0, path.indexOf('/'))
+
+		const dir = state.filetree.find(dir => dir.filename === path)
+		if (dir && 'disk_usage' in dir) return dir.disk_usage
+
+		return {
+			free: 0,
+			total: 0,
+			used: 0,
+		}
+	}
 }

src/store/files/index.js

@@ -9,25 +9,29 @@ export function getDefaultState() {
 				isDirectory: true,
 				filename: 'gcodes',
 				modified: new Date(),
-				childrens: []
+				childrens: [],
+				disk_usage: {}
 			},
 			{
 				isDirectory: true,
 				filename: 'config_examples',
 				modified: new Date(),
-				childrens: []
+				childrens: [],
+				disk_usage: {}
 			},
 			{
 				isDirectory: true,
 				filename: 'config',
 				modified: new Date(),
-				childrens: []
+				childrens: [],
+				disk_usage: {}
 			},
 			{
 				isDirectory: true,
 				filename: 'docs',
 				modified: new Date(),
-				childrens: []
+				childrens: [],
+				disk_usage: {}
 			}
 		],
 	}

src/store/files/mutations.js

@@ -162,4 +162,12 @@ export default {
 
 		if (index >= 0 && currentPath[index]) currentPath.splice(index, 1);
 	},
+
+	setDiskUsage(state, payload) {
+		let path = payload.path
+		if (path.indexOf('/') !== -1) path = path.substr(0, path.indexOf('/'))
+
+		const dir = state.filetree.find(dir => dir.filename === path)
+		if (dir && 'disk_usage' in dir) Vue.set(dir, "disk_usage", payload.disk_usage)
+	}
 }