Update log viewer, add uncalibrated modal (#108)

Adds a prettier log viewer, with the ability to filter logs. Also warns user and prevents switching into 3d mode if the resolution is uncalibrated.

photon-client/src/views/LogsView.vue

@@ -0,0 +1,130 @@
+<template>
+    <v-card
+      dark
+      class="pt-3"
+      color="primary"
+      flat
+    >
+      <v-card-title>
+        View Program Logs
+
+        <v-btn
+                color="secondary"
+                style="margin-left: auto;"
+                depressed
+                @click="download('photonlog.log', rawLogs.map(it => it.message).join('\n'))"
+        >
+          <v-icon left>
+            mdi-download
+          </v-icon>
+          Download Log
+        </v-btn>
+      </v-card-title>
+      <div class="pr-6 pl-6">
+        <v-btn-toggle
+          v-model="logLevel"
+          dark
+          multiple
+          class="fill mb-4"
+        >
+          <v-btn
+            v-for="(level) in possibleLevelArray"
+            :key="level"
+            color="secondary"
+            class="fill"
+          >
+            {{ level }}
+          </v-btn>
+        </v-btn-toggle>
+        <!-- Logs -->
+
+        <v-virtual-scroll
+          :items="logMessageArray"
+          item-height="50"
+          height="600"
+        >
+          <template v-slot="{ item }">
+            <div :class="[getColor(item) + '--text', 'log-item']">{{ item.message }}</div>
+          </template>
+        </v-virtual-scroll>
+      </div>
+
+      <v-divider />
+
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+                color="white"
+                text
+                @click="$store.state.logsOverlay = false"
+        >
+          Close
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+</template>
+
+<script>
+
+export default {
+    name: "Logs",
+    components: {
+    },
+    data() {
+        return {
+            selectedLevel: [0, 1, 2],
+            possibleLevelArray: ['ERROR', 'WARN', 'INFO', 'DEBUG'],
+            colorArray: ['red', 'yellow','green', 'white'],
+        }
+    },
+    computed: {
+        rawLogs() {
+            return this.$store.state.logMessages;
+        },
+        logMessageArray() {
+            const logArray = this.$store.state.logMessages;
+            return logArray.filter(it => this.selectedLevel.includes(it.level));
+        },
+        logLevel: {
+            get() {
+                return this.selectedLevel
+            },
+            set(value) {
+                this.selectedLevel = value;
+            }
+        }
+    },
+    methods: {
+        getColor(message) {
+            return this.colorArray[message.level];
+        },
+
+        download(filename, text) {
+            const element = document.createElement('a');
+            element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+            element.setAttribute('download', filename);
+
+            element.style.display = 'none';
+            document.body.appendChild(element);
+
+            element.click();
+
+            document.body.removeChild(element);
+        }
+    }
+}
+
+</script>
+
+<style scoped>
+.v-btn-toggle.fill {
+    width: 100%;
+    height: 100%;
+}
+
+.v-btn-toggle.fill > .v-btn {
+    width: 25%;
+    height: 100%;
+}
+
+</style>