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 -->
<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()">
<template slot-scope="popup">
<q-card id="popup" style="width: 70vw">
<q-card-section>
<div class="text-h6">Our Changing Planet</div>
<div class="text-subtitle2">by John Doe</div>
</q-card-section>
<template>
<!-- <template slot-scope="popup">-->
<q-card id="popup" style="width: 70vw" v-for="cache in caches.filter(c => c.id === feature.id)" :key="cache.id">
<q-expansion-item
default-opened
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-btn flat>Action 1</q-btn>
<q-btn flat>Action 2</q-btn>
</q-card-actions>
</q-card>
<q-card >
<header class="card-header">
<p class="card-header-title">
Feature ID {{ feature.id }}
</p>
<a class="card-header-icon" title="Close"
@click="selectedFeatures = selectedFeatures.filter(f => f.id !== feature.id)">
</a>
</header>
<div class="card-content">
<div class="content">
<p>
Overlay popup content for Feature with ID <strong>{{ feature.id }}</strong>
</p>
<p>
Popup: {{ JSON.stringify(popup) }}
</p>
<p>
Feature: {{ JSON.stringify({ id: feature.id, properties: feature.properties }) }}
</p>
</div>
</div>
<q-item clickable v-close-popup class="text-grey-14" @click="generateQrCodes(cache.id)" >
<q-item-section>
QR-Codes
</q-item-section>
<q-item-section avatar>
<q-icon name="image"/>
</q-item-section>
</q-item>
<q-item clickable v-close-popup class="text-grey-14" @click="editCache(cache.id)" >
<q-item-section>
Bearbeiten
</q-item-section>
<q-item-section avatar>
<q-icon name="edit"/>
</q-item-section>
</q-item>
<q-item clickable v-close-popup class="text-grey-14" @click="confirmDelete(cache.id)" >
<q-item-section>
Löschen
</q-item-section>
<q-item-section avatar>
<q-icon name="delete"/>
</q-item-section>
</q-item>
</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>
</template>
</vl-overlay>
@ -211,7 +247,7 @@
import Vue from 'vue'
import VueLayers from 'vuelayers'
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);