Merge pull request #40 from LS-LEDA/dev

Navigation bar + Import Data Page

package.json

@@ -8,17 +8,25 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@jamescoyle/vue-icon": "^0.1.2",
+    "@mdi/js": "^6.3.95",
     "core-js": "^3.6.5",
-    "vue": "^3.0.0"
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.12"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
+    "@vue/cli-plugin-babel": "^5.0.0-beta.6",
+    "@vue/cli-plugin-eslint": "^5.0.0-beta.6",
+    "@vue/cli-service": "^5.0.0-beta.6",
+    "@vue/compiler-sfc": "^3.2.20",
+    "autoprefixer": "^10.3.7",
     "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0"
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^7.20.0",
+    "postcss": "^8.3.11",
+    "post-loader": "^2.0.0",
+    "postcss-cli": "^9.0.1",
+    "tailwindcss": "^2.2.17"
   },
   "eslintConfig": {
     "root": true,

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.vue

@@ -1,14 +1,20 @@
 <template>
-  <h1> jsMLA </h1>
+    <div class="flex flex-row h-screen w-screen">
+        <!-- Left navigation bar -->
+        <NavigationBar/>
+        <!-- Page rendered by router -->
+        <router-view/>
+    </div>
 </template>
 
 <script>
+import NavigationBar from "@/components/NavigationBar/NavigationBar";
 
 export default {
-  name: 'App',
-  components: {
-
-  }
+    name: 'App',
+    components: {
+        NavigationBar
+    }
 }
 </script>
 

src/components/ImportData/BrowseFilesButton.vue

@@ -0,0 +1,31 @@
+<template>
+    <button
+        type="button"
+        class="flex flex-row bg-blue-400 hover:bg-blue-500 rounded-lg px-6 py-3 mx-2 my-2 font-bold"
+        @click="this.$parent.$refs.moodle_file.click()">
+        <svg-icon
+            type="mdi" :path="open_folder_icon"></svg-icon>
+        <span class="ml-3">Browse Files</span>
+    </button>
+</template>
+
+<script>
+import SvgIcon from '@jamescoyle/vue-icon'
+import { mdiFolderOpen } from '@mdi/js'
+
+export default {
+    name: "BrowseFilesButton",
+    components: {
+        SvgIcon
+    },
+    data() {
+        return {
+            open_folder_icon: mdiFolderOpen
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/ImportData/DragDropArea.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="flex flex-col border-black border-2 rounded-3xl border-dashed mx-12 mb-12 p-5 justify-center items-center
+                space-y-6"
+         @dragenter.prevent="toggleActive"
+         @dragleave.prevent="toggleActive"
+         @dragover.prevent
+         @drop.prevent="select_file"
+         :class=" {'bg-blue-200 transition-all duration-300' :active }">
+      <input type="file" ref="moodle_file" class="hidden" @change="select_file">
+      <svg-icon class="w-1/4 h-1/4 justify-center"
+                type="mdi" :path="upload_file_icon"></svg-icon>
+      <span class="font-bold text-center text-5xl"> Drag & Drop file here </span>
+      <span class="text-center text-4xl"> or </span>
+      <BrowseFilesButton class="w-max" :class="{'bg-white transition-all duration-300' :active }"/>
+      <div class="flex flex-row w-full h-1/5 justify-end content-end">
+        <div class="flex items-end cursor-pointer">
+          <svg-icon type="mdi" :path="information_icon" @click="informationPopUp"></svg-icon>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+import BrowseFilesButton from "@/components/ImportData/BrowseFilesButton";
+import SvgIcon from '@jamescoyle/vue-icon'
+import { mdiFileUpload, mdiHelpCircleOutline  } from "@mdi/js"
+import { ref } from 'vue'
+
+export default {
+    name: "DragDropArea",
+    components: {
+        BrowseFilesButton,
+        SvgIcon
+    },
+    emits: ['onUpload', 'popUp'],
+    data() {
+      return {
+            upload_file_icon: mdiFileUpload,
+            information_icon: mdiHelpCircleOutline,
+            data_file: null
+        }
+    },
+    setup() {
+        const active = ref(false)
+        const toggleActive = () => {
+            active.value = !active.value
+        }
+
+        return { active, toggleActive }
+    },
+    methods: {
+        informationPopUp: function () {
+          this.$emit('popUp')
+        },
+        /**
+         * Checks whether is a drop or a input change event
+         * Stores the selected file and enables a popup
+         * for the user to confirm the upload to the backend
+         * @param e: drop or change event
+         */
+        select_file: function (e) {
+            let uploaded_file
+            if (e.type === "drop") {
+                this.toggleActive()
+                uploaded_file = e.dataTransfer.files[0]
+                if ( !uploaded_file ) return
+                this.data_file = uploaded_file
+                this.confirm_upload()
+                return
+            }
+            uploaded_file = e.target.files[0]
+            if ( !uploaded_file ) return
+            this.data_file = uploaded_file
+            this.$refs.moodle_file.value = null
+            this.confirm_upload()
+        },
+        confirm_upload: function () {
+            this.$emit('onUpload', this.data_file.name)
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/ImportData/InformationPopUp.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="ml-2 flex flex-col absolute inset-0 justify-center place-items-center bg-gray-400 bg-opacity-75 transition-opacity"
+         role="dialog" aria-modal="true">
+        <div class="flex flex-col bg-blue-200 w-3/6 h-4/6 rounded-3xl z-50">
+            <div class ="w-4/5 h-4/5 self-center p-10">
+                <iframe class="relative inset-0 w-full h-full rounded-2xl"  src="https://www.loom.com/embed/ed2bc470d04c4d02b9825e9954069b41" allowfullscreen >
+                </iframe>
+            </div>
+            <button class="self-center bg-blue-400 hover:bg-blue-500 rounded-lg font-bold py-3 w-1/6 h-1/10" @click="hidePopUp">EXIT</button>
+        </div>
+        <div class="absolute w-full h-full filter backdrop-blur-sm z-10"></div>
+    </div>
+</template>
+
+
+<script>
+export default {
+    name: "InformationPopUp",
+    emits: ['infoPopUp'],
+    methods: {
+        hidePopUp: function () {
+              this.$emit('infoPopUp')
+        }
+    }
+}
+
+</script>
+
+<style scoped>
+
+</style>

src/components/ImportData/UploadConfirmation.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="flex absolute inset-0 ml-2 justify-center place-items-center bg-gray-400 bg-opacity-75 transition-opacity"
+        role="dialog" aria-modal="true">
+        <div class="flex flex-col w-2/6 h-auto bg-white rounded-3xl space-y-2 pb-3 drop-shadow-xl z-50">
+            <!-- Uploaded file section -->
+            <div class="flex flex-row rounded-2xl m-5 px-5 py-4 border border-black">
+                <svg-icon type="mdi" :path="file_icon"/>
+                <span class="ml-5"> {{ selected_file_name }} </span>
+            </div>
+            <!-- Backend connection status-->
+            <div class="flex flex-row self-center" v-if="alive">
+                <div class="flex self-center w-4 h-4 bg-green-300 rounded-md border-2 border-green-600"></div>
+                <span class="ml-2"> Connected to: Local <strong>coreMLA</strong></span>
+            </div>
+            <div class="flex flex-row self-center" v-else>
+                <div class="flex self-center w-4 h-4 bg-red-300 rounded-md border-2 border-red-600"></div>
+                <span class="ml-2">
+                    Please install <strong>coreMLA</strong> or choose <strong>LServer</strong> in the Settings
+                </span>
+            </div>
+            <!-- Upload Confirmation Buttons -->
+            <div class="flex flex-row justify-center">
+                <IconButton :icon="cancel_icon" status="true" type="Cancel" @click="$emit('buttonClick', false)"/>
+                <IconButton :icon="upload_icon" :status="alive" type="Upload" @click="$emit('buttonClick', true)"/>
+            </div>
+        </div>
+        <div class="absolute w-full h-full filter backdrop-blur-sm z-10"></div>
+    </div>
+</template>
+
+<script>
+import SvgIcon from "@jamescoyle/vue-icon";
+import { mdiClose, mdiFile, mdiUpload } from "@mdi/js";
+import IconButton from "@/components/UI/IconButton";
+
+export default {
+    name: "UploadConfirmation",
+    components: {
+        IconButton,
+        SvgIcon
+    },
+    emits: ['buttonClick'],
+    props: ['selected_file_name'],
+    //TODO: Ping backend on render
+    data() {
+        return {
+            file_icon: mdiFile,
+            cancel_icon: mdiClose,
+            upload_icon: mdiUpload,
+            alive: false,
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/ImportData/UploadProgressBar.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="flex h-1/4 items-center">
+        <div class="w-full">
+            <div class="flex pb-3">
+                <div class="flex-1"></div>
+
+                <div class="flex-1">
+                    <div class="w-10 h-10 bg-green-200 border-4 border-green-500 border-opacity-25 mx-auto rounded-full text-lg flex items-center">
+                        <svg-icon class="w-full" type="mdi" :path="completed_icon"></svg-icon>
+                    </div>
+                </div>
+                <div class="w-1/6 align-center items-center align-middle content-center flex">
+                    <div class="w-full bg-gray-100 rounded items-center align-middle align-center flex-1">
+                        <div class="bg-green-400 text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 100%"></div>
+                    </div>
+                </div>
+                <div class="flex-1">
+                    <div class="w-10 h-10 bg-green-200 border-4 border-green-500 border-opacity-25 mx-auto rounded-full text-lg flex items-center">
+                        <svg-icon class="w-full" type="mdi" :path="completed_icon"></svg-icon>
+                    </div>
+                </div>
+                <div class="w-1/6 align-center items-center align-middle content-center flex">
+                    <div class="w-full bg-gray-100 rounded items-center align-middle align-center flex-1">
+                        <div class="bg-green-200 text-xs leading-none py-1 text-center text-gray-darkest rounded" style="width: 25%"></div>
+                    </div>
+                </div>
+                <div class="flex-1">
+                    <div class="w-10 h-10 bg-green-200 border-4 border-4 border-green-500 border-opacity-25 mx-auto rounded-full text-lg flex items-center">
+                        <span class="text-center w-full">3</span>
+                    </div>
+                </div>
+                <div class="w-1/6 align-center items-center align-middle content-center flex">
+                    <div class="w-full bg-gray-100 rounded items-center align-middle align-center flex-1">
+                        <div class="bg-green-light text-xs leading-none py-1 text-center text-grey-darkest rounded" style="width: 0"></div>
+                    </div>
+                </div>
+                <div class="flex-1">
+                    <div class="w-10 h-10 bg-green-200 border-4 border-green-500 border-opacity-25 mx-auto rounded-full text-lg flex items-center">
+                        <span class="text-center w-full">4</span>
+                    </div>
+                </div>
+
+                <div class="flex-1"></div>
+            </div>
+
+            <div class="flex text-lg content-center text-center">
+                <div class="w-1/4">
+                    Uploading file
+                </div>
+
+                <div class="w-1/4">
+                    Data Processing
+                </div>
+
+                <div class="w-1/4">
+                    Generating Overview
+                </div>
+
+                <div class="w-1/4">
+                    Finish
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import SvgIcon from "@jamescoyle/vue-icon";
+import { mdiCheck } from '@mdi/js';
+
+export default {
+    name: "UploadProgressBar",
+    components: {
+        SvgIcon
+    },
+    data() {
+        return {
+            completed_icon: mdiCheck
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/NavigationBar/DownloadButton.vue

@@ -0,0 +1,29 @@
+<template>
+    <button type="button" class="flex bg-blue-400 rounded-lg px-4 py-2 mx-2 my-2
+            block font-bold uppercase justify-center">
+        <svg-icon type="mdi" :path="download_icon" v-if="!nav_state"></svg-icon>
+        <span v-if="nav_state">Download</span>
+    </button>
+</template>
+
+<script>
+import SvgIcon from '@jamescoyle/vue-icon'
+import { mdiCloudDownload } from "@mdi/js";
+
+export default {
+    name: "DownloadButton",
+    components: {
+        SvgIcon
+    },
+    props: ['nav_state'],
+    data() {
+        return {
+            download_icon: mdiCloudDownload,
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>