implemented progress bar
This commit is contained in:
Timo Volkmann
parent
d1b7fb7c87
commit
9410463620
@ -72,9 +72,7 @@ module.exports = function (ctx) {
|
||||
'QPopupEdit',
|
||||
'QSlideTransition',
|
||||
'QToggle',
|
||||
'QStepper',
|
||||
'QStep',
|
||||
'QStepperNavigation'
|
||||
'QLinearProgress'
|
||||
],
|
||||
|
||||
directives: [
|
||||
|
||||
@ -32,23 +32,21 @@
|
||||
expand-separator
|
||||
icon="location_on"
|
||||
:label="startedCache.cache.name"
|
||||
:caption=" startedCache.cache.description"
|
||||
:caption="startedCache.cache.rankingPoints+' Punkte, '+startedCache.cache.stationen.length+' Stationen'"
|
||||
>
|
||||
<q-item>
|
||||
<q-item-section top avatar class="self-center">
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{'Nächste Aufgabe: ' + startedCache.aktuelleStation.description }}
|
||||
</q-item-label>
|
||||
<q-item-label caption>{{'Ranglistenpunkte für diesen Cache: ' + startedCache.cache.rankingPoints}}
|
||||
<q-item class="q-pr-sm">
|
||||
<q-item-section top avatar class="self-center"/>
|
||||
<q-item-section class="">
|
||||
<q-linear-progress rounded style="height: 15px" :value="startedCache.progress" color="primary" class=""/>
|
||||
<q-item-label class="q-pt-xs" caption>
|
||||
{{ startedCache.progress * 100 }}% bereits geschafft
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side top class="self-center">
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item class="q-pr-sm reverse q-gutter-x-sm">
|
||||
<q-btn @click="continueCache(startedCache.cache.id)" unelevated color="positive" stack icon="arrow_forward"
|
||||
<q-item class="q-pr-sm reverse">
|
||||
<q-btn @click="continueCache(startedCache.cache.id)" unelevated color="positive" stack
|
||||
icon="arrow_forward"
|
||||
label="Fortfahren" size="sm"/>
|
||||
</q-item>
|
||||
</q-expansion-item>
|
||||
@ -58,7 +56,9 @@
|
||||
|
||||
<q-tab-panel name="finishedCaches" class="fit">
|
||||
<q-list>
|
||||
<q-card class="q-mb-md" v-for="finishedCache in startedCaches.filter(cache => cache.cacheAccesDefinition.id === 1)" :key="finishedCache.id">
|
||||
<q-card class="q-mb-md"
|
||||
v-for="finishedCache in startedCaches.filter(cache => cache.cacheAccesDefinition.id === 1)"
|
||||
:key="finishedCache.id">
|
||||
<q-expansion-item
|
||||
class=""
|
||||
expand-separator
|
||||
@ -80,7 +80,8 @@
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item class="q-pr-sm reverse q-gutter-x-sm">
|
||||
<q-btn @click="goToReward(finishedCache.cache.id)" unelevated color="primary" stack icon="arrow_forward"
|
||||
<q-btn @click="goToReward(finishedCache.cache.id)" unelevated color="primary" stack
|
||||
icon="arrow_forward"
|
||||
label="Belohnung ansehen" size="sm"/>
|
||||
</q-item>
|
||||
</q-expansion-item>
|
||||
@ -104,11 +105,8 @@
|
||||
return {
|
||||
tab: 'startedCaches',
|
||||
startedCaches: [],
|
||||
inviteMail: "",
|
||||
currentTeamStatus: "Dienstag 15:00 Treffen zum Blumencache",
|
||||
teamStatus: "",
|
||||
userName: null,
|
||||
email: null,
|
||||
|
||||
//progress: 0.4
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
@ -119,12 +117,35 @@
|
||||
},
|
||||
},
|
||||
created: function () {
|
||||
this.fetchUserCaches();
|
||||
this.$store.commit('auth/SET_AUTHENTICATED');
|
||||
this.$store.commit('auth/SET_USER');
|
||||
//this.$store.commit('auth/SET_USER');
|
||||
this.fetchUserCaches();
|
||||
|
||||
},
|
||||
methods: {
|
||||
fetchUserCaches: function () {
|
||||
calculateProgress() {
|
||||
console.log("calcProgress...")
|
||||
console.log("this.startedCaches: ")
|
||||
console.log(this.startedCaches)
|
||||
// for (let startedCache of this.startedCaches) {
|
||||
// console.log(startedCache)
|
||||
// let stationCount = startedCache.cache.stationen.length;
|
||||
// let stationPos = 1 + startedCache.cache.stationen.findIndex(station => station.id === startedCache.aktuelleStation.id);
|
||||
// startedCache.progress = stationPos / stationCount;
|
||||
// console.log(startedCache.progress)
|
||||
// }
|
||||
this.startedCaches.forEach(startedCache => {
|
||||
console.log(startedCache)
|
||||
let stationCount = startedCache.cache.stationen.length;
|
||||
let stationPos = 1 + startedCache.cache.stationen.findIndex(station => station.id === startedCache.aktuelleStation.id);
|
||||
startedCache.progress = stationPos / stationCount;
|
||||
console.log(startedCache.progress)
|
||||
})
|
||||
console.log("calcProgress finished.")
|
||||
console.log(this.startedCaches)
|
||||
},
|
||||
fetchUserCaches() {
|
||||
console.log("fetchCaches...")
|
||||
let token;
|
||||
if (localStorage.getItem('userToken')) {
|
||||
token = JSON.parse(localStorage.getItem('userToken')).token;
|
||||
@ -135,6 +156,7 @@
|
||||
.then((response) => {
|
||||
console.log(response.data)
|
||||
this.startedCaches = response.data;
|
||||
|
||||
}).catch((error) => {
|
||||
// Error
|
||||
let msg;
|
||||
@ -156,7 +178,11 @@
|
||||
}
|
||||
console.log(error.config);
|
||||
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
|
||||
})
|
||||
}).finally(() => {
|
||||
console.log("fetchCaches... finally")
|
||||
this.calculateProgress();
|
||||
});
|
||||
console.log("fetchCaches... outside")
|
||||
},
|
||||
continueCache(cacheID) {
|
||||
console.log("cacheID");
|
||||
@ -192,73 +218,6 @@
|
||||
});
|
||||
}
|
||||
},
|
||||
getPersonalRanking() {
|
||||
const name = JSON.parse(localStorage.getItem('userToken')).name;
|
||||
console.log(JSON.parse(localStorage.getItem('userToken')).name);
|
||||
this.$axios.get('/api/hello', {params: {name}})
|
||||
.then((response) => {
|
||||
this.userRanking = response.data;
|
||||
console.log(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,});
|
||||
})
|
||||
},
|
||||
getTeamData() {
|
||||
const userName = {name: JSON.parse(localStorage.getItem('userToken')).name};
|
||||
this.$axios.get('/api/getTeam', {params: userName})
|
||||
.then(response => {
|
||||
console.log("getTeam: " + response);
|
||||
}).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,});
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
dropDownSelectItem(item) {
|
||||
if (item === 'team') {
|
||||
this.dropDownSelectedItem = this.teamName;
|
||||
} else {
|
||||
this.dropDownSelectedItem = item;
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
expand-separator
|
||||
icon="location_on"
|
||||
:label="cache.name"
|
||||
:caption="cache.rankingPoints+' Punkte / Size '+cache.stationen.length"
|
||||
:caption="cache.rankingPoints+' Punkte, '+cache.stationen.length+' Stationen'"
|
||||
>
|
||||
<q-item>
|
||||
<q-item-section top avatar class="self-center">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user