add coloris.js color picker & work on settings

src/webapp/public/coloris.min.css

@@ -0,0 +1 @@
+.clr-picker{display:none;flex-wrap:wrap;position:absolute;width:200px;z-index:1000;border-radius:10px;background-color:#fff;justify-content:flex-end;direction:ltr;box-shadow:0 0 5px rgba(0,0,0,.05),0 5px 20px rgba(0,0,0,.1);-moz-user-select:none;-webkit-user-select:none;user-select:none}.clr-picker.clr-open,.clr-picker[data-inline=true]{display:flex}.clr-picker[data-inline=true]{position:relative}.clr-gradient{position:relative;width:100%;height:100px;margin-bottom:15px;border-radius:3px 3px 0 0;background-image:linear-gradient(rgba(0,0,0,0),#000),linear-gradient(90deg,#fff,currentColor);cursor:pointer}.clr-marker{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border:1px solid #fff;border-radius:50%;background-color:currentColor;cursor:pointer}.clr-picker input[type=range]::-webkit-slider-runnable-track{width:100%;height:8px}.clr-picker input[type=range]::-webkit-slider-thumb{width:8px;height:8px;-webkit-appearance:none}.clr-picker input[type=range]::-moz-range-track{width:100%;height:8px;border:0}.clr-picker input[type=range]::-moz-range-thumb{width:8px;height:8px;border:0}.clr-hue{background-image:linear-gradient(to right,red 0,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,red 100%)}.clr-alpha,.clr-hue{position:relative;width:calc(100% - 40px);height:8px;margin:5px 20px;border-radius:4px}.clr-alpha span{display:block;height:100%;width:100%;border-radius:inherit;background-image:linear-gradient(90deg,rgba(0,0,0,0),currentColor)}.clr-alpha input,.clr-hue input{position:absolute;width:calc(100% + 16px);height:16px;left:-8px;top:-4px;margin:0;background-color:transparent;opacity:0;cursor:pointer;appearance:none;-webkit-appearance:none}.clr-alpha div,.clr-hue div{position:absolute;width:16px;height:16px;left:0;top:50%;margin-left:-8px;transform:translateY(-50%);border:2px solid #fff;border-radius:50%;background-color:currentColor;box-shadow:0 0 1px #888;pointer-events:none}.clr-alpha div:before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;border-radius:50%;background-color:currentColor}.clr-format{display:none;order:1;width:calc(100% - 40px);margin:0 20px 20px}.clr-segmented{display:flex;position:relative;width:100%;margin:0;padding:0;border:1px solid #ddd;border-radius:15px;box-sizing:border-box;color:#999;font-size:12px}.clr-segmented input,.clr-segmented legend{position:absolute;width:100%;height:100%;margin:0;padding:0;border:0;left:0;top:0;opacity:0;pointer-events:none}.clr-segmented label{flex-grow:1;margin:0;padding:4px 0;font-size:inherit;font-weight:400;line-height:initial;text-align:center;cursor:pointer}.clr-segmented label:first-of-type{border-radius:10px 0 0 10px}.clr-segmented label:last-of-type{border-radius:0 10px 10px 0}.clr-segmented input:checked+label{color:#fff;background-color:#666}.clr-swatches{order:2;width:calc(100% - 32px);margin:0 16px}.clr-swatches div{display:flex;flex-wrap:wrap;padding-bottom:12px;justify-content:center}.clr-swatches button{position:relative;width:20px;height:20px;margin:0 4px 6px 4px;padding:0;border:0;border-radius:50%;color:inherit;text-indent:-1000px;white-space:nowrap;overflow:hidden;cursor:pointer}.clr-swatches button:after{content:'';display:block;position:absolute;width:100%;height:100%;left:0;top:0;border-radius:inherit;background-color:currentColor;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}input.clr-color{order:1;width:calc(100% - 80px);height:32px;margin:15px 20px 20px auto;padding:0 10px;border:1px solid #ddd;border-radius:16px;color:#444;background-color:#fff;font-family:sans-serif;font-size:14px;text-align:center;box-shadow:none}input.clr-color:focus{outline:0;border:1px solid #1e90ff}.clr-clear,.clr-close{display:none;order:2;height:24px;margin:0 20px 20px;padding:0 20px;border:0;border-radius:12px;color:#fff;background-color:#666;font-family:inherit;font-size:12px;font-weight:400;cursor:pointer}.clr-close{display:block;margin:0 20px 20px auto}.clr-preview{position:relative;width:32px;height:32px;margin:15px 0 20px 20px;border-radius:50%;overflow:hidden}.clr-preview:after,.clr-preview:before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;border:1px solid #fff;border-radius:50%}.clr-preview:after{border:0;background-color:currentColor;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}.clr-preview button{position:absolute;width:100%;height:100%;z-index:1;margin:0;padding:0;border:0;border-radius:50%;outline-offset:-2px;background-color:transparent;text-indent:-9999px;cursor:pointer;overflow:hidden}.clr-alpha div,.clr-color,.clr-hue div,.clr-marker{box-sizing:border-box}.clr-field{display:inline-block;position:relative;color:transparent}.clr-field input{margin:0;direction:ltr}.clr-field.clr-rtl input{text-align:right}.clr-field button{position:absolute;width:30px;height:100%;right:0;top:50%;transform:translateY(-50%);margin:0;padding:0;border:0;color:inherit;text-indent:-1000px;white-space:nowrap;overflow:hidden;pointer-events:none}.clr-field.clr-rtl button{right:auto;left:0}.clr-field button:aftLine truncated

src/webapp/public/coloris.min.js

@@ -0,0 +1,6 @@
+/*!
+ * Copyright (c) 2021 Momo Bassit.
+ * Licensed under the MIT License (MIT)
+ * https://github.com/mdbassit/Coloris
+ */
+!function(u,p,s,c){var d,f,h,b,i,v,y,g,m,w,l,k,L,E,x,a,n,r=p.createElement("canvas").getContext("2d"),A={r:0,g:0,b:0,h:0,s:0,v:0,a:1},S={el:"[data-coloris]",parent:"body",theme:"default",themeMode:"light",rtl:!1,wrap:!0,margin:2,format:"hex",formatToggle:!1,swatches:[],swatchesOnly:!1,alpha:!0,forceAlpha:!1,focusInput:!0,selectInput:!1,inline:!1,defaultColor:"#000000",clearButton:!1,clearLabel:"Clear",closeButton:!1,closeLabel:"Close",onChange:function(){return c},a11y:{open:"Open color picker",close:"Close color picker",clear:"Clear the selected color",marker:"Saturation: {s}. Brightness: {v}.",hueSlider:"Hue slider",alphaSlider:"Opacity slider",input:"Color value field",format:"Color format",swatch:"Color swatch",instruction:"Saturation and brightness selector. Use up, down, left and right arrow keys to select."}},o={},C="",T={},B=!1;function M(e){if("object"==typeof e)for(var t in e)switch(t){case"el":N(e.el),!1!==e.wrap&&j(e.el);break;case"parent":(d=p.querySelector(e.parent))&&(d.appendChild(f),S.parent=e.parent,d===p.body&&(d=c));break;case"themeMode":S.themeMode=e.themeMode,"auto"===e.themeMode&&u.matchMedia&&u.matchMedia("(prefers-color-scheme: dark)").matches&&(S.themeMode="dark");case"theme":e.theme&&(S.theme=e.theme),f.className="clr-picker clr-"+S.theme+" clr-"+S.themeMode,S.inline&&I();break;case"rtl":S.rtl=!!e.rtl,p.querySelectorAll(".clr-field").forEach(function(e){return e.classList.toggle("clr-rtl",S.rtl)});break;case"margin":e.margin*=1,S.margin=(isNaN(e.margin)?S:e).margin;break;case"wrap":e.el&&e.wrap&&j(e.el);break;case"formatToggle":S.formatToggle=!!e.formatToggle,z("clr-format").style.display=S.formatToggle?"block":"none",S.formatToggle&&(S.format="auto");break;case"swatches":Array.isArray(e.swatches)&&function(){var a=[];e.swatches.forEach(function(e,t){a.push('<button type="button" id="clr-swatch-'+t+'" aria-labelledby="clr-swatch-label clr-swatch-'+t+'" style="color: '+e+';">'+e+"</button>")}),z("clr-swatches").innerHTML=a.length?"<div>"+a.join("")+"</div>":"",S.swatches=e.swatches.slice()}();break;case"swatchesOnly":S.swatchesOnly=!!e.swatchesOnly,f.setAttribute("data-minimal",S.swatchesOnly);break;case"alpha":S.alpha=!!e.alpha,f.setAttribute("data-alpha",S.alpha);break;case"inline":S.inline=!!e.inline,f.setAttribute("data-inline",S.inline),S.inline&&(l=e.defaultColor||S.defaultColor,x=F(l),I(),q(l));break;case"clearButton":"object"==typeof e.clearButton&&(e.clearButton.label&&(S.clearLabel=e.clearButton.label,g.innerHTML=S.clearLabel),e.clearButton=e.clearButton.show),S.clearButton=!!e.clearButton,g.style.display=S.clearButton?"block":"none";break;case"clearLabel":S.clearLabel=e.clearLabel,g.innerHTML=S.clearLabel;break;case"closeButton":S.closeButton=!!e.closeButton,S.closeButton?f.insertBefore(m,v):v.appendChild(m);break;case"closeLabel":S.closeLabel=e.closeLabel,m.innerHTML=S.closeLabel;break;case"a11y":var a,l,r=e.a11y,n=!1;if("object"==typeof r)for(var o in r)r[o]&&S.a11y[o]&&(S.a11y[o]=r[o],n=!0);n&&(a=z("clr-open-label"),l=z("clr-swatch-label"),a.innerHTML=S.a11y.open,l.innerHTML=S.a11y.swatch,m.setAttribute("aria-label",S.a11y.close),g.setAttribute("aria-label",S.a11y.clear),w.setAttribute("aria-label",S.a11y.hueSlider),k.setAttribute("aria-label",S.a11y.alphaSlider),y.setAttribute("aria-label",S.a11y.input),h.setAttribute("aria-label",S.a11y.instruction));break;default:S[t]=e[t]}}function H(e,t){"string"==typeof e&&"object"==typeof t&&(o[e]=t,B=!0)}function O(e){delete o[e],0===Object.keys(o).length&&(B=!1,e===C&&D())}function t(l){if(B){var e,r=["el","wrap","rtl","inline","defaultColor","a11y"];for(e in o)if("break"===function(e){var t=o[e];if(l.matches(e)){for(var a in C=e,T={},r.forEach(function(e){return delete t[e]}),t)T[a]=Array.isArray(S[a])?S[a].slice():S[a];return M(t),"break"}}(e))break}}function D(){0<Object.keys(T).length&&(M(T),C="",T={})}function N(e){J(p,"click",e,function(e){S.inline||(t(e.target),E=e.target,a=E.value,x=F(a),f.classList.add("clr-open"),I(),q(a),(S.focusInput||S.selectInput)&&y.focus({preventScroll:!0}),S.selectInput&&y.select(),(n||S.swatchesOnly)&&$().shift().focus(),E.dispatchEvent(new Event("open",{bubbles:!0})))}),J(p,"input",e,function(e){var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function I(){var e,t,a,l,r=d,n=u.scrollY,o=f.offsetWidth,c=f.offsetHeight,i={left:!1,top:!1},s={x:0,y:0};r&&(a=u.getComputedStyle(r),e=parseFloat(a.marginTop),l=parseFloat(a.borderTopWidth),(s=r.getBoundingClientRect()).y+=l+n),S.inline||(a=(t=E.getBoundingClientRect()).x,l=n+t.y+t.height+S.margin,r?(a-=s.x,l-=s.y,a+o>r.clientWidth&&(a+=t.width-o,i.left=!0),l+c>r.clientHeight-e&&c+S.margin<=t.top-(s.y-n)&&(l-=t.height+c+2*S.margin,i.top=!0),l+=r.scrollTop):(a+o>p.documentElement.clientWidth&&(a+=t.width-o,i.left=!0),l+c-n>p.documentElement.clientHeight&&c+S.margin<=t.top&&(l=n+t.y-c-S.margin,i.top=!0)),f.classList.toggle("clr-left",i.left),f.classList.toggle("clr-top",i.top),f.style.left=a+"px",f.style.topLine truncated

src/webapp/public/index.html

@@ -11,6 +11,8 @@
     </title>
     <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="coloris.min.css">
+    <script defer src="coloris.min.js"></script>
 </head>
 
 <body>

src/webapp/src/views/admin/LocationsView.vue

@@ -1,7 +1,7 @@
 <!--
-*				libreevent - AccountView.vue
+*				libreevent - LocationsView.vue
 *
-*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*	Created by Janis Hutz 06/05/2023, Licensed under the GPL V3 License
 *			https://janishutz.com, development@janishutz.com
 *
 *
@@ -9,8 +9,8 @@
 
 <template>
     <div>
-        <h2>Admin Accounts</h2>
-        <p>Here you can change everything regarding admin accounts. You may create, modify or delete admin accounts.</p>
+        <h2>Locations</h2>
+        <p>Here you can change everything regarding event locations. All locations can have a seating plan.</p>
         <div class="bigButtons"></div>
     </div>
 </template>

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

@@ -17,6 +17,15 @@
         </div>
         <div class="ticket-settings">
             <h3>Ticket Settings</h3>
+            <div class="category" v-for="category in event.categories">
+                {{ category.name }}:
+                <div v-for="price in category.price">
+                    {{ price.name }}:
+                    <input type="number" v-model="price.price">
+                </div>
+                {{ category.fg }}
+                {{ category.bg }}
+            </div>
         </div>
         <div class="special-settings">
             <h3>Special Settings</h3>
@@ -47,7 +56,7 @@
         },
         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' },
+                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', 'categories': { '1': { 'price': { '1': { 'price':25, 'name':'Child (0-15.99 years)'}, '2': { 'price':35, 'name':'Adult'} }, 'bg': 'black', 'fg': 'white', 'name': 'Category 1' }, '2': { 'price': { '1': { 'price':25, 'name':'Child (0-15.99 years)' }, '2': { 'price':35, 'name':'Adult'} }, 'bg': 'green', 'fg': 'white', 'name': 'Category 2' } } },
                 specialSettings: {
                     'guest-purchase': { 
                         'display': 'Enable guest purchase',