sermoni

commit 579d1a37a3b2c66955a433892c234d33c9b7cd69
parent 1dde4c1d53442c9a5d12fc584656b21140eaa40e
Author: Vetle Haflan <vetle@haflan.dev>
Date:   Fri,  7 Aug 2020 00:15:19 +0200

Handle overlapping onclick listeners to make delete button work

Diffstat:
M
ui/src/Events.vue
 | 
15
++++++++++++---

1 file changed, 12 insertions(+), 3 deletions(-)
diff --git a/ui/src/Events.vue b/ui/src/Events.vue
@@ -4,13 +4,13 @@
             <div class="event"
                  style="display:flex;cursor:pointer;"
                 :style="e.style"
-                @click="e.open = !e.open">
+                @click="eventClicked(e, $event)">
                 <div class="event-field">{{ e.service }}</div>
                 <!-- TODO: Include VueMQ
                 <!--<mq-layout mq="md+">-->
                     <div class="event-field">{{ simplifyDate(e.timestamp) }}</div>
                 <!--</mq-layout>-->
-                <button v-show="e.id > 0" @click="deleteEvent(e.id)">&times;</button>
+                <button v-show="e.id > 0" class="delete-button">&times;</button>
             </div>
             <div v-show="e.open" style="padding: 5px; border: 1px solid rgba(0,0,0,.125); border-top: 0">
                 <code style="white-space:pre;">{{e.details}}</code>
@@ -45,10 +45,19 @@
                     return { color: "#000", backgroundColor: "#fff" };
                 }
             },
+            eventClicked(e, clickEvent) {
+                if (clickEvent.target.className === "delete-button") {
+                    // Element clicked is the delete button
+                    this.deleteEvent(e.id);
+                } else {
+                    // Not the delete button - toggle details
+                    e.open = !e.open;
+                }
+            },
             deleteEvent(id) {
                 api.deleteEvent(id, 
                     success => {
-                        this.loadedEvents = this.loadedEvents.filter(
+                        this.events = this.events.filter(
                             e => e.id !== id
                         );
                     },