event image upload done

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 () {
                 
             }