111 lines
3.3 KiB
Vue
111 lines
3.3 KiB
Vue
<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"
|
|
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-md fit">
|
|
<q-list>
|
|
<q-card class="q-mb-md" v-for="(user,index) in rankinglist" :key="user.id">
|
|
<q-item class="q-pr-sm ">
|
|
<q-item-section>
|
|
<q-item-label><a class="text-black" style="text-decoration: none"><span>{{index+1}}. {{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: []
|
|
}
|
|
},
|
|
created: function() {
|
|
console.log("created(): " + this.rankinglist);
|
|
this.fetchRankinglist();
|
|
},
|
|
methods: {
|
|
fetchRankinglist() {
|
|
this.$axios.get('/api/getRankingList')
|
|
.then((response) => {
|
|
console.log("Rankinglist: ");
|
|
console.log(response.data);
|
|
this.rankinglist = response.data;
|
|
}).catch((error) => {
|
|
// Error
|
|
let msg;
|
|
let title;
|
|
if (error.response) {
|
|
// The request was made and the server responded with a status code
|
|
title = "Problem with response!";
|
|
msg = error.response;
|
|
} else if (error.request) {
|
|
// The request was made but no response was received
|
|
title = "Problem with request!";
|
|
msg = "Error occured due to wrong server request!"
|
|
console.log(error.request);
|
|
} else {
|
|
// Something happened in setting up the request that triggered an Error
|
|
title = "Error";
|
|
msg = error.message;
|
|
console.log('Error', error.message);
|
|
}
|
|
console.log(error.config);
|
|
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: msg, title: title, });
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|