add start page settings

src/server/admin/api/getHandler.js

@@ -10,12 +10,12 @@
 const db = require( '../../backend/db/db.js' );
 const pm = require( '../../backend/plugins/manager.js' );
 const spm = require( '../startPageManager.js' );
-const startPageManager = new spm();
 
 class GETHandler {
     constructor ( settings ) {
         this.pluginManager = new pm( settings );
         this.settings = settings;
+        this.startPageManager = new spm( settings );
     }
 
     handleCall ( call, query ) {
@@ -115,9 +115,17 @@ class GETHandler {
             } else if ( call === 'getAllPlugins' ) {
                 resolve( this.pluginManager.getPlugins() );
             } else if ( call === 'getStartPageSettings' ) {
-                resolve( startPageManager.loadStartPagePreferences( query.name ) );
+                resolve( this.startPageManager.loadStartPagePreferences( query.name ) );
             } else if ( call === 'getAllStartPages' ) {
-                resolve( startPageManager.findAllStartPageTemplates() );
+                resolve( this.startPageManager.findAllStartPageTemplates() );
+            } else if ( call === 'buildStartPage' ) {
+                ( async() => {
+                    if ( await this.startPageManager.renderStartPage( query.page ) ) {
+                        resolve( 'ok' );
+                    } else {
+                        reject( { 'code': 412, 'error': 'Missing entries' } );
+                    }
+                } )();
             } else {
                 reject( { 'code': 404, 'error': 'Route not found' } );
             }

src/server/admin/api/postHandler.js

@@ -12,6 +12,8 @@ const pwdmanager = require( '../pwdmanager.js' );
 const fs = require( 'fs' );
 const path = require( 'path' );
 const pm = require( '../../backend/plugins/manager.js' );
+const spm = require( '../startPageManager.js' );
+const startPageManager = new spm();
 
 const letters = [ ',', '{' ];
 
@@ -178,6 +180,9 @@ class POSTHandler {
                 } ).catch( err => {
                     reject( { 'code': 500, 'message': err } );
                 } );
+            } else if ( call === 'savePageSettings' ) {
+                startPageManager.saveStartPagePreferences( data.page, data.preferences );
+                resolve( 'ok' );
             } else {
                 reject( { 'code': 404, 'error': 'Route not found' } );
             }

src/server/admin/startPageManager.js

@@ -18,7 +18,11 @@ class StartPageManager {
     }
 
     saveStartPagePreferences( startPageName, preferences ) {
-        fs.writeFileSync( path.join( __dirname + '/../ui/home/templates/' + startPageName + '/startPage.config.html' ), JSON.stringify( preferences ) );
+        let conf = {};
+        for ( let setting in preferences ) {
+            conf[ setting ] = preferences[ setting ][ 'value' ];
+        }
+        fs.writeFileSync( path.join( __dirname + '/../ui/home/templates/' + startPageName + '/startPage.config.json' ), JSON.stringify( conf ) );
     }
 
     loadStartPagePreferences( startPageName ) {
@@ -43,14 +47,19 @@ class StartPageManager {
 
     async renderStartPage( startPageName ) {
         this.setActiveStartPage( startPageName );
+        let self = this;
         const app = createSSRApp( {
             data() {
-                return this.loadStartPagePreferences( startPageName );
+                return {
+                    'data': self.loadStartPagePreferences( startPageName ),
+                    'pageName': self.settings.pageName,
+                };
             },
             template: '' + fs.readFileSync( path.join( __dirname + '/../ui/home/templates/' + startPageName + '/index.html' ) )
         } );
 
         fs.writeFileSync( path.join( __dirname + '/../ui/home/active/en/index.html' ), await renderToString( app ) );
+        return true;
     }
 }
 

src/server/config/settings.config.json

@@ -1,17 +1 @@
-{
+{"init":true,"twoFA":"enforce","setupKey":"hello world","twoFAMode":"enhanced","db":"json","payments":"stripe","name":"libreevent","yourDomain":"http://localhost:8080","mailSender":"libreevent <info@libreevent.janishutz.com>","maxTickets":10,"currency":"CHF","gcInterval":300,"ticketTimeout":900,"startPage":"default","version":"1.0.0"}
-	"init":true,
-	"twoFA":"enforce",
-	"setupKey":"hello world",
-	"twoFAMode":"enhanced",
-	"db":"json",
-	"payments":"stripe",
-	"name":"libreevent",
-	"yourDomain":"http://localhost:8080",
-	"mailSender":"libreevent <info@libreevent.janishutz.com>",
-	"maxTickets":10,
-	"currency":"CHF",
-	"gcInterval":300,
-	"ticketTimeout":900,
-	"startPage":"default",
-	"version":"1.0.0"
-}

src/server/ui/home/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"> -->
+        <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
+        <link rel="stylesheet" href="/supportFiles/style.css">
+        <link rel="stylesheet" href="/startPage/mainStyle">
+        <script defer src="/startPage/helperFunction"></script>
+        <title>libreevent</title>
+    </head>
+    <body>
+        <nav>
+            <a class="home">Home</a> |
+            <a href="/tickets">Tickets</a> |
+            <a href="/cart">Cart</a> |
+            <a href="/account">Account</a> |
+            <button onclick="changeTheme();" id="themeSelector">&#9789;</button>
+        </nav>
+        <img src="/otherAssets/logo.png" alt="libreevent logo" class="logo">
+        <h1>Welcome to libreevent!</h1>
+        <p>No start page has been configured yet! Please configure one either by using the configurator in the settings or by uploading your own HTML page to the correct folder as detailed <a href="https://libreevent.janishutz.com/docs/admin-panel/pages">here</a></p>
+    </body>
+</html>

src/server/ui/home/templates/default/index.html

@@ -20,6 +20,6 @@
         </nav>
         <img src="/otherAssets/logo.png" alt="libreevent logo" class="logo">
         <h1>Welcome to {{ pageName }}!</h1>
-        <p>{{ description }}</p>
+        <p>{{ data.description }}</p>
     </body>
 </html>

src/server/ui/home/templates/default/startPage.config.json

@@ -1,5 +1 @@
-{ 
+{"subtitle":"this is a test","description":"this is a test description"}
-    "subtitle": "this is a test",
-    "description": "this is a test description",
-    "banner": "homeBanner.jpg"
-}

src/server/ui/home/templates/default/startPage.json

@@ -10,8 +10,8 @@
         "type": "textarea",
         "display": "Description",
         "textarea-settings": {
-            "resize-y": true,
+            "cols": 50,
-            "resize-x": false,
+            "rows": 5,
             "max-length": 0,
             "min-length": 100
         },

src/server/ui/home/templates/default/supportFiles copy/style.css

@@ -0,0 +1,12 @@
+/*
+*				libreevent - style.css
+*
+*	Created by Janis Hutz 08/29/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+*/
+
+.logo {
+    height: 50vh;
+}

src/server/ui/home/templates/default/supportFiles/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"> -->
+        <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
+        <link rel="stylesheet" href="/supportFiles/style.css">
+        <link rel="stylesheet" href="/startPage/mainStyle">
+        <script defer src="/startPage/helperFunction"></script>
+        <title>{{ pageName }} :: Home</title>
+    </head>
+    <body>
+        <nav>
+            <a class="home">Home</a> |
+            <a href="/tickets">Tickets</a> |
+            <a href="/cart">Cart</a> |
+            <a href="/account">Account</a> |
+            <button onclick="changeTheme();" id="themeSelector">&#9789;</button>
+        </nav>
+        <img src="/otherAssets/logo.png" alt="libreevent logo" class="logo">
+        <h1>Welcome to {{ pageName }}!</h1>
+        <p>{{ data.description }}</p>
+    </body>
+</html>

src/server/ui/home/templates/default/supportFiles/startPage.config.json

@@ -0,0 +1 @@
+{"subtitle":"this is a test","description":"this is a test description"}

src/server/ui/home/templates/default/supportFiles/startPage.json

@@ -0,0 +1,31 @@
+{
+    "subtitle": {
+        "id": "subtitle",
+        "type": "text",
+        "display": "Subtitle",
+        "can-be-empty": false
+    },
+    "description": {
+        "id": "description",
+        "type": "textarea",
+        "display": "Description",
+        "textarea-settings": {
+            "cols": 50,
+            "rows": 5,
+            "max-length": 0,
+            "min-length": 100
+        },
+        "can-be-empty": false
+    },
+    "banner": {
+        "id": "banner",
+        "type": "image",
+        "display": "Banner",
+        "image-settings": {
+            "upload-name": "homeBanner",
+            "accept-filetype": "image/jpeg",
+            "height": 200,
+            "width": 350
+        }
+    }
+}

src/server/ui/home/templates/modern/index.html

@@ -20,6 +20,6 @@
         </nav>
         <img src="/otherAssets/logo.png" alt="libreevent logo" class="logo">
         <h1>Welcome to {{ pageName }}!</h1>
-        <p>{{ description }}</p>
+        <p>{{ data.description }}</p>
     </body>
 </html>

src/server/ui/home/templates/modern/startPage.config.json

@@ -0,0 +1 @@
+{"subtitle":"this is a test","description":"this is a test description"}

src/server/ui/home/templates/modern/startPage.json

@@ -0,0 +1,31 @@
+{
+    "subtitle": {
+        "id": "subtitle",
+        "type": "text",
+        "display": "Subtitle",
+        "can-be-empty": false
+    },
+    "description": {
+        "id": "description",
+        "type": "textarea",
+        "display": "Description",
+        "textarea-settings": {
+            "cols": 50,
+            "rows": 5,
+            "max-length": 0,
+            "min-length": 100
+        },
+        "can-be-empty": false
+    },
+    "banner": {
+        "id": "banner",
+        "type": "image",
+        "display": "Banner",
+        "image-settings": {
+            "upload-name": "homeBanner",
+            "accept-filetype": "image/jpeg",
+            "height": 200,
+            "width": 350
+        }
+    }
+}

src/server/ui/home/templates/modern/supportFiles/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"> -->
+        <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
+        <link rel="stylesheet" href="/supportFiles/style.css">
+        <link rel="stylesheet" href="/startPage/mainStyle">
+        <script defer src="/startPage/helperFunction"></script>
+        <title>{{ pageName }} :: Home</title>
+    </head>
+    <body>
+        <nav>
+            <a class="home">Home</a> |
+            <a href="/tickets">Tickets</a> |
+            <a href="/cart">Cart</a> |
+            <a href="/account">Account</a> |
+            <button onclick="changeTheme();" id="themeSelector">&#9789;</button>
+        </nav>
+        <img src="/otherAssets/logo.png" alt="libreevent logo" class="logo">
+        <h1>Welcome to {{ pageName }}!</h1>
+        <p>{{ data.description }}</p>
+    </body>
+</html>

src/server/ui/home/templates/modern/supportFiles/startPage.config.json

@@ -0,0 +1 @@
+{"subtitle":"this is a test","description":"this is a test description"}

src/server/ui/home/templates/modern/supportFiles/startPage.json

@@ -0,0 +1,31 @@
+{
+    "subtitle": {
+        "id": "subtitle",
+        "type": "text",
+        "display": "Subtitle",
+        "can-be-empty": false
+    },
+    "description": {
+        "id": "description",
+        "type": "textarea",
+        "display": "Description",
+        "textarea-settings": {
+            "cols": 50,
+            "rows": 5,
+            "max-length": 0,
+            "min-length": 100
+        },
+        "can-be-empty": false
+    },
+    "banner": {
+        "id": "banner",
+        "type": "image",
+        "display": "Banner",
+        "image-settings": {
+            "upload-name": "homeBanner",
+            "accept-filetype": "image/jpeg",
+            "height": 200,
+            "width": 350
+        }
+    }
+}

src/server/ui/home/templates/modern/supportFiles/style.css

@@ -0,0 +1,12 @@
+/*
+*				libreevent - style.css
+*
+*	Created by Janis Hutz 08/29/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+*/
+
+.logo {
+    height: 50vh;
+}

src/webapp/main/src/views/admin/PagesView.vue

@@ -11,19 +11,53 @@
     <div>
         <h2>Pages</h2>
         <p>Here you can modify your landing page (the start page of libreǝvent)</p>
+        <h3>Select the template (see all <a href="https://libreevent.janishutz.com/docs/homepage/templates" target="_blank">here</a>)</h3>
         <select name="templateSel" id="templateSel" v-model="selectedTemplate">
             <option v-for="el in startPageTemplates" :value="el">{{ el }}</option>
         </select>
+        <h3>Change the settings of the start page here</h3>
+        <button @click="save()" class="button">Save</button>
         <!-- Start page settings -> Defined by startPage.json file -->
         <div class="start-page-settings">
             <div class="setting" v-for="setting in startPageSettings">
-                {{ setting }}
+                <div v-if="setting.type === 'text'">
+                    <p>{{ setting.display }}</p>
+                    <input type="text" name="t" :id="setting.id" v-model="setting.value">
+                </div>
+                <div v-else-if="setting.type === 'textarea'">
+                    <p>{{ setting.display }}</p>
+                    <textarea name="textarea" :id="setting.id" :cols="setting[ 'textarea-settings' ].cols" :rows="setting[ 'textarea-settings' ].rows" v-model="setting.value"></textarea>
+                </div>
+                <div v-else-if="setting.type === 'image'">
+                    <p>{{ setting.display }}</p>
+                    <picture-input
+                    :ref="setting.id"
+                    :width="setting[ 'image-settings' ].width"
+                    :height="setting[ 'image-settings' ].height"
+                    :removable="false"
+                    removeButtonClass="ui red button"
+                    :accept="setting[ 'image-settings' ][ 'accept-filetype' ]"
+                    buttonClass="ui button primary"
+                    :customStrings="{
+                        upload: '<h1>Upload your image!</h1>',
+                        drag: 'Drag and drop your image here'
+                    }">
+                </picture-input>
+                </div>
             </div>
         </div>
+        <button @click="save()" class="button">Save</button>
+        <button @click="enablePage()" class="button">Deploy page</button>
+        <notifications ref="notification" location="topright" size="bigger"></notifications>
+        <popups ref="popups" size="normal" @data="( data ) => { handlePopup( data ) }"></popups>
     </div>
 </template>
 
 <script>
+    import PictureInput from 'vue-picture-input';
+    import notifications from '@/components/notifications/notifications.vue';
+    import popups from '@/components/notifications/popups.vue';
+
     export default {
         data () {
             return {
@@ -32,6 +66,11 @@
                 selectedTemplate: '',
             }
         },
+        components: {
+            PictureInput,
+            notifications,
+            popups,
+        },
         methods: {
             loadPageSettings() {
                 fetch( '/admin/getAPI/getStartPageSettings?name=' + this.selectedTemplate ).then( res => {
@@ -44,7 +83,83 @@
                         } );
                     }
                 } );
-            }
+            },
+            save() {
+                let settings = {};
+                for ( let setting in this.startPageSettings ) {
+                    if ( this.startPageSettings[ setting ][ 'type' ] === 'image' ) {
+                        if ( this.saveImage( this.startPageSettings[ setting ].id ) ) {
+                            this.$refs.notification.createNotification( 'No image selected!', 5, 'error', 'normal' )
+                        }
+                    } else {
+                        if ( this.startPageSettings[ setting ][ 'value' ] ) {
+                            settings[ setting ] = this.startPageSettings[ setting ];
+                        } else {
+                            this.$refs.notification.createNotification( 'Required entries are missing!', 10, 'error', 'normal' );
+                            return;
+                        }
+                    }
+                }
+                const options = {
+                    method: 'post',
+                    body: JSON.stringify( { 'preferences': settings, 'page': this.selectedTemplate } ),
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'charset': 'utf-8'
+                    }
+                };
+                fetch( localStorage.getItem( 'url' ) + '/admin/API/savePageSettings', options ).then( res => {
+                    if ( res.status === 200 ) {
+                        this.$refs.notification.createNotification( 'Saved settings successfully!', 5, 'ok', 'normal' );
+                    } else {
+                        this.$refs.notification.createNotification( 'An error occurred whilst saving', 10, 'error', 'normal' );
+                    }
+                } );
+            },
+            enablePage() {
+                this.$refs.popups.openPopup( 'This operation will build the currently selected start page, enable it for use and overwrite any existing start pages.', {}, 'string' );
+            },
+            handlePopup( data ) {
+                if ( data.status === 'ok' ) {
+                    const deploy = this.$refs.notification.createNotification( 'Building & deploying page...', 60, 'progress', 'normal' );
+                    fetch( '/admin/getAPI/buildStartPage?page=' + this.selectedTemplate ).then( res => {
+                        if ( res.status === 200 ) {
+                            this.$refs.notification.cancelNotification( deploy );
+                            this.$refs.notification.createNotification( 'Start page has been deployed successfully!', 5, 'ok', 'normal' );
+                        } else if ( res.status === 412 ) {
+                            this.$refs.notification.cancelNotification( deploy );
+                            this.$refs.notification.createNotification( 'Some required fields for the page are missing. Did you hit save before clicking here?', 10, 'error', 'normal' );
+                        } else {
+                            console.error( res );
+                            this.$refs.notification.cancelNotification( deploy );
+                            this.$refs.notification.createNotification( 'An unknown error occurred whilst processing the request. Please try again later.', 5, 'error', 'normal' );
+                        }
+                    } );
+                }
+            },
+            saveImage( image ) {
+                if ( this.$refs[ image ].file ) {
+                    let fd = new FormData();
+                    fd.append( 'image', this.$refs[ image ].file );
+                    fd.append( 'name', image );
+                    let fetchOptions = {
+                        method: 'post',
+                        body: fd,
+                    };
+                    fetch( localStorage.getItem( 'url' ) + '/admin/pages/uploadImages?image=' + image + '&template=' + this.selectedTemplate, fetchOptions ).then( res => {
+                        if ( res.status === 200 ) {
+                            return true;
+                        } else {
+                            return false;
+                        }
+                    } ).catch( err => {
+                        console.error( err );
+                    } );
+                    return true;
+                } else {
+                    return false;
+                }
+            },
         },
         watch: {
             selectedTemplate( value ) {