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 no seat plan view

Browse Source
This commit is contained in:
Janis Hutz
2023-05-05 19:23:16 +02:00
parent eec30d8ed4
commit 7edd663f4f
13 changed files with 174 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/webapp/src/App.vue
View File

@@ -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);
}

32
src/webapp/src/components/noseatplan.vue
View File

@@ -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 );

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

@@ -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;
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();
},
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 );

2
src/webapp/src/main.js
View File

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

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

@@ -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;

4
src/webapp/src/stores/backendStore.js
View File

@@ -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 ) {

10
src/webapp/src/views/LoginView.vue
View File

@@ -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' );
}
},
}

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

@@ -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' } }
}
}
};

0
src/webapp/src/views/PaymentPrepareView.vue Normal file
View File

113
src/webapp/src/views/PurchaseView.vue
View File

@@ -2,29 +2,32 @@
<div class="purchase">
<h1>Purchase</h1>
<div class="purchase-app">
<div v-if="!isAuthenticated" class="wrapper">
<router-link to="/login" class="option-button">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="/guest" v-if="!settings.accountRequired" class="option-button">Purchase as guest</router-link>
<div v-if="!isAuthenticated" class="wrapper-buttons">
<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" @click="setRedirect()">Create new account</router-link><br>
<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 v-if="cartNotEmpty" class="cart-list">
<h3>Your tickets</h3>
<ul v-for="event in tickets" class="cart-list">
<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 class="data">
<h2>Billing</h2>
<router-link to="/pay">Buy now</router-link>
</div>
<div v-else>
Cart is empty. Please add tickets <router-link to="/tickets">here</router-link>
<div class="cart">
<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 {
width: 70%;
.wrapper {
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 },
isAuthenticated: true,
settings: { 'accountRequired': true, 'requiresAddress': true, 'requiresAge': true, 'requiresSpecialNumber': true, 'specialNumberDisplayName': { 'de': '', 'en': 'id number' } },
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;
this.backend = JSON.parse( sessionStorage.getItem( 'backend' ) );
if ( this.cartNotEmpty ) {
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();

14
src/webapp/src/views/SetupView.vue
View File

@@ -1,7 +1,6 @@
<template>
<div>
<h1>Setup</h1>
<nav>
<nav class="setup-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>

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

@@ -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 {

9
src/webapp/src/views/TicketsOrderingView.vue
View File

@@ -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>
<noseatplan ticketID="haoag" v-else></noseatplan>
<seatplan :ticketID="eventID" v-if="hasSeatplan"></seatplan>
<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>