Added collections loading
This commit is contained in:
parent
f85f16e2a5
commit
31f8cffec1
12
src/App.vue
12
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>
|
||||
|
29
src/components/BigChungusLoader.vue
Normal file
29
src/components/BigChungusLoader.vue
Normal file
@ -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>
|
29
src/components/CollectionsListElement.vue
Normal file
29
src/components/CollectionsListElement.vue
Normal file
@ -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>
|
@ -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>
|
@ -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'})
|
||||
}
|
||||
|
13
src/views/Collection.vue
Normal file
13
src/views/Collection.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Collection"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
46
src/views/Collections.vue
Normal file
46
src/views/Collections.vue
Normal file
@ -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>
|
@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<b-container>
|
||||
<div class="home">
|
||||
<h1>home</h1>
|
||||
</div>
|
||||
</b-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
@ -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;
|
||||
|
||||
});
|
||||
|
15
src/views/Track.vue
Normal file
15
src/views/Track.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
asd
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Track"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
Loading…
Reference in New Issue
Block a user