From b20103d5f1f62e5d48f1d1453c7558eb5bd7d950 Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Tue, 18 Jul 2023 21:40:31 +0200
Subject: [PATCH] update ticket rendering

---
 src/webapp/main/src/components/noseatplan.vue | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/webapp/main/src/components/noseatplan.vue b/src/webapp/main/src/components/noseatplan.vue
index a8fea57..6afdb79 100644
--- a/src/webapp/main/src/components/noseatplan.vue
+++ b/src/webapp/main/src/components/noseatplan.vue
@@ -5,12 +5,17 @@
             <h3>Available tickets</h3>
             <div class="wrapper">
                 <div v-for="ticket in tickets">
-                    {{ eventInfo[ 'categories' ][ ticket.category ][ 'name' ] }}<br>
-                    <div v-for="ticketOption in eventInfo[ 'ageGroups' ]" class="ticket">
-                        <div>
-                            {{ ticketOption.name }} <div style="display: inline" v-if="ticketOption.age">({{ ticketOption.age }})</div> {{ eventInfo.currency }} {{ eventInfo[ 'categories' ][ ticket.category ][ 'price' ][ ticketOption.id ] }} <span class="material-symbols-outlined">add</span> Selected <span class="material-symbols-outlined">remove</span>
-                        </div>
-                    </div>
+                    {{ eventInfo[ 'categories' ][ ticket.category ][ 'name' ] }}
+                    <table>
+                        <tr v-for="ticketOption in eventInfo[ 'ageGroups' ]">
+                            <td>
+                                {{ ticketOption.name }} <div style="display: inline" v-if="ticketOption.age">({{ ticketOption.age }})</div> 
+                            </td>
+                            <td>
+                                {{ eventInfo.currency }} {{ eventInfo[ 'categories' ][ ticket.category ][ 'price' ][ ticketOption.id ] }} <span class="material-symbols-outlined">add</span> Selected <span class="material-symbols-outlined">remove</span>
+                            </td>
+                        </tr>
+                    </table>
                 </div>
             </div>
         </div>