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

dark mode support

Browse Source
This commit is contained in:
Janis Hutz
2023-04-09 17:37:35 +02:00
parent 5b8f1c03f7
commit c4abf91aeb
11 changed files with 109 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,12 +13,46 @@
</template>
<style>
:root, :root.light {
--primary-color: #2c3e50;
--accent-background: rgb(30, 30, 82);
--secondary-color: white;
--background-color: white;
--accent-color: #42b983;
--hover-color: rgb(165, 165, 165);
--accent-background-hover: #4380a8;
--overlay-color: rgba(37, 37, 37, 0.575);
}
:root.dark {
--primary-color: white;
--accent-background: rgb(100, 100, 190);
--secondary-color: black;
--background-color: rgb(32, 32, 32);
--accent-color: #42b983;
--hover-color: rgb(165, 165, 165);
--accent-background-hover: #4380a8;
}
@media ( prefers-color-scheme: dark ) {
:root {
--primary-color: white;
--accent-background: rgb(100, 100, 190);
--secondary-color: black;
--background-color: rgb(32, 32, 32);
--accent-color: #42b983;
--hover-color: rgb(165, 165, 165);
--accent-background-hover: #4380a8;
}
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: var( --background-color );
}
#app {
@@ -26,7 +60,7 @@ body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
color: var( --primary-color );
height: 100%;
display: flex;
flex-direction: column;
@@ -38,7 +72,7 @@ nav {
nav a {
font-weight: bold;
color: #2c3e50;
color: var( --primary-color );
}
nav a.router-link-exact-active {

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

@@ -5,13 +5,13 @@
<h3>{{ eventInfo.date }}</h3>
<h3>{{ eventInfo.location }}</h3>
<h3>Selected tickets</h3>
<table>
<table class="price-table">
<tr v-for="ticket in selectedSeats">
<td>{{ seating[ ticket[ 1 ] ][ 'content' ][ ticket[ 0 ] ][ 'name' ] }}</td>
<td>{{ seating[ ticket[ 1 ] ][ 'content' ][ ticket[ 0 ] ][ 'name' ] }} ({{ eventInfo[ 'ageGroups' ][ ticket[ 2 ] ][ 'name' ] }})</td>
<td>{{ eventInfo[ 'currency' ] }} {{ eventInfo[ 'categories' ][ seating[ ticket[ 1 ] ][ 'content' ][ ticket[ 0 ] ][ 'category' ] ][ 'price' ][ ticket[ 2 ] ] }}</td>
</tr>
</table>
<h3>Total</h3>
<h3>Total: {{ eventInfo[ 'currency' ] }} {{ total }}</h3>
<router-link to="/cart">To cart</router-link>
</div>
<div class="seatingPlan">
@@ -63,7 +63,7 @@
<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>
<h3>One or more seat(s) you have previously selected is/are no longer available!</h3>
<p>Please select another one!</p>
<button class="button" @click="closePlaceNotAvailablePopup()">Ok</button>
</div>
@@ -84,9 +84,10 @@ 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' }, '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 },
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 1' } }, 'ageGroups': { '1':{ 'id': 1, 'name':'Child', 'age':'0 - 15.99' }, '2':{ 'id': 2, 'name': 'Adult', 'age': null } }, 'ageGroupCount':2, 'stage': true },
selectedSeats: {},
pricingCurrentlySelected: {}
pricingCurrentlySelected: {},
total: 0,
}
},
methods: {
@@ -116,12 +117,20 @@ export default {
sessionStorage.setItem( 'selectedSeats', JSON.stringify( data ) );
this.selectedSeats = data;
this.sumUp();
},
sumUp () {
let data = {};
if ( sessionStorage.getItem( 'selectedSeats' ) ) {
data = JSON.parse( sessionStorage.getItem( 'selectedSeats' ) );
}
let price = 0;
for ( let i in data ) {
price += this.eventInfo[ 'categories' ][ this.seating[ data[ i ][ 1 ] ][ 'content' ][ data[ i ][ 0 ] ][ 'category' ] ][ 'price' ][ data[ i ][ 2 ] ];
}
this.total = price;
},
closePlaceNotAvailablePopup () {
$( '#placeNotAvailable' ).hide( 300 );
@@ -148,8 +157,13 @@ export default {
sessionStorage.setItem( 'arrayIndex', index );
sessionStorage.setItem( 'selectedSeats', JSON.stringify( data ) );
this.selectedSeats = data;
this.sumUp();
} else {
if ( this.eventInfo.ageGroupCount > 1 ) {
$( '#overlay' ).show( 200 );
} else {
this.storeSeat( '1' );
}
}
this.pricingCurrentlySelected = this.eventInfo[ 'categories' ][ this.seating[ rowID ][ 'content' ][ placeID ][ 'category' ] ][ 'price' ];
@@ -177,6 +191,7 @@ export default {
sessionStorage.setItem( 'selectedSeats', JSON.stringify( data ) );
this.selectedSeats = data;
$( '#overlay' ).hide( 200 );
this.sumUp();
}
},
created() {
@@ -203,8 +218,8 @@ export default {
.sidebar {
grid-area: sidebar;
background-color: rgb(30, 30, 82);
color: white;
background-color: var( --accent-background );
color: var( --secondary-color );
overflow: scroll;
}
@@ -222,7 +237,7 @@ export default {
}
.occupied {
background-color: rgb(177, 177, 177);
background-color: var( --hover-color );
padding: 0.4%;
}
@@ -233,7 +248,7 @@ export default {
left: 0;
right: 0;
bottom: 0;
background-color: rgba(37, 37, 37, 0.575);
background-color: var( --overlay-color );
height: 100%;
width: 100%;
}
@@ -248,7 +263,7 @@ export default {
}
.popup-content {
background-color: white;
background-color: var( --background-color );
height: 60%;
width: 50%;
display: flex;
@@ -283,7 +298,7 @@ export default {
list-style: none;
padding: 7px 15px;
border-radius: 10px;
border-color: black;
border-color: var( --primary-color );
border-style: solid;
border-width: 1px;
margin: 3px 0px;
@@ -291,7 +306,7 @@ export default {
}
.stage {
border-color: black;
border-color: var( --primary-color );
border-style: solid;
width: 80%;
height: 7%;
@@ -302,8 +317,8 @@ export default {
}
.button {
background-color: rgb(38, 38, 68);
color: white;
background-color: var( --accent-background );
color: var( --secondary-color );
font-weight: bold;
font-size: 110%;
border-radius: 20px;
@@ -313,8 +328,12 @@ export default {
}
.button:hover {
background-color: rgb(74, 74, 138);
background-color: var( --accent-background-hover );
transition: 0.3s;
cursor: pointer;
}
.price-table {
width: 100%;
}
</style>

2
src/webapp/src/views/AdminLoginView.vue
View File

@@ -42,7 +42,7 @@
}
.login-app {
background-color: white;
background-color: var( --background-color );
width: 40%;
height: 50%;
display: flex;

23
src/webapp/src/views/CartView.vue
View File

@@ -2,7 +2,7 @@
<div class="order">
<h1>Cart</h1>
<h3>Your tickets</h3>
<ul>
<ul v-for="ticket in tickets">
<li>Ticket</li>
</ul>
<router-link to="/purchase">Purchase now</router-link>
@@ -28,8 +28,8 @@
align-items: center;
justify-content: center;
text-decoration: none;
color: black;
border-color: black;
color: var( --primary-color );
border-color: var( --primary-color );
border-width: 1px;
height: fit-content;
border-style: solid;
@@ -38,7 +38,7 @@
}
.ticket:hover {
background-color: rgb(165, 165, 165);
background-color: var( --hover-color );
transition: 0.4s;
}
@@ -57,3 +57,18 @@
margin-right: auto
}
</style>
<script>
export default {
data() {
return {
tickets: {}
}
},
methods: {
loadCart () {
sessionStorage.getItem( 'selectedSeats' );
}
},
}
</script>

2
src/webapp/src/views/HomeView.vue
View File

@@ -1,5 +1,5 @@
<template>
<initial formData="formData"></initial>
<initial :formData="formData"></initial>
</template>
<script>

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

@@ -30,6 +30,8 @@
</script>
<style scoped>
/* TODO: Update colour to image */
.login {
background-color: green;
width: 100%;
@@ -43,7 +45,7 @@
}
.login-app {
background-color: white;
background-color: var( --background-color );
width: 40%;
height: 50%;
display: flex;

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

@@ -41,8 +41,8 @@
align-items: center;
justify-content: center;
text-decoration: none;
color: black;
border-color: black;
color: var( --primary-color );
border-color: var( --primary-color );
border-width: 1px;
height: fit-content;
border-style: solid;
@@ -51,7 +51,7 @@
}
.ticket:hover {
background-color: rgb(165, 165, 165);
background-color: var( --hover-color );
transition: 0.4s;
}

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

@@ -24,8 +24,8 @@
align-items: center;
justify-content: center;
text-decoration: none;
color: black;
border-color: black;
color: var( --primary-color );
border-color: var( --primary-color );
border-width: 1px;
height: fit-content;
border-style: solid;
@@ -34,7 +34,7 @@
}
.ticket:hover {
background-color: rgb(165, 165, 165);
background-color: var( --hover-color );
transition: 0.4s;
}

2
src/webapp/src/views/SignupView.vue
View File

@@ -50,6 +50,8 @@
background-color: white;
width: 40%;
height: 50%;
min-height: fit-content;
min-width: fit-content;
display: flex;
flex-direction: column;
align-items: center;

6
src/webapp/src/views/admin/AdminView.vue
View File

@@ -58,7 +58,7 @@
height: 100%;
padding: 0;
margin: 0;
background-color: rgb(30, 30, 82);
background-color: var( --accent-background );
justify-content: center;
}
@@ -72,11 +72,11 @@
}
nav a.router-link-exact-active {
background-color: #4380a8;
background-color: var( --accent-background-hover );
}
.admin-menu:hover {
background-color: #4380a8;
background-color: var( --accent-background-hover );
transition: 0.4s;
}

2
website/src/setup.md Normal file
View File

@@ -0,0 +1,2 @@
# Setup
In this tutorial, you are going to learn how to set up and configure myevent.