Implemented view of rankinglist
This commit is contained in:
Katharina Will
parent
d52cdf20ba
commit
74f664e2ba
@ -59,11 +59,10 @@
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
disable
|
||||
class="text-primary"
|
||||
v-ripple
|
||||
tag="a"
|
||||
to="/"
|
||||
to="/ranking"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="list"/>
|
||||
|
||||
@ -12,26 +12,15 @@
|
||||
narrow-indicator
|
||||
switch-indicator
|
||||
>
|
||||
<q-tab name="map" label="Karte" icon="map"/>
|
||||
<q-tab name="list" label="Liste" icon="list"/>
|
||||
<q-tab name="map" label="Karte" icon="map"/>
|
||||
</q-tabs>
|
||||
<q-separator color="grey-4"/>
|
||||
</div>
|
||||
|
||||
<div class="col flex column">
|
||||
<q-tab-panels v-model="tab" animated swipeable class="col">
|
||||
<q-tab-panel name="map" class="q-pa-none fit">
|
||||
<!--<div class="full-width full-height absolute-full" style="background: url('statics/osm_mock.png'); background-size: cover">-->
|
||||
<!--</div>-->
|
||||
<q-img src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg" transition="fade" class="absolute-full">
|
||||
<template v-slot:loading>
|
||||
<q-spinner-puff color="cyan-14" size="4em"/>
|
||||
</template>
|
||||
</q-img>
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="list" class=" fit">
|
||||
|
||||
<q-list>
|
||||
<q-card class="q-mb-md" v-for="cache in caches" :key="cache.id">
|
||||
<q-item
|
||||
@ -48,15 +37,22 @@
|
||||
</q-item-label>
|
||||
<q-item-label caption>{{ cache.description.substring(0,80) }} ... </q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side top class="self-center" >
|
||||
<q-btn flat unelevated stack color="positive" icon="arrow_forward" label="Starten" size="sm" style="height: 4.5rem"/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-card>
|
||||
|
||||
</q-list>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="map" class="q-pa-none fit">
|
||||
<!--<div class="full-width full-height absolute-full" style="background: url('statics/osm_mock.png'); background-size: cover">-->
|
||||
<!--</div>-->
|
||||
<q-img src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg" transition="fade" class="absolute-full">
|
||||
<template v-slot:loading>
|
||||
<q-spinner-puff color="cyan-14" size="4em"/>
|
||||
</template>
|
||||
</q-img>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</div>
|
||||
</q-page>
|
||||
@ -76,7 +72,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tab: 'map',
|
||||
tab: 'list',
|
||||
hheight: 71.0,
|
||||
fheight: 36.0, //37
|
||||
//header: {h: '0px', w: 0}
|
||||
|
||||
95
frontend/src/pages/ranking.vue
Normal file
95
frontend/src/pages/ranking.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<q-page class="column">
|
||||
<div class="bg-red col col-shrink" style="">
|
||||
<q-tabs
|
||||
v-model="tab"
|
||||
class="bg-grey-2"
|
||||
inline-label
|
||||
align="justify"
|
||||
active-bg-color="bg-grey-1"
|
||||
active-color="cyan-14"
|
||||
indicator-color="cyan-14"
|
||||
narrow-indicator
|
||||
switch-indicator
|
||||
>
|
||||
<q-tab name="solo" label="Solo-Cacher" icon="person"/>
|
||||
<q-tab name="team" label="Cacher-Team" icon="group"/>
|
||||
</q-tabs>
|
||||
<q-separator color="grey-4"/>
|
||||
</div>
|
||||
|
||||
<div class="col flex column">
|
||||
<q-tab-panels v-model="tab" animated swipeable class="col">
|
||||
<q-tab-panel name="solo" class="q-pa-none fit">
|
||||
<q-list>
|
||||
<q-card class="q-mb-md" v-for="user in users" :key="user.id">
|
||||
<q-item class="q-pr-sm ">
|
||||
<q-item-section>
|
||||
<q-item-label overline><a class="text-black" style="text-decoration: none"><span>{{user.username}}</span></a></q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<span class="text-grey">{{user.rankingPointsSum}} Punkte </span>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-card>
|
||||
</q-list>
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="team" class=" fit">
|
||||
<q-list>
|
||||
<q-card class="q-mb-md">
|
||||
<q-item class="q-pr-sm ">
|
||||
<q-item-section>
|
||||
<q-item-label>Single line item</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<span class="text-grey"> Punkte </span>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-card>
|
||||
</q-list>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</div>
|
||||
</q-page>
|
||||
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/*
|
||||
.my-list-card-item
|
||||
padding-left: 8px
|
||||
*/
|
||||
</style>
|
||||
<script>
|
||||
import {dom} from 'quasar'
|
||||
|
||||
const {height, width} = dom
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tab: 'solo',
|
||||
rankinglist: [],
|
||||
users: [{
|
||||
username: "kathy", id: "123", rankingPointsSum: "15"
|
||||
},
|
||||
{
|
||||
username: "timo", id: "124", rankingPointsSum: "20"
|
||||
}]
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
console.log("created(): " + this.rankinglist);
|
||||
// this.fetchRankinglist();
|
||||
},
|
||||
methods: {
|
||||
fetchRankinglist() {
|
||||
this.$axios.get('http://localhost:8080/api/getRankingList')
|
||||
.then((response) => {
|
||||
console.log("Rankinglist: " + this.rankinglist);
|
||||
this.rankinglist = response.data;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -20,6 +20,11 @@ const routes = [
|
||||
component: () => import("layouts/MyLayout.vue"),
|
||||
children: [{ path: "", component: () => import("pages/CacheView.vue") }]
|
||||
},
|
||||
{
|
||||
path: "/ranking/",
|
||||
component: () => import("layouts/MyLayout.vue"),
|
||||
children: [{path: "", component: () => import("pages/ranking.vue")}]
|
||||
},
|
||||
{
|
||||
path: "/login/",
|
||||
component: () => import("layouts/MyLayout.vue"),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user