0.0.4-Snapshots

- gets snapshot route working
- adds snapshot components
- its rough but it works

Author: aturingmachine

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

client/src/assets/styles/buttons.scss

@@ -52,6 +52,16 @@ button,
     padding: 16px;
   }
 
+  &.bare {
+    background: none;
+    border: none;
+
+    &:hover {
+      filter: none;
+      box-shadow: none;
+    }
+  }
+
   &.icon {
     background: transparent;
     border: none;

client/src/assets/styles/index.scss

@@ -2,4 +2,5 @@
 @import './modals.scss';
 @import './widgets.scss';
 @import './buttons.scss';
+@import './snapshots.scss';
 @import './main.scss';

client/src/assets/styles/snapshots.scss

@@ -0,0 +1,82 @@
+@import './colors.scss';
+
+.snapshot-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  h3 {
+    font-weight: 700;
+    font-size: 22px;
+    text-align: left;
+    margin: 16px 0 12px 16px;
+  }
+}
+
+.dir-line-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  border-top: 1px solid $border-primary;
+  color: $text-primary;
+
+  .expandable {
+    width: 100%;
+    max-height: 1000px;
+  }
+
+  .expand-enter-active,
+  .expand-leave-active {
+    transition: all 0.3s ease-in-out;
+  }
+
+  .expand-enter,
+  .expand-leave-to {
+    max-height: 0px;
+    opacity: 0;
+  }
+
+  .dir-line {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    color: $text-primary;
+
+    .bracket {
+      position: relative;
+      bottom: 4px;
+      margin-right: 4px;
+    }
+
+    .material-icons {
+      margin-right: 6px;
+    }
+
+    &.file {
+      cursor: auto;
+    }
+
+    &.dir {
+      &:hover {
+        font-weight: 700;
+
+        .material-icons {
+          text-shadow: 0 0 10px $text-accent;
+        }
+
+        .dir-name-label {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}
+
+@for $i from 1 through 7 {
+  .dir-level-#{$i} {
+    padding-left: calc(#{$i} * 20px);
+  }
+}

client/src/components/navigation/NavDrawer.vue

@@ -40,6 +40,11 @@ export default Vue.extend({
           route: '/logs',
           icon: 'list',
         },
+        {
+          title: 'Snapshots',
+          route: '/snapshots',
+          icon: 'settings_backup_restore',
+        },
         {
           title: 'Configuration',
           route: '/config',

client/src/components/snapshots/DirLine.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="dir-line-wrapper">
+    <button
+      @click="isOpen = !isOpen"
+      :class="[levelClass, isDir ? 'dir' : 'file']"
+      class="dir-line bare"
+    >
+      <span class="bracket" v-if="!isRoot"> &#8990;</span>
+      <icon>{{ iconName }}</icon>
+      <span class="dir-name-label">{{ path }}</span>
+    </button>
+    <template v-if="hasChildren">
+      <transition name="expand">
+        <div class="expandable" v-show="isOpen">
+          <dir-line
+            v-for="[key, child] in children"
+            :struct="child.contents"
+            :key="child.fullRelativePath"
+            :level="level + 1"
+            :path="key"
+            :isDir="child.isDir"
+          />
+        </div>
+      </transition>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import { DirStructInside } from '../../models/lib-snapshots'
+
+export default Vue.extend({
+  name: 'DirLine',
+
+  props: {
+    path: {
+      type: String,
+      required: true,
+    },
+
+    struct: {
+      type: Object as PropType<DirStructInside>,
+      required: true,
+    },
+
+    level: {
+      type: Number,
+      required: true,
+    },
+
+    isDir: {
+      type: Boolean,
+      required: true,
+    },
+  },
+
+  data: () => {
+    return {
+      isOpen: false,
+    }
+  },
+
+  computed: {
+    children(): [string, DirStructInside][] {
+      return Object.entries(this.struct)
+    },
+
+    hasChildren(): boolean {
+      return this.children.length > 0
+    },
+
+    isRoot(): boolean {
+      return this.level === 1
+    },
+
+    levelClass(): string {
+      const evaluatedLevel = Math.min(7, this.level)
+
+      return `dir-level-${evaluatedLevel}`
+    },
+
+    iconName(): string {
+      if (!this.isDir) {
+        return 'description'
+      }
+
+      return this.isOpen ? 'folder_open' : 'folder'
+    },
+  },
+
+  methods: {},
+})
+</script>

client/src/components/snapshots/LibRoot.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="lib-root-wrapper">
+    <h1>{{ libName }}</h1>
+    <div class="lib-structure">
+      <snapshot
+        v-for="snapshot in libSnapshots"
+        :dirStruct="snapshot.dirStruct"
+        :timestamp="snapshot.timestamp"
+        :key="snapshot.timestamp"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import { LibSnapshot } from '../../models/lib-snapshots'
+import Snapshot from './Snapshot.vue'
+
+export default Vue.extend({
+  name: 'LibRoot',
+
+  components: {
+    Snapshot,
+  },
+
+  props: {
+    libSnapshots: {
+      type: Array as PropType<LibSnapshot[]>,
+      required: true,
+    },
+
+    libName: {
+      type: String,
+      required: true,
+    },
+  },
+
+  data: () => {
+    return {}
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/colors.scss';
+
+.lib-root-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 80%;
+}
+
+.lib-structure {
+  width: 100%;
+  border: 1px solid $border-primary;
+  border-radius: 10px;
+  background-color: $secondary;
+  padding-bottom: 12px;
+}
+</style>

client/src/components/snapshots/Snapshot.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="snapshot-wrapper">
+    <h3>{{ new Date(timestamp).toLocaleString() }}</h3>
+    <dir-line
+      v-for="[key, line] in initialDirLines"
+      :key="line.fullRelativepath"
+      :level="1"
+      :struct="line.contents"
+      :path="key"
+      :isDir="line.isDir"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import { DirStruct, DirStructInside } from '../../models/lib-snapshots'
+import DirLine from './DirLine.vue'
+
+export default Vue.extend({
+  name: 'Snapshot',
+
+  components: {
+    DirLine,
+  },
+
+  props: {
+    dirStruct: {
+      type: Object as PropType<DirStruct>,
+      required: true,
+    },
+
+    timestamp: {
+      type: Number,
+      required: true,
+    },
+  },
+
+  data: () => {
+    return {}
+  },
+
+  computed: {
+    initialDirLines(): [string, DirStructInside][] {
+      return Object.entries(this.dirStruct)
+    },
+  },
+})
+</script>

client/src/models/lib-snapshots.ts

@@ -0,0 +1,27 @@
+export interface DirStruct {
+  [key: string]: DirStructInside
+}
+
+export interface DirStructInside {
+  fullRelativePath: string
+  isDir: boolean
+  contents: DirStruct
+}
+
+export type RunDetails = {
+  source: string
+  destination: string
+  backup: string
+}
+
+export type LibSnapshot = {
+  libName: string
+  run: RunDetails
+  timestamp: number
+  path: string
+  dirStruct: DirStruct
+}
+
+export type LibSnapshotRecord = {
+  [libName: string]: LibSnapshot[]
+}

client/src/router/index.ts

@@ -5,6 +5,7 @@ import Logs from '../views/Logs.vue'
 import Config from '../views/Config.vue'
 import About from '../views/About.vue'
 import Dashboard from '../views/Dashboard.vue'
+import Snapshots from '../views/LibSnapshots.vue'
 
 Vue.use(VueRouter)
 
@@ -34,6 +35,11 @@ const routes: Array<RouteConfig> = [
     name: 'Dashboard',
     component: Dashboard,
   },
+  {
+    path: '/snapshots',
+    name: 'Snapshots',
+    component: Snapshots,
+  },
 ]
 
 const router = new VueRouter({