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

finished popup

Browse Source
This commit is contained in:
Timo Volkmann 2019-06-04 21:55:26 +02:00
parent c07d6620e8
commit ea5487c944
1 changed files with 71 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
labswp_2019_sose_geocaching_frontend/frontend/src/pages/Overview.vue
View File

@ -134,42 +134,78 @@
<!-- selected feature popup --> <!-- selected feature popup -->
<vl-overlay class="feature-popup" v-for="feature in select.features" :key="feature.id" :id="feature.id" <vl-overlay class="feature-popup" v-for="feature in select.features" :key="feature.id" :id="feature.id"
:position="pointOnSurface(feature.geometry)" :auto-pan="true" :auto-pan-animation="{ duration: 300 }" :offset="getPopupOffset()"> :position="pointOnSurface(feature.geometry)" :auto-pan="true" :auto-pan-animation="{ duration: 300 }" :offset="getPopupOffset()">
<template slot-scope="popup"> <template>
<q-card id="popup" style="width: 70vw"> <!-- <template slot-scope="popup">-->
<q-card-section> <q-card id="popup" style="width: 70vw" v-for="cache in caches.filter(c => c.id === feature.id)" :key="cache.id">
<div class="text-h6">Our Changing Planet</div> <q-expansion-item
<div class="text-subtitle2">by John Doe</div> default-opened
</q-card-section> group="cachegroup"
class=""
expand-separator
icon="location_on"
:header-class="'text-'+(getColorClass(cache) === 'primary' ? 'black' : getColorClass(cache))"
:label="cache.name"
:caption="cache.rankingPoints+' Punkte, '+cache.stationen.length+' Stationen'"
>
<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 v-html="cache.description"></q-item-label>
</q-item-section>
<q-separator /> <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-dropdown
v-if="hasAdminState"
@click="openCache(cache)"
:color="getColorClass(cache)"
:label="getOpenCacheLabel(cache)"
unelevated
icon="arrow_forward"
split
>
<q-list>
<q-card-actions vertical> <q-item clickable v-close-popup class="text-grey-14" @click="generateQrCodes(cache.id)" >
<q-btn flat>Action 1</q-btn> <q-item-section>
<q-btn flat>Action 2</q-btn> QR-Codes
</q-card-actions> </q-item-section>
</q-card> <q-item-section avatar>
<q-card > <q-icon name="image"/>
<header class="card-header"> </q-item-section>
<p class="card-header-title"> </q-item>
Feature ID {{ feature.id }}
</p> <q-item clickable v-close-popup class="text-grey-14" @click="editCache(cache.id)" >
<a class="card-header-icon" title="Close" <q-item-section>
@click="selectedFeatures = selectedFeatures.filter(f => f.id !== feature.id)"> Bearbeiten
</a> </q-item-section>
</header> <q-item-section avatar>
<div class="card-content"> <q-icon name="edit"/>
<div class="content"> </q-item-section>
<p> </q-item>
Overlay popup content for Feature with ID <strong>{{ feature.id }}</strong>
</p> <q-item clickable v-close-popup class="text-grey-14" @click="confirmDelete(cache.id)" >
<p> <q-item-section>
Popup: {{ JSON.stringify(popup) }} Löschen
</p> </q-item-section>
<p> <q-item-section avatar>
Feature: {{ JSON.stringify({ id: feature.id, properties: feature.properties }) }} <q-icon name="delete"/>
</p> </q-item-section>
</div> </q-item>
</div>
</q-list>
</q-btn-dropdown>
<div v-if="!hasAdminState">
<q-btn @click="startCache(cache.id)" unelevated
:color="getColorClass(cache)" icon="arrow_forward"
label="Starten" size="" />
</div>
</q-item>
</q-expansion-item>
</q-card> </q-card>
</template> </template>
</vl-overlay> </vl-overlay>
@ -211,7 +247,7 @@
import Vue from 'vue' import Vue from 'vue'
import VueLayers from 'vuelayers' import VueLayers from 'vuelayers'
import 'vuelayers/lib/style.css' // needs css-loader import 'vuelayers/lib/style.css' // needs css-loader
import { createProj, addProj, findPointOnSurface, createStyle, createMultiPointGeom, loadingBBox } from 'vuelayers/lib/ol-ext' import { findPointOnSurface } from 'vuelayers/lib/ol-ext'
Vue.use(VueLayers); Vue.use(VueLayers);