mirror of
https://github.com/janishutz/libreevent.git
synced 2025-11-25 13:24:24 +00:00
add more documentation & move setting to comp
This commit is contained in:
166
src/webapp/src/components/settings/settings.vue
Normal file
166
src/webapp/src/components/settings/settings.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<!--
|
||||
* libreevent - SettingsView.vue
|
||||
*
|
||||
* Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
|
||||
* https://janishutz.com, development@janishutz.com
|
||||
*
|
||||
*
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<table class="settings-toggles">
|
||||
<tr class="settings-option" v-for="setting in settings">
|
||||
<td class="info-wrapper">
|
||||
{{ setting.display }}
|
||||
<div class="info-container" @mouseenter="showInfo( setting.id )" @mouseleave="hideInfo( setting.id )">
|
||||
<span class="material-symbols-outlined info-icon">info</span>
|
||||
<div class="info-box" :id="setting.id">
|
||||
<div class="info-box-container">
|
||||
{{ setting.tooltip }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch">
|
||||
<input type="checkbox" v-model="setting.value">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
settings: Object,
|
||||
},
|
||||
methods: {
|
||||
showInfo ( box ) {
|
||||
$( '#' + box ).stop();
|
||||
$( '#' + box ).fadeIn( 300 );
|
||||
},
|
||||
hideInfo ( box ) {
|
||||
$( '#' + box ).stop();
|
||||
$( '#' + box ).fadeOut( 300 );
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.settings-toggles {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.info-wrapper {
|
||||
display: inline;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
font-size: 100%;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
width: 20vw;
|
||||
height: 20vh;
|
||||
background-color: var( --popup-color );
|
||||
border-radius: 20px;
|
||||
top: 125%;
|
||||
left: -50%
|
||||
}
|
||||
|
||||
.info-box::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
bottom: 100%; /* At the bottom of the tooltip */
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent var( --popup-color ) transparent;
|
||||
}
|
||||
|
||||
.info-box-container {
|
||||
display: flex;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
padding: 10%;
|
||||
padding-top: 5%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch */
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 1px #2196F3;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translateX(26px);
|
||||
-ms-transform: translateX(26px);
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
/* Rounded sliders */
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
@@ -71,5 +71,14 @@ export default {
|
||||
adminAuthRequired: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'events/view',
|
||||
name: 'eventDetails',
|
||||
component: () => import( '../views/admin/events/EventsDetailsView.vue' ),
|
||||
meta: {
|
||||
title: 'Admin - libreevent',
|
||||
adminAuthRequired: true,
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,8 @@
|
||||
|
||||
<template>
|
||||
<div class="details">
|
||||
<h1>Details</h1>
|
||||
<h1>{{ event.name }}</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>
|
||||
</div>
|
||||
|
||||
@@ -8,31 +8,89 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="main-view">
|
||||
<h2>Events</h2>
|
||||
<div class="order">
|
||||
<h2>Events</h2>
|
||||
<div class="order-app" v-if="events">
|
||||
<ul>
|
||||
<li v-for="event in events"></li>
|
||||
<li v-for="event in events">
|
||||
<router-link to="/admin/events/view" class="ticket" @click="setActiveTicket( event.eventID );">
|
||||
<div class="ticket-name">
|
||||
<h3>{{ event.name }}</h3>
|
||||
<p>{{ event.description }}</p>
|
||||
</div>
|
||||
<img :src="require( '@/assets/' + event.logo )" alt="event logo" class="ticket-logo">
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<transition :name="route.meta.transition || 'fade'" mode="out-in">
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</div>
|
||||
<div class="order-app" v-else>
|
||||
No future events are available!
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.order-app {
|
||||
text-align: justify;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.ticket {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
color: var( --primary-color );
|
||||
border-color: var( --primary-color );
|
||||
border-width: 1px;
|
||||
height: fit-content;
|
||||
border-style: solid;
|
||||
padding: 10px;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.ticket:hover {
|
||||
background-color: var( --hover-color );
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.ticket-logo {
|
||||
height: 20vh;
|
||||
width: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.ticket-name {
|
||||
margin-right: auto;
|
||||
max-width: 35%;
|
||||
}
|
||||
|
||||
.ticket-info {
|
||||
margin-left: auto;
|
||||
margin-right: auto
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
events: {},
|
||||
name: 'OrderView',
|
||||
methods: {
|
||||
setActiveTicket ( id ) {
|
||||
sessionStorage.setItem( 'selectedTicket', id );
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setup () {
|
||||
|
||||
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' }, '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' } }
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -10,33 +10,18 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2>Settings</h2>
|
||||
<!-- TODO: Move to per event settings -->
|
||||
<table class="settings-toggles">
|
||||
<tr class="settings-option" v-for="setting in settings">
|
||||
<td class="info-wrapper">
|
||||
{{ setting.display }}
|
||||
<div class="info-container" @mouseenter="showInfo( setting.id )" @mouseleave="hideInfo( setting.id )">
|
||||
<span class="material-symbols-outlined info-icon">info</span>
|
||||
<div class="info-box" :id="setting.id">
|
||||
<div class="info-box-container">
|
||||
{{ setting.tooltip }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch">
|
||||
<input type="checkbox" v-model="setting.value">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<settings v-model:settings="settings"></settings>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import settings from '@/components/settings/settings.vue';
|
||||
|
||||
export default {
|
||||
name: 'adminSettingsView',
|
||||
components: {
|
||||
settings,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
settings: {
|
||||
@@ -57,129 +42,5 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showInfo ( box ) {
|
||||
$( '#' + box ).stop();
|
||||
$( '#' + box ).fadeIn( 300 );
|
||||
},
|
||||
hideInfo ( box ) {
|
||||
$( '#' + box ).stop();
|
||||
$( '#' + box ).fadeOut( 300 );
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.settings-toggles {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.info-wrapper {
|
||||
display: inline;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
font-size: 100%;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
width: 20vw;
|
||||
height: 20vh;
|
||||
background-color: var( --popup-color );
|
||||
border-radius: 20px;
|
||||
top: 125%;
|
||||
left: -50%
|
||||
}
|
||||
|
||||
.info-box::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
bottom: 100%; /* At the bottom of the tooltip */
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent var( --popup-color ) transparent;
|
||||
}
|
||||
|
||||
.info-box-container {
|
||||
display: flex;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
padding: 10%;
|
||||
padding-top: 5%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch */
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 1px #2196F3;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translateX(26px);
|
||||
-ms-transform: translateX(26px);
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
/* Rounded sliders */
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
66
src/webapp/src/views/admin/events/EventsDetailsView.vue
Normal file
66
src/webapp/src/views/admin/events/EventsDetailsView.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<!--
|
||||
* 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="general-settings">
|
||||
<textarea v-model="event.description" class="big-text"></textarea>
|
||||
<input v-model="event.location" class="small-text">
|
||||
<input v-model="event.date" class="small-text" type="date">
|
||||
</div>
|
||||
<div class="ticket-settings"></div>
|
||||
<div class="special-settings"><settings v-model:settings="settings"></settings></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.details {
|
||||
flex-grow: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import settings from '@/components/settings/settings.vue';
|
||||
|
||||
export default {
|
||||
name: 'TicketsDetailsView',
|
||||
components: {
|
||||
settings,
|
||||
},
|
||||
created () {
|
||||
if ( !sessionStorage.getItem( 'selectedTicket' ) ) {
|
||||
this.$router.push( '/tickets' );
|
||||
}
|
||||
this.eventID = sessionStorage.getItem( 'selectedTicket' );
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
event: { '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' },
|
||||
settings: {
|
||||
'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'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user