Skip to content

Commit f3de472

Browse files
JiahuiChen99JiahuiChen99
authored
Merge pull request #40 from LS-LEDA/dev
Navigation bar + Import Data Page
2 parents c6aa65d + bfe08c3 commit f3de472

19 files changed

+619
-13
lines changed

‎package.json‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,25 @@
88
"lint": "vue-cli-service lint"
99
},
1010
"dependencies": {
11+
"@jamescoyle/vue-icon": "^0.1.2",
12+
"@mdi/js": "^6.3.95",
1113
"core-js": "^3.6.5",
12-
"vue": "^3.0.0"
14+
"vue": "^3.0.0",
15+
"vue-router": "^4.0.12"
1316
},
1417
"devDependencies": {
15-
"@vue/cli-plugin-babel": "~4.5.0",
16-
"@vue/cli-plugin-eslint": "~4.5.0",
17-
"@vue/cli-service": "~4.5.0",
18-
"@vue/compiler-sfc": "^3.0.0",
18+
"@vue/cli-plugin-babel": "^5.0.0-beta.6",
19+
"@vue/cli-plugin-eslint": "^5.0.0-beta.6",
20+
"@vue/cli-service": "^5.0.0-beta.6",
21+
"@vue/compiler-sfc": "^3.2.20",
22+
"autoprefixer": "^10.3.7",
1923
"babel-eslint": "^10.1.0",
20-
"eslint": "^6.7.2",
21-
"eslint-plugin-vue": "^7.0.0"
24+
"eslint": "^7.32.0",
25+
"eslint-plugin-vue": "^7.20.0",
26+
"postcss": "^8.3.11",
27+
"post-loader": "^2.0.0",
28+
"postcss-cli": "^9.0.1",
29+
"tailwindcss": "^2.2.17"
2230
},
2331
"eslintConfig": {
2432
"root": true,

‎postcss.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎public/assets/jsmla_logo.png‎

13.6 KB
Loading

‎src/App.vue‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
<template>
2-
<h1> jsMLA </h1>
2+
<div class="flex flex-row h-screen w-screen">
3+
<!-- Left navigation bar -->
4+
<NavigationBar/>
5+
<!-- Page rendered by router -->
6+
<router-view/>
7+
</div>
38
</template>
49

510
<script>
11+
import NavigationBar from "@/components/NavigationBar/NavigationBar";
612
713
export default {
8-
name: 'App',
9-
components: {
10-
11-
}
14+
name: 'App',
15+
components: {
16+
NavigationBar
17+
}
1218
}
1319
</script>
1420

‎src/components/ImportData/BrowseFilesButton.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<button
3+
type="button"
4+
class="flex flex-row bg-blue-400 hover:bg-blue-500 rounded-lg px-6 py-3 mx-2 my-2 font-bold"
5+
@click="this.$parent.$refs.moodle_file.click()">
6+
<svg-icon
7+
type="mdi" :path="open_folder_icon"></svg-icon>
8+
<span class="ml-3">Browse Files</span>
9+
</button>
10+
</template>
11+
12+
<script>
13+
import SvgIcon from '@jamescoyle/vue-icon'
14+
import { mdiFolderOpen } from '@mdi/js'
15+
16+
export default {
17+
name: "BrowseFilesButton",
18+
components: {
19+
SvgIcon
20+
},
21+
data() {
22+
return {
23+
open_folder_icon: mdiFolderOpen
24+
}
25+
}
26+
}
27+
</script>
28+
29+
<style scoped>
30+
31+
</style>

‎src/components/ImportData/DragDropArea.vue‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<template>
2+
<div class="flex flex-col border-black border-2 rounded-3xl border-dashed mx-12 mb-12 p-5 justify-center items-center
3+
space-y-6"
4+
@dragenter.prevent="toggleActive"
5+
@dragleave.prevent="toggleActive"
6+
@dragover.prevent
7+
@drop.prevent="select_file"
8+
:class=" {'bg-blue-200 transition-all duration-300' :active }">
9+
<input type="file" ref="moodle_file" class="hidden" @change="select_file">
10+
<svg-icon class="w-1/4 h-1/4 justify-center"
11+
type="mdi" :path="upload_file_icon"></svg-icon>
12+
<span class="font-bold text-center text-5xl"> Drag & Drop file here </span>
13+
<span class="text-center text-4xl"> or </span>
14+
<BrowseFilesButton class="w-max" :class="{'bg-white transition-all duration-300' :active }"/>
15+
<div class="flex flex-row w-full h-1/5 justify-end content-end">
16+
<div class="flex items-end cursor-pointer">
17+
<svg-icon type="mdi" :path="information_icon" @click="informationPopUp"></svg-icon>
18+
</div>
19+
</div>
20+
</div>
21+
</template>
22+
23+
<script>
24+
import BrowseFilesButton from "@/components/ImportData/BrowseFilesButton";
25+
import SvgIcon from '@jamescoyle/vue-icon'
26+
import { mdiFileUpload, mdiHelpCircleOutline } from "@mdi/js"
27+
import { ref } from 'vue'
28+
29+
export default {
30+
name: "DragDropArea",
31+
components: {
32+
BrowseFilesButton,
33+
SvgIcon
34+
},
35+
emits: ['onUpload', 'popUp'],
36+
data() {
37+
return {
38+
upload_file_icon: mdiFileUpload,
39+
information_icon: mdiHelpCircleOutline,
40+
data_file: null
41+
}
42+
},
43+
setup() {
44+
const active = ref(false)
45+
const toggleActive = () => {
46+
active.value = !active.value
47+
}
48+
49+
return { active, toggleActive }
50+
},
51+
methods: {
52+
informationPopUp: function () {
53+
this.$emit('popUp')
54+
},
55+
/**
56+
* Checks whether is a drop or a input change event
57+
* Stores the selected file and enables a popup
58+
* for the user to confirm the upload to the backend
59+
* @param e: drop or change event
60+
*/
61+
select_file: function (e) {
62+
let uploaded_file
63+
if (e.type === "drop") {
64+
this.toggleActive()
65+
uploaded_file = e.dataTransfer.files[0]
66+
if ( !uploaded_file ) return
67+
this.data_file = uploaded_file
68+
this.confirm_upload()
69+
return
70+
}
71+
uploaded_file = e.target.files[0]
72+
if ( !uploaded_file ) return
73+
this.data_file = uploaded_file
74+
this.$refs.moodle_file.value = null
75+
this.confirm_upload()
76+
},
77+
confirm_upload: function () {
78+
this.$emit('onUpload', this.data_file.name)
79+
}
80+
}
81+
}
82+
</script>
83+
84+
<style scoped>
85+
86+
</style>

‎src/components/ImportData/InformationPopUp.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<div class="ml-2 flex flex-col absolute inset-0 justify-center place-items-center bg-gray-400 bg-opacity-75 transition-opacity"
3+
role="dialog" aria-modal="true">
4+
<div class="flex flex-col bg-blue-200 w-3/6 h-4/6 rounded-3xl z-50">
5+
<div class ="w-4/5 h-4/5 self-center p-10">
6+
<iframe class="relative inset-0 w-full h-full rounded-2xl" src="https://www.loom.com/embed/ed2bc470d04c4d02b9825e9954069b41" allowfullscreen >
7+
</iframe>
8+
</div>
9+
<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>
10+
</div>
11+
<div class="absolute w-full h-full filter backdrop-blur-sm z-10"></div>
12+
</div>
13+
</template>
14+
15+
16+
<script>
17+
export default {
18+
name: "InformationPopUp",
19+
emits: ['infoPopUp'],
20+
methods: {
21+
hidePopUp: function () {
22+
this.$emit('infoPopUp')
23+
}
24+
}
25+
}
26+
27+
</script>
28+
29+
<style scoped>
30+
31+
</style>

‎src/components/ImportData/UploadConfirmation.vue‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<div class="flex absolute inset-0 ml-2 justify-center place-items-center bg-gray-400 bg-opacity-75 transition-opacity"
3+
role="dialog" aria-modal="true">
4+
<div class="flex flex-col w-2/6 h-auto bg-white rounded-3xl space-y-2 pb-3 drop-shadow-xl z-50">
5+
<!-- Uploaded file section -->
6+
<div class="flex flex-row rounded-2xl m-5 px-5 py-4 border border-black">
7+
<svg-icon type="mdi" :path="file_icon"/>
8+
<span class="ml-5"> {{ selected_file_name }} </span>
9+
</div>
10+
<!-- Backend connection status-->
11+
<div class="flex flex-row self-center" v-if="alive">
12+
<div class="flex self-center w-4 h-4 bg-green-300 rounded-md border-2 border-green-600"></div>
13+
<span class="ml-2"> Connected to: Local <strong>coreMLA</strong></span>
14+
</div>
15+
<div class="flex flex-row self-center" v-else>
16+
<div class="flex self-center w-4 h-4 bg-red-300 rounded-md border-2 border-red-600"></div>
17+
<span class="ml-2">
18+
Please install <strong>coreMLA</strong> or choose <strong>LServer</strong> in the Settings
19+
</span>
20+
</div>
21+
<!-- Upload Confirmation Buttons -->
22+
<div class="flex flex-row justify-center">
23+
<IconButton :icon="cancel_icon" status="true" type="Cancel" @click="$emit('buttonClick', false)"/>
24+
<IconButton :icon="upload_icon" :status="alive" type="Upload" @click="$emit('buttonClick', true)"/>
25+
</div>
26+
</div>
27+
<div class="absolute w-full h-full filter backdrop-blur-sm z-10"></div>
28+
</div>
29+
</template>
30+
31+
<script>
32+
import SvgIcon from "@jamescoyle/vue-icon";
33+
import { mdiClose, mdiFile, mdiUpload } from "@mdi/js";
34+
import IconButton from "@/components/UI/IconButton";
35+
36+
export default {
37+
name: "UploadConfirmation",
38+
components: {
39+
IconButton,
40+
SvgIcon
41+
},
42+
emits: ['buttonClick'],
43+
props: ['selected_file_name'],
44+
//TODO: Ping backend on render
45+
data() {
46+
return {
47+
file_icon: mdiFile,
48+
cancel_icon: mdiClose,
49+
upload_icon: mdiUpload,
50+
alive: false,
51+
}
52+
}
53+
}
54+
</script>
55+
56+
<style scoped>
57+
58+
</style>

‎src/components/ImportData/UploadProgressBar.vue‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<template>
2+
<div class="flex h-1/4 items-center">
3+
<div class="w-full">
4+
<div class="flex pb-3">
5+
<div class="flex-1"></div>
6+
7+
<div class="flex-1">
8+
<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">
9+
<svg-icon class="w-full" type="mdi" :path="completed_icon"></svg-icon>
10+
</div>
11+
</div>
12+
<div class="w-1/6 align-center items-center align-middle content-center flex">
13+
<div class="w-full bg-gray-100 rounded items-center align-middle align-center flex-1">
14+
<div class="bg-green-400 text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 100%"></div>
15+
</div>
16+
</div>
17+
<div class="flex-1">
18+
<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">
19+
<svg-icon class="w-full" type="mdi" :path="completed_icon"></svg-icon>
20+
</div>
21+
</div>
22+
<div class="w-1/6 align-center items-center align-middle content-center flex">
23+
<div class="w-full bg-gray-100 rounded items-center align-middle align-center flex-1">
24+
<div class="bg-green-200 text-xs leading-none py-1 text-center text-gray-darkest rounded" style="width: 25%"></div>
25+
</div>
26+
</div>
27+
<div class="flex-1">
28+
<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">
29+
<span class="text-center w-full">3</span>
30+
</div>
31+
</div>
32+
<div class="w-1/6 align-center items-center align-middle content-center flex">
33+
<div class="w-full bg-gray-100 rounded items-center align-middle align-center flex-1">
34+
<div class="bg-green-light text-xs leading-none py-1 text-center text-grey-darkest rounded" style="width: 0"></div>
35+
</div>
36+
</div>
37+
<div class="flex-1">
38+
<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">
39+
<span class="text-center w-full">4</span>
40+
</div>
41+
</div>
42+
43+
<div class="flex-1"></div>
44+
</div>
45+
46+
<div class="flex text-lg content-center text-center">
47+
<div class="w-1/4">
48+
Uploading file
49+
</div>
50+
51+
<div class="w-1/4">
52+
Data Processing
53+
</div>
54+
55+
<div class="w-1/4">
56+
Generating Overview
57+
</div>
58+
59+
<div class="w-1/4">
60+
Finish
61+
</div>
62+
</div>
63+
</div>
64+
</div>
65+
</template>
66+
67+
<script>
68+
import SvgIcon from "@jamescoyle/vue-icon";
69+
import { mdiCheck } from '@mdi/js';
70+
71+
export default {
72+
name: "UploadProgressBar",
73+
components: {
74+
SvgIcon
75+
},
76+
data() {
77+
return {
78+
completed_icon: mdiCheck
79+
}
80+
}
81+
}
82+
</script>
83+
84+
<style scoped>
85+
86+
</style>

‎src/components/NavigationBar/DownloadButton.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<button type="button" class="flex bg-blue-400 rounded-lg px-4 py-2 mx-2 my-2
3+
block font-bold uppercase justify-center">
4+
<svg-icon type="mdi" :path="download_icon" v-if="!nav_state"></svg-icon>
5+
<span v-if="nav_state">Download</span>
6+
</button>
7+
</template>
8+
9+
<script>
10+
import SvgIcon from '@jamescoyle/vue-icon'
11+
import { mdiCloudDownload } from "@mdi/js";
12+
13+
export default {
14+
name: "DownloadButton",
15+
components: {
16+
SvgIcon
17+
},
18+
props: ['nav_state'],
19+
data() {
20+
return {
21+
download_icon: mdiCloudDownload,
22+
}
23+
}
24+
}
25+
</script>
26+
27+
<style scoped>
28+
29+
</style>

0 commit comments

Comments
 (0)