Implemented item view

src/App.vue

@@ -9,6 +9,11 @@
 
     <div id="footer">
       <footer-nav/>
+      <div id="player-spacer" v-if="$store.state.playerActive"></div>
+    </div>
+
+    <div id="player-holder" v-if="$store.state.playerActive">
+      asdasdasdasdasd
     </div>
 
   </div>
@@ -92,4 +97,16 @@ export default {
 #loading-screen {
   margin: 45vh auto 0 auto;
 }
+
+#player-holder {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 60px;
+}
+
+#player-spacer {
+  height: 60px;
+}
 </style>

src/api/index.js

@@ -131,8 +131,8 @@ export default new class {
         return this._performApiCall('get', `/lists/${id}`, null, true, 200);
     }
 
-    getTrackFromList(listid, trackid) {
-        return this._performApiCall('get', `/lists/${listid}/${trackid}`, null, true, 200);
+    getItem(id) {
+        return this._performApiCall('get', `/items/${id}`, null, true, 200);
     }
 
 }

src/router/index.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Collections from '@/views/Collections.vue'
 import Collection from "@/views/Collection";
-import Track from "@/views/Track";
+import Item from "@/views/Item";
 import Login from "@/views/Login";
 
 
@@ -32,9 +32,9 @@ const routes = [
     }
   },
   {
-    path: '/track/:id',
-    name: 'Track',
-    component: Track,
+    path: '/item/:id',
+    name: 'Item',
+    component: Item,
     meta: {
       allowVisit(authorized) {
         return authorized;

src/store/index.js

@@ -8,7 +8,8 @@ export default new Vuex.Store({
         userdata: {
             name: null
         },
-        appReady: false
+        appReady: false,
+        playerActive: false
     },
     mutations: {
         storeUserData(state, username) {

src/views/Collection.vue

@@ -9,17 +9,16 @@
     <b-row v-else>
       <b-col class="my-4">
 
-        <b-table :items="tracklist" :fields="fields" hover borderless>
+        <b-table :items="tracklist" :fields="fields" hover borderless @row-clicked="rowClicked" tbody-tr-class="clickable-table-row-thing">
           <template #cell(cover_url)="data">
-            <b-img-lazy :src="data.cover_url" height="45px" blank-src="@/assets/music_placeholder.png"
-                        v-if="!!data.cover_url"/>
+            <b-img-lazy :src="data.item.cover_url_small" height="45px" blank-src="@/assets/music_placeholder.png"
+                        v-if="!!data.item.cover_url_small"/>
             <b-img src="@/assets/music_placeholder.png" height="45px" v-else/>
           </template>
 
           <template #cell(id)="data">
             <div class="text-right">
-              <b-button :asd="data">Open</b-button>&nbsp;
-              <b-button variant="success" :disabled="!data.spotify_id">Play</b-button>
+              <b-button variant="success" :disabled="!data.item.spotify_id">Play</b-button>
             </div>
           </template>
         </b-table>
@@ -58,6 +57,11 @@ export default {
       tracklist: []
     }
   },
+  methods: {
+    rowClicked(data) {
+      this.$router.push({name: 'Item', params: {id: data.id}});
+    }
+  },
   mounted() {
     this.$api.getList(this.$route.params.id).then((data) => {
       if (data) {
@@ -75,6 +79,9 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style>
+/* Should be scoped, but that could not change row style*/
+.clickable-table-row-thing {
+  cursor: pointer;
+}
 </style>

src/views/Item.vue

@@ -0,0 +1,64 @@
+<template>
+  <b-container>
+    <b-row>
+      <b-col>
+        <h1>Item</h1>
+      </b-col>
+    </b-row>
+    <big-chungus-loader text="Fetching item info..." v-if="processing"/>
+    <b-row v-else>
+      <b-col class="my-4">
+        <div>
+          <b-img-lazy blank-src="@/assets/music_placeholder.png"
+                      :src="songInfo.cover_url || '@/assets/music_placeholder.png'"
+                      id="cover-art"
+          />
+        </div>
+        <div class="my-3">
+          <p><b>Artist:</b> {{ songInfo.artist }} </p>
+          <p><b>Album:</b> {{ songInfo.album }}</p>
+          <p><b>Title:</b> {{ songInfo.title }}</p>
+        </div>
+        <div class="my-3">
+          <b-button variant="success" :disabled="!songInfo.spotify_id">Play!</b-button>
+        </div>
+      </b-col>
+    </b-row>
+  </b-container>
+</template>
+
+<script>
+import BigChungusLoader from "@/components/BigChungusLoader";
+
+export default {
+  name: "Item",
+  components: {
+    BigChungusLoader
+  },
+  data() {
+    return {
+      processing: true,
+      songInfo: {}
+    }
+  },
+  mounted() {
+    this.$api.getItem(this.$route.params.id).then((data) => {
+      if (data) {
+        this.songInfo = data;
+        this.processing = false;
+      } else {
+        this.$showToast("Invalid response from server");
+      }
+    }).catch(({text}) => {
+      this.$showToast(text);
+    });
+  }
+}
+</script>
+
+<style scoped>
+#cover-art {
+  max-width: 100%;
+  width: 25vh;
+}
+</style>

src/views/Track.vue

@@ -1,15 +0,0 @@
-<template>
-<div>
-  asd
-</div>
-</template>
-
-<script>
-export default {
-name: "Track"
-}
-</script>
-
-<style scoped>
-
-</style>