From ea5487c944b723042bcebcb47cf4720bbb10212b Mon Sep 17 00:00:00 2001
From: Timo Volkmann <volkmann@stud.hs-heilbronn.de>
Date: Tue, 4 Jun 2019 21:55:26 +0200
Subject: [PATCH] finished popup

---
 .../frontend/src/pages/Overview.vue           | 106 ++++++++++++------
 1 file changed, 71 insertions(+), 35 deletions(-)

diff --git a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Overview.vue b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Overview.vue
index 4a5889a..12b9436 100644
--- a/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Overview.vue
+++ b/labswp_2019_sose_geocaching_frontend/frontend/src/pages/Overview.vue
@@ -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);