60 lines
1.6 KiB
Vue
60 lines
1.6 KiB
Vue
<template>
|
|
<div class="q-ma-md">
|
|
<p class="text-h4">QR-Generator</p>
|
|
<p class="text-h5">Cache: {{ cacheName }}</p>
|
|
<div class="row q-col-gutter-md">
|
|
<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 items-start" v-for="(station, index) in stationen" :key="index">
|
|
<p class="text-h6 q-my-sm">Station {{ index + 1 }}</p>
|
|
<q-card class="">
|
|
<img class="full-width q-pa-md bg-white" :src="imgBaseURL + cacheId +'/'+ station.id" alt="">
|
|
</q-card>
|
|
<p class="q-my-sm">{{ cacheId }}/{{ station.id }}</p>
|
|
</div>
|
|
</div>
|
|
<q-btn to="/overview" unelevated color="primary" stack
|
|
label="Schließen" class="full-width"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
// name: 'PageName',
|
|
data() {
|
|
return {
|
|
cacheName: "",
|
|
cacheId: 0,
|
|
stationen: [],
|
|
imgBaseURL: "https://api.qrserver.com/v1/create-qr-code/?size=500x500&data="
|
|
};
|
|
},
|
|
|
|
created() {
|
|
this.fetchData();
|
|
},
|
|
|
|
methods: {
|
|
fetchData() {
|
|
this.$axios.get('/api/allCaches')
|
|
.then((response) => {
|
|
console.log("/api/allCaches");
|
|
console.log(response.data);
|
|
const cache = response.data.find(cache => cache.id === Number(this.$route.params.cache));
|
|
this.cacheName = cache.name;
|
|
this.cacheId = cache.id;
|
|
this.stationen = cache.stationen;
|
|
})
|
|
},
|
|
|
|
},
|
|
|
|
beforeRouteUpdate(to, from, next) {
|
|
this.fetchData();
|
|
next()
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|