progress on no seat plan view

src/webapp/src/App.vue

@@ -35,6 +35,7 @@
     --accent-color: #42b983;
     --hover-color: rgb(83, 83, 83);
     --accent-background-hover: #4380a8;
+    --overlay-color: rgba(104, 104, 104, 0.575);
     --inactive-color: rgb(190, 190, 190);
     --highlight-backdrop: rgb(85, 63, 207);
 }
@@ -48,6 +49,7 @@
         --accent-color: #42b983;
         --hover-color: rgb(83, 83, 83);
         --accent-background-hover: #4380a8;
+        --overlay-color: rgba(104, 104, 104, 0.575);
         --inactive-color: rgb(190, 190, 190);
         --highlight-backdrop: rgb(85, 63, 207);
     }

src/webapp/src/components/noseatplan.vue

@@ -10,7 +10,7 @@
                     <h4>{{ event.name }}</h4>
                 </tr>
                 <tr v-for="ticket in event.selectedSeats">
-                    <td>{{ seating[ ticket[ 'row' ] ][ 'content' ][ ticket[ 'seat' ] ][ 'name' ] }} ({{ eventInfo[ 'ageGroups' ][ ticket[ 'categoryID' ] ][ 'name' ] }})</td>
+                    <td>{{ ticket.name }} ({{ ticket.ageGroup }})</td>
                     <td>{{ eventInfo[ 'currency' ] }} {{ ticket[ 'price' ] }}</td>
                 </tr>
             </table>
@@ -20,7 +20,7 @@
         <div class="seatingPlan">
             <h3>Available tickets</h3>
             <div v-for="ticket in tickets">
-                {{ ticket }}
+                {{ ticket.name }} ({{ eventInfo[ 'categories' ][ ticket.category ][ 'name' ] }}) - Starting at {{ eventInfo.currency }} {{ eventInfo.categories[ ticket.category ][ 'price' ][ '1' ] }}
             </div>
         </div>
         <div class="overlay" id="placeNotAvailable">
@@ -48,7 +48,7 @@ export default {
     },
     data () {
         return {
-            tickets: {},
+            tickets: { 'ticket1': { 'name': 'Ticket 1', 'id': 'ticket1', 'category': 1 }, 'ticket2': { 'name': 'Ticket 2', 'id': 'ticket2', 'category': 2 } },
             eventInfo: { 'name': 'TestEvent', 'location': 'TestLocation', 'date': 'TestDate', 'RoomName': 'TestRoom', 'currency': 'CHF', 'categories': { '1': { 'price': { '1':25, '2':35 }, 'bg': 'black', 'fg': 'white', 'name': 'Category 1' }, '2': { 'price': { '1':15, '2':20 }, 'bg': 'green', 'fg': 'white', 'name': 'Category 2' } }, 'ageGroups': { '1':{ 'id': 1, 'name':'Child', 'age':'0 - 15.99' }, '2':{ 'id': 2, 'name': 'Adult', 'age': null } }, 'ageGroupCount':2, 'stage': true },
             selectedSeats: {},
             pricingCurrentlySelected: {},
@@ -85,8 +85,15 @@ export default {
                 }, 500 );
             }
 
-            cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] = data;
+
-            sessionStorage.setItem( 'cart', JSON.stringify( cart ) );
+            // check if no ticket selected and prevent writing if no ticket
+            // selected to not show too many events
+            let isEmpty = sessionStorage.getItem( 'selectedTicket' ) ? false : true;
+
+            if ( !isEmpty ) {
+                cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] = data;
+                sessionStorage.setItem( 'cart', JSON.stringify( cart ) );
+            }
 
             this.selectedSeats = cart;
             this.sumUp();
@@ -107,11 +114,18 @@ export default {
             back[ 'total' ] = price;
             back[ 'currency' ] = this.eventInfo.currency;
 
-            sessionStorage.setItem( 'backend', JSON.stringify( back ) );
-
             this.total = price;
-            
+
-            sessionStorage.setItem( 'cart', JSON.stringify( cart ) );
+
+            // check if no ticket selected and prevent writing if no ticket
+            // selected to not show too many events
+            let isEmpty = sessionStorage.getItem( 'selectedTicket' ) ? false : true;
+
+            if ( !isEmpty ) {
+                console.log( 'writing' );
+                sessionStorage.setItem( 'backend', JSON.stringify( back ) );            
+                sessionStorage.setItem( 'cart', JSON.stringify( cart ) );
+            }
         },
         closePlaceNotAvailablePopup () {
             $( '#placeNotAvailable' ).hide( 300 );

src/webapp/src/components/seatplan.vue

@@ -6,11 +6,11 @@
             <h3>{{ eventInfo.location }}</h3>
             <h3>Selected tickets</h3>
             <table class="price-table" v-for="event in selectedSeats">
-                <tr>
+                <tr v-if="Object.keys( event.selectedSeats ).length">
                     <h4>{{ event.name }}</h4>
                 </tr>
                 <tr v-for="ticket in event.selectedSeats">
-                    <td>{{ seating[ ticket[ 'row' ] ][ 'content' ][ ticket[ 'seat' ] ][ 'name' ] }} ({{ eventInfo[ 'ageGroups' ][ ticket[ 'categoryID' ] ][ 'name' ] }})</td>
+                    <td>{{ ticket.name }} ({{ ticket.ageGroup }})</td>
                     <td>{{ eventInfo[ 'currency' ] }} {{ ticket[ 'price' ] }}</td>
                 </tr>
             </table>
@@ -85,7 +85,7 @@ export default {
     data () {
         return {
             seating: { 'r1': { 'name': 'Row 1', 'id': 'r1', 'content':{ 'S1':{ 'name': 'Seat 1', 'id': 'S1', 'available': true, 'selected': false, 'category':'1' } } }, 'r2': { 'name': 'Row 2', 'id': 'r2', 'content':{ 'S1':{ 'name': 'S1', 'id': 'S1', 'available': true, 'selected': false, 'category':'2' } } } },
-            eventInfo: { 'name': 'TestEvent', 'location': 'TestLocation', 'date': 'TestDate', 'RoomName': 'TestRoom', 'currency': 'CHF', 'categories': { '1': { 'price': { '1':25, '2':35 }, 'bg': 'black', 'fg': 'white', 'name': 'Category 1' }, '2': { 'price': { '1':15, '2':20 }, 'bg': 'green', 'fg': 'white', 'name': 'Category 2' } }, 'ageGroups': { '1':{ 'id': 1, 'name':'Child', 'age':'0 - 15.99' }, '2':{ 'id': 2, 'name': 'Adult', 'age': null } }, 'ageGroupCount':2, 'stage': true },
+            eventInfo: { 'name': 'TestEvent2', 'location': 'TestLocation2', 'date': 'TestDate2', 'RoomName': 'TestRoom2', 'currency': 'CHF', 'categories': { '1': { 'price': { '1':25, '2':35 }, 'bg': 'black', 'fg': 'white', 'name': 'Category 1' }, '2': { 'price': { '1':15, '2':20 }, 'bg': 'green', 'fg': 'white', 'name': 'Category 2' } }, 'ageGroups': { '1':{ 'id': 1, 'name':'Child', 'age':'0 - 15.99' }, '2':{ 'id': 2, 'name': 'Adult', 'age': null } }, 'ageGroupCount': 2, 'stage': true, 'maxTickets': 2 },
             selectedSeats: {},
             pricingCurrentlySelected: {},
             total: 0,
@@ -96,12 +96,12 @@ export default {
             /* 
                 This function is called whenever the data on the webpage is to be reloaded
             */
-           
+            
             // load data from cart and set up cart if not available
             let cart = sessionStorage.getItem( 'cart' ) ? JSON.parse( sessionStorage.getItem( 'cart' ) ) : {};
             cart[ this.ticketID ?? 'default' ] = cart[ this.ticketID ?? 'default' ] ? cart[ this.ticketID ?? 'default' ] : { 'name': this.eventInfo.name, 'date': this.eventInfo.date, 'location': this.eventInfo.location, 'currency': this.eventInfo.currency };
             cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] = cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] ? cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] : {};
-
+            
             let data = cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] ? cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] : {};
             
             let showError = false
@@ -113,7 +113,7 @@ export default {
                     delete data[ i ];
                 }
             }
-
+            
             if ( showError ) {
                 setTimeout( function () {
                     $( '#placeNotAvailable' ).show( 200 );
@@ -121,33 +121,45 @@ export default {
                 }, 500 );
             }
 
-            cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] = data;
+            // check if no ticket selected and prevent writing if no ticket
-            sessionStorage.setItem( 'cart', JSON.stringify( cart ) );
+            // selected to not show too many events
-
+            let isEmpty = sessionStorage.getItem( 'selectedTicket' ) ? false : true;
+            
+            if ( !isEmpty ) {
+                cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] = data;
+                sessionStorage.setItem( 'cart', JSON.stringify( cart ) );
+            }
+            
             this.selectedSeats = cart;
             this.sumUp();
         },
         sumUp () {
             // This function calculates the total price of the tickets for this event.
             let cart = sessionStorage.getItem( 'cart' ) ? JSON.parse( sessionStorage.getItem( 'cart' ) ) : {};
-
+            
             let price = 0;
             for ( let i in cart ) {
                 for ( let entry in cart[ i ][ 'selectedSeats' ] ) {
                     price += parseInt( cart[ i ][ 'selectedSeats' ][ entry ][ 'price' ] );
                 }
             }
-
+            
             let back = {};
 
             back[ 'total' ] = price;
             back[ 'currency' ] = this.eventInfo.currency;
 
-            sessionStorage.setItem( 'backend', JSON.stringify( back ) );
-
             this.total = price;
             
-            sessionStorage.setItem( 'cart', JSON.stringify( cart ) );
+
+            // check if no ticket selected and prevent writing if no ticket
+            // selected to not show too many events
+            let isEmpty = sessionStorage.getItem( 'selectedTicket' ) ? false : true;
+
+            if ( !isEmpty ) {
+                sessionStorage.setItem( 'backend', JSON.stringify( back ) );            
+                sessionStorage.setItem( 'cart', JSON.stringify( cart ) );
+            }
         },
         closePlaceNotAvailablePopup () {
             $( '#placeNotAvailable' ).hide( 300 );

src/webapp/src/main.js

@@ -23,7 +23,7 @@ if ( prod ) {
         } );
     } );
 } else {
-    userStore.setUserAuth( true );
+    // userStore.setUserAuth( true );
     app.use( router );
     app.mount( '#app' );
 }

src/webapp/src/router/index.js

@@ -22,6 +22,7 @@ const router = createRouter( {
 router.afterEach( ( to, from ) => {
     document.title = to.meta.title ? to.meta.title : 'myevent';
 } );
+
 let UserAccountPages = [ 'account' ];
 
 let authRequired = false;

src/webapp/src/stores/backendStore.js

@@ -1,9 +1,11 @@
 import { defineStore } from "pinia";
 
 export const useBackendStore = defineStore ( 'backend', {
-    state: () => ( { 'visitedSetupPages': {} } ),
+    state: () => ( { 'visitedSetupPages': {}, 'guestPurchase': false, 'guestPurchaseAllowed': false } ),
     getters: {
         getVisitedSetupPages: ( state ) => state.visitedSetupPages,
+        getIsGuestPurchase: ( state ) => state.guestPurchase,
+        getIsGuestPurchaseAllowed: ( state ) => state.guestPurchaseAllowed,
     },
     actions: { 
         addVisitedSetupPages ( page, data ) {

src/webapp/src/views/LoginView.vue

@@ -15,15 +15,23 @@
 </template>
 
 <script>
+    import { useUserStore } from '@/stores/userStore';
+    import { mapStores } from 'pinia';
+
     export default {
         data () {
             return {
                 formData: {}
             }
         },
+        computed: {
+            ...mapStores( useUserStore )
+        },
         methods: {
             login () {
-
+                this.userStore.setUserAuth( true );
+                this.$router.push( sessionStorage.getItem( 'redirect' ) ? sessionStorage.getItem( 'redirect' ) : '/account' );
+                sessionStorage.removeItem( 'redirect' );
             }
         },
     }

src/webapp/src/views/OrderView.vue

@@ -4,7 +4,7 @@
         <div class="order-app" v-if="events">
             <ul v-for="event in events">
                 <li>
-                    <router-link to="/tickets/details" class="ticket" @click="setActiveTicket( 'test' );">
+                    <router-link to="/tickets/details" class="ticket" @click="setActiveTicket( event.eventID );">
                         <div class="ticket-name">
                             <h3>{{ event.name }}</h3>
                             <p>{{ event.description }}</p>
@@ -32,6 +32,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
+        flex-direction: column;
     }
 
     ul {
@@ -85,7 +86,7 @@
         },
         data () {
             return {
-                events: { 'test':{ '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' } }
+                events: { 'test':{ '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' }, 'test2':{ 'name': 'TestEvent2', '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': 'test2', 'currency': 'CHF', 'logo': 'logo.png' } }
             }
         }
     };

src/webapp/src/views/PurchaseView.vue

@@ -2,29 +2,32 @@
     <div class="purchase">
         <h1>Purchase</h1>
         <div class="purchase-app">
-            <div v-if="!isAuthenticated" class="wrapper">
+            <div v-if="!isAuthenticated" class="wrapper-buttons">
-                <router-link to="/login" class="option-button">Log in with an existing account</router-link><br>
+                <router-link to="/login" class="option-button" @click="setRedirect()">Log in with an existing account</router-link><br>
-                <router-link to="/signup" class="option-button">Create new account</router-link><br>
+                <router-link to="/signup" class="option-button" @click="setRedirect()">Create new account</router-link><br>
-                <router-link to="/guest" v-if="!settings.accountRequired" class="option-button">Purchase as guest</router-link>
+                <router-link to="/guest" v-if="!settings.accountRequired" class="option-button" @click="setRedirect()">Purchase as guest</router-link>
             </div>
             <div v-else class="wrapper">
-                <h3>Order summary</h3>
+                <div class="data">
-                <div v-if="cartNotEmpty" class="cart-list">
+                    <h2>Billing</h2>
-                    <h3>Your tickets</h3>
+
-                    <ul v-for="event in tickets" class="cart-list">
+                    <router-link to="/pay">Buy now</router-link>
-                        <li>{{ event.name }}
-                            <ul v-for="ticket in event.selectedSeats">
-                                <li>{{ ticket.name }} ({{ ticket.category.name }}, {{ ticket.ageGroup }}) {{ event.currency }} {{ ticket.price }}</li>
-                            </ul>
-                        </li>
-                    </ul>
-                    <div class="tool-wrapper wrapper-loggedIn">
-                        <h4>Total: {{ backend.currency }} {{ backend.total }}</h4>
-                        <router-link to="/pay">Buy now</router-link>
-                    </div>
                 </div>
-                <div v-else>
+                <div class="cart">
-                    Cart is empty. Please add tickets <router-link to="/tickets">here</router-link>
+                    <div class="cart-list">
+                        <h2>Order summary</h2>
+                        <h3>Your tickets</h3>
+                        <ul v-for="event in tickets">
+                            <li>{{ event.name }}
+                                <ul v-for="ticket in event.selectedSeats">
+                                    <li>{{ ticket.name }} ({{ ticket.category.name }}, {{ ticket.ageGroup }}) {{ event.currency }} {{ ticket.price }}</li>
+                                </ul>
+                            </li>
+                        </ul>
+                        <div class="tool-wrapper wrapper-loggedIn">
+                            <h4>Total: {{ backend.currency }} {{ backend.total }}</h4>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -34,16 +37,21 @@
 <style scoped>
     .purchase {
         height: 100%;
+        display: flex;
+        flex-grow: 1;
+        flex-direction: column;
     }
+    
     .purchase-app {
         text-align: justify;
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
-        height: 80%;
+        flex-grow: 1;
     }
 
+    
     .option-button {
         border-style: solid;
         border-color: var( --primary-color );
@@ -57,12 +65,28 @@
         text-decoration: none;
     }
 
+    .data {
+        grid-area: main;
+        display: flex;
+        justify-content: justify;
+        align-items: center;
+        flex-direction: column;
+        flex-grow: 1;
+    }    
+    
     .option-button:hover {
         background-color: var( --hover-color );
         color: var( --secondary-color )
     }
+    
+    .cart {
+        grid-area: sidebar;
+        background-color: var( --accent-background );
+        color: var( --secondary-color );
+        overflow: scroll;
+    }
 
-    .wrapper {
+    .wrapper-buttons {
         width: 40%;
         display: flex;
         flex-direction: column;
@@ -71,8 +95,20 @@
         height: 100%;
     }
 
-    .wrapper-loggedIn {
+    .wrapper {
-        width: 70%;
+        width: 100%;
+        display: grid;
+        height: 100%;
+        grid-template-areas:
+        'main main main sidebar'
+        'main main main sidebar'
+        'main main main sidebar'
+        'main main main sidebar'
+        'main main main sidebar'
+        'main main main sidebar'
+        'main main main sidebar'
+        'main main main sidebar'
+        'main main main sidebar';
     }
 
     ul {
@@ -82,6 +118,10 @@
 
     .cart-list {
         width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
     }
 
     .tool-wrapper {
@@ -94,17 +134,25 @@
 </style>
 
 <script>
+import { useUserStore } from '@/stores/userStore';
+import { useBackendStore } from '@/stores/backendStore';
+import { mapStores } from 'pinia';
+
 export default {
     name: 'PurchaseView',
     data () {
         return {
-            settings: { 'accountRequired': true },
+            settings: { 'accountRequired': true, 'requiresAddress': true, 'requiresAge': true, 'requiresSpecialNumber': true, 'specialNumberDisplayName': { 'de': '', 'en': 'id number' } },
-            isAuthenticated: true,
+            isAuthenticated: false,
             tickets: {},
             backend: {},
             cartNotEmpty: false,
         }
     },
+    computed: {
+        ...mapStores( useUserStore ),
+        ...mapStores( useBackendStore )
+    },
     methods: {
         loadData () {
             this.cartNotEmpty = false;
@@ -116,9 +164,18 @@ export default {
                 };
             }
 
-            this.tickets = tickets;
+            if ( this.cartNotEmpty ) {
-            this.backend = JSON.parse( sessionStorage.getItem( 'backend' ) );
+                this.tickets = tickets;
+                this.backend = JSON.parse( sessionStorage.getItem( 'backend' ) );
+                this.isAuthenticated = this.userStore.getUserAuthenticated;
+                this.settings.accountRequired = !this.backendStore.getIsGuestPurchaseAllowed;
+            } else {
+                this.$router.push( '/tickets' );
+            }
         },
+        setRedirect () {
+            sessionStorage.setItem( 'redirect', '/purchase' );
+        }
     },
     created () {
         this.loadData();

src/webapp/src/views/SetupView.vue

@@ -1,7 +1,6 @@
 <template>
     <div>
-        <h1>Setup</h1>
+        <nav class="setup-nav">
-        <nav>
             <router-link to="/setup">Start</router-link> | 
             <router-link to="/setup/root" v-if="backendStore.getVisitedSetupPages[ 'root' ]">Root account</router-link>
             <a v-else class="inactive">Root account</a> | 
@@ -16,6 +15,7 @@
             <router-link to="/setup/complete" v-if="backendStore.getVisitedSetupPages[ 'complete' ]">Complete</router-link>
             <a v-else class="inactive">Complete</a>
         </nav>
+        <h1>Setup</h1>
         <div class="main-view">
             <router-view v-slot="{ Component, route }">
                 <transition :name="route.meta.transition || 'scale'" mode="out-in">
@@ -51,4 +51,14 @@
         color: var( --inactive-color );
         cursor: not-allowed;
     }
+
+    .setup-nav {
+        display: block;
+    }
 </style>
+
+<style>
+nav {
+    display: none;
+}
+</style>

src/webapp/src/views/TicketsDetailsView.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="details">
         <h1>Details</h1>
+        <router-link to="/tickets"><span class="material-symbols-outlined" style="font-size: 100%;">arrow_back</span>Back</router-link>
         <h3>{{ event.name }}</h3>
         <p>{{ event.description }}</p>
         <router-link to="/tickets/order">Order tickets</router-link>
@@ -20,7 +21,7 @@
             if ( !sessionStorage.getItem( 'selectedTicket' ) ) {
                 this.$router.push( '/tickets' );
             }
-            this.eventID = !sessionStorage.getItem( 'selectedTicket' );
+            this.eventID = sessionStorage.getItem( 'selectedTicket' );
         },
         data() {
             return {

src/webapp/src/views/TicketsOrderingView.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="details">
         <!-- Load correct component depending on what the event's config is -->
-        <seatplan ticketID="haoag" v-if="hasSeatplan"></seatplan>
+        <seatplan :ticketID="eventID" v-if="hasSeatplan"></seatplan>
-        <noseatplan ticketID="haoag" v-else></noseatplan>
+        <noseatplan :ticketID="eventID" v-else></noseatplan>
     </div>
 </template>
 
@@ -25,12 +25,17 @@
         data() {
             return {
                 hasSeatplan: true,
+                eventID: '',
             }
         },
         created () {
             if ( !sessionStorage.getItem( 'selectedTicket' ) ) {
                 this.$router.push( '/tickets' );
             }
+            this.eventID = sessionStorage.getItem( 'selectedTicket' );
+            if ( this.eventID == 'test' ) {
+                this.hasSeatplan = false;
+            }
         }
     };
 </script>