event image upload done

src/server/admin/adminAPIRoutes.js

@@ -13,6 +13,9 @@ const postHandler = new posth();
 const getHandler = new geth();
 const path = require( 'path' );
 const bodyParser = require( 'body-parser' );
+const mlt = require( 'multer' );
+const multer = mlt();
+const fs = require( 'fs' );
 
 
 // settings is missing in arguments which shouldn't pose any problem
@@ -42,4 +45,19 @@ module.exports = ( app ) => {
             res.status( 403 ).sendFile( path.join( __dirname + '/../ui/' + ( req.query.lang ?? 'en' ) + '/errors/403.html' ) );
         }
     } );
+
+    app.post( '/admin/events/uploadImages', multer.array( 'image', 2 ), ( req, res ) => {
+        if ( req.query.event.includes( '/' ) || req.query.event.includes( '.' ) ) {
+            res.status( 400 ).send( 'fp_wrong' );
+        } else {
+            for ( let file in req.files ) {
+                if ( req.files[ file ].originalname === req.body.logo ) {
+                    fs.writeFileSync( path.join( __dirname + '/../assets/events/' + req.query.event + 'Logo.jpg' ), req.files[ file ].buffer );
+                } else {
+                    fs.writeFileSync( path.join( __dirname + '/../assets/events/' + req.query.event + 'Banner.jpg' ), req.files[ file ].buffer );
+                }
+            }
+            res.send( 'ok' );
+        }
+    } );
 };

src/server/config/settings.config.json

@@ -1,5 +1,5 @@
 {
-    "init": false,
+    "init": true,
     "twoFA": "allow",
     "setupKey": "hello world",
     "twoFAMode": "enhanced",

src/server/package-lock.json

@@ -17,6 +17,7 @@
         "express": "^4.18.2",
         "express-session": "^1.17.3",
         "html-to-text": "^9.0.5",
+        "multer": "^1.4.5-lts.1",
         "mysql": "^2.18.1",
         "nodemailer": "^6.9.3",
         "pdf-lib": "^1.17.1",
@@ -404,6 +405,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/append-field": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz",
+      "integrity": "sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw=="
+    },
     "node_modules/aproba": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
@@ -572,8 +578,18 @@
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
-      "dev": true
+    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
     },
     "node_modules/bwip-js": {
       "version": "3.4.3",
@@ -663,6 +679,47 @@
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
+    "node_modules/concat-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "engines": [
+        "node >= 0.8"
+      ],
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      }
+    },
+    "node_modules/concat-stream/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/concat-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/concat-stream/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/console-control-strings": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
@@ -1672,6 +1729,14 @@
         "node": "*"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/minipass": {
       "version": "4.2.8",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-4.2.8.tgz",
@@ -1719,6 +1784,34 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
+    "node_modules/multer": {
+      "version": "1.4.5-lts.1",
+      "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.5-lts.1.tgz",
+      "integrity": "sha512-ywPWvcDMeH+z9gQq5qYHCCy+ethsk4goepZ45GLD63fOu0YcNecQxi64nDs3qluZB+murG3/D4dJ7+dGctcCQQ==",
+      "dependencies": {
+        "append-field": "^1.0.0",
+        "busboy": "^1.0.0",
+        "concat-stream": "^1.5.2",
+        "mkdirp": "^0.5.4",
+        "object-assign": "^4.1.1",
+        "type-is": "^1.6.4",
+        "xtend": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/multer/node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
     "node_modules/mysql": {
       "version": "2.18.1",
       "resolved": "https://registry.npmjs.org/mysql/-/mysql-2.18.1.tgz",
@@ -2393,6 +2486,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -2530,6 +2631,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA=="
+    },
     "node_modules/uid-safe": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-2.1.5.tgz",
@@ -2663,6 +2769,14 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",

src/server/package.json

@@ -50,6 +50,7 @@
     "express": "^4.18.2",
     "express-session": "^1.17.3",
     "html-to-text": "^9.0.5",
+    "multer": "^1.4.5-lts.1",
     "mysql": "^2.18.1",
     "nodemailer": "^6.9.3",
     "pdf-lib": "^1.17.1",

src/webapp/main/package-lock.json

@@ -12,6 +12,7 @@
         "@pdfme/ui": "^1.2.3",
         "pinia": "^2.0.34",
         "vue": "^3.2.13",
+        "vue-picture-input": "^3.0.1",
         "vue-router": "^4.0.3",
         "vue3-draggable-resizable": "^1.6.5"
       },
@@ -1323,6 +1324,11 @@
         "@vue/shared": "3.2.47"
       }
     },
+    "node_modules/vue-picture-input": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vue-picture-input/-/vue-picture-input-3.0.1.tgz",
+      "integrity": "sha512-VGzqoH4iAN/S7L9RY2DyyLs4AjLt4QoWx6asT3y3PTXK2yFTXbUjx5qYdHrUJrVpInhvQwngEO/mJ7LhGXGFFg=="
+    },
     "node_modules/vue-router": {
       "version": "4.1.6",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.1.6.tgz",
@@ -2285,6 +2291,11 @@
         "@vue/shared": "3.2.47"
       }
     },
+    "vue-picture-input": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vue-picture-input/-/vue-picture-input-3.0.1.tgz",
+      "integrity": "sha512-VGzqoH4iAN/S7L9RY2DyyLs4AjLt4QoWx6asT3y3PTXK2yFTXbUjx5qYdHrUJrVpInhvQwngEO/mJ7LhGXGFFg=="
+    },
     "vue-router": {
       "version": "4.1.6",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.1.6.tgz",

src/webapp/main/package.json

@@ -12,6 +12,7 @@
     "@pdfme/ui": "^1.2.3",
     "pinia": "^2.0.34",
     "vue": "^3.2.13",
+    "vue-picture-input": "^3.0.1",
     "vue-router": "^4.0.3",
     "vue3-draggable-resizable": "^1.6.5"
   },

src/webapp/main/src/views/admin/events/EventsDetailsView.vue

@@ -33,10 +33,6 @@
                     <router-link to="/admin/ticketEditor">Edit ticket layout</router-link>
                 </tr>
             </table>
-            <div>
-                <h3>Assets</h3>
-                <p>Here you can view and change the event assets, meaning the images</p>
-            </div>
         </div>
         <div class="ticket-settings">
             <h3>Ticket Settings</h3>
@@ -67,6 +63,39 @@
                 </table>
             </div>
         </div>
+        <div>
+            <h3>Assets</h3>
+            <p>Here you can view and change all the marketing images for your event. All assets have to be jpg images.</p>
+            <div style="display: flex;">
+                <picture-input
+                    ref="logo"
+                    :width="200"
+                    :removable="false"
+                    removeButtonClass="ui red button"
+                    :height="200"
+                    accept="image/jpeg"
+                    buttonClass="ui button primary"
+                    :customStrings="{
+                        upload: '<h1>Upload your image!</h1>',
+                        drag: 'Drag and drop your event logo here'
+                    }">
+                </picture-input>
+                <picture-input
+                    ref="banner"
+                    :width="355"
+                    :removable="false"
+                    removeButtonClass="ui red button"
+                    :height="200"
+                    accept="image/jpeg"
+                    buttonClass="ui button primary"
+                    :customStrings="{
+                        upload: '<h1>Upload your image!</h1>',
+                        drag: 'Drag and drop your event banner here'
+                    }">
+                </picture-input>
+            </div>
+            <button @click="saveImages()">Upload</button>
+        </div>
         <div class="special-settings">
             <h3>General Settings</h3>
             <p>Currency codes used must be valid ISO 4217 codes. Read more on <a href="https://libreevent.janishutz.com/docs/admin-panel/events#currency" target="_blank">this page</a> of the documentation <!-- https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes"--></p>
@@ -109,6 +138,7 @@
 <script>
     import settings from '@/components/settings/settings.vue';
     import notifications from '@/components/notifications/notifications.vue';
+    import PictureInput from 'vue-picture-input';
 
     // TODO: When loading data form server, also load categories of this seat plan 
     // and from it construct the array, if not set already.
@@ -118,6 +148,7 @@
         components: {
             settings,
             notifications,
+            PictureInput,
         },
         created () {
             if ( !sessionStorage.getItem( 'selectedTicket' ) ) {
@@ -205,6 +236,26 @@
             }
         },
         methods: {
+            saveImages() {
+                if ( this.$refs.logo.file && this.$refs.banner.file ) {
+                    let fd = new FormData();
+                    console.log( this.$refs.logo.file );
+                    fd.append( 'image', this.$refs.logo.file );
+                    fd.append( 'image', this.$refs.banner.file );
+                    fd.append( 'logo', this.$refs.logo.file.name );
+                    let fetchOptions = {
+                        method: 'post',
+                        body: fd,
+                    };
+                    fetch( localStorage.getItem( 'url' ) + '/admin/events/uploadImages?event=' + sessionStorage.getItem( 'selectedTicket' ) + '&image=' + 'logo', fetchOptions ).then( res => {
+                        console.log( res );
+                    } ).catch( err => {
+                        console.error( err );
+                    } );
+                } else {
+                    this.$refs.notification.createNotification( 'No image selected!', 5, 'error', 'normal' );
+                }
+            },
             save () {
                 
             }