tvolkmann/labswp_2019_sose_geocaching
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

auth store, new views, router changes

Browse Source 
added vuex store to make user details globally available.
some changes in Login, Overview.
added Cache & CacheView.
added StationView & StationEdit.
This commit is contained in:
Timo Volkmann 2019-04-04 22:49:56 +02:00
parent 2a459818f2
commit 91b0ca27c6
11 changed files with 145 additions and 376 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/pages/Cache.vue Normal file
View File

@ -0,0 +1,21 @@
<template>
<div>
<div class="q-pa-md">
<p class="text-h6">Cache erstellen/bearbeiten</p>
<p>Cache Name</p>
<p>Cache Beschreibung</p>
<p>Cache Punkte</p>
<p>Stationen</p>
</div>
</div>
</template>
<script>
export default {
name: "Cache"
}
</script>
<style scoped>
</style>

199
frontend/src/pages/CacheView.vue
View File

@ -1,199 +0,0 @@
<template>
<div class="q-pa-md">
<div class="q-gutter-y-md" style="max-width: 1200px">
<q-tabs
v-model="tab"
dense
align="justify"
class="bg-white text-green-8 shadow-2"
:breakpoint="0"
>
<q-tab name="table" icon="mail" />
<q-tab name="map" icon="map" />
</q-tabs>
<template>
<div class="q-pa-md">
<q-table
title="Caches"
:data="data"
:columns="columns"
row-key="name"
selection="single"
:selected.sync="selected"
:filter="filter"
grid
hide-header
>
<template v-slot:top-right>
<q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
</template>
<template v-slot:item="props">
<div
class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
:style="props.selected ? 'transform: scale(0.95);' : ''"
>
<q-card :class="props.selected ? 'bg-grey-2' : ''">
<q-card-section>
<q-checkbox :dense="denseOn" v-model="props.selected" :label="props.row.name" />
</q-card-section>
<q-separator />
<q-list dense>
<q-item v-for="col in props.cols.filter(col => col.name !== 'desc')" :key="col.name">
<q-item-section>
<q-item-label>{{ col.label }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-item-label caption>{{ col.value }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
</q-table>
</div>
</template>
</div>
</div>
</template>
<script>
export default {
data () {
return {
tab: 'mails',
panel: 'mails',
denseOn: true,
filter: '',
selected: [],
columns: [
{
name: 'desc',
required: true,
label: 'Dessert (100g serving)',
align: 'left',
field: row => row.name,
format: val => `${val}`,
sortable: true
},
{ name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
{ name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
{ name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
{ name: 'protein', label: 'Protein (g)', field: 'protein' },
{ name: 'sodium', label: 'Sodium (mg)', field: 'sodium' },
{ name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
{ name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }
],
data: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
sodium: 87,
calcium: '14%',
iron: '1%'
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
sodium: 129,
calcium: '8%',
iron: '1%'
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
sodium: 337,
calcium: '6%',
iron: '7%'
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
sodium: 413,
calcium: '3%',
iron: '8%'
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
sodium: 327,
calcium: '7%',
iron: '16%'
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
sodium: 50,
calcium: '0%',
iron: '0%'
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
sodium: 38,
calcium: '0%',
iron: '2%'
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
sodium: 562,
calcium: '0%',
iron: '45%'
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
sodium: 326,
calcium: '2%',
iron: '22%'
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
sodium: 54,
calcium: '12%',
iron: '6%'
}
]
}
}
}
</script>

51
frontend/src/pages/Login.vue
View File

@ -21,8 +21,8 @@
<div class="">
<div class="" style="max-width: 440px">
<q-btn
:outline="this.user.isAuthenticated"
:disabled="this.user.isAuthenticated"
:outline="userAuthenticated"
:disabled="userAuthenticated"
label="Login"
color="primary"
class="full-width"
@ -30,8 +30,8 @@
unelevated
/>
<q-btn
:outline="!this.user.isAuthenticated"
:disabled="!this.user.isAuthenticated"
:outline="!userAuthenticated"
:disabled="!userAuthenticated"
label="Logout"
color="red"
class="full-width q-mt-md"
@ -69,54 +69,49 @@
username: "moximoti",
password: "1234",
//token: "",
isAuthenticated: false
// evalAuthentication: false
},
credentialsDialog: false,
};
},
// beforeMount: {
// init: function () {
// this.isAuthenticated();
// this.evalAuthentication();
// console.log("initiated");
// }
// },
mounted () {
this.isAuthenticated();
console.log("mounted: initiated");
created () {
this.evalAuthentication();
console.log("created: initiated");
},
computed: {
userAuthenticated() {
return this.$store.state.auth.userAuthenticated.isAuthenticated
}
},
methods: {
login: function () {
// const { username, password } = this;
// this.$store.dispatch(AUTH_REQUEST, { username, password }).then(() => {
// this.$router.push('/')
// })
const data = {
username: this.user.username,
password: this.user.password
} //JSON.stringify(this.user);
};
console.log("GET http://localhost:8080/api/login/ - json: " + JSON.stringify(data));
this.$axios.post('http://localhost:8080/api/login', data) // TODO muss GET mit AUTH Header werden
this.$axios.post('http://localhost:8080/api/login', data)
.then((response) => {
// TODO Catch clause funktioniert nicht mehr wenn Statuscode zurückgegeben wird. -> hier if/else mit HTTP-Codes
console.log("GET/POST http://localhost:8080/api/login/ - response: " + response.data);
//this.user.token = response.data;
localStorage.setItem('userToken', JSON.stringify(response.data));
//localStorage.setItem('userToken', response.data);
this.isAuthenticated();
this.evalAuthentication();
})
.catch((error) => {
console.log("error: " + error);
this.credentialsDialog=true;
})
},
isAuthenticated: function () {
console.log("isAuthenticated()");
console.log("content of localstorage: ");
console.log(JSON.parse(localStorage.getItem('userToken')));
if (localStorage.getItem('userToken')) {
this.user.isAuthenticated = true;
} else {
this.user.isAuthenticated = false;
}
evalAuthentication: function () {
this.$store.commit('auth/SET_AUTHENTICATED');
},
logout: function () {
console.log("logout()");
@ -129,7 +124,7 @@
.then((response) => {
console.log("GET/POST http://localhost:8080/api/logout/ - response: " + response.data);
localStorage.removeItem('userToken');
this.isAuthenticated();
this.evalAuthentication();
})
.catch((error) => {
});

27
frontend/src/pages/Overview.vue
View File

@ -32,9 +32,7 @@
:label="cache.name"
:caption="cache.rankingPoints+' Punkte / Size '+cache.stationen.length"
>
<q-item
class="q-pr-sm "
>
<q-item>
<q-item-section top avatar class="self-center">
<!--<q-icon rounded color="cyan-14" name="location_on" size="3rem"/>-->
</q-item-section>
@ -45,8 +43,10 @@
<q-item-section side top class="self-center" >
</q-item-section>
</q-item>
<q-item class="q-pr-sm reverse">
<q-btn @click="startCache(cache.id)" flat unelevated stack color="positive" icon="arrow_forward" label="Starten" size="sm"/>
<q-item class="q-pr-sm reverse q-gutter-x-sm">
<q-btn @click="startCache(cache.id)" unelevated color="positive" stack icon="arrow_forward" label="Starten" size="sm"/>
<q-btn v-if="hasAdminState" @click="startCache(cache.id)" unelevated color="amber" stack icon="edit" label="Bearbeiten" size="sm"/>
<q-btn v-if="hasAdminState" @click="startCache(cache.id)" unelevated color="negative" stack icon="delete" label="Löschen" size="sm"/>
</q-item>
</q-expansion-item>
</q-card>
@ -90,21 +90,11 @@
}
},
mounted: function () {
//this.header.h = style(this.$refs.layout.$refs.header, 'height')
// this.hheight = height(document.getElementById('qheader'));
// this.fheight = height(document.getElementById('qfooter'));
},
computed: {
// mapHeight() {
// let header = this.hheight
// let footer = this.fheight
// let offset = header + footer + 1;
// console.log(offset)
// return {minHeight: offset ? `calc(100vh - ${offset}px)` : '100vh'};
// },
// computedMainStyle() {
// return { height: `calc( 100vh - ${this.header.h} )` };
// }
hasAdminState() {
return this.$store.state.auth.userAuthenticated.isAdmin
}
},
created: function() {
console.log("created(): " + this.caches);
@ -129,6 +119,7 @@
this.$axios.get('http://localhost:8080/api/startCache', { params })
.then((response) => {
console.log("Angefangen: " + response.data);
this.$router.push({ path: `/station/${cacheID}` })
})
}
}

0
frontend/src/pages/Station.vue → frontend/src/pages/StationEdit.vue
View File

65
frontend/src/pages/StationView.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<div>
<q-img transition="fade"
class="q-mb-md "
:ratio="16/9"
src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg"
></q-img>
<div class="q-ma-md">
<p class="text-h4">{{ data.cacheName }}</p>
<p class="text-h5">Station {{ data.station.position }}</p>
<p>{{ data.station.description }}</p>
<!--<q-input-->
<!--v-model="description"-->
<!--filled-->
<!--type="textarea"-->
<!--/>-->
<!--<p class="text-h5 q-mt-md">Location</p>-->
<div class="column q-gutter-y-md">
<q-input v-if="false" disabled stack-label filled v-model="code" label="Lösung"/>
<q-btn v-if="false" disabled unelevated color="primary" label="Lösung abschicken"/>
<q-input stack-label filled v-model="code" label="Code eingeben (wird mit Code scannen ersetzt)"/>
<q-btn unelevated color="primary" label="Code scannen (absenden)"/>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Station",
data() {
return {
code: "",
data: {
cacheId: 22,
cacheName: "Wasserfall Cache",
nextStationId: 44,
station: {
position: 1,
id: 22,
description: "Ein kleines winterliches Schlaginstrument. Welche Blume ist damit gemeint?",
longitude: 9.206628,
lattitude: 49.147734,
code: 213812,
solution: "Schneeglöckchen"
}
}
}
},
created: function () {
},
beforeMount: function () {
},
mounted: function () {
console.log("'id' from url: " + this.$route.params.id)
},
computed: {},
methods: {}
}
</script>
<style scoped>
</style>

84
frontend/src/pages/TestCaches.vue
View File

@ -1,84 +0,0 @@
<template>
<div class="q-pa-md row items-start q-col-gutter-md">
<div class="col col-sm-6" v-for="cache in caches" :key="cache.id">
<q-card flat bordered class="my-card bg-grey-1">
<q-img :ratio="16/9" src="https://cdn.quasar-framework.org/img/parallax2.jpg">
<div class="absolute-bottom">
<div class="text-h6">
<span>{{ cache.name }}</span>
<!--<span v-if="cache.stationen.length > 2"> (Multicache)</span>-->
<!--<span v-else> (Singlecache)</span>-->
</div>
</div>
</q-img>
<q-card-section>
{{ cache.description }}
</q-card-section>
<q-separator inset />
<q-card-actions align="around">
<q-btn flat color="green" class="btn-fixed-width" >Cache starten</q-btn>
<q-btn flat outline class="btn-fixed-width">Ansehen</q-btn>
</q-card-actions>
</q-card>
</div>
</div>
</template>
<style lang="stylus">
.grid-style-transition
transition transform .3s
.btn-fixed-width
width: 48%
</style>
<script>
export default {
data () {
return {
denseOn: true,
filter: '',
selected: [],
caches: [],
columns: [
{
name: 'desc',
required: true,
label: 'Dessert (100g serving)',
align: 'left',
field: row => row.title,
format: val => `${val}`,
sortable: true
},
{ name: 'userId', align: 'center', label: 'ID', field: 'userId', sortable: true },
{ name: 'id', label: 'fID', field: 'id', sortable: true },
{ name: 'title', label: 'Titel', field: 'title' },
{ name: 'completed', label: 'Komplett', field: 'completed' },
],
// data: [
// {
// "userId": 1,
// "id": 1,
// "title": "delectus aut autem",
// "completed": false
// }
// ]
}
},
created: function() {
console.log("created(): " + this.caches);
this.fetchTodos();
},
methods: {
fetchTodos () {
this.$axios.get('http://localhost:8080/api/allCaches')
.then((response) => {
console.log("Caches: " + this.caches);
this.caches = response.data;
})
}
}
}
</script>

13
frontend/src/router/routes.js
View File

@ -10,24 +10,19 @@ const routes = [
children: [{ path: "", component: () => import("pages/Overview.vue") }]
},
{
path: "/testcaches/",
path: "/cache/",
component: () => import("layouts/MyLayout.vue"),
children: [{path: "", component: () => import("pages/TestCaches.vue")}]
},
{
path: "/cacheview/",
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/CacheView.vue") }]
children: [{ path: "", component: () => import("pages/Cache.vue") }]
},
{
path: "/station/",
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/Station.vue") }]
children: [{ path: "", component: () => import("pages/StationEdit.vue") }]
},
{
path: "/station/:id",
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/Station.vue") }]
children: [{ path: "", component: () => import("pages/StationView.vue") }]
},
{
path: "/login/",

44
frontend/src/store/auth/mutations.js
View File

@ -1,38 +1,18 @@
import axios from 'axios'
/*
export function someMutation (state) {
}
*/
export const evalAuth = (state) => {
console.log("isAuthenticated()");
console.log(localStorage.getItem('userToken'));
if (localStorage.getItem('userToken')) { // TODO hier muss Abfrage mit API, z.B. /api/user?token="ME" stattfinden.
state.user.isAuthenticated = true;
export const SET_AUTHENTICATED = (state) => {
console.log("SET_AUTHENTICATED()");
console.log(JSON.parse(localStorage.getItem('userToken')));
if (localStorage.getItem('userToken')) {
state.userAuthenticated.isAuthenticated = true;
} else {
state.user.isAuthenticated = false;
state.userAuthenticated.isAuthenticated = false;
}
};
export const logout = (state) => {
console.log("logout()");
console.log(localStorage.getItem('userToken'));
localStorage.removeItem('userToken');
console.log(localStorage.getItem('userToken'));
state.commit(evalAuth(state));
export const SET_USER_PROPERTIES = (state, user) => {
console.log("SET_USER_PROPERTIES()");
console.log("still todo!");
};
export const login = (state) => {
const data = {
username: state.user.username,
password: state.user.password
};
console.log("GET http://localhost:8080/api/login/ - json: " + JSON.stringify(data));
this.state.$axios.post('http://localhost:8080/api/login', data) // TODO muss GET mit AUTH Header werden
.then((response) => {
console.log("GET/POST http://localhost:8080/api/login/ - response: " + response.data);
localStorage.setItem('userToken', JSON.stringify(response));
state.commit(evalAuth(state));
})
.catch((error) => {
console.log("error: " + error);
//errorDialog = true;
})
export const SET_LOGOUT = (state) => {
console.log("SET_LOGOUT()");
state.userAuthenticated = null;
};

13
frontend/src/store/auth/state.js
View File

@ -1,7 +1,12 @@
export default {
user: {
username: "moximoti",
password: "1234",
isAuthenticated: false
userAuthenticated: {
id: 1,
firstname: "t",
lastname: "v",
username: "mo",
email: "test@user.com",
rankingPointsSum: 345,
isAuthenticated: false,
isAdmin: false,
},
}

4
frontend/src/store/index.js
View File

@ -45,8 +45,8 @@ export default function (/* { ssrContext } */) {
*/
if (process.env.DEV && module.hot) {
module.hot.accept(['./auth'], () => {
const newShowcase = require('./auth').default;
store.hotUpdate({ modules: { showcase: newShowcase } })
const auth = require('./auth').default;
store.hotUpdate({ modules: { auth: newAuth } })
})
}