This commit is contained in:
Michael 2019-04-04 15:03:23 +02:00
commit cc8c337833
6 changed files with 157 additions and 53 deletions

View File

@ -63,6 +63,7 @@ module.exports = function (ctx) {
'QSpinnerPuff',
'QExpansionItem',
'QParallax',
'QEditor',
],
directives: [
@ -103,7 +104,7 @@ module.exports = function (ctx) {
devServer: {
// https: true,
port: 8081,
open: true // opens browser window automatically
open: false // opens browser window automatically
},
// animations: 'all' --- includes all animations

View File

@ -82,7 +82,6 @@
// },
mounted () {
this.isAuthenticated();
//this.pollData();
console.log("mounted: initiated");
},
methods: {
@ -100,7 +99,8 @@
.then((response) => {
console.log("GET/POST http://localhost:8080/api/login/ - response: " + response.data);
//this.user.token = response.data;
localStorage.setItem('userToken', JSON.stringify(response));
localStorage.setItem('userToken', JSON.stringify(response.data));
//localStorage.setItem('userToken', response.data);
this.isAuthenticated();
})
.catch((error) => {
@ -110,8 +110,9 @@
},
isAuthenticated: function () {
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.
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;
@ -119,10 +120,19 @@
},
logout: function () {
console.log("logout()");
console.log(localStorage.getItem('userToken'));
localStorage.removeItem('userToken');
console.log(localStorage.getItem('userToken'));
this.isAuthenticated()
console.log(JSON.parse(localStorage.getItem('userToken')));
this.$axios.get('http://localhost:8080/api/logout', {
params: {
token: JSON.parse(localStorage.getItem('userToken'))
}
})
.then((response) => {
console.log("GET/POST http://localhost:8080/api/logout/ - response: " + response.data);
localStorage.removeItem('userToken');
this.isAuthenticated();
})
.catch((error) => {
});
},
},
};

View File

@ -9,17 +9,51 @@
active-bg-color="bg-grey-1"
active-color="cyan-14"
indicator-color="cyan-14"
narrow-indicator
switch-indicator
>
<q-tab name="map" label="Karte" icon="map"/>
<q-tab name="list" label="Liste" icon="list"/>
<q-tab name="map" label="Karte" icon="map"/>
</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="list" class=" fit">
<q-list>
<q-card class="q-mb-md" v-for="cache in caches" :key="cache.id">
<q-expansion-item
class=""
expand-icon-toggle
expand-separator
icon="location_on"
:label="cache.name"
:caption="cache.rankingPoints+' Punkte / Size '+cache.stationen.length"
>
<q-item
class="q-pr-sm "
>
<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>{{ cache.description }}</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-btn @click="startCache(cache.id)" flat unelevated stack color="positive" icon="arrow_forward" label="Starten" size="sm"/>
</q-item>
</q-expansion-item>
</q-card>
</q-list>
</q-tab-panel>
<q-tab-panel name="map" class="q-pa-none fit">
<!--<div class="full-width full-height absolute-full" style="background: url('statics/osm_mock.png'); background-size: cover">-->
<!--</div>-->
@ -30,33 +64,6 @@
</q-img>
</q-tab-panel>
<q-tab-panel name="list" class=" fit">
<q-list>
<q-card class="q-mb-md" v-for="cache in caches" :key="cache.id">
<q-item
class="q-pr-sm "
>
<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><a class="text-black" style="text-decoration: none" href="/#/CacheDetail?id=2"><span>{{ cache.name }}</span></a></q-item-label>
<q-item-label overline>
<span class="text-grey">{{ cache.rankingPoints }} Punkte /</span>
<span class="text-grey"> Size {{ cache.stationen.length }} </span>
</q-item-label>
<q-item-label caption>{{ cache.description.substring(0,80) }} ... </q-item-label>
</q-item-section>
<q-item-section side top class="self-center" >
<q-btn flat unelevated stack color="positive" icon="arrow_forward" label="Starten" size="sm" style="height: 4.5rem"/>
</q-item-section>
</q-item>
</q-card>
</q-list>
</q-tab-panel>
</q-tab-panels>
</div>
</q-page>
@ -70,15 +77,14 @@
*/
</style>
<script>
import {dom} from 'quasar'
const {height, width} = dom
//import {dom} from 'quasar'
//const {height, width} = dom
export default {
data() {
return {
tab: 'map',
hheight: 71.0,
fheight: 36.0, //37
tab: 'list',
// hheight: 71.0,
// fheight: 36.0, //37
//header: {h: '0px', w: 0}
caches: [],
}
@ -89,13 +95,13 @@
// 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'};
},
// 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} )` };
// }
@ -111,6 +117,19 @@
console.log("Caches: " + this.caches);
this.caches = response.data;
})
},
startCache(cacheID) {
const userToken = JSON.parse(localStorage.getItem('userToken'));
let params = { cacheID: cacheID };
if (userToken != null) {
params.token = userToken;
}
console.log(params);
this.$axios.get('http://localhost:8080/api/startCache', { params })
.then((response) => {
console.log("Angefangen: " + response.data);
})
}
}
}

View File

@ -0,0 +1,59 @@
<template>
<q-page class="q-ma-md">
<h4 class="text-h4">Neue Station</h4>
<q-editor
:toolbar="[
['bold', 'italic', 'strike', 'underline'],
['undo', 'redo']
]"
v-model="description" min-height="10rem" />
<!--<q-input-->
<!--v-model="description"-->
<!--filled-->
<!--type="textarea"-->
<!--/>-->
<p class="text-h5 q-mt-md">Location</p>
<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="row q-col-gutter-md">
<q-input class="col" dense stack-label filled v-model="text" label="Längengrad/Breitengrad" />
<div class="col-shrink">
<q-btn unelevated color="primary" class="full-height" icon="my_location"/>
</div>
</div>
<p class="text-h5 q-mt-md">Lösung</p>
<q-input class="col" dense stack-label filled v-model="text" label="Lösung" />
<q-input class="col q-mt-md" dense stack-label filled v-model="text" label="Code" readonly/>
</q-page>
</template>
<script>
export default {
name: "Station",
data() {
return {
description: "Rätsel, Aufgabe und Informationen zur Station.",
text:"v-model !!"
}
},
created: function() {
},
beforeMount: function() {
},
mounted: function() {
console.log("'id' from url: "+this.$route.params.id)
},
computed: {
},
methods: {
}
}
</script>
<style scoped>
</style>

View File

@ -19,6 +19,16 @@ const routes = [
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/CacheView.vue") }]
},
{
path: "/station/",
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/Station.vue") }]
},
{
path: "/station/:id",
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/Station.vue") }]
},
{
path: "/login/",
component: () => import("layouts/MyLayout.vue"),

View File

@ -70,7 +70,8 @@ public class Controller {
String hashedToken = BCrypt.hashpw(token, BCrypt.gensalt());
userRepository.findByUsername(user.getUsername()).setToken(hashedToken);
userRepository.save(userRepository.findByUsername(user.getUsername()));
return ResponseEntity.ok(new Gson().toJson(token));
//return ResponseEntity.ok(new Gson().toJson(token));
return ResponseEntity.ok(token);
}
return ResponseEntity.status(HttpStatus.BAD_GATEWAY).body(null);
}
@ -127,8 +128,12 @@ public class Controller {
@RequestMapping("/api/logout")
@ResponseBody
boolean logout(@RequestParam String token) {
// System.out.println("logout");
User user = userRepository.findByUsername(token.substring(0, token.indexOf("$")));
// System.out.println(token);
// System.out.println(user.getToken());
if (user == null || user.getToken().isEmpty() )
return false;
user.setToken(null);
userRepository.save(user);
return true;