Added collections loading

This commit is contained in:
Pünkösd Marcell 2020-11-26 04:44:55 +01:00
parent f85f16e2a5
commit 31f8cffec1
10 changed files with 167 additions and 43 deletions

View File

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

View 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>

View 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>

View File

@ -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>

View File

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

13
src/views/Collection.vue Normal file
View 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
View 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>

View File

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

View File

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

15
src/views/Track.vue Normal file
View File

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