From 49d785f2d74f4f1691093ee7e894cf875815b97e Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Fri, 2 Jun 2023 17:16:00 +0200
Subject: [PATCH] add more documentation & move setting to comp

---
 .../src/components/settings/settings.vue      | 166 ++++++++++++++++++
 src/webapp/src/router/adminRoutes.js          |   9 +
 src/webapp/src/views/TicketsDetailsView.vue   |   3 +-
 src/webapp/src/views/admin/EventsView.vue     |  88 ++++++++--
 src/webapp/src/views/admin/SettingsView.vue   | 153 +---------------
 .../views/admin/events/EventsDetailsView.vue  |  66 +++++++
 website/src/admin-panel.md                    |   5 +-
 website/src/admin-panel/admin-accounts.md     |   9 +
 website/src/admin-panel/events.md             |  14 ++
 website/src/admin-panel/plugins.md            |   1 +
 website/src/admin-panel/seatplan-editor.md    |  14 ++
 11 files changed, 364 insertions(+), 164 deletions(-)
 create mode 100644 src/webapp/src/components/settings/settings.vue
 create mode 100644 src/webapp/src/views/admin/events/EventsDetailsView.vue
 create mode 100644 website/src/admin-panel/seatplan-editor.md

diff --git a/src/webapp/src/components/settings/settings.vue b/src/webapp/src/components/settings/settings.vue
new file mode 100644
index 0000000..a964b2a
--- /dev/null
+++ b/src/webapp/src/components/settings/settings.vue
@@ -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>
diff --git a/src/webapp/src/router/adminRoutes.js b/src/webapp/src/router/adminRoutes.js
index 6bb167f..155f73b 100644
--- a/src/webapp/src/router/adminRoutes.js
+++ b/src/webapp/src/router/adminRoutes.js
@@ -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,
+            }
+        },
     ]
 }
\ No newline at end of file
diff --git a/src/webapp/src/views/TicketsDetailsView.vue b/src/webapp/src/views/TicketsDetailsView.vue
index 7c5b040..edb464e 100644
--- a/src/webapp/src/views/TicketsDetailsView.vue
+++ b/src/webapp/src/views/TicketsDetailsView.vue
@@ -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>
diff --git a/src/webapp/src/views/admin/EventsView.vue b/src/webapp/src/views/admin/EventsView.vue
index 5edab18..7c651fd 100644
--- a/src/webapp/src/views/admin/EventsView.vue
+++ b/src/webapp/src/views/admin/EventsView.vue
@@ -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' } }
             }
         }
     };
diff --git a/src/webapp/src/views/admin/SettingsView.vue b/src/webapp/src/views/admin/SettingsView.vue
index 86b5c5a..17b6b79 100644
--- a/src/webapp/src/views/admin/SettingsView.vue
+++ b/src/webapp/src/views/admin/SettingsView.vue
@@ -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>
diff --git a/src/webapp/src/views/admin/events/EventsDetailsView.vue b/src/webapp/src/views/admin/events/EventsDetailsView.vue
new file mode 100644
index 0000000..b9dce75
--- /dev/null
+++ b/src/webapp/src/views/admin/events/EventsDetailsView.vue
@@ -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>
+
diff --git a/website/src/admin-panel.md b/website/src/admin-panel.md
index 929cd29..b04f4d7 100644
--- a/website/src/admin-panel.md
+++ b/website/src/admin-panel.md
@@ -8,4 +8,7 @@ Here's a list of the pages available when logged in as the root user. All other
 - [Plugins](&/admin-panel/plugins)
 - [Settings](&/admin-panel/settings)
 
-Additionally, some settings might not be available to all admin accounts on all pages.
\ No newline at end of file
+Additionally, some settings might not be available to all admin accounts on all pages.
+
+*As a general recommendation, we do not encourage logging in as the root user if not strictly necessary, as this can help protect the libreevent installation*.
+
diff --git a/website/src/admin-panel/admin-accounts.md b/website/src/admin-panel/admin-accounts.md
index 695c2fe..2d950b9 100644
--- a/website/src/admin-panel/admin-accounts.md
+++ b/website/src/admin-panel/admin-accounts.md
@@ -4,9 +4,18 @@ On this page you may add, modify or remove admin accounts. Note that in order fo
 ## Adding an account
 
 ### Privileges
+libreevent features a privilege system where you can choose to what group of users you want to add a user you are currently creating. Possible values are:
+
+Group           | Allowed settings
+----------------|------------------
+Root            | All pages. Can only be one account (the root account)
+Admin           | Can access all pages and settings except for Admin Accounts
+Event-Manager   | Access the events & pages page
+Event-Handler   | Can log into the apps to do entry control
 
 
 ### Email
+An Email address is required for account activation and to recover a password in case it gets lost. The system will automatically send an activation email so the user can confirm that the email address is valid. 
 
 
 ### 2FA
diff --git a/website/src/admin-panel/events.md b/website/src/admin-panel/events.md
index e69de29..6b4c5f8 100644
--- a/website/src/admin-panel/events.md
+++ b/website/src/admin-panel/events.md
@@ -0,0 +1,14 @@
+# Events
+This is the most feature rich admin page of libreevent. Here you can change everything regarding an event.
+
+## Creating new events
+Creating new events is as simple as clicking the plus icon in the top right corner and following the prompts.
+
+### Event name
+This is the name that is being displayed when users are browsing your events. Cannot be longer than 50 characters.
+
+### Event description
+Describe what your event is about. It will be displayed underneath the event name when users are browsing your events. In the browsing view, the length of the description is limited to 150 characters, after which three dots will be added to the text and a 'continue reading' button will be added. Technically, there's no limit to the length of the event description, but don't overdo it with the length, as the user is unlikely to read more than a couple words anyway.
+
+### Event location
+Choose a location where your event is going to take place. You can do so by selecting an existing location from the dropdown or by adding a new one. In the same step, you'll also need to choose between a seat plan and no seat plan, and if you choose a seat plan, you'll need to create one using out handy seatplan editor. See our seatplan editor guide [here](&/admin-panel/seatplan-editor)
\ No newline at end of file
diff --git a/website/src/admin-panel/plugins.md b/website/src/admin-panel/plugins.md
index e69de29..f39a3a0 100644
--- a/website/src/admin-panel/plugins.md
+++ b/website/src/admin-panel/plugins.md
@@ -0,0 +1 @@
+# Plugins
\ No newline at end of file
diff --git a/website/src/admin-panel/seatplan-editor.md b/website/src/admin-panel/seatplan-editor.md
new file mode 100644
index 0000000..59188c7
--- /dev/null
+++ b/website/src/admin-panel/seatplan-editor.md
@@ -0,0 +1,14 @@
+# Seatplan editor
+The seatplan editor is a graphical editor where you can create and modify the seating plan of virtually any room. We recommend that you start in the top left corner of the seatplan and then move down diagonally, as it is the easiest to do. Each so-called component can be either a stand area, a stage area or a seating area, with each of them featuring different layouts. You can change everything in the properties pane.
+
+## Adding more components
+You may add more components by simply clicking the plus icon in the toolbar of the editor. The component will spawn in the top left corner of the seatplan and the view will automatically be moved towards it. 
+
+## Removing components
+You may remove components by clicking the trash icon or by hitting 'delete' on your keyboard.
+
+## Editing history
+The editor features undo and redo functions such that you can undo your mistakes and accidental undos can be reverted. Just hit the corresponding button in the toolbar.
+
+## Saving
+The editor does auto-save a draft every minute. Pressing Ctrl + S or hitting the Save button in the toolbar will immediately save the seatplan as a draft. Click the deploy button to save the seatplan permanently, irreversibly overwriting any potentially existing old seatplan of that location, except you change the location name after the fact. 
\ No newline at end of file