mirror of
https://github.com/janishutz/libreevent.git
synced 2025-11-25 13:24:24 +00:00
210 lines
9.2 KiB
Vue
210 lines
9.2 KiB
Vue
<!--
|
|
* libreevent - TicketsDetailsView.vue
|
|
*
|
|
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
|
|
* https://janishutz.com, development@janishutz.com
|
|
*
|
|
*
|
|
-->
|
|
|
|
<template>
|
|
<div class="details">
|
|
<h2>{{ event.name }}</h2>
|
|
<div class="category-wrapper">
|
|
<p>Event Description</p>
|
|
<textarea v-model="event.description" class="big-text" cols="70" rows="3" placeholder="Event description..."></textarea>
|
|
<table class="category">
|
|
<tr>
|
|
<td>Event location</td>
|
|
<td v-if="Object.keys( locations ).length > 0">
|
|
<select v-model="event.location" class="small-text">
|
|
<option v-for="location in locations" value="location.locationID">{{ location.locationID }} ({{ location.name }})</option>
|
|
</select>
|
|
</td>
|
|
<td v-else>No locations configured yet. Configure one <router-link to="/admin/locations">here</router-link></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Event date</td>
|
|
<td><input v-model="event.date" class="small-text" type="date"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Ticket editor</td>
|
|
<router-link to="/admin/ticketEditor">Edit ticket layout</router-link>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="ticket-settings">
|
|
<h3>Ticket Settings</h3>
|
|
<p>The foreground and background colours of the seats are used to show the customer to which category the seats belong.</p>
|
|
<div class="category-wrapper">
|
|
<table class="category" v-for="category in event.categories">
|
|
{{ category.name }}
|
|
<tr v-for="ageGroup in event.ageGroups">
|
|
<td>
|
|
<div class="category-details">{{ ageGroup.name }}<div style="display: inline;" v-if="ageGroup.age"> ({{ ageGroup.age }})</div>:</div>
|
|
</td>
|
|
<td>
|
|
<input type="number" v-model="category.price[ ageGroup.id ]">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><div class="category-details">Foreground colour:</div></td>
|
|
<td>
|
|
<input type="text" data-coloris v-model="category.fg" onkeydown="return false;">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><div class="category-details">Background colour:</div></td>
|
|
<td>
|
|
<input type="text" data-coloris v-model="category.bg" onkeydown="return false;">
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="special-settings">
|
|
<h3>General Settings</h3>
|
|
<p>Currency codes used must be valid ISO 4217 codes. Read more on <a href="https://libreevent.janishutz.com/docs/admin-panel/events#currency" target="_blank">this page</a> of the documentation <!-- https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes"--></p>
|
|
<settings v-model:settings="specialSettings"></settings>
|
|
</div>
|
|
<div>
|
|
<p>Please read into the documentation of this section if you want to use the requirements. It requires specific syntax to work. See <a href="https://libreevent.janishutz.com/docs/admin-panel/events#special-requirements" target="_blank">here</a> for more information</p>
|
|
</div>
|
|
<notifications ref="notification" location="topright"></notifications>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.details {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.ticket-settings {
|
|
width: 100%;
|
|
}
|
|
|
|
.category-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.category {
|
|
width: 50%;
|
|
text-align: justify;
|
|
}
|
|
|
|
.category-details {
|
|
margin-left: 7%;;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import settings from '@/components/settings/settings.vue';
|
|
import notifications from '@/components/notifications/notifications.vue';
|
|
|
|
// TODO: When loading data form server, also load categories of this seat plan
|
|
// and from it construct the array, if not set already.
|
|
|
|
export default {
|
|
name: 'TicketsDetailsView',
|
|
components: {
|
|
settings,
|
|
notifications,
|
|
},
|
|
created () {
|
|
if ( !sessionStorage.getItem( 'selectedTicket' ) ) {
|
|
this.$router.push( '/admin/events' );
|
|
}
|
|
this.eventID = sessionStorage.getItem( 'selectedTicket' );
|
|
fetch( localStorage.getItem( 'url' ) + '/admin/getAPI/getLocations' ).then( res => {
|
|
res.json().then( data => {
|
|
this.locations = data;
|
|
} ).catch( error => {
|
|
console.error( error );
|
|
} );
|
|
} );
|
|
},
|
|
data() {
|
|
return {
|
|
locations: {},
|
|
event: { 'name': 'TestEvent', 'description': 'This is a description for the TestEvent to test multiline support and proper positioning of the Fields', 'location': 'test', 'date': '2023-07-15', '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' } }, 'maxTickets': 2 },
|
|
specialSettings: {
|
|
'currency': {
|
|
'display': 'Currency',
|
|
'id': 'currency',
|
|
'tooltip':'Specify a currency in which the prices are displayed to the customer. Defaults to USD. Please use valid currency codes.',
|
|
'value': 'USD',
|
|
'type': 'text',
|
|
},
|
|
'guest-purchase': {
|
|
'display': 'Enable guest purchase',
|
|
'id': 'guest-purchase',
|
|
'tooltip':'Allowing guest purchase means that a user does not have to create an account in order for them to be able to make a purchase. Default: On',
|
|
'value': true,
|
|
'type': 'toggle'
|
|
},
|
|
'overbooking': {
|
|
'display': 'Enable overbooking of event',
|
|
'id': 'overbooking',
|
|
'tooltip':'Allow more ticket reservations than you have tickets available. Currently only available for events without seatplans. Default: Off',
|
|
'value': false,
|
|
'type': 'toggle'
|
|
},
|
|
'maxTickets': {
|
|
'display': 'Maximum ticket count per account',
|
|
'id': 'maxTickets',
|
|
'tooltip':'With this setting you can control how many tickets a person can buy. Defaults to 0, which means do not limit.',
|
|
'value': 0,
|
|
'type': 'number',
|
|
'restrictions': {
|
|
'min': 0,
|
|
'max': 100,
|
|
}
|
|
},
|
|
'requiredParameter': {
|
|
'display': 'Special requirements',
|
|
'id': 'requiredParameter',
|
|
'tooltip':'Set this parameter to require the user to provide a certain email domain, a special number or special string of characters. Defaults to None',
|
|
'value': 'none',
|
|
'type': 'select',
|
|
'restrictions': {
|
|
'none': {
|
|
'displayName':'None',
|
|
'value': 'none'
|
|
},
|
|
'email': {
|
|
'displayName':'Email domain',
|
|
'value': 'email'
|
|
},
|
|
'numbers': {
|
|
'displayName':'Number sequence',
|
|
'value': 'numbers'
|
|
},
|
|
'string': {
|
|
'displayName':'Text sequence',
|
|
'value': 'string'
|
|
},
|
|
}
|
|
},
|
|
'requiredParameterValue': {
|
|
'display': 'Special requirements values ',
|
|
'id': 'requiredParameterValue',
|
|
'tooltip':'Put a filter here, corresponding to your selection above. Please read the documentation on our website. See link below!',
|
|
'value': '',
|
|
'type': 'text',
|
|
},
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
save () {
|
|
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|