janishutz/libreevent
1
0
Fork 0
mirror of https://github.com/janishutz/libreevent.git synced 2025-11-25 05:14:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

progress on seat plan

Browse Source
This commit is contained in:
Janis Hutz
2023-04-09 13:28:12 +02:00
parent ed63af624d
commit 5b8f1c03f7
5 changed files with 251 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/webapp/public/index.html
View File

@@ -10,6 +10,7 @@
<%= htmlWebpackPlugin.options.title %> <%= htmlWebpackPlugin.options.title %>
</title> </title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head> </head>
<body> <body>

202
src/webapp/src/components/seatplan.vue
View File

@@ -8,7 +8,7 @@
<table> <table>
<tr v-for="ticket in selectedSeats"> <tr v-for="ticket in selectedSeats">
<td>{{ seating[ ticket[ 1 ] ][ 'content' ][ ticket[ 0 ] ][ 'name' ] }}</td> <td>{{ seating[ ticket[ 1 ] ][ 'content' ][ ticket[ 0 ] ][ 'name' ] }}</td>
<td>{{ eventInfo[ 'currency' ] }} {{ eventInfo[ 'categories' ][ seating[ ticket[ 1 ] ][ 'content' ][ ticket[ 0 ] ][ 'category' ] ][ 'price' ] }}</td> <td>{{ eventInfo[ 'currency' ] }} {{ eventInfo[ 'categories' ][ seating[ ticket[ 1 ] ][ 'content' ][ ticket[ 0 ] ][ 'category' ] ][ 'price' ][ ticket[ 2 ] ] }}</td>
</tr> </tr>
</table> </table>
<h3>Total</h3> <h3>Total</h3>
@@ -17,6 +17,7 @@
<div class="seatingPlan"> <div class="seatingPlan">
<h3>Seating plan</h3> <h3>Seating plan</h3>
<p>{{ eventInfo.RoomName }}</p> <p>{{ eventInfo.RoomName }}</p>
<p class="stage" v-if="eventInfo.stage">Stage</p>
<div class="seating"> <div class="seating">
<table> <table>
<tr v-for="row in seating"> <tr v-for="row in seating">
@@ -40,6 +41,35 @@
</table> </table>
</div> </div>
</div> </div>
<div class="overlay" id="overlay">
<div class="popup">
<div class="popup-content">
<div class="close-container">
<span class="material-symbols-outlined close-button" @click="closePopup()">close</span>
</div>
<div class="popup-content-wrapper">
<h3>Choose a ticket option</h3>
<ul v-for="group in eventInfo.ageGroups">
<li @click="storeSeat( group.id )" class="option">{{ group.name }} <i v-if="group.age">(0 - 15.99 years)</i> - {{ eventInfo.currency }} {{ pricingCurrentlySelected[ group.id ] }}</li>
</ul>
</div>
</div>
</div>
</div>
<div class="overlay" id="placeNotAvailable">
<div class="popup">
<div class="popup-content">
<div class="close-container">
<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>
<p>Please select another one!</p>
<button class="button" @click="closePlaceNotAvailablePopup()">Ok</button>
</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
@@ -53,9 +83,10 @@ export default {
}, },
data () { data () {
return { 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': true, 'selected': false, 'category':'2' } } } }, 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': 20, 'bg': 'black', 'fg': 'white' }, '2': { 'price': 20, 'bg': 'green', 'fg': 'white' } } }, 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 },
selectedSeats: {} selectedSeats: {},
pricingCurrentlySelected: {}
} }
}, },
methods: { methods: {
@@ -64,21 +95,48 @@ export default {
if ( sessionStorage.getItem( 'selectedSeats' ) ) { if ( sessionStorage.getItem( 'selectedSeats' ) ) {
data = JSON.parse( sessionStorage.getItem( 'selectedSeats' ) ); data = JSON.parse( sessionStorage.getItem( 'selectedSeats' ) );
} }
let showError = false
for ( let i in data ) { for ( let i in data ) {
this.seating[ data[ i ][ 1 ] ][ 'content' ][ data[ i ][ 0 ] ][ 'selected' ] = true; if ( this.seating[ data[ i ][ 1 ] ][ 'content' ][ data[ i ][ 0 ] ][ 'available' ] ) {
this.seating[ data[ i ][ 1 ] ][ 'content' ][ data[ i ][ 0 ] ][ 'selected' ] = true;
} else {
showError = true;
delete data[ i ];
}
} }
if ( showError ) {
setTimeout( function () {
$( '#placeNotAvailable' ).show( 200 );
console.log( 'showing error message' );
}, 500 );
}
sessionStorage.setItem( 'selectedSeats', JSON.stringify( data ) );
this.selectedSeats = data; this.selectedSeats = data;
}, },
sumUp () {
let data = {};
if ( sessionStorage.getItem( 'selectedSeats' ) ) {
data = JSON.parse( sessionStorage.getItem( 'selectedSeats' ) );
}
},
closePlaceNotAvailablePopup () {
$( '#placeNotAvailable' ).hide( 300 );
},
selectSeat( placeID, rowID ) { selectSeat( placeID, rowID ) {
sessionStorage.setItem( 'tempStorage', JSON.stringify( { 1:[ placeID, rowID ] } ) );
let data = {}; let data = {};
if ( sessionStorage.getItem( 'selectedSeats' ) ) { if ( sessionStorage.getItem( 'selectedSeats' ) ) {
data = JSON.parse( sessionStorage.getItem( 'selectedSeats' ) ); data = JSON.parse( sessionStorage.getItem( 'selectedSeats' ) );
} }
let isDeleting = false; let isDeleting = false;
for ( let i in data ) { for ( let i in data ) {
if ( data[ i ][ 0 ] == placeID, data[ i ][ 1 ] == rowID ) { if ( data[ i ][ 0 ] == placeID && data[ i ][ 1 ] == rowID ) {
delete data[ i ]; delete data[ i ];
isDeleting = true; isDeleting = true;
} }
@@ -86,13 +144,39 @@ export default {
this.seating[ rowID ][ 'content' ][ placeID ][ 'selected' ] = !isDeleting; this.seating[ rowID ][ 'content' ][ placeID ][ 'selected' ] = !isDeleting;
if ( !isDeleting ) { if ( isDeleting ) {
data[ index ] = [ placeID, rowID ]; sessionStorage.setItem( 'arrayIndex', index );
index += 1; sessionStorage.setItem( 'selectedSeats', JSON.stringify( data ) );
this.selectedSeats = data;
} else {
$( '#overlay' ).show( 200 );
} }
this.pricingCurrentlySelected = this.eventInfo[ 'categories' ][ this.seating[ rowID ][ 'content' ][ placeID ][ 'category' ] ][ 'price' ];
},
closePopup () {
$( '#overlay' ).hide( 200 );
let seat = JSON.parse( sessionStorage.getItem( 'tempStorage' ) );
this.seating[ seat[ 1 ][ 1 ] ][ 'content' ][ seat[ 1 ][ 0 ] ][ 'selected' ] = false;
},
storeSeat( ticketOption ) {
let data = {};
if ( sessionStorage.getItem( 'selectedSeats' ) ) {
data = JSON.parse( sessionStorage.getItem( 'selectedSeats' ) );
}
let seat = JSON.parse( sessionStorage.getItem( 'tempStorage' ) );
sessionStorage.setItem( 'selectedSeats', JSON.stringify( data ) );
this.selectedSeats = data;
data[ index ] = [ seat[ 1 ][ 0 ], seat[ 1 ][ 1 ], String( ticketOption ) ];
index += 1;
sessionStorage.setItem( 'arrayIndex', index ); sessionStorage.setItem( 'arrayIndex', index );
sessionStorage.setItem( 'selectedSeats', JSON.stringify( data ) ); sessionStorage.setItem( 'selectedSeats', JSON.stringify( data ) );
this.selectedSeats = data; this.selectedSeats = data;
$( '#overlay' ).hide( 200 );
} }
}, },
created() { created() {
@@ -121,6 +205,7 @@ export default {
grid-area: sidebar; grid-area: sidebar;
background-color: rgb(30, 30, 82); background-color: rgb(30, 30, 82);
color: white; color: white;
overflow: scroll;
} }
.seatingPlan { .seatingPlan {
@@ -129,10 +214,7 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: justify; justify-content: justify;
} overflow: scroll;
.seating {
width: 90%;
} }
.active { .active {
@@ -143,4 +225,96 @@ export default {
background-color: rgb(177, 177, 177); background-color: rgb(177, 177, 177);
padding: 0.4%; padding: 0.4%;
} }
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(37, 37, 37, 0.575);
height: 100%;
width: 100%;
}
.popup {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.popup-content {
background-color: white;
height: 60%;
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
border-radius: 50px;
}
.popup-content-wrapper {
display: flex;
height: 90%;
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: scroll;
}
.close-container {
width: 100%;
display: flex;
justify-content: flex-end;
}
.close-button {
cursor: pointer;
margin-right: 3vh;
margin-top: 3vh;
}
.option {
list-style: none;
padding: 7px 15px;
border-radius: 10px;
border-color: black;
border-style: solid;
border-width: 1px;
margin: 3px 0px;
cursor: pointer;
}
.stage {
border-color: black;
border-style: solid;
width: 80%;
height: 7%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.button {
background-color: rgb(38, 38, 68);
color: white;
font-weight: bold;
font-size: 110%;
border-radius: 20px;
border-style: none;
padding: 10px 40px;
transition: 0.6s;
}
.button:hover {
background-color: rgb(74, 74, 138);
transition: 0.3s;
cursor: pointer;
}
</style> </style>

50
src/webapp/src/router/index.js
View File

@@ -53,6 +53,38 @@ const routes = [
title: 'Home :: Admin - myevent' title: 'Home :: Admin - myevent'
} }
}, },
{
path: 'admin-accounts',
name: 'adminAccounts',
component: () => import( '../views/AdminLoginView.vue' ),
meta: {
title: 'Accounts :: Admin - myevent'
}
},
{
path: 'pages',
name: 'adminPages',
component: () => import( '../views/AdminLoginView.vue' ),
meta: {
title: 'Pages :: Admin - myevent'
}
},
{
path: 'events',
name: 'adminEvents',
component: () => import( '../views/AdminLoginView.vue' ),
meta: {
title: 'Events :: Admin - myevent'
}
},
{
path: 'plugins',
name: 'adminPlugins',
component: () => import( '../views/AdminLoginView.vue' ),
meta: {
title: 'Plugins :: Admin - myevent'
}
},
{ {
path: 'settings', path: 'settings',
name: 'adminSettings', name: 'adminSettings',
@@ -103,20 +135,28 @@ const routes = [
const router = createRouter( { const router = createRouter( {
history: createWebHistory( process.env.BASE_URL ), history: createWebHistory( process.env.BASE_URL ),
routes, routes,
} ); } );
router.afterEach( ( to, from ) => { router.afterEach( ( to, from ) => {
document.title = to.meta.title ? to.meta.title : 'default title'; document.title = to.meta.title ? to.meta.title : 'myevent';
} ); } );
let disallowed = [ 'admin', 'adminMain' ]; /*
let isAuthenticated = true; TODO: Get auth status from server on reload
*/
let AdminPages = [ 'admin', 'adminMain' ];
let isAdminAuthenticated = true;
let UserAccountPages = [ 'account' ];
let isUserAuthenticated = true;
router.beforeEach( ( to, from ) => { router.beforeEach( ( to, from ) => {
if ( disallowed.includes( to.name ) && !isAuthenticated ) { if ( AdminPages.includes( to.name ) && !isAdminAuthenticated ) {
return { name: 'adminLogin' }; return { name: 'adminLogin' };
} else if ( UserAccountPages.includes( to.name ) && !isUserAuthenticated ) {
return { name: 'login' };
} }
} ); } );

13
src/webapp/src/views/OrderView.vue
View File

@@ -4,7 +4,7 @@
<div class="order-app"> <div class="order-app">
<ul> <ul>
<li> <li>
<router-link to="/tickets/details" class="ticket"> <router-link to="/tickets/details" class="ticket" @click="setActiveTicket( 'test' );">
<div class="ticket-name"> <div class="ticket-name">
<h3>Event name</h3> <h3>Event name</h3>
<p>Event description</p> <p>Event description</p>
@@ -70,3 +70,14 @@
margin-right: auto margin-right: auto
} }
</style> </style>
<script>
export default {
name: 'OrderView',
methods: {
setActiveTicket ( id ) {
sessionStorage.setItem( 'selectedTicket', id );
}
}
};
</script>

5
src/webapp/src/views/TicketsDetailsView.vue
View File

@@ -18,6 +18,11 @@
name: 'TicketsDetailsView', name: 'TicketsDetailsView',
components: { components: {
seatplan seatplan
},
created () {
if ( !sessionStorage.getItem( 'selectedTicket' ) ) {
this.$router.push( '/tickets' );
}
} }
}; };
</script> </script>