From 65d0dbb9b3388e03c312c1dd456feeef740289e0 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Tue, 13 Apr 2021 12:49:14 -0500
Subject: Start styling and add initial dark mode support

---
 src/views/Start.vue | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 src/views/Start.vue

(limited to 'src/views/Start.vue')

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>
-- 
cgit v1.2.3