dbuploader is a component now #10

src/components/DbUpload.vue

@@ -1,8 +1,7 @@
 <template>
-  <div id="dbloader-container">
-    <h1>Sqliteviz</h1>
+  <div>
     <label for="assetsFieldHandle">
-      <div id="drop-area" @dragover="dragover" @dragleave="dragleave" @drop="drop">
+      <div class="drop-area" @dragover="dragover" @dragleave="dragleave" @drop="drop">
         <input
           type="file"
           id="assetsFieldHandle"
@@ -16,9 +15,6 @@
       </div>
     </label>
     <div id="error" class="error"></div>
-    <button id ="skip" class="secondary" @click="$router.push('/editor')">
-      Skip database connection for now
-    </button>
   </div>
 </template>
 
@@ -55,39 +51,24 @@ export default {
 </script>
 
 <style scoped>
-#dbloader-container {
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-h1 {
-  color: var(--color-accent);
-}
 label {
   display: inline-block;
   border: 1px dashed var(--color-border);
   padding: 8px;
   border-radius: var(--border-radius-big);
 }
-#drop-area {
-  width: 628px;
-  height: 490px;
+.drop-area {
   background-color: var(--color-bg-light-3);
   border-radius: var(--border-radius-big);
   color: var(--color-text-base);
   font-size: 13px;
-  padding: 200px 144px;
   text-align: center;
   box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 input {
   display: none;
 }
-#skip {
-  position: absolute;
-  bottom: 50px;
-}
 </style>

src/router/index.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Editor from '../views/Editor'
 import MyQueries from '../views/MyQueries'
-import DbUpload from '../views/DbUpload'
+import Home from '../views/Home'
 import MainView from '../views/MainView'
 
 Vue.use(VueRouter)
@@ -11,7 +11,7 @@ const routes = [
   {
     path: '/',
     name: 'Welcome',
-    component: DbUpload
+    component: Home
   },
   {
     path: '/',

src/views/Home.vue

@@ -0,0 +1,70 @@
+<template>
+  <div id="dbloader-container">
+    <h1>Sqliteviz</h1>
+    <db-upload />
+    <button id ="skip" class="secondary" @click="$router.push('/editor')">
+      Skip database connection for now
+    </button>
+  </div>
+</template>
+
+<script>
+import dbUpload from '@/components/DbUpload'
+
+export default {
+  name: 'Home',
+  components: { dbUpload },
+  methods: {
+    loadDb () {
+      this.$db.loadDb(this.$refs.file.files[0])
+    },
+    dragover (event) {
+      event.preventDefault()
+      // TODO: Add some visual stuff to show the user can drop its files
+      if (!event.currentTarget.classList.contains('bg-green-300')) {
+        event.currentTarget.classList.remove('bg-gray-100')
+        event.currentTarget.classList.add('bg-green-300')
+      }
+    },
+    dragleave (event) {
+      // Clean up
+      event.currentTarget.classList.add('bg-gray-100')
+      event.currentTarget.classList.remove('bg-green-300')
+    },
+    drop (event) {
+      event.preventDefault()
+      this.$refs.file.files = event.dataTransfer.files
+      this.loadDb()
+      // Clean up
+      event.currentTarget.classList.add('bg-gray-100')
+      event.currentTarget.classList.remove('bg-green-300')
+    }
+  }
+}
+</script>
+
+<style scoped>
+#dbloader-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+h1 {
+  color: var(--color-accent);
+}
+
+#skip {
+  position: absolute;
+  bottom: 50px;
+}
+
+>>>.drop-area {
+  width: 628px;
+  height: 490px;
+  padding: 0 150px;
+}
+</style>