add settings toggles

src/webapp/src/App.vue

@@ -28,6 +28,7 @@
     --accent-background: rgb(30, 30, 82);
     --secondary-color: white;
     --background-color: white;
+    --popup-color: rgb(224, 224, 224);
     --accent-color: #42b983;
     --hover-color: rgb(165, 165, 165);
     --accent-background-hover: #4380a8;
@@ -42,6 +43,7 @@
     --accent-background: rgb(100, 100, 190);
     --secondary-color: black;
     --background-color: rgb(32, 32, 32);
+    --popup-color: rgb(58, 58, 58);
     --accent-color: #42b983;
     --hover-color: rgb(83, 83, 83);
     --accent-background-hover: #4380a8;
@@ -53,6 +55,7 @@
 @media ( prefers-color-scheme: dark ) {
     :root {
         --primary-color: white;
+        --popup-color: rgb(58, 58, 58);
         --accent-background: rgb(100, 100, 190);
         --secondary-color: black;
         --background-color: rgb(32, 32, 32);

src/webapp/src/views/admin/EventsView.vue

@@ -10,6 +10,10 @@
 <template>
     <div>
         <div class="main-view">
+            <h2>Events</h2>
+            <ul>
+                <li v-for="event in events"></li>
+            </ul>
             <router-view v-slot="{ Component, route }">
                 <transition :name="route.meta.transition || 'fade'" mode="out-in">
                     <component :is="Component" />
@@ -23,7 +27,7 @@
     export default {
         data () {
             return {
-                formData: {}
+                events: {},
             }
         },
         methods: {

src/webapp/src/views/admin/PluginsView.vue

@@ -10,7 +10,7 @@
 <template>
     <div>
         <h2>Plugins</h2>
-        <p>Welcome to the admin panel!</p>
+        <p>Here you can manage installed plugins and install more</p>
         <div class="bigButtons"></div>
     </div>
 </template>

src/webapp/src/views/admin/SettingsView.vue

@@ -10,8 +10,23 @@
 <template>
     <div>
         <h2>Settings</h2>
-        <p>Welcome to the admin panel!</p>
-        <div class="bigButtons"></div>
+        <ul class="settings-toggles">
+            <li class="settings-option" v-for="setting in settings">
+                <div class="info-wrapper" @mouseenter="showInfo( setting.id )" @mouseleave="hideInfo( setting.id )">
+                    {{ setting.display }}
+                    <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> 
+                <label class="switch">
+                    <input type="checkbox" v-model="setting.value">
+                    <span class="slider round"></span>
+                </label>
+            </li>
+        </ul>
     </div>
 </template>
 
@@ -19,13 +34,133 @@
     export default {
         data () {
             return {
-                formData: {}
+                settings: { 'guest-purchase': { 'display': 'Allow 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.', 'value': true } }
             }
         },
         methods: {
-            setup () {
-                
+            showInfo ( box ) {
+                $( '#' + box ).stop();
+                $( '#' + box ).fadeIn( 300 );
+            },
+            hideInfo ( box ) {
+                $( '#' + box ).stop();
+                $( '#' + box ).fadeOut( 300 );
             }
         }
     };
 </script>
+
+<style scoped>
+
+.settings-option {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 10%;
+}
+
+.info-wrapper {
+    display: inline;
+    position: relative;
+}
+
+.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>