finished cart management

This commit is contained in:
2023-07-22 10:10:18 +02:00
parent 3fe01239b3
commit 29d5652834
7 changed files with 68 additions and 22 deletions

View File

@@ -105,6 +105,9 @@ export default {
} }
}, },
created () { created () {
window.addEventListener( 'visibilitychange', ( e ) => {
this.cart = localStorage.getItem( 'cart' ) ? JSON.parse( localStorage.getItem( 'cart' ) ): {};
}, 1 );
this.cart = localStorage.getItem( 'cart' ) ? JSON.parse( localStorage.getItem( 'cart' ) ): {}; this.cart = localStorage.getItem( 'cart' ) ? JSON.parse( localStorage.getItem( 'cart' ) ): {};
// this.loadTickets(); // this.loadTickets();
} }

View File

@@ -6,7 +6,7 @@
<div class="message-container"> <div class="message-container">
<div v-if="contentType === 'string'" class="options"> <div v-if="contentType === 'string'" class="options">
<h3>{{ data.message }}</h3> <h3>{{ data.message }}</h3>
<div style="width: 100%; margin-top: 3%;"> <div class="button-wrapper">
<button @click="closePopup( 'ok' )" title="Close popup">Ok</button> <button @click="closePopup( 'ok' )" title="Close popup">Ok</button>
</div> </div>
</div> </div>
@@ -14,14 +14,14 @@
<div v-else-if="contentType === 'settings'" class="options"> <div v-else-if="contentType === 'settings'" class="options">
<h3>{{ data.message }}</h3> <h3>{{ data.message }}</h3>
<settings v-model:settings="data.options"></settings> <settings v-model:settings="data.options"></settings>
<div style="width: 100%; margin-top: 3%;"> <div class="button-wrapper">
<button @click="closePopup( 'ok' )" title="Save changes">Save</button> <button @click="closePopup( 'ok' )" title="Save changes">Save</button>
<button @click="closePopup( 'cancel' )" title="Cancel changes">Cancel</button> <button @click="closePopup( 'cancel' )" title="Cancel changes">Cancel</button>
</div> </div>
</div> </div>
<div v-else-if="contentType === 'confirm'" class="confirm options"> <div v-else-if="contentType === 'confirm'" class="confirm options">
<h3>{{ data.message }}</h3> <h3>{{ data.message }}</h3>
<div style="width: 100%; margin-top: 3%;"> <div class="button-wrapper">
<button @click="closePopup( 'ok' )" title="Confirm operation">Ok</button> <button @click="closePopup( 'ok' )" title="Confirm operation">Ok</button>
<button @click="closePopup( 'cancel' )" title="Cancel operation">Cancel</button> <button @click="closePopup( 'cancel' )" title="Cancel operation">Cancel</button>
</div> </div>
@@ -31,7 +31,7 @@
<select id="select" v-model="data.selected"> <select id="select" v-model="data.selected">
<option v-for="selectOption in data.options" :value="selectOption.value">{{ selectOption.displayName }}</option> <option v-for="selectOption in data.options" :value="selectOption.value">{{ selectOption.displayName }}</option>
</select> </select>
<div style="width: 100%; margin-top: 3%;"> <div class="button-wrapper">
<button @click="closePopup( 'ok' )" title="Save changes">Save</button> <button @click="closePopup( 'ok' )" title="Save changes">Save</button>
<button @click="closePopup( 'cancel' )" title="Cancel changes">Cancel</button> <button @click="closePopup( 'cancel' )" title="Cancel changes">Cancel</button>
</div> </div>
@@ -59,7 +59,7 @@
</td> </td>
</tr> </tr>
</table> </table>
<div style="width: 100%; margin-top: 3%;"> <div class="button-wrapper">
<button @click="submitTicket()" title="Save changes">Save</button> <button @click="submitTicket()" title="Save changes">Save</button>
<button @click="closePopup( 'cancel' )" title="Cancel changes">Cancel</button> <button @click="closePopup( 'cancel' )" title="Cancel changes">Cancel</button>
</div> </div>
@@ -151,6 +151,15 @@
flex-direction: column; flex-direction: column;
} }
.button-wrapper {
width: 100%;
margin-top: 3%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.close-wrapper { .close-wrapper {
width: 100%; width: 100%;
height: 5%; height: 5%;

View File

@@ -115,6 +115,13 @@
} }
}; };
this.seatPlanInit();
window.addEventListener( 'visibilitychange', ( e ) => {
this.seatPlanInit();
}, 1 );
},
seatPlanInit () {
// Load cart // Load cart
this.cart = localStorage.getItem( 'cart' ) ? JSON.parse( localStorage.getItem( 'cart' ) ): {}; this.cart = localStorage.getItem( 'cart' ) ? JSON.parse( localStorage.getItem( 'cart' ) ): {};
@@ -314,10 +321,16 @@
const d = this.draggables[ id ]; const d = this.draggables[ id ];
const evG = this.event.ageGroups; const evG = this.event.ageGroups;
let count = {}; let count = {};
for ( let ageGroup in evG ) { if ( this.cart[ this.event.name ] ) {
if ( this.cart[ 'ticket' + id + '_' + ageGroup ] ) { for ( let ageGroup in evG ) {
count[ ageGroup ] = this.cart[ 'ticket' + id + '_' + ageGroup ].count; if ( this.cart[ this.event.name ][ 'tickets' ][ 'ticket' + id + '_' + ageGroup ] ) {
} else { count[ ageGroup ] = this.cart[ this.event.name ][ 'tickets' ][ 'ticket' + id + '_' + ageGroup ].count;
} else {
count[ ageGroup ] = 0;
}
}
} else {
for ( let ageGroup in evG ) {
count[ ageGroup ] = 0; count[ ageGroup ] = 0;
} }
} }
@@ -332,7 +345,26 @@
}, 'tickets' ); }, 'tickets' );
}, },
standingTicketHandling ( data ) { standingTicketHandling ( data ) {
console.log( data ); if ( !this.cart[ this.event.name ] ) {
this.cart[ this.event.name ] = { 'displayName': this.event.name, 'tickets': {} };
}
for ( let group in data.data ) {
if ( !this.cart[ this.event.name ][ 'tickets' ][ 'ticket' + data.component + '_' + group ] ) {
if ( data.data[ group ] > 0 ) {
this.cart[ this.event.name ][ 'tickets' ][ 'ticket' + data.component + '_' + group ] = { 'displayName': 'Ticket ' + data.component + ' (' + this.event.ageGroups[ group ].name + ')', 'price': this.event.categories[ this.draggables[ data.component ].category ].price[ group ], 'id': 'ticket' + data.component + '_' + group, 'count': data.data[ group ], 'comp': data.component };
} else {
delete this.cart[ this.event.name ][ 'tickets' ][ 'ticket' + data.component + '_' + group ];
}
}
}
if ( Object.keys( this.cart[ this.event.name ][ 'tickets' ] ).length < 1 ) {
delete this.cart[ this.event.name ];
}
this.$refs.cart.calculateTotal();
localStorage.setItem( 'cart', JSON.stringify( this.cart ) );
} }
}, },
created () { created () {

View File

@@ -130,6 +130,10 @@
}, },
}, },
created () { created () {
window.addEventListener( 'visibilitychange', ( e ) => {
this.cart = localStorage.getItem( 'cart' ) ? JSON.parse( localStorage.getItem( 'cart' ) ): {};
this.calculateTotal();
}, 1 );
this.cart = localStorage.getItem( 'cart' ) ? JSON.parse( localStorage.getItem( 'cart' ) ): {}; this.cart = localStorage.getItem( 'cart' ) ? JSON.parse( localStorage.getItem( 'cart' ) ): {};
this.calculateTotal(); this.calculateTotal();
} }

View File

@@ -42,9 +42,9 @@
this.$router.push( '/tickets' ); this.$router.push( '/tickets' );
} }
this.eventID = sessionStorage.getItem( 'selectedTicket' ); this.eventID = sessionStorage.getItem( 'selectedTicket' );
// if ( this.eventID == 'test' ) { if ( this.eventID == 'test2' ) {
// this.hasSeatplan = false; this.hasSeatplan = false;
// } }
} }
}; };
</script> </script>

View File

@@ -58,7 +58,7 @@
res.json().then( json => { res.json().then( json => {
if ( json.status === 'ok' ) { if ( json.status === 'ok' ) {
this.userStore.setUserAuth( true ); this.userStore.setUserAuth( true );
this.$router.push( sessionStorage.getItem( 'redirect' ) ? sessionStorage.getItem( 'redirect' ) : '/account' ); this.$router.push( sessionStorage.getItem( 'redirect' ) ?? '/account' );
sessionStorage.removeItem( 'redirect' ); sessionStorage.removeItem( 'redirect' );
} else if ( json.status === '2fa' ) { } else if ( json.status === '2fa' ) {
this.userStore.setUser2fa( true ); this.userStore.setUser2fa( true );

View File

@@ -5,8 +5,8 @@
<div class="code-container" v-if="code[ 1 ] != ''"> <div class="code-container" v-if="code[ 1 ] != ''">
<p>Open the link in the email and enter this code:</p> <p>Open the link in the email and enter this code:</p>
<div class="code"> <div class="code">
<div class="code-sub" id="code-part1">{{ code[1] }}</div> <div class="code-sub" id="code-part1">{{ code[ 1 ] }}</div>
<div class="code-sub" id="code-part2">{{ code[2] }}</div> <div class="code-sub" id="code-part2">{{ code[ 2 ] }}</div>
</div> </div>
</div> </div>
<notifications ref="notification" location="bottomright" size="bigger"></notifications> <notifications ref="notification" location="bottomright" size="bigger"></notifications>
@@ -42,8 +42,7 @@
source.onmessage = ( e ) => { source.onmessage = ( e ) => {
if ( e.data === 'authenticated' ) { if ( e.data === 'authenticated' ) {
self.userStore.setUserAuth( true ); self.userStore.setUserAuth( true );
self.$router.push( '/account' ); self.$router.push( sessionStorage.getItem( 'redirect' ) ?? '/account' );
console.log( e.data );
} }
} }
@@ -52,11 +51,10 @@
self.$refs.notification.cancelNotification( startNotification ); self.$refs.notification.cancelNotification( startNotification );
}; };
source.addEventListener( 'error', function(e) { source.addEventListener( 'error', function( e ) {
if (e.eventPhase == EventSource.CLOSED) source.close(); if ( e.eventPhase == EventSource.CLOSED ) source.close();
if (e.target.readyState == EventSource.CLOSED) { if ( e.target.readyState == EventSource.CLOSED ) {
console.log( e );
self.$refs.notification.cancelNotification( startNotification ); self.$refs.notification.cancelNotification( startNotification );
self.$refs.notification.createNotification( 'Could not connect to status service', 5, 'error', 'normal' ); self.$refs.notification.createNotification( 'Could not connect to status service', 5, 'error', 'normal' );
} }