Added collections loading

src/App.vue

@@ -13,21 +13,21 @@
 
   </div>
   <div id="app-loader" v-else>
-    <loading-screen/>
+    <big-chungus-loader id="loading-screen"/>
   </div>
 </template>
 
 <script>
 import FooterNav from "@/components/FooterNav";
 import Navbar from "@/components/Navbar";
-import LoadingScreen from "@/components/LoadingScreen";
+import BigChungusLoader from "@/components/BigChungusLoader";
 
 export default {
   name: "Login",
   components: {
     Navbar,
     FooterNav,
-    LoadingScreen
+    BigChungusLoader
   },
   created() {
     // The basic app is created... Currently showing a loading screen (as soon as mounted)
@@ -37,7 +37,7 @@ export default {
       this.$api.getMyInfo().then(({name}) => {
 
         this.$store.dispatch('storeUserData', name).then(() => {
-          this.$router.push('/').catch(() => {});
+          this.$router.push({name: "Collections"}).catch(() => {});
             this.$store.dispatch('setAppReady');
 
         });
@@ -84,4 +84,8 @@ export default {
 #app-loader {
   height: 100%;
 }
+
+#loading-screen {
+  margin: 45vh auto 0 auto;
+}
 </style>

src/components/BigChungusLoader.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="text-center chungus-loader-container">
+    <p>
+      <b-spinner variant="success" type="grow" />
+    </p>
+    <p>
+      {{ text }}
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+name: "BigChungusLoader",
+  props: {
+    text: {
+      type: String,
+      default: "onSpot is loading..."
+    }
+  }
+}
+</script>
+
+<style scoped>
+div.chungus-loader-container {
+  margin-top: 25vh;
+  width: 100%;
+}
+</style>

src/components/CollectionsListElement.vue

@@ -0,0 +1,29 @@
+<template>
+  <b-col class="my-3" cols="12" md="6">
+    <b-card :title="title">
+      <b-button class="float-right" @click="performClick">Open</b-button>
+      <div class="float-left">
+        Tracks: {{ count }}
+      </div>
+    </b-card>
+  </b-col>
+</template>
+
+<script>
+export default {
+  name: "CollectionsListElement",
+  props: {
+    title: String,
+    count: Number
+  },
+  methods: {
+    performClick() {
+      this.$emit('clicked');
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/LoadingScreen.vue

@@ -1,16 +0,0 @@
-<template>
-  <div id="loader-content" class="text-center">
-    <p>
-      <b-spinner variant="success" type="grow" />
-    </p>
-    <p>
-      onSpot is loading...
-    </p>
-  </div>
-</template>
-
-<style scoped>
-#loader-content {
-  margin: 45vh auto 0 auto;
-}
-</style>

src/router/index.js

@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '@/views/Home.vue'
+import Collections from '@/views/Collections.vue'
+import Collection from "@/views/Collection";
+import Track from "@/views/Track";
 import Login from "@/views/Login";
 
 
@@ -11,8 +13,28 @@ Vue.use(VueRouter)
 const routes = [
   {
     path: '/',
-    name: 'Home',
-    component: Home,
+    name: 'Collections',
+    component: Collections,
+    meta: {
+      allowVisit(authorized) {
+        return authorized;
+      }
+    }
+  },
+  {
+    path: '/collection/:id',
+    name: 'Collection',
+    component: Collection,
+    meta: {
+      allowVisit(authorized) {
+        return authorized;
+      }
+    }
+  },
+  {
+    path: '/track/:id',
+    name: 'Track',
+    component: Track,
     meta: {
       allowVisit(authorized) {
         return authorized;
@@ -62,7 +84,7 @@ router.beforeEach((to, from, next) => {
   }
 
   if (authorized) {
-    next({name: 'Home'})
+    next({name: 'Collections'})
   } else {
     next({name: 'Login'})
   }

src/views/Collection.vue

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

src/views/Collections.vue

@@ -0,0 +1,46 @@
+<template>
+  <b-container>
+    <b-row>
+      <b-col>
+        <h1>My Collections</h1>
+      </b-col>
+    </b-row>
+    <big-chungus-loader text="Fetching collections..." v-if="processing"/>
+    <b-row v-else>
+      <collections-list-element :title="c.name" :count="c.element_count" @click="openCollection(c.id)" :key="c.id" v-for="c in collections"/>
+    </b-row>
+  </b-container>
+</template>
+
+<script>
+import BigChungusLoader from "@/components/BigChungusLoader";
+import CollectionsListElement from "@/components/CollectionsListElement";
+
+export default {
+  name: 'Collections',
+  components: {BigChungusLoader, CollectionsListElement},
+  data() {
+    return {
+      processing: true,
+      collections: {}
+    }
+  },
+  methods: {
+    openCollection(id) {
+      console.log(id);
+    }
+  },
+  mounted() {
+    this.$api.getAllLists().then((data) => {
+      if (data) {
+        this.collections = data.ids;
+        this.processing = false;
+      } else {
+        this.$showToast("Invalid response from server");
+      }
+    }).catch(({text}) => {
+      this.$showToast(text);
+    });
+  }
+}
+</script>

src/views/Home.vue

@@ -1,17 +0,0 @@
-<template>
-  <b-container>
-  <div class="home">
-    <h1>home</h1>
-  </div>
-  </b-container>
-</template>
-
-<script>
-
-export default {
-  name: 'Home',
-  components: {
-
-  }
-}
-</script>

src/views/Login.vue

@@ -76,8 +76,7 @@ export default {
 
         this.$store.dispatch('storeUserData', name).then(() => {
 
-          this.$router.push('/').catch(() => {
-          });
+          this.$router.push({name: "Collections"}).catch(() => {});
           this.processing = false;
 
         });

src/views/Track.vue

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