work on popups

src/webapp/src/components/notifications/popups.vue

@@ -2,42 +2,62 @@
     <div id="popup-backdrop">
         <div class="popup-container">
             <div class="popup" :class="size">
-                <div class="close-wrapper"><span class="material-symbols-outlined close-button" @click="closePopup();">close</span></div>
+                <div class="close-wrapper"><span class="material-symbols-outlined close-button" @click="closePopup( 'cancel' );">close</span></div>
                 <div class="message-container">
-                    {{ data }}
+                    <div v-if="contentType === 'string'">{{ data.message }}</div>
+                    <div v-else-if="contentType === 'html'" v-html="data.message"></div>
+                    <div v-else-if="contentType === 'settings'">
+                        <settings v-model:settings="data.settings"></settings>
+                    </div>
+                    <div v-else-if="contentType === 'confirm'" class="confirm">
+                        {{ data.message }}
+                        <div style="width: 100%; margin-top: 3%;">
+                            <button @click="closePopup( 'ok' )">Ok</button>
+                            <button @click="closePopup( 'cancel' )">Cancel</button>
+                        </div>
+                    </div>
+                    <div v-else-if="contentType === 'radio'">
+                        <form>
+                            <div v-for="selectOption in data.radio">
+                                <input type="radio" value="selectOption.value" name="group1" id="selectOption.id">
+                                <label for="selectOption.id">selectOption.displayName</label>
+                            </div>
+                        </form>
+                    </div>
                 </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, confirm, radio, dropdowns, selection -->
 
 <script>
+    import settings from '@/components/settings/settings.vue';
     export default {
         name: 'popups',
+        components: {
+            settings,
+        },
         props: {
             size: {
                 type: String,
                 'default': 'normal',
             },
-            contentType: {
-                type: String,
-                'default': 'string'
-            },
-            data: {
-                type: Object,
-                'default': {}
-            }
         },
         data () {
             return {
                 status: 'hidden',
+                contentType: 'dropdown',
+                data: { 'message': 'No message defined on method call' }
             }
         },
         methods: {
-            closePopup() {
+            closePopup( message ) {
                 $( '#popup-backdrop' ).fadeOut( 300 );
+                if ( message ) {
+                    this.$emit( 'data', message );
+                }
             },
             openPopup () {
                 $( '#popup-backdrop' ).fadeIn( 300 );
@@ -113,4 +133,35 @@
         width: 80%;
         height: 80%;
     }
+
+    .message-container {
+        height: 90%;
+        width: 90%;
+        margin-left: 5%;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .confirm {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .confirm button {
+        padding: 1% 2%;
+        display: inline-block;
+        background-color: var( --accent-background );
+        color: var( --secondary-color );
+        cursor: pointer;
+    }
+
+    .confirm button:hover {
+        background-color: var( --accent-background-hover );
+    }
 </style>

src/webapp/src/views/admin/locations/LocationEditView.vue

@@ -69,12 +69,6 @@
             notifications,
             popups,
         },
-        created () {
-            if ( !sessionStorage.getItem( 'selectedTicket' ) ) {
-                this.$router.push( '/admin/events' );
-            }
-            this.eventID = sessionStorage.getItem( 'selectedTicket' );
-        },
         data() {
             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' } } },