Browse Source

Basic setup for the frontend app

master
commit
9460875ff7
Signed by: Christian van Onzenoodt <christian.van-onzenoodt@uni-ulm.de> GPG Key ID: 7B2E632FDC852341
17 changed files with 13199 additions and 0 deletions
  1. 7
    0
      .editorconfig
  2. 62
    0
      .gitignore
  3. 29
    0
      README.md
  4. 5
    0
      babel.config.js
  5. 12841
    0
      package-lock.json
  6. 66
    0
      package.json
  7. BIN
      public/favicon.ico
  8. 17
    0
      public/index.html
  9. 1
    0
      src/.tern-port
  10. 29
    0
      src/App.vue
  11. BIN
      src/assets/logo.png
  12. 14
    0
      src/components/Home.vue
  13. 42
    0
      src/components/TrackHistory.vue
  14. 22
    0
      src/main.js
  15. 23
    0
      src/router.js
  16. 31
    0
      src/store.js
  17. 10
    0
      vue.config.js

+ 7
- 0
.editorconfig View File

@@ -0,0 +1,7 @@
1
+[*.{js,jsx,ts,tsx,vue}]
2
+indent_style = space
3
+indent_size = 2
4
+end_of_line = lf
5
+trim_trailing_whitespace = true
6
+insert_final_newline = true
7
+max_line_length = 100

+ 62
- 0
.gitignore View File

@@ -0,0 +1,62 @@
1
+
2
+# Created by https://www.gitignore.io/api/emacs,vuejs
3
+# Edit at https://www.gitignore.io/?templates=emacs,vuejs
4
+
5
+### Emacs ###
6
+# -*- mode: gitignore; -*-
7
+*~
8
+\#*\#
9
+/.emacs.desktop
10
+/.emacs.desktop.lock
11
+*.elc
12
+auto-save-list
13
+tramp
14
+.\#*
15
+
16
+# Org-mode
17
+.org-id-locations
18
+*_archive
19
+
20
+# flymake-mode
21
+*_flymake.*
22
+
23
+# eshell files
24
+/eshell/history
25
+/eshell/lastdir
26
+
27
+# elpa packages
28
+/elpa/
29
+
30
+# reftex files
31
+*.rel
32
+
33
+# AUCTeX auto folder
34
+/auto/
35
+
36
+# cask packages
37
+.cask/
38
+dist/
39
+
40
+# Flycheck
41
+flycheck_*.el
42
+
43
+# server auth directory
44
+/server/
45
+
46
+# projectiles files
47
+.projectile
48
+
49
+# directory configuration
50
+.dir-locals.el
51
+
52
+# network security
53
+/network-security.data
54
+
55
+
56
+### Vuejs ###
57
+node_modules
58
+.DS_Store
59
+docs/_book
60
+test/
61
+
62
+# End of https://www.gitignore.io/api/emacs,vuejs

+ 29
- 0
README.md View File

@@ -0,0 +1,29 @@
1
+# trackify-frontend
2
+
3
+## Project setup
4
+```
5
+npm install
6
+```
7
+
8
+### Compiles and hot-reloads for development
9
+```
10
+npm run serve
11
+```
12
+
13
+### Compiles and minifies for production
14
+```
15
+npm run build
16
+```
17
+
18
+### Run your tests
19
+```
20
+npm run test
21
+```
22
+
23
+### Lints and fixes files
24
+```
25
+npm run lint
26
+```
27
+
28
+### Customize configuration
29
+See [Configuration Reference](https://cli.vuejs.org/config/).

+ 5
- 0
babel.config.js View File

@@ -0,0 +1,5 @@
1
+module.exports = {
2
+  presets: [
3
+    '@vue/app',
4
+  ],
5
+};

+ 12841
- 0
package-lock.json
File diff suppressed because it is too large
View File


+ 66
- 0
package.json View File

@@ -0,0 +1,66 @@
1
+{
2
+  "name": "trackify-frontend",
3
+  "version": "0.1.0",
4
+  "private": true,
5
+  "scripts": {
6
+    "serve": "vue-cli-service serve",
7
+    "build": "vue-cli-service build",
8
+    "lint": "vue-cli-service lint"
9
+  },
10
+  "dependencies": {
11
+    "vue": "^2.5.17",
12
+    "vue-router": "^3.0.1",
13
+    "vue-socket.io": "^3.0.4",
14
+    "vuex": "^3.0.1"
15
+  },
16
+  "devDependencies": {
17
+    "@vue/cli-plugin-babel": "^3.2.0",
18
+    "@vue/cli-plugin-eslint": "^3.2.0",
19
+    "@vue/cli-service": "^3.2.0",
20
+    "@vue/eslint-config-airbnb": "^4.0.0",
21
+    "babel-eslint": "^10.0.1",
22
+    "eslint": "^5.8.0",
23
+    "eslint-plugin-vue": "^5.0.0-0",
24
+    "lint-staged": "^7.2.2",
25
+    "node-sass": "^4.9.0",
26
+    "sass-loader": "^7.0.1",
27
+    "vue-template-compiler": "^2.5.17"
28
+  },
29
+  "eslintConfig": {
30
+    "root": true,
31
+    "env": {
32
+      "node": true
33
+    },
34
+    "extends": [
35
+      "plugin:vue/essential",
36
+      "@vue/airbnb"
37
+    ],
38
+    "rules": {},
39
+    "parserOptions": {
40
+      "parser": "babel-eslint"
41
+    }
42
+  },
43
+  "postcss": {
44
+    "plugins": {
45
+      "autoprefixer": {}
46
+    }
47
+  },
48
+  "browserslist": [
49
+    "> 1%",
50
+    "last 2 versions",
51
+    "not ie <= 8"
52
+  ],
53
+  "gitHooks": {
54
+    "pre-commit": "lint-staged"
55
+  },
56
+  "lint-staged": {
57
+    "*.js": [
58
+      "vue-cli-service lint",
59
+      "git add"
60
+    ],
61
+    "*.vue": [
62
+      "vue-cli-service lint",
63
+      "git add"
64
+    ]
65
+  }
66
+}

BIN
public/favicon.ico View File


+ 17
- 0
public/index.html View File

@@ -0,0 +1,17 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+  <head>
4
+    <meta charset="utf-8">
5
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
7
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8
+    <title>trackify-frontend</title>
9
+  </head>
10
+  <body>
11
+    <noscript>
12
+      <strong>We're sorry but trackify-frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13
+    </noscript>
14
+    <div id="app"></div>
15
+    <!-- built files will be auto injected -->
16
+  </body>
17
+</html>

+ 1
- 0
src/.tern-port View File

@@ -0,0 +1 @@
1
+54430

+ 29
- 0
src/App.vue View File

@@ -0,0 +1,29 @@
1
+<template>
2
+  <div id="app">
3
+    <div id="nav">
4
+      <router-link to="/">Home</router-link> |
5
+      <router-link to="/history">History</router-link>
6
+    </div>
7
+    <router-view/>
8
+  </div>
9
+</template>
10
+
11
+<style lang="scss">
12
+#app {
13
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
14
+  -webkit-font-smoothing: antialiased;
15
+  -moz-osx-font-smoothing: grayscale;
16
+  text-align: center;
17
+  color: #2c3e50;
18
+}
19
+#nav {
20
+  padding: 30px;
21
+  a {
22
+    font-weight: bold;
23
+    color: #2c3e50;
24
+    &.router-link-exact-active {
25
+      color: #42b983;
26
+    }
27
+  }
28
+}
29
+</style>

BIN
src/assets/logo.png View File


+ 14
- 0
src/components/Home.vue View File

@@ -0,0 +1,14 @@
1
+<template>
2
+  <div class="home">
3
+    Home
4
+  </div>
5
+</template>
6
+
7
+<script>
8
+export default {
9
+  name: 'Home',
10
+};
11
+</script>
12
+
13
+<style scoped lang="scss">
14
+</style>

+ 42
- 0
src/components/TrackHistory.vue View File

@@ -0,0 +1,42 @@
1
+<template>
2
+<div>
3
+  <button type="button" @click="emitEvent">Emit Event</button>
4
+  <table id="history">
5
+    <tr>
6
+      <th>ID</th>
7
+      <th>Repeat</th>
8
+      <th>Shuffle</th>
9
+      <th>Timestamp</th>
10
+    </tr>
11
+    <tr v-for="track in trackHistory" :key="track.id">
12
+      <td>{{ track.item_id }}</td>
13
+      <td>{{ track.repeat_state }}</td>
14
+      <td>{{ track.shuffle_state }}</td>
15
+      <td>{{ track.timestamp }}</td>
16
+    </tr>
17
+  </table>
18
+</div>
19
+</template>
20
+
21
+<script>
22
+import Vue from 'vue';
23
+
24
+export default Vue.component('TrackHistory', {
25
+  mounted() {
26
+    this.$store.dispatch('loadHistory');
27
+  },
28
+  methods: {
29
+    emitEvent() {
30
+      this.$socket.emit('history', 'foo');
31
+    },
32
+  },
33
+  computed: {
34
+    trackHistory() {
35
+      return this.$store.state.trackHistory;
36
+    },
37
+  },
38
+});
39
+</script>
40
+
41
+<style scoped lang="scss">
42
+</style>

+ 22
- 0
src/main.js View File

@@ -0,0 +1,22 @@
1
+import Vue from 'vue';
2
+import VueSocketIO from 'vue-socket.io';
3
+import App from './App.vue';
4
+import router from './router';
5
+import store from './store';
6
+
7
+Vue.config.productionTip = false;
8
+
9
+Vue.use(new VueSocketIO({
10
+  debug: true,
11
+  connection: 'http://localhost:5000',
12
+  vuex: {
13
+    store,
14
+    actionPrefix: 'SOCKET_',
15
+  },
16
+}));
17
+
18
+new Vue({
19
+  router,
20
+  store,
21
+  render: h => h(App),
22
+}).$mount('#app');

+ 23
- 0
src/router.js View File

@@ -0,0 +1,23 @@
1
+import Vue from 'vue';
2
+import Router from 'vue-router';
3
+import Home from './components/Home.vue';
4
+import TrackHistory from './components/TrackHistory.vue';
5
+
6
+Vue.use(Router);
7
+
8
+export default new Router({
9
+  mode: 'history',
10
+  base: process.env.BASE_URL,
11
+  routes: [
12
+    {
13
+      path: '/',
14
+      name: 'home',
15
+      component: Home,
16
+    },
17
+    {
18
+      path: '/history',
19
+      name: 'history',
20
+      component: TrackHistory,
21
+    },
22
+  ],
23
+});

+ 31
- 0
src/store.js View File

@@ -0,0 +1,31 @@
1
+import Vue from 'vue';
2
+import Vuex from 'vuex';
3
+
4
+Vue.use(Vuex);
5
+
6
+export default new Vuex.Store({
7
+  state: {
8
+    trackHistory: [],
9
+  },
10
+  mutations: {
11
+    updateHistory(state, history) {
12
+      Vue.set(state, 'trackHistory', history);
13
+    },
14
+    addTrack(state, track) {
15
+      state.trackHistory.push(track);
16
+    },
17
+  },
18
+  actions: {
19
+    loadHistory({ commit }) {
20
+      fetch('/api/history')
21
+        .then(response => response.json())
22
+        .then((jsonResponse) => {
23
+          commit('updateHistory', jsonResponse);
24
+        });
25
+    },
26
+    SOCKET_response({ commit }, trackString) {
27
+      const track = JSON.parse(trackString);
28
+      commit('addTrack', track);
29
+    },
30
+  },
31
+});

+ 10
- 0
vue.config.js View File

@@ -0,0 +1,10 @@
1
+module.exports = {
2
+  lintOnSave: false,
3
+  devServer: {
4
+    proxy: {
5
+      '^/api': {
6
+        target: 'http://localhost:5000/',
7
+      },
8
+    },
9
+  },
10
+};

Loading…
Cancel
Save