fixed login & separated profile from mycaches
This commit is contained in:
Timo Volkmann
parent
9e132b21ef
commit
6f4789fff0
@ -69,7 +69,21 @@
|
||||
<q-icon name="map"/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>Caches</q-item-label>
|
||||
<q-item-label>Alle Caches</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
class="text-primary"
|
||||
v-ripple
|
||||
tag="a"
|
||||
to="/mycaches"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="map"/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>Meine Caches</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="q-pa-md">
|
||||
<form class="login" @submit.prevent="login">
|
||||
<form class="login">
|
||||
<div class="q-pa-md">
|
||||
<div class="column q-gutter-lg" style="">
|
||||
<div class="col">
|
||||
@ -29,7 +29,7 @@
|
||||
label="Login"
|
||||
color="primary"
|
||||
class="full-width"
|
||||
type="submit"
|
||||
@click="login"
|
||||
unelevated
|
||||
>
|
||||
<template v-slot:loading>
|
||||
@ -87,6 +87,7 @@
|
||||
},
|
||||
methods: {
|
||||
login: function () {
|
||||
console.log("login called");
|
||||
this.loading = true;
|
||||
const data = {
|
||||
email: this.user.email,
|
||||
|
||||
347
frontend/src/pages/MyCaches.vue
Normal file
347
frontend/src/pages/MyCaches.vue
Normal file
@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<q-page class="column no-wrap">
|
||||
<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="startedCaches" label="Angefangene Caches" icon="playlist_play"/>
|
||||
<q-tab name="finishedCaches" label="Beendete Caches" icon="playlist_add_check"/>
|
||||
</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="startedCaches" class=" fit">
|
||||
<q-list>
|
||||
<q-card
|
||||
class="q-mb-md"
|
||||
v-for="startedCache in startedCaches.filter(cache => cache.cacheAccesDefinition.id === 0)"
|
||||
:key="startedCache.id"
|
||||
>
|
||||
<q-expansion-item
|
||||
class=""
|
||||
expand-icon-toggle
|
||||
expand-separator
|
||||
icon="location_on"
|
||||
:label="startedCache.cache.name"
|
||||
:caption=" startedCache.cache.description"
|
||||
>
|
||||
<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-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.id)" unelevated color="positive" stack icon="arrow_forward"
|
||||
label="Fortfahren" size="sm"/>
|
||||
</q-item>
|
||||
</q-expansion-item>
|
||||
</q-card>
|
||||
</q-list>
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="finishedCaches" class="fit">
|
||||
<q-list>
|
||||
<q-card class="q-mb-md" v-for="startedCache in startedCaches.filter(cache => cache.cacheAccesDefinition.id === 1)" :key="startedCache.id">
|
||||
<q-expansion-item
|
||||
class=""
|
||||
expand-icon-toggle
|
||||
expand-separator
|
||||
icon="location_on"
|
||||
:label="startedCache.cache.name"
|
||||
:caption=" startedCache.cache.description"
|
||||
>
|
||||
<q-item>
|
||||
<q-item-section top avatar class="self-center">
|
||||
<!--<q-icon rounded color="cyan-14" name="location_on" size="3rem"/>-->
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{'Erhaltene Punkte für diesen Cache: ' + startedCache.cache.rankingPoints
|
||||
}}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side top class="self-center">
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-expansion-item>
|
||||
</q-card>
|
||||
</q-list>
|
||||
</q-tab-panel>
|
||||
|
||||
</q-tab-panels>
|
||||
</div>
|
||||
</q-page>
|
||||
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.my-custom th {
|
||||
color: #027BE3 !important;
|
||||
}
|
||||
|
||||
.my-custom tr {
|
||||
color: #027BE3 !important;
|
||||
}
|
||||
|
||||
.my-custom td {
|
||||
color: #027BE3 !important;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
//import {dom} from 'quasar'
|
||||
//const {height, width} = dom
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tab: 'startedCaches',
|
||||
startedCaches: [],
|
||||
inviteMail: "",
|
||||
currentTeamStatus: "Dienstag 15:00 Treffen zum Blumencache",
|
||||
teamStatus: "",
|
||||
userName: null,
|
||||
email: null,
|
||||
userRanking: null,
|
||||
teamName: null,
|
||||
teamRanking: null,
|
||||
dropDownSelectedItem: null,
|
||||
columns: [
|
||||
{
|
||||
name: 'desc',
|
||||
required: true,
|
||||
align: 'left',
|
||||
field: row => row.name,
|
||||
format: val => `${val}`,
|
||||
},
|
||||
{
|
||||
name: 'userData',
|
||||
required: true,
|
||||
align: 'left',
|
||||
field: 'userData',
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
name: 'Mein Nutzername',
|
||||
userData: this.userName,
|
||||
},
|
||||
{
|
||||
name: 'Meine Email',
|
||||
userData: this.email,
|
||||
},
|
||||
{
|
||||
name: 'Meine Ranglistenposition',
|
||||
userData: this.userRanking,
|
||||
},
|
||||
{
|
||||
name: 'Mein Team',
|
||||
userData: this.teamName,
|
||||
},
|
||||
{
|
||||
name: 'Teamranglistenposition',
|
||||
userData: this.teamRanking,
|
||||
},
|
||||
],
|
||||
teamColumns: [
|
||||
{
|
||||
name: 'desc',
|
||||
label: 'Benutzername',
|
||||
required: true,
|
||||
align: 'left',
|
||||
field: row => row.name,
|
||||
format: val => `${val}`,
|
||||
},
|
||||
{
|
||||
name: 'ranking',
|
||||
label: 'Solo-Ranglistenpunkte',
|
||||
required: true,
|
||||
align: 'left',
|
||||
field: 'ranking',
|
||||
sortable: true,
|
||||
}
|
||||
],
|
||||
teamData: [
|
||||
{
|
||||
name: 'BuGaCacher2019',
|
||||
ranking: 10,
|
||||
},
|
||||
{
|
||||
name: 'Max',
|
||||
ranking: 5,
|
||||
},
|
||||
{
|
||||
name: 'Timo',
|
||||
ranking: 4,
|
||||
},
|
||||
{
|
||||
name: 'Katharina',
|
||||
ranking: 3,
|
||||
},
|
||||
{
|
||||
name: 'Michael',
|
||||
ranking: 2,
|
||||
},
|
||||
{
|
||||
name: 'Robin',
|
||||
ranking: 1,
|
||||
},
|
||||
],
|
||||
pagination: {
|
||||
sortBy: 'name',
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 10
|
||||
// rowsNumber: xx if getting data from a server
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
},
|
||||
computed: {
|
||||
hasAdminState() {
|
||||
return this.$store.getters['auth/GET_ADMINSTATE'];
|
||||
},
|
||||
},
|
||||
created: function () {
|
||||
this.fetchUserCaches();
|
||||
this.$store.commit('auth/SET_AUTHENTICATED');
|
||||
this.$store.commit('auth/SET_USER');
|
||||
this.userName = JSON.parse(localStorage.getItem('userToken')).name;
|
||||
this.data[0].userData = this.userName;
|
||||
this.email = JSON.parse(localStorage.getItem('userMail'));
|
||||
this.data[1].userData = this.email;
|
||||
this.userRanking = "1234";
|
||||
this.data[2].userData = this.userRanking;
|
||||
this.teamName = "BuGa19Community";
|
||||
this.data[3].userData = this.teamName;
|
||||
this.dropDownSelectedItem = this.teamName;
|
||||
this.teamRanking = "2019";
|
||||
this.data[4].userData = this.teamRanking;
|
||||
},
|
||||
methods: {
|
||||
fetchUserCaches: function () {
|
||||
let token;
|
||||
if (localStorage.getItem('userToken')) {
|
||||
token = JSON.parse(localStorage.getItem('userToken')).token;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
this.$axios.get('/api/getMyCaches', {params: {token}})
|
||||
.then((response) => {
|
||||
this.startedCaches = 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,});
|
||||
})
|
||||
},
|
||||
continueCache(cacheID) {
|
||||
},
|
||||
validateEmail(email) {
|
||||
let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
return re.test(String(email).toLowerCase());
|
||||
},
|
||||
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>
|
||||
@ -13,8 +13,6 @@
|
||||
>
|
||||
<q-tab name="profile" label="Profil" icon="perm_identity"/>
|
||||
<q-tab name="teams" label="Team" icon="group"/>
|
||||
<q-tab name="startedCaches" label="Angefangene Caches" icon="playlist_play"/>
|
||||
<q-tab name="finishedCaches" label="Beendete Caches" icon="playlist_add_check"/>
|
||||
</q-tabs>
|
||||
<q-separator color="grey-4"/>
|
||||
</div>
|
||||
@ -95,75 +93,6 @@
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="startedCaches" class=" fit">
|
||||
<q-list>
|
||||
<q-card
|
||||
class="q-mb-md"
|
||||
v-for="startedCache in startedCaches.filter(cache => cache.cacheAccesDefinition.id === 0)"
|
||||
:key="startedCache.id"
|
||||
>
|
||||
<q-expansion-item
|
||||
class=""
|
||||
|
||||
expand-icon-toggle
|
||||
expand-separator
|
||||
icon="location_on"
|
||||
:label="startedCache.cache.name"
|
||||
:caption=" startedCache.cache.description"
|
||||
>
|
||||
<q-item>
|
||||
<q-item-section top avatar class="self-center">
|
||||
<!--<q-icon rounded color="cyan-14" name="location_on" size="3rem"/>-->
|
||||
</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-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.id)" unelevated color="positive" stack icon="arrow_forward"
|
||||
label="Fortfahren" size="sm"/>
|
||||
</q-item>
|
||||
</q-expansion-item>
|
||||
</q-card>
|
||||
</q-list>
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="finishedCaches" class="fit">
|
||||
<q-list>
|
||||
<q-card class="q-mb-md" v-for="startedCache in startedCaches" :key="startedCache.id">
|
||||
<q-expansion-item
|
||||
class=""
|
||||
v-if="startedCache.cacheAccesDefinition.description === 'abgeschlossen'"
|
||||
expand-icon-toggle
|
||||
expand-separator
|
||||
icon="location_on"
|
||||
:label="startedCache.cache.name"
|
||||
:caption=" startedCache.cache.description"
|
||||
>
|
||||
<q-item>
|
||||
<q-item-section top avatar class="self-center">
|
||||
<!--<q-icon rounded color="cyan-14" name="location_on" size="3rem"/>-->
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{'Erhaltene Punkte für diesen Cache: ' + startedCache.cache.rankingPoints
|
||||
}}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side top class="self-center">
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-expansion-item>
|
||||
</q-card>
|
||||
</q-list>
|
||||
</q-tab-panel>
|
||||
|
||||
</q-tab-panels>
|
||||
</div>
|
||||
</q-page>
|
||||
@ -298,7 +227,6 @@
|
||||
},
|
||||
},
|
||||
created: function () {
|
||||
this.fetchUserCaches();
|
||||
this.$store.commit('auth/SET_AUTHENTICATED');
|
||||
this.$store.commit('auth/SET_USER');
|
||||
this.userName = JSON.parse(localStorage.getItem('userToken')).name;
|
||||
@ -314,41 +242,6 @@
|
||||
this.data[4].userData = this.teamRanking;
|
||||
},
|
||||
methods: {
|
||||
fetchUserCaches: function () {
|
||||
let token;
|
||||
if (localStorage.getItem('userToken')) {
|
||||
token = JSON.parse(localStorage.getItem('userToken')).token;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
this.$axios.get('/api/getMyCaches', {params: {token}})
|
||||
.then((response) => {
|
||||
this.startedCaches = 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,});
|
||||
})
|
||||
},
|
||||
continueCache(cacheID) {
|
||||
},
|
||||
validateEmail(email) {
|
||||
let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
return re.test(String(email).toLowerCase());
|
||||
|
||||
@ -75,6 +75,11 @@ const routes = [
|
||||
component: () => import("layouts/MyLayout.vue"),
|
||||
children: [{ path: "", component: () => import("pages/Profile.vue") }]
|
||||
},
|
||||
{
|
||||
path: "/mycaches/",
|
||||
component: () => import("layouts/MyLayout.vue"),
|
||||
children: [{ path: "", component: () => import("pages/MyCaches.vue") }]
|
||||
},
|
||||
{
|
||||
path: "/register/",
|
||||
component: () => import("layouts/MyLayout.vue"),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user