Skip to content

Commit aa36624

Browse files
authored
Merge pull request #56 from LS-LEDA/dev
v0.2.1 minor improvements
2 parents d7b44c0 + 9fda004 commit aa36624

File tree

17 files changed

+319
-60
lines changed

17 files changed

+319
-60
lines changed

.gitignore

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,7 @@ pnpm-debug.log*
2222
*.sln
2323
*.sw?
2424

25-
./package-lock.json
25+
./package-lock.json
26+
27+
#Electron-builder output
28+
/dist_electron

package.json

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,21 @@
55
"scripts": {
66
"serve": "vue-cli-service serve",
77
"build": "vue-cli-service build",
8-
"lint": "vue-cli-service lint"
8+
"lint": "vue-cli-service lint",
9+
"electron:build": "vue-cli-service electron:build",
10+
"electron:serve": "vue-cli-service electron:serve",
11+
"postinstall": "electron-builder install-app-deps",
12+
"postuninstall": "electron-builder install-app-deps"
913
},
14+
"main": "background.js",
1015
"dependencies": {
1116
"@jamescoyle/vue-icon": "^0.1.2",
1217
"@mdi/js": "^6.3.95",
1318
"chart.js": "^3.6.0",
1419
"core-js": "^3.6.5",
1520
"vue": "^3.0.0",
16-
"vue-router": "^4.0.12"
21+
"vue-router": "^4.0.12",
22+
"vuex": "^4.0.2"
1723
},
1824
"devDependencies": {
1925
"@vue/cli-plugin-babel": "^5.0.0-beta.6",
@@ -22,12 +28,15 @@
2228
"@vue/compiler-sfc": "^3.2.20",
2329
"autoprefixer": "^10.3.7",
2430
"babel-eslint": "^10.1.0",
31+
"electron": "^15.3.1",
32+
"electron-devtools-installer": "^3.1.0",
2533
"eslint": "^7.32.0",
2634
"eslint-plugin-vue": "^7.20.0",
2735
"postcss": "^8.3.11",
2836
"post-loader": "^2.0.0",
2937
"postcss-cli": "^9.0.1",
30-
"tailwindcss": "^2.2.17"
38+
"tailwindcss": "^2.2.17",
39+
"vue-cli-plugin-electron-builder": "~2.1.1"
3140
},
3241
"eslintConfig": {
3342
"root": true,

public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
77
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
88
<title><%= htmlWebpackPlugin.options.title %></title>
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
910
</head>
1011
<body>
1112
<noscript>

src/App.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="flex flex-row h-screen w-screen">
2+
<div class="flex flex-row h-screen w-screen select-none">
33
<!-- Left navigation bar -->
44
<NavigationBar/>
55
<!-- Page rendered by router -->

src/background.js

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
'use strict'
2+
3+
import { app, protocol, BrowserWindow } from 'electron'
4+
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
5+
import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'
6+
const path = require('path')
7+
const isDevelopment = process.env.NODE_ENV !== 'production'
8+
9+
// Scheme must be registered before the app is ready
10+
protocol.registerSchemesAsPrivileged([
11+
{ scheme: 'app', privileges: { secure: true, standard: true } }
12+
])
13+
14+
async function createWindow() {
15+
// We cannot require the screen module until the app is ready.
16+
const { screen } = require('electron')
17+
18+
// Create a window that fills the screen's available work area.
19+
const primaryDisplay = screen.getPrimaryDisplay()
20+
const { width, height } = primaryDisplay.workAreaSize
21+
22+
// Create the browser window.
23+
const win = new BrowserWindow({
24+
width: width,
25+
height: height,
26+
// Don't show the window until it's ready, this prevents any white flickering
27+
show: false,
28+
icon: path.join(__dirname, '/jsmla_logo.png'),
29+
webPreferences: {
30+
31+
// Use pluginOptions.nodeIntegration, leave this alone
32+
// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
33+
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
34+
contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
35+
}
36+
})
37+
38+
// Hide App Menu & maximize the window
39+
win.setMenu(null);
40+
win.maximize()
41+
42+
if (process.env.WEBPACK_DEV_SERVER_URL) {
43+
// Load the url of the dev server if in development mode
44+
await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
45+
if (!process.env.IS_TEST) win.webContents.openDevTools({
46+
mode: "detach"
47+
})
48+
win.show();
49+
} else {
50+
createProtocol('app')
51+
// Load the index.html when not in development
52+
win.loadURL('app://./index.html')
53+
}
54+
}
55+
56+
// Quit when all windows are closed.
57+
app.on('window-all-closed', () => {
58+
// On macOS it is common for applications and their menu bar
59+
// to stay active until the user quits explicitly with Cmd + Q
60+
if (process.platform !== 'darwin') {
61+
app.quit()
62+
}
63+
})
64+
65+
app.on('activate', () => {
66+
// On macOS it's common to re-create a window in the app when the
67+
// dock icon is clicked and there are no other windows open.
68+
if (BrowserWindow.getAllWindows().length === 0) createWindow()
69+
})
70+
71+
// This method will be called when Electron has finished
72+
// initialization and is ready to create browser windows.
73+
// Some APIs can only be used after this event occurs.
74+
app.on('ready', async () => {
75+
if (isDevelopment && !process.env.IS_TEST) {
76+
// Install Vue Devtools
77+
try {
78+
await installExtension(VUEJS3_DEVTOOLS)
79+
} catch (e) {
80+
console.error('Vue Devtools failed to install:', e.toString())
81+
}
82+
}
83+
createWindow()
84+
})
85+
86+
// Exit cleanly on request from parent process in development mode.
87+
if (isDevelopment) {
88+
if (process.platform === 'win32') {
89+
process.on('message', (data) => {
90+
if (data === 'graceful-exit') {
91+
app.quit()
92+
}
93+
})
94+
} else {
95+
process.on('SIGTERM', () => {
96+
app.quit()
97+
})
98+
}
99+
}

src/components/NavigationBar/DownloadButton.vue

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,16 @@ export default {
1515
components: {
1616
SvgIcon
1717
},
18-
props: ['nav_state'],
18+
computed: {
19+
/**
20+
* Navigation bar state:
21+
* true: expanded
22+
* false: shrank
23+
*/
24+
nav_state() {
25+
return this.$store.state.navigation_bar_status
26+
}
27+
},
1928
data() {
2029
return {
2130
download_icon: mdiCloudDownload,

src/components/NavigationBar/NavigationBar.vue

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
2-
<div class="ml-2 my-2 sm:w-max xl:w-2/12 flex flex-col bg-white rounded-xl ">
2+
<div :class="nav_state ? 'w-80' : 'w-20'" class="ml-2 my-2 flex flex-col bg-white rounded-xl transform transition-all duration-700">
33
<NavigationHeader/>
44
<router-link :to="page.page_link" v-for="(page, index) in pages" :key="index" class="mx-2">
55
<NavigationButton :page="page"/>
66
</router-link>
77
<div class="flex flex-col flex-1 justify-end">
8-
<DownloadButton :nav_state="nav_state"/>
8+
<DownloadButton/>
99
</div>
1010
</div>
1111
</template>
@@ -28,36 +28,40 @@ export default {
2828
NavigationButton,
2929
DownloadButton
3030
},
31+
computed: {
32+
/**
33+
* Navigation bar state:
34+
* true: expanded
35+
* false: shrank
36+
*/
37+
nav_state() {
38+
return this.$store.state.navigation_bar_status
39+
}
40+
},
3141
data() {
3242
return {
3343
pages: [
3444
{
3545
button_name: 'Import data',
3646
button_icon: mdiDatabaseImportOutline,
37-
page_link: 'import-data'
47+
page_link: '/import-data'
3848
},
3949
{
4050
button_name: 'Dashboard',
4151
button_icon: mdiViewDashboardOutline,
42-
page_link: 'dashboard'
52+
page_link: '/dashboard'
4353
},
4454
{
4555
button_name: 'Plugins',
4656
button_icon: mdiToyBrickPlusOutline,
47-
page_link: 'plugins'
57+
page_link: '/plugins'
4858
},
4959
{
5060
button_name: 'Configuration',
5161
button_icon: mdiCogOutline,
52-
page_link: 'settings'
62+
page_link: '/settings'
5363
}
5464
],
55-
/**
56-
* Navigation bar state:
57-
* true: expanded
58-
* false: shrank
59-
*/
60-
nav_state: true
6165
}
6266
}
6367
}

src/components/NavigationBar/NavigationButton.vue

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
2-
<button type="button" class="flex flex-row bg-blue-100 hover:bg-blue-200 rounded-lg px-4 py-2 my-2 font-bold w-full">
3-
<svg-icon
4-
type="mdi" :path="page.button_icon"></svg-icon>
5-
<span class="ml-3">{{ page.button_name }}</span>
2+
<button type="button" class="flex flex-row bg-blue-100 hover:bg-blue-200 rounded-lg px-4 py-2 my-2 font-bold w-full"
3+
:class="nav_state ? null : 'justify-center'">
4+
<svg-icon type="mdi" :path="page.button_icon"></svg-icon>
5+
<span class="ml-3" v-if="nav_state">{{ page.button_name }}</span>
66
</button>
77
</template>
88

@@ -11,6 +11,16 @@ import SvgIcon from '@jamescoyle/vue-icon'
1111
1212
export default {
1313
name: "NavigationButton.vue",
14+
computed: {
15+
/**
16+
* Navigation bar state:
17+
* true: expanded
18+
* false: shrank
19+
*/
20+
nav_state() {
21+
return this.$store.state.navigation_bar_status
22+
}
23+
},
1424
props: ['page'],
1525
components: {
1626
SvgIcon
Lines changed: 56 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,31 @@
11
<template>
2-
<div class="flex flex-row py-2 mx-2 my-5 h-20">
3-
<div class="flex-initial">
4-
<img class="w-auto h-full rounded-lg"
5-
src="/assets/jsmla_logo.png" alt="jsMLA Logo">
2+
<div class="flex flex-row py-2 mx-2 my-5 h-20" :class="nav_state ? null : 'justify-center items-center'">
3+
<!-- Navigation bar App logo routed -->
4+
<div class="self-center" :class="logo_hovered ? 'z-0' : 'z-50'">
5+
<router-link :to="imported_data ? '/dashboard' : '/import-data'"
6+
:class="logo_hovered ? 'invisible' : null"
7+
@mouseover="logo_hover"
8+
@mouseleave="logo_not_hover">
9+
<img class="max-h-16 rounded-lg origin-center transform transition duration-500"
10+
src="/assets/jsmla_logo.png" alt="jsMLA Logo">
11+
</router-link>
612
</div>
7-
<div class="flex-initial mx-4 font-bold text-4xl self-center">
8-
<h1>jsMLA</h1>
9-
</div>
10-
<div class="flex flex-1 w-max justify-end">
11-
<button type="button" class="self-center flex flex-row justify-self-end">
12-
<svg-icon size="36" type="mdi" :path="path" class="hover:drop-shadow shrink_icon"></svg-icon>
13-
</button>
13+
<!-- Application name -->
14+
<!--<transition name="fade">-->
15+
<div class="flex-1 mx-4 font-bold text-2xl self-center hover:cursor-pointer" v-if="nav_state">
16+
<router-link :to="imported_data ? '/dashboard' : '/import-data'">
17+
<h1>jsMLA</h1>
18+
</router-link>
1419
</div>
20+
<!--</transition>-->
21+
<!-- Navigation shrink button -->
22+
<button type="button" class="flex self-center center w-auto place-items-center"
23+
:class="nav_state ? null : 'absolute transform transition duration-700 rotate-180'"
24+
@click="changeNavigationBarStatus"
25+
@mouseover="logo_hover"
26+
@mouseleave="logo_not_hover">
27+
<svg-icon size="36" type="mdi" :path="path" class="hover:drop-shadow shrink_icon place-self-center"/>
28+
</button>
1529
</div>
1630
</template>
1731

@@ -25,9 +39,32 @@ export default {
2539
components: {
2640
SvgIcon,
2741
},
42+
computed: {
43+
nav_state() {
44+
return this.$store.state.navigation_bar_status
45+
},
46+
imported_data() {
47+
return this.$store.state.imported_data
48+
}
49+
},
2850
data() {
2951
return {
30-
path: mdiChevronDoubleLeft
52+
path: mdiChevronDoubleLeft,
53+
logo_hovered: false
54+
}
55+
},
56+
methods: {
57+
// Expand or shrink navigation bar
58+
changeNavigationBarStatus() {
59+
this.$store.commit('changeNavigationBarStatus')
60+
},
61+
logo_hover() {
62+
if(!this.nav_state) {
63+
this.logo_hovered = true
64+
}
65+
},
66+
logo_not_hover() {
67+
this.logo_hovered = false
3168
}
3269
}
3370
}
@@ -37,4 +74,11 @@ export default {
3774
.shrink_icon {
3875
color: gray;
3976
}
77+
78+
.fade-enter-active, .fade-leave-active {
79+
transition: opacity .5s;
80+
}
81+
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
82+
opacity: 0;
83+
}
4084
</style>

src/components/Summary/InteractionCard.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<template>
22
<!-- Interactions Card -->
3-
<div class="flex w-full h-72 bg-white rounded-3xl p-10 mt-5 hover:cursor-pointer filter drop-shadow-lg
3+
<div class="flex w-full h-96 bg-white rounded-3xl p-10 mt-5 hover:cursor-pointer filter drop-shadow-lg
44
transform transition duration-500 hover:scale-[101%]">
55
<!-- Card Information -->
66
<div class="flex flex-col w-5/12 justify-self-center self-center space-y-3">
77
<span class="text-5xl"> Total of Interactions </span>
88
<span class="text-6xl font-bold"> {{ interactions_count.toLocaleString() }} </span>
99
</div>
1010
<!-- Card graphics -->
11-
<div class="w-full w-full text-center mx-6 font-bold text-4xl rounded-3xl">
12-
<canvas class="max-h-full" id="total_interactions_chart"></canvas>
11+
<div class="flex relative w-full w-full text-center mx-6 font-bold text-4xl rounded-3xl">
12+
<canvas class="max-h-full max-w-full" id="total_interactions_chart"></canvas>
1313
</div>
1414
</div>
1515
</template>

0 commit comments

Comments
 (0)