Merge pull request #2 from cobraguy/styling

Add styling and dark mode

1 files changed, 53 insertions, 0 deletions

diff --git a/src/views/Start.vue b/src/views/Start.vue
new file mode 100644
index 0000000..567582d
--- /dev/null
+++ b/src/views/Start.vue
@@ -0,0 +1,53 @@
+<template>
+  <div id="start">
+    <router-link to="/editor">
+      <UIButton>Create new database</UIButton>
+    </router-link>
+    <FileUpload
+      :accept="'application/json'"
+      @fileChanged="handleDatabaseChange">Use existing database</FileUpload>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import FileUpload from '@/components/FileUpload.vue';
+import { parsePtDatabase } from '@/features/parser';
+import UIButton from '@/components/UIButton.vue';
+
+export default defineComponent({
+  name: 'Start',
+  components: {
+    FileUpload,
+    UIButton,
+  },
+  methods: {
+    handleDatabaseChange(files: File[]) {
+      parsePtDatabase(files[0]).then((result) => {
+        this.$store.commit('setLabs', result.labs);
+        this.$store.commit('setPeerTeachers', result.peerTeachers);
+        this.$router.push({ name: 'Editor' });
+      });
+    },
+  },
+});
+</script>
+
+<style>
+#start {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  font-size: 1.5rem;
+  height: 100vh;
+  justify-content: center;
+}
+
+#start > * {
+  margin-top: 1em;
+}
+
+#start > *:first-child {
+  margin-top: 0;
+}
+</style>