dark mode support

src/webapp/src/App.vue

@@ -13,12 +13,46 @@
 </template>
 
 <style>
+:root, :root.light {
+    --primary-color: #2c3e50;
+    --accent-background: rgb(30, 30, 82);
+    --secondary-color: white;
+    --background-color: white;
+    --accent-color: #42b983;
+    --hover-color: rgb(165, 165, 165);
+    --accent-background-hover: #4380a8;
+    --overlay-color: rgba(37, 37, 37, 0.575);
+}
+
+:root.dark {
+    --primary-color: white;
+    --accent-background: rgb(100, 100, 190);
+    --secondary-color: black;
+    --background-color: rgb(32, 32, 32);
+    --accent-color: #42b983;
+    --hover-color: rgb(165, 165, 165);
+    --accent-background-hover: #4380a8;
+}
+
+@media ( prefers-color-scheme: dark ) {
+    :root {
+        --primary-color: white;
+        --accent-background: rgb(100, 100, 190);
+        --secondary-color: black;
+        --background-color: rgb(32, 32, 32);
+        --accent-color: #42b983;
+        --hover-color: rgb(165, 165, 165);
+        --accent-background-hover: #4380a8;
+    }
+}
+
 html,
 body {
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 0;
+    background-color: var( --background-color );
 }
 
 #app {
@@ -26,7 +60,7 @@ body {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
-    color: #2c3e50;
+    color: var( --primary-color );
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -38,7 +72,7 @@ nav {
 
 nav a {
     font-weight: bold;
-    color: #2c3e50;
+    color: var( --primary-color );
 }
 
 nav a.router-link-exact-active {

src/webapp/src/components/seatplan.vue

@@ -5,13 +5,13 @@
             <h3>{{ eventInfo.date }}</h3>
             <h3>{{ eventInfo.location }}</h3>
             <h3>Selected tickets</h3>
-            <table>
+            <table class="price-table">
                 <tr v-for="ticket in selectedSeats">
-                    <td>{{ seating[ ticket[ 1 ] ][ 'content' ][ ticket[ 0 ] ][ 'name' ] }}</td>
+                    <td>{{ seating[ ticket[ 1 ] ][ 'content' ][ ticket[ 0 ] ][ 'name' ] }} ({{ eventInfo[ 'ageGroups' ][ ticket[ 2 ] ][ 'name' ] }})</td>
                     <td>{{ eventInfo[ 'currency' ] }} {{ eventInfo[ 'categories' ][ seating[ ticket[ 1 ] ][ 'content' ][ ticket[ 0 ] ][ 'category' ] ][ 'price' ][ ticket[ 2 ] ] }}</td>
                 </tr>
             </table>
-            <h3>Total</h3>
+            <h3>Total: {{ eventInfo[ 'currency' ] }} {{ total }}</h3>
             <router-link to="/cart">To cart</router-link>
         </div>
         <div class="seatingPlan">
@@ -63,7 +63,7 @@
                         <span class="material-symbols-outlined close-button" @click="closePlaceNotAvailablePopup()">close</span>
                     </div>
                     <div class="popup-content-wrapper">
-                        <h3>One or more seat(s) you have previously selected are/is no longer available!</h3>
+                        <h3>One or more seat(s) you have previously selected is/are no longer available!</h3>
                         <p>Please select another one!</p>
                         <button class="button" @click="closePlaceNotAvailablePopup()">Ok</button>
                     </div>
@@ -84,9 +84,10 @@ 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' }, '2': { 'price': { '1':15, '2':20 }, 'bg': 'green', 'fg': 'white' } }, 'ageGroups': { '1':{ 'id': 1, 'name':'Child', 'age':'0 - 15.99' }, '2':{ 'id': 2, 'name': 'Adult', 'age': null } }, 'stage': true },
+            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 1' } }, 'ageGroups': { '1':{ 'id': 1, 'name':'Child', 'age':'0 - 15.99' }, '2':{ 'id': 2, 'name': 'Adult', 'age': null } }, 'ageGroupCount':2, 'stage': true },
             selectedSeats: {},
-            pricingCurrentlySelected: {}
+            pricingCurrentlySelected: {},
+            total: 0,
         }
     },
     methods: {
@@ -116,12 +117,20 @@ export default {
             sessionStorage.setItem( 'selectedSeats', JSON.stringify( data ) );
             
             this.selectedSeats = data;
+            this.sumUp();
         },
         sumUp () {
             let data = {};
             if ( sessionStorage.getItem( 'selectedSeats' ) ) {
                 data = JSON.parse( sessionStorage.getItem( 'selectedSeats' ) );
             }
+
+            let price = 0;
+            for ( let i in data ) {
+                price += this.eventInfo[ 'categories' ][ this.seating[ data[ i ][ 1 ] ][ 'content' ][ data[ i ][ 0 ] ][ 'category' ] ][ 'price' ][ data[ i ][ 2 ] ];
+            }
+
+            this.total = price;
         },
         closePlaceNotAvailablePopup () {
             $( '#placeNotAvailable' ).hide( 300 );
@@ -148,8 +157,13 @@ export default {
                 sessionStorage.setItem( 'arrayIndex', index );
                 sessionStorage.setItem( 'selectedSeats', JSON.stringify( data ) );
                 this.selectedSeats = data;
+                this.sumUp();
             } else {
-                $( '#overlay' ).show( 200 );
+                if ( this.eventInfo.ageGroupCount > 1 ) {
+                    $( '#overlay' ).show( 200 );
+                } else {
+                    this.storeSeat( '1' );
+                }
             }
 
             this.pricingCurrentlySelected = this.eventInfo[ 'categories' ][ this.seating[ rowID ][ 'content' ][ placeID ][ 'category' ] ][ 'price' ];
@@ -177,6 +191,7 @@ export default {
             sessionStorage.setItem( 'selectedSeats', JSON.stringify( data ) );
             this.selectedSeats = data;
             $( '#overlay' ).hide( 200 );
+            this.sumUp();
         }
     },
     created() {
@@ -203,8 +218,8 @@ export default {
 
     .sidebar {
         grid-area: sidebar;
-        background-color: rgb(30, 30, 82);
+        background-color: var( --accent-background );
-        color: white;
+        color: var( --secondary-color );
         overflow: scroll;
     }
 
@@ -222,7 +237,7 @@ export default {
     }
 
     .occupied {
-        background-color: rgb(177, 177, 177);
+        background-color: var( --hover-color );
         padding: 0.4%;
     }
 
@@ -233,7 +248,7 @@ export default {
         left: 0;
         right: 0;
         bottom: 0;
-        background-color: rgba(37, 37, 37, 0.575);
+        background-color: var( --overlay-color );
         height: 100%;
         width: 100%;
     }
@@ -248,7 +263,7 @@ export default {
     }
 
     .popup-content {
-        background-color: white;
+        background-color: var( --background-color );
         height: 60%;
         width: 50%;
         display: flex;
@@ -283,7 +298,7 @@ export default {
         list-style: none;
         padding: 7px 15px;
         border-radius: 10px;
-        border-color: black;
+        border-color: var( --primary-color );
         border-style: solid;
         border-width: 1px;
         margin: 3px 0px;
@@ -291,7 +306,7 @@ export default {
     }
 
     .stage {
-        border-color: black;
+        border-color: var( --primary-color );
         border-style: solid;
         width: 80%;
         height: 7%;
@@ -302,8 +317,8 @@ export default {
     }
 
     .button {
-        background-color: rgb(38, 38, 68);
+        background-color: var( --accent-background );
-        color: white;
+        color: var( --secondary-color );
         font-weight: bold;
         font-size: 110%;
         border-radius: 20px;
@@ -313,8 +328,12 @@ export default {
     }
 
     .button:hover {
-        background-color: rgb(74, 74, 138);
+        background-color: var( --accent-background-hover );
         transition: 0.3s;
         cursor: pointer;
     }
+
+    .price-table {
+        width: 100%;
+    }
 </style>

src/webapp/src/views/AdminLoginView.vue

@@ -42,7 +42,7 @@
     }
 
     .login-app {
-        background-color: white;
+        background-color: var( --background-color );
         width: 40%;
         height: 50%;
         display: flex;

src/webapp/src/views/CartView.vue

@@ -2,7 +2,7 @@
     <div class="order">
         <h1>Cart</h1>
         <h3>Your tickets</h3>
-        <ul>
+        <ul v-for="ticket in tickets">
             <li>Ticket</li>
         </ul>
         <router-link to="/purchase">Purchase now</router-link>
@@ -28,8 +28,8 @@
         align-items: center;
         justify-content: center;
         text-decoration: none;
-        color: black;
+        color: var( --primary-color );
-        border-color: black;
+        border-color: var( --primary-color );
         border-width: 1px;
         height: fit-content;
         border-style: solid;
@@ -38,7 +38,7 @@
     }
 
     .ticket:hover {
-        background-color: rgb(165, 165, 165);
+        background-color: var( --hover-color );
         transition: 0.4s;
     }
 
@@ -57,3 +57,18 @@
         margin-right: auto
     }
 </style>
+
+<script>
+    export default {
+        data() {
+            return {
+                tickets: {}
+            }
+        },
+        methods: {
+            loadCart () {
+                sessionStorage.getItem( 'selectedSeats' );
+            }
+        },
+    }
+</script>

src/webapp/src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <template>
-    <initial formData="formData"></initial>
+    <initial :formData="formData"></initial>
 </template>
 
 <script>

src/webapp/src/views/LoginView.vue

@@ -30,6 +30,8 @@
 </script>
 
 <style scoped>
+
+    /* TODO: Update colour to image */
     .login {
         background-color: green;
         width: 100%;
@@ -43,7 +45,7 @@
     }
 
     .login-app {
-        background-color: white;
+        background-color: var( --background-color );
         width: 40%;
         height: 50%;
         display: flex;

src/webapp/src/views/OrderView.vue

@@ -41,8 +41,8 @@
         align-items: center;
         justify-content: center;
         text-decoration: none;
-        color: black;
+        color: var( --primary-color );
-        border-color: black;
+        border-color: var( --primary-color );
         border-width: 1px;
         height: fit-content;
         border-style: solid;
@@ -51,7 +51,7 @@
     }
 
     .ticket:hover {
-        background-color: rgb(165, 165, 165);
+        background-color: var( --hover-color );
         transition: 0.4s;
     }
 

src/webapp/src/views/PurchaseView.vue

@@ -24,8 +24,8 @@
         align-items: center;
         justify-content: center;
         text-decoration: none;
-        color: black;
+        color: var( --primary-color );
-        border-color: black;
+        border-color: var( --primary-color );
         border-width: 1px;
         height: fit-content;
         border-style: solid;
@@ -34,7 +34,7 @@
     }
 
     .ticket:hover {
-        background-color: rgb(165, 165, 165);
+        background-color: var( --hover-color );
         transition: 0.4s;
     }
 

src/webapp/src/views/SignupView.vue

@@ -50,6 +50,8 @@
         background-color: white;
         width: 40%;
         height: 50%;
+        min-height: fit-content;
+        min-width: fit-content;
         display: flex;
         flex-direction: column;
         align-items: center;

src/webapp/src/views/admin/AdminView.vue

@@ -58,7 +58,7 @@
         height: 100%;
         padding: 0;
         margin: 0;
-        background-color: rgb(30, 30, 82);
+        background-color: var( --accent-background );
         justify-content: center;
     }
 
@@ -72,11 +72,11 @@
     }
 
     nav a.router-link-exact-active {
-        background-color: #4380a8;
+        background-color: var( --accent-background-hover );
     }
 
     .admin-menu:hover {
-        background-color: #4380a8;
+        background-color: var( --accent-background-hover );
         transition: 0.4s;
     }
 

website/src/setup.md

@@ -0,0 +1,2 @@
+# Setup
+In this tutorial, you are going to learn how to set up and configure myevent.