Browse Source

Add table with favorite tracks of the last week

master
parent
commit
b6a2b99a7c
Signed by: Christian van Onzenoodt <christian.van-onzenoodt@uni-ulm.de> GPG Key ID: 7B2E632FDC852341
4 changed files with 80 additions and 1 deletions
  1. 5
    0
      package-lock.json
  2. 1
    0
      package.json
  3. 62
    1
      src/components/Favorites.vue
  4. 12
    0
      src/store.js

+ 5
- 0
package-lock.json View File

@@ -8258,6 +8258,11 @@
8258 8258
         }
8259 8259
       }
8260 8260
     },
8261
+    "moment": {
8262
+      "version": "2.23.0",
8263
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.23.0.tgz",
8264
+      "integrity": "sha512-3IE39bHVqFbWWaPOMHZF98Q9c3LDKGTmypMiTM2QygGXXElkFWIH7GxfmlwmY2vwa+wmNsoYZmG2iusf1ZjJoA=="
8265
+    },
8261 8266
     "move-concurrently": {
8262 8267
       "version": "1.0.1",
8263 8268
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

+ 1
- 0
package.json View File

@@ -9,6 +9,7 @@
9 9
   },
10 10
   "dependencies": {
11 11
     "d3": "^5.7.0",
12
+    "moment": "^2.23.0",
12 13
     "vue": "^2.5.17",
13 14
     "vue-material": "^1.0.0-beta-10.2",
14 15
     "vue-router": "^3.0.1",

+ 62
- 1
src/components/Favorites.vue View File

@@ -1,4 +1,6 @@
1 1
 <template>
2
+  <div>
3
+    <!--
2 4
 <div>
3 5
   <div>
4 6
     Favourites
@@ -10,15 +12,74 @@
10 12
     // adjustable timeframe
11 13
   </div>
12 14
 </div>
15
+-->
16
+
17
+<md-table v-model="favoriteTracks" md-fixed-header md-height="100%" class="history-table">
18
+  <md-table-row slot="md-table-row" slot-scope="{ item }">
19
+    <md-table-cell>
20
+      <div class="cover">
21
+        <img v-bind:src=item.item.album.image_url />
22
+      </div>
23
+    </md-table-cell>
24
+
25
+    <md-table-cell md-label="Track">
26
+      <a v-bind:href=item.item.spotify_url>{{ item.item.name }}</a>
27
+    </md-table-cell>
28
+
29
+    <md-table-cell md-label="Album">
30
+      {{ item.item.album.name }}
31
+    </md-table-cell>
32
+
33
+    <md-table-cell md-label="Artist(s)">
34
+      {{ item.item.artists.map(artist => artist.name).join("/ ") }}
35
+    </md-table-cell>
36
+
37
+    <md-table-cell md-label="Plays">
38
+      {{ item.plays }}
39
+    </md-table-cell>
40
+
41
+  </md-table-row>
42
+</md-table>
43
+</div>
44
+
13 45
 </template>
14 46
 
15 47
 <script>
16 48
 import { mapState } from 'vuex';
49
+import * as moment from 'moment';
17 50
 
18 51
 export default {
19 52
   name: 'Favorites',
53
+  mounted() {
54
+    const now = moment().format(moment.HTML5_FMT.DATETIME_LOCAL_MS);
55
+    const oneWeek = moment().subtract(7, 'days').format(moment.HTML5_FMT.DATETIME_LOCAL_MS);
56
+
57
+    this.$store.dispatch('loadFavoriteTrack', { start: now, end: oneWeek });
58
+  },
20 59
   computed: mapState({
21
-    trackHistory: state => state.trackHistory,
60
+    favoriteTracks: state => state.favoriteTracks,
22 61
   }),
23 62
 };
24 63
 </script>
64
+
65
+<style scoped lang="scss">
66
+.cover {
67
+    height: 50px;
68
+    width: 50px;
69
+
70
+    img {
71
+        max-width: 100%;
72
+        height: auto;
73
+    }
74
+}
75
+
76
+.history-table {
77
+    i.md-icon {
78
+        display: inline;
79
+    }
80
+
81
+    span.icon-label {
82
+        padding-left: 5px;
83
+    }
84
+}
85
+</style>

+ 12
- 0
src/store.js View File

@@ -6,11 +6,15 @@ Vue.use(Vuex);
6 6
 export default new Vuex.Store({
7 7
   state: {
8 8
     trackHistory: [],
9
+    favoriteTracks: [],
9 10
   },
10 11
   mutations: {
11 12
     updateHistory(state, history) {
12 13
       Vue.set(state, 'trackHistory', history);
13 14
     },
15
+    updateFavoriteTrack(state, favorites) {
16
+      Vue.set(state, 'favoriteTracks', favorites);
17
+    },
14 18
     addTrack(state, track) {
15 19
       state.trackHistory.unshift(track);
16 20
     },
@@ -23,6 +27,14 @@ export default new Vuex.Store({
23 27
           commit('updateHistory', jsonResponse);
24 28
         });
25 29
     },
30
+    loadFavoriteTrack({ commit }, payload) {
31
+      const { start, end } = payload;
32
+      fetch(`/api/favorite/track?start=${start}&end=${end}`)
33
+        .then(response => response.json())
34
+        .then((jsonResponse) => {
35
+          commit('updateFavoriteTrack', jsonResponse);
36
+        });
37
+    },
26 38
     SOCKET_response({ commit }, trackString) {
27 39
       const track = JSON.parse(trackString);
28 40
       commit('addTrack', track);

Loading…
Cancel
Save