From 89008df6cc9891c9d223ec82b055fc74752bccbf Mon Sep 17 00:00:00 2001
From: janis <jahu04@outlook.com>
Date: Mon, 26 Jun 2023 17:04:41 +0200
Subject: [PATCH] work on popups

---
 .../src/components/notifications/popups.vue   | 44 +++++++++++++------
 .../admin/locations/LocationEditView.vue      |  7 +++
 2 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/src/webapp/src/components/notifications/popups.vue b/src/webapp/src/components/notifications/popups.vue
index c79ae80..5fabcde 100644
--- a/src/webapp/src/components/notifications/popups.vue
+++ b/src/webapp/src/components/notifications/popups.vue
@@ -1,30 +1,34 @@
 <template>
-    <div id="popup-backdrop" :class="status">
+    <div id="popup-backdrop">
         <div class="popup-container">
             <div class="popup" :class="size">
-                <span class="material-symbols-outlined" @click="closePopup();">close</span>
+                <div class="close-wrapper"><span class="material-symbols-outlined close-button" @click="closePopup();">close</span></div>
                 <div class="message-container">
-                    {{ message }}
+                    {{ data }}
                 </div>
             </div>
         </div>
     </div>
 </template>
 
-<!-- Options to be passed in: HTML, Settings (for settings component), strings, numbers, confirm, radio, dropdowns, selection -->
+<!-- Options to be passed in: html, settings (for settings component), strings, numbers, confirm, radio, dropdowns, selection -->
 
 <script>
     export default {
         name: 'popups',
-        prop: {
+        props: {
             size: {
                 type: String,
                 'default': 'normal',
             },
-            message: {
-                type: Object,
-                'default': '{}',
+            contentType: {
+                type: String,
+                'default': 'string'
             },
+            data: {
+                type: Object,
+                'default': {}
+            }
         },
         data () {
             return {
@@ -33,10 +37,10 @@
         },
         methods: {
             closePopup() {
-                this.shown = 'hidden'
+                $( '#popup-backdrop' ).fadeOut( 300 );
             },
             openPopup () {
-
+                $( '#popup-backdrop' ).fadeIn( 300 );
             }
         }
     }
@@ -54,10 +58,6 @@
         display: none;
     }
 
-    .shown {
-        display: block;
-    }
-
     .popup-container {
         width: 100%;
         height: 100%;
@@ -67,6 +67,22 @@
         flex-direction: column;
     }
 
+    .close-wrapper {
+        width: 100%;
+        height: 5%;
+        display: flex;
+        justify-content: center;
+        align-items: flex-end;
+        flex-direction: column;
+    }
+
+    .close-button {
+        margin-right: 1vw;
+        margin-top: 2vw;
+        font-size: 200%;
+        cursor: pointer;
+    }
+
     .popup {
         border: none;
         border-radius: 20px;
diff --git a/src/webapp/src/views/admin/locations/LocationEditView.vue b/src/webapp/src/views/admin/locations/LocationEditView.vue
index 0c76d4e..9912411 100644
--- a/src/webapp/src/views/admin/locations/LocationEditView.vue
+++ b/src/webapp/src/views/admin/locations/LocationEditView.vue
@@ -24,6 +24,7 @@
                 </tr>
             </table>
         </div>
+        <button @click="openPopup()">Open Popup</button>
         <popups ref="popup"></popups>
         <notifications ref="notification" location="topright"></notifications>
     </div>
@@ -78,6 +79,12 @@
             return {
                 event: { 'name': 'TestEvent', 'description': 'This is a description for the TestEvent to test multiline support and proper positioning of the Fields', 'freeSeats': 2, 'maxSeats': 2, 'date':'TestDate', 'startingPrice':15, 'location': 'TestLocation', 'eventID': 'test', 'currency': 'CHF', 'logo': 'logo.png', 'categories': { '1': { 'price': { '1': { 'price':25, 'name':'Child (0-15.99 years)'}, '2': { 'price':35, 'name':'Adult'} }, 'bg': 'black', 'fg': 'white', 'name': 'Category 1' }, '2': { 'price': { '1': { 'price':25, 'name':'Child (0-15.99 years)' }, '2': { 'price':35, 'name':'Adult'} }, 'bg': 'green', 'fg': 'white', 'name': 'Category 2' } } },
             }
+        },
+        methods: {
+            openPopup() {
+                console.log( 'opening' );
+                this.$refs.popup.openPopup();
+            }
         }
     };
 </script>