feat: load meta data

src/components/AppBar.vue

@@ -23,6 +23,10 @@
           <v-icon small class="mr-md-1">$home</v-icon>
           <span class="d-none d-md-inline">Dashboard</span>
         </v-btn>
+        <v-btn text to="/jobs">
+          <v-icon small class="mr-md-1">$files</v-icon>
+          <span class="d-none d-md-inline">Jobs</span>
+        </v-btn>
         <v-btn text to="/configuration">
           <v-icon small class="mr-md-1">$tune</v-icon>
           <span class="d-none d-md-inline">Printer</span>

src/components/cards/FileSystemCard.vue

@@ -20,6 +20,7 @@
       :show-meta-data="showMetaData"
       :accept="accept"
       :readonly="(this.currentRoot === 'config_examples') ? true : false"
+      :dense="dense"
       @create-file="upload"
       @create-dir="create"
       @rename-file="rename"
@@ -67,15 +68,15 @@ export default class FileSystemCard extends Mixins(UtilsMixin) {
   @Prop({ type: String, required: false, default: '.gcode' })
   accept!: string;
 
-  // @Prop({ type: Boolean, default: false })
-  // readonly!: boolean;
-
   @Prop({ type: String, default: 'Jobs' })
   panelTitle!: string;
 
   @Prop({ type: Boolean, default: true })
   showTitle!: boolean;
 
+  @Prop({ type: Boolean, default: false })
+  dense!: boolean;
+
   currentRoot = ''
 
   dialog = {

src/components/cards/dashboard/ToolsCard.vue

@@ -49,6 +49,7 @@
             <file-system-card
               root="gcodes"
               accept=".gcode, .ufp"
+              dense
               :show-title="false"
               :show-meta-data="false"
             ></file-system-card>

src/components/widgets/PrintStatusWidget.vue

@@ -41,9 +41,9 @@
             </v-tooltip>
             <span class="grey--text text--darken-2">{{ filamentEstimates }}</span>
           </div>
-          <div class="d-flex grey--text text--darken-2">
+          <div class="d-flex grey--text text--darken-2" v-if="filename">
             <v-icon color="grey darken-2">$fileDocument</v-icon>
-            <div class="filename ml-1" v-if="filename">gcodes/{{ filename }}</div>
+            <div class="filename ml-1">gcodes/{{ filename }}</div>
           </div>
       </v-col>
       <v-col cols="auto" class="d-none d-sm-flex" v-if="thumbnail && printerPrinting">

src/components/widgets/filesystem/FileSystemBrowser.vue

@@ -3,20 +3,18 @@
     <v-data-table
       :headers="headers"
       :items="directory.items"
-      item-key="name"
+      :dense="dense"
       :disable-pagination="true"
       :loading="loadingDirectory"
       :sort-desc="true"
       :custom-sort="$filters.fileSystemSort"
       :search="search"
-      :single-expand="true"
-      :show-expand="showMetaData"
+      item-key="name"
       height="100%"
       no-data-text="No files"
       no-results-text="No files found"
       sort-by="modified"
       hide-default-footer
-      dense
     >
 
       <template v-slot:top>
@@ -76,58 +74,60 @@
         </dialog-input>
       </template>
 
-      <template v-slot:expanded-item="{ headers }">
-        <tr class="is-expanded grey--text">
-          <td :colspan="headers.length">
-            <v-row>
-              <v-col>
-                Object Height: 0.0 <br />
-                Layer Height: 2 <br />
-                Print Time: 12 <br />
-              </v-col>
-              <v-col>
-                Filament Usage: 1 <br />
-                Slicer: SimpleSlicer <br />
-                <!-- <img :src="'data:image/gif;base64,'+thumbnail.data" height="36px" /> -->
-              </v-col>
-            </v-row>
-          </td>
-        </tr>
-      </template>
-
-      <template v-slot:item="{ item, expand, isExpanded }">
+      <template v-slot:item="{ item }">
         <tr
           :class="{ 'is-directory': (item.type === 'directory'), 'is-file': (item.type === 'file') }"
           class="px-1"
           @click="rowClick(item, $event)"
           @contextmenu="openContextMenu(item, $event)"
         >
           <td>
+            <!-- icons are 16px small, or 24px for standard size. -->
             <v-icon
-              small
+              v-if="!item.thumbnails || !item.thumbnails.length"
+              :small="dense"
               :color="(item.type === 'file') ? 'grey' : 'primary'"
               class="mr-1">
               {{ (item.type === 'file' ? '$file' : item.name === '..' ? '$folderUp' : '$folder') }}
             </v-icon>
+            <img
+              v-if="item.thumbnails && item.thumbnails.length"
+              class="mr-1 file-icon-thumb"
+              :src="getThumb(item).data"
+              :width="(dense) ? 16 : 24"
+            />
+
           </td>
           <td class="grey--text">
             {{ item.name }}
           </td>
+          <td class="grey--text" v-if="showMetaData">
+            <span v-if="item.type === 'file' && item.object_height">
+              {{ item.object_height }} mm
+            </span>
+          </td>
+          <td class="grey--text" v-if="showMetaData">
+            <span v-if="item.type === 'file' && item.layer_height">
+              {{ item.layer_height }} mm
+            </span>
+          </td>
+          <td class="grey--text" v-if="showMetaData">
+            <span v-if="item.type === 'file'">
+              {{ getReadableLengthString(item.filament_total) }}
+            </span>
+          </td>
+          <td class="grey--text" v-if="showMetaData">
+            {{ item.slicer }}
+          </td>
+          <td class="grey--text" v-if="showMetaData">
+            <span v-if="item.type === 'file'">
+            {{ formatCounterTime(item.estimated_time) }}
+            </span>
+          </td>
           <td class="grey--text">
             {{ (item.type === 'directory' && item.name === '..') ? '--' : formatDate(item.modified) }}
           </td>
           <td class="grey--text text-end">{{ (item.type === 'file') ? formatSize(item.size) : '--' }}</td>
-          <td class="px-0" v-if="showMetaData">
-            <v-btn
-              icon
-              small
-              v-if="item.type === 'file'"
-              @click="expand(!isExpanded)">
-              <v-icon small>
-                {{ (isExpanded) ? '$chevronUp' : '$chevronDown' }}
-              </v-icon>
-            </v-btn>
-          </td>
         </tr>
       </template>
     </v-data-table>
@@ -185,13 +185,15 @@
 
 <script lang="ts">
 import { Component, Prop, Mixins, Watch } from 'vue-property-decorator'
-import { Directory, KlipperFile } from '@/store/files/types'
+import { Directory, KlipperFile, KlipperFileWithMeta } from '@/store/files/types'
 import { SocketActions } from '@/socketActions'
+import { getThumb } from '@/store/helpers'
 import DialogInput from '@/components/dialogs/dialogInput.vue'
 import BtnFileUpload from '@/components/inputs/BtnFileUpload.vue'
 import { FileSystemDialogData } from '@/types'
 import { clone } from 'lodash-es'
 import UtilsMixin from '@/mixins/utils'
+import { DataTableHeader } from 'vuetify'
 
 @Component({
   components: {
@@ -212,31 +214,29 @@ export default class FileSystemBrowser extends Mixins(UtilsMixin) {
   @Prop({ type: Boolean, default: false })
   readonly!: boolean;
 
+  @Prop({ type: Boolean, default: false })
+  dense!: boolean;
+
   currentRoot = ''
   currentPath = ''
   search = ''
   loadingDirectory = false
-  headers = [
-    { text: '', value: 'data-table-icons', sortable: false, width: '24px' },
-    { text: 'name', value: 'name' },
-    { text: 'modified', value: 'modified', width: '1%' },
-    { text: 'size', value: 'size', width: '1%', align: 'end' }
-    // { text: '', value: 'actions', width: '30px', sortable: false }
-  ]
-
-  contextMenu: {[key: string]: boolean | number | KlipperFile | Directory | undefined } = {
+  headers: DataTableHeader[] = []
+
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  contextMenu: any = {
     open: false,
     x: 0,
     y: 0,
     item: {
-      dirname: '',
       filename: '',
       name: '',
-      type: '',
+      type: 'file',
       modified: 0,
       size: 0
     }
   }
+  /* eslint-enable @typescript-eslint/no-explicit-any */
 
   uploadDialog = false
   dialog: FileSystemDialogData = {
@@ -268,15 +268,36 @@ export default class FileSystemBrowser extends Mixins(UtilsMixin) {
   }
 
   mounted () {
-    if (this.showMetaData) {
-      this.headers.push({
-        text: '',
-        value: 'data-table-expand',
-        width: '30px'
-      })
+    this.currentRoot = this.root
+
+    if (!this.showMetaData) {
+      this.headers = [
+        { text: '', value: 'data-table-icons', sortable: false, width: '24px' },
+        { text: 'name', value: 'name' },
+        { text: 'modified', value: 'modified', width: '1%' },
+        { text: 'size', value: 'size', width: '1%', align: 'end' }
+      ]
+    } else {
+      this.headers = [
+        { text: '', value: 'data-table-icons', sortable: false, width: '24px' },
+        { text: 'name', value: 'name' },
+        { text: 'height', value: 'object_height' },
+        { text: 'layer height', value: 'layer_height' },
+        { text: 'filament', value: 'filament_total' },
+        { text: 'slicer', value: 'slicer' },
+        { text: 'estimated time', value: 'estimated_time' },
+        { text: 'modified', value: 'modified', width: '1%' },
+        { text: 'size', value: 'size', width: '1%', align: 'end' }
+      ]
     }
+  }
 
-    this.currentRoot = this.root
+  formatCounterTime (seconds: number) {
+    return this.$filters.formatCounterTime(seconds)
+  }
+
+  getReadableLengthString (length: number) {
+    return this.$filters.getReadableLengthString(length)
   }
 
   selectRoot (root: string) {
@@ -359,6 +380,14 @@ export default class FileSystemBrowser extends Mixins(UtilsMixin) {
     this.$emit('view-file', item, this.currentPath)
   }
 
+  getThumb (item: KlipperFile | KlipperFileWithMeta) {
+    if ('thumbnails' in item) {
+      const file = item as KlipperFileWithMeta
+      return getThumb(file, false)
+    }
+    return null
+  }
+
   createDirectoryDialog () {
     this.dialog = {
       type: 'createdir',

src/globals.ts

@@ -74,7 +74,8 @@ export const Globals = Object.freeze({
   LOCAL_STORAGE_KEY: 'appConfig',
   SETTINGS_FILENAME: '.fluidd.json',
   APP_NAME: 'Fluidd',
-  FILTERED_FILES: ['.', 'thumbs']
+  FILTERED_FILES_PREFIX: ['.', 'thumbs'],
+  FILTERED_FILES_EXTENSION: ['.json']
 })
 
 export const Icons = Object.freeze({

src/plugins/filters.ts

@@ -17,7 +17,12 @@ const Filters = {
     const h = Math.floor(seconds / 3600)
     const m = Math.floor(seconds % 3600 / 60)
     const s = Math.floor(seconds % 3600 % 60)
-    const r = `${h}h ${m}m ${s}s`
+
+    let r = s + 's'
+    if (m > 0) r = m + 'm ' + r
+    if (h > 0) r = h + 'h ' + r
+
+    // const r = `${h}h ${m}m ${s}s`
     return (isNeg) ? '-' + r : r
   },
 
@@ -75,8 +80,8 @@ const Filters = {
    * Formats a number representing mm to m if > 1000
    */
   getReadableLengthString (lengthInMm: number) {
-    if (lengthInMm > 1000) return (lengthInMm / 1000).toFixed(2) + 'm'
-    return (lengthInMm / 1000).toFixed(2) + 'mm'
+    if (lengthInMm > 1000) return (lengthInMm / 1000).toFixed(2) + ' m'
+    return (lengthInMm / 1000).toFixed(2) + ' mm'
   },
 
   /**

src/router/index.ts

@@ -2,6 +2,7 @@ import Vue from 'vue'
 // import store from '@/store'
 import VueRouter, { RouteConfig } from 'vue-router'
 import Dashboard from '../views/Dashboard.vue'
+import Jobs from '../views/Jobs.vue'
 import Configuration from '../views/Configuration.vue'
 import Settings from '../views/Settings.vue'
 import NotFound from '../views/NotFound.vue'
@@ -14,6 +15,11 @@ const routes: Array<RouteConfig> = [
     name: 'Dashboard',
     component: Dashboard
   },
+  {
+    path: '/jobs',
+    name: 'Jobs',
+    component: Jobs
+  },
   {
     path: '/settings',
     name: 'App Settings',