design + admin panel

src/webapp/src/components/seatplan.vue

@@ -5,9 +5,12 @@
             <h3>{{ eventInfo.date }}</h3>
             <h3>{{ eventInfo.location }}</h3>
             <h3>Selected tickets</h3>
-            <ul v-for="ticket in selectedSeats">
+            <table>
-                <li>{{ seating[ ticket[ 1 ] ][ 'content' ][ ticket[ 0 ] ][ 'name' ] }} {{ eventInfo[ 'categories' ][ seating[ ticket[ 1 ] ][ 'content' ][ ticket[ 0 ] ][ 'category' ] ][ 'price' ] }}</li>
+                <tr v-for="ticket in selectedSeats">
-            </ul>
+                    <td>{{ seating[ ticket[ 1 ] ][ 'content' ][ ticket[ 0 ] ][ 'name' ] }}</td>
+                    <td>{{ eventInfo[ 'currency' ] }} {{ eventInfo[ 'categories' ][ seating[ ticket[ 1 ] ][ 'content' ][ ticket[ 0 ] ][ 'category' ] ][ 'price' ] }}</td>
+                </tr>
+            </table>
             <h3>Total</h3>
             <router-link to="/cart">To cart</router-link>
         </div>
@@ -21,7 +24,7 @@
                             {{ row.name }}
                         </td>
                         <td v-for="place in row.content">
-                            <div :class="place.category" class="active" v-if="!place.available" @click="selectSeat( place.id, row.id )">
+                            <div :class="place.category" class="active" v-if="place.available" @click="selectSeat( place.id, row.id )">
                                 <div v-if="place.selected">
                                     <span class="material-symbols-outlined">done</span>
                                 </div>
@@ -50,12 +53,22 @@ export default {
     },
     data () {
         return {
-            seating: { 'r1': { 'name': 'Row 1', 'id': 'r1', 'content':{ 'S1':{ 'name': 'Seat 1', 'id': 'S1', 'available': true, 'selected': false, 'category':'2' } } }, 'r2': { 'name': 'Row 2', 'id': 'r2', 'content':{ 'S1':{ 'name': 'S1', 'id': 'S1', 'available': false, 'selected': false, 'category':'2' } } } },
+            seating: { 'r1': { 'name': 'Row 1', 'id': 'r1', 'content':{ 'S1':{ 'name': 'Seat 1', 'id': 'S1', 'available': true, 'selected': false, 'category':'2' } } }, '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': 20, 'bg': 'black', 'fg': 'white' }, '2': { 'price': 20, 'bg': 'green', 'fg': 'white' } } },
             selectedSeats: {}
         }
     },
     methods: {
+        loadPreviouslySelected () {
+            let data = {};
+            if ( sessionStorage.getItem( 'selectedSeats' ) ) {
+                data = JSON.parse( sessionStorage.getItem( 'selectedSeats' ) );
+            }
+            for ( let i in data ) {
+                this.seating[ data[ i ][ 1 ] ][ 'content' ][ data[ i ][ 0 ] ][ 'selected' ] = true;
+            }
+            this.selectedSeats = data;
+        },
         selectSeat( placeID, rowID ) {
             let data = {};
             if ( sessionStorage.getItem( 'selectedSeats' ) ) {
@@ -81,6 +94,9 @@ export default {
             sessionStorage.setItem( 'selectedSeats', JSON.stringify( data ) );
             this.selectedSeats = data;
         }
+    },
+    created() {
+        this.loadPreviouslySelected();
     }
 }
 </script>

src/webapp/src/router/index.js

@@ -40,22 +40,22 @@ const routes = [
     {
         path: '/admin',
         name: 'admin',
-        component: () => import( '../views/HomeView.vue' ),
+        component: () => import( '../views/admin/AdminView.vue' ),
         meta: {
             title: 'Admin - myevent'
         },
         children: [
             {
-                path: 'settings',
+                path: '',
-                name: 'adminSettings',
+                name: 'adminMain',
-                component: () => import( '../views/AdminLoginView.vue' ),
+                component: () => import( '../views/admin/HomeView.vue' ),
                 meta: {
-                    title: 'Admin - myevent'
+                    title: 'Home :: Admin - myevent'
                 }
             },
             {
-                path: '',
+                path: 'settings',
-                name: 'adminMain',
+                name: 'adminSettings',
                 component: () => import( '../views/AdminLoginView.vue' ),
                 meta: {
                     title: 'Admin - myevent'

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

@@ -0,0 +1,99 @@
+<template>
+    <div class="admin-wrapper">
+        <div class="top-bar">
+            <h1>Admin panel</h1>
+        </div>
+        <nav class="side-nav">
+            <router-link to="/admin" class="admin-menu">Home</router-link>
+            <router-link to="/admin/admin-accounts" class="admin-menu">Admin Accounts</router-link>
+            <router-link to="/admin/pages" class="admin-menu">Pages</router-link>
+            <router-link to="/admin/events" class="admin-menu">Events</router-link>
+            <router-link to="/admin/plugins" class="admin-menu">Plugins</router-link>
+            <router-link to="/admin/settings" class="admin-menu">Settings</router-link>
+        </nav>
+        <div class="main-view">
+            <router-view v-slot="{ Component, route }">
+                <transition :name="route.meta.transition || 'fade'" mode="out-in">
+                    <component :is="Component" />
+                </transition>
+            </router-view>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    .admin-wrapper {
+        display: grid;
+        grid-template-areas:
+        'sidebar top top top'
+        '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';
+        height: 100%;
+    }
+
+    .top-bar {
+        grid-area: top;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+    }
+
+    .main-view {
+        grid-area: main;
+        height: 100%;
+        min-height: 80vh;
+    }
+
+    .side-nav {
+        grid-area: sidebar;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+        background-color: rgb(30, 30, 82);
+        justify-content: center;
+    }
+
+    .admin-menu {
+        padding: 4% 0%;
+        width: 100%;
+        background-color: rgba( 0, 0, 0, 0 );
+        color: white;
+        text-decoration: none;
+        transition: 1s;
+    }
+
+    nav a.router-link-exact-active {
+        background-color: #4380a8;
+    }
+
+    .admin-menu:hover {
+        background-color: #4380a8;
+        transition: 0.4s;
+    }
+
+</style>
+
+<script>
+    export default {
+        data () {
+            return {
+                formData: {}
+            }
+        },
+        methods: {
+            setup () {
+                
+            }
+        }
+    };
+</script>
+

src/webapp/src/views/admin/HomeView.vue

@@ -0,0 +1,18 @@
+<template>
+    <h2>Home</h2>
+</template>
+
+<script>
+    export default {
+        data () {
+            return {
+                formData: {}
+            }
+        },
+        methods: {
+            setup () {
+                
+            }
+        }
+    };
+</script>