feat: updates settings layout

Signed-off-by: Craig Bassett <[email protected]>

package.json

@@ -32,6 +32,7 @@
     "@ctrl/tinycolor": "^3.3.1",
     "@fontsource/raleway": "^4.2.1",
     "@fontsource/roboto": "^4.1.0",
+    "@types/uuid": "^8.3.0",
     "axios": "^0.21.1",
     "consola": "^2.15.3",
     "core-js": "^3.8.1",
@@ -42,6 +43,7 @@
     "prismjs": "^1.22.0",
     "register-service-worker": "^1.7.2",
     "semver": "^7.3.4",
+    "uuid": "^8.3.2",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-debounce-decorator": "^1.0.1",

src/App.vue

@@ -9,6 +9,8 @@
     <app-drawer v-model="drawer"></app-drawer>
     <app-bar @drawer="onDrawerChange"></app-bar>
 
+    <router-view name="navigation"></router-view>
+
     <FlashMessage
       v-model="flashMessage.open"
       :text="flashMessage.text"

src/components/AppBar.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app-bar
     app
-    clipped-right
+    clipped-left
   >
     <v-container fluid class="flex-nowrap constrained-width pa-0 fill-height">
       <router-link to="/">

src/components/AppDrawer.vue

@@ -40,7 +40,7 @@
           <v-list-item-title>Configure</v-list-item-title>
         </v-list-item-content>
       </v-list-item>
-      <v-list-item to="/settings">
+      <v-list-item to="/interface">
         <v-list-item-icon>
           <v-icon>$cog</v-icon>
         </v-list-item-icon>

src/components/AppFooter.vue

@@ -2,11 +2,8 @@
   <v-footer app absolute>
     <span class="font-weight-light grey--text">
       &copy; {{ new Date().getFullYear() }}
-      fluidd: v{{ appInfo.fluidd.version }}-{{ appInfo.fluidd.hash }},
-      moonraker: {{ appInfo.moonraker.current_hash }},
-      klipper: {{ appInfo.klipper.current_hash }}
+      fluidd: v{{ appInfo.version }}-{{ appInfo.hash }}
     </span>
-    <!-- <pre>{{ appInfo }}</pre> -->
   </v-footer>
 </template>
 
@@ -17,11 +14,7 @@ import { Component } from 'vue-property-decorator'
 @Component({})
 export default class Footer extends Vue {
   get appInfo () {
-    return {
-      fluidd: this.$store.state.version.fluidd,
-      moonraker: this.$store.state.version.components.moonraker || {},
-      klipper: this.$store.state.version.components.klipper || {}
-    }
+    return this.$store.state.version.fluidd
   }
 }
 </script>

src/components/SettingsBar.vue

@@ -0,0 +1,50 @@
+<template>
+  <v-navigation-drawer
+    permanent
+    app
+    clipped
+    color="transparent"
+  >
+    <v-list
+      dense
+      nav
+      color="transparent"
+    >
+      <v-list-item
+        @click="$vuetify.goTo(item.ref)"
+        v-for="item in items" :key="item.name"
+        link
+      >
+        <v-list-item-icon>
+          <v-icon class="grey--text">{{ item.icon }}</v-icon>
+        </v-list-item-icon>
+
+        <v-list-item-content>
+          <v-list-item-title class="grey--text">{{ item.name }}</v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import SystemCommandsWidget from '@/components/widgets/SystemCommandsWidget.vue'
+
+@Component({
+  components: {
+    SystemCommandsWidget
+  }
+})
+export default class SettingsBar extends Mixins(StateMixin) {
+  items = [
+    { name: 'General', icon: '$printer', ref: '#general' },
+    { name: 'Camera', icon: '$camera', ref: '#camera' },
+    { name: 'Theme', icon: '$cogs', ref: '#theme' },
+    { name: 'Toolhead', icon: '$printer3dNozzle', ref: '#toolhead' },
+    { name: 'Macros', icon: '$fileCode', ref: '#macros' },
+    { name: 'Presets', icon: '$fire', ref: '#presets' }
+  ]
+}
+</script>

src/components/cards/configuration/PrinterStatsCard.vue

@@ -64,6 +64,26 @@
           </v-card>
         </v-col>
       </v-row>
+
+      <!-- <v-card outlined class="stat-square mt-4">
+        <v-card-text>
+          <div class="grey--text d-flex flex-row justify-space-between">
+            <span class="grey--text text--darken-2 mr-2">Fluidd:</span>
+            <span class="">v{{ appInfo.fluidd.version }}-{{ appInfo.fluidd.hash }}</span>
+          </div>
+
+          <div class="grey--text d-flex flex-row justify-space-between">
+            <span class="grey--text text--darken-2 mr-2">Moonraker:</span>
+            <span class="">{{ appInfo.moonraker.version }}-{{ appInfo.moonraker.current_hash }}</span>
+          </div>
+
+          <div class="grey--text d-flex flex-row justify-space-between">
+            <span class="grey--text text--darken-2 mr-2">Klipper:</span>
+            <span class="">{{ appInfo.klipper.version }}-{{ appInfo.klipper.current_hash }}</span>
+          </div>
+        </v-card-text>
+      </v-card> -->
+
     </v-card-text>
   </collapsable-card>
 </template>
@@ -92,6 +112,14 @@ export default class PrinterStatsCard extends Vue {
   get fileSystemUsage () {
     return this.$store.getters['files/getUsage']
   }
+
+  get appInfo () {
+    return {
+      fluidd: this.$store.state.version.fluidd,
+      moonraker: this.$store.state.version.components.moonraker || {},
+      klipper: this.$store.state.version.components.klipper || {}
+    }
+  }
 }
 </script>