EP/Sitzplatzbuchungstool
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new

Browse Source
This commit is contained in:
Admin
2026-08-13 15:02:31 +00:00
parent c39e4ad581
commit dac15b9209
11 changed files with 236 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/Sitzplätze/widgets/Custom4.json
+1 -1
View File
@@ -51,7 +51,7 @@
"parentRowSpace": 10,
"renderMode": "CANVAS",
"rightColumn": 64,
"seatSelected": "{{showModal(Modal1.name);}}",
"seatSelected": "{{showModal(SeatCalendar.name);}}",
"srcDoc": {
"css": "@charset \"UTF-8\";\nhtml,\nbody {\n margin: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n font-family: Arial, sans-serif;\n}\n\n/* Bild + Overlay */\n#imgHolder {\n position: relative;\n width: 100%;\n height: 700px; /* feste Höhe, damit sicher nicht 0 */\n overflow: hidden;\n border-radius: 6px;\n background: #f3f4f6;\n}\n\n#floorplanImage {\n position: absolute;\n inset: 0;\n z-index: 1;\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n#seatLayer {\n position: absolute;\n inset: 0;\n z-index: 2;\n width: 100%;\n height: 100%;\n pointer-events: none; /* Punkte bekommen später pointer-events:auto */\n}\n\n/* Sitzpunkte */\n.seat {\n position: absolute;\n z-index: 3;\n display: block;\n width: 18px;\n height: 18px;\n padding: 0;\n transform: translate(-50%, -50%);\n border: 2px solid #ffffff;\n border-radius: 50%;\n background: #22c55e;\n color: #22c55e;\n cursor: pointer;\n pointer-events: auto;\n appearance: none;\n box-sizing: border-box;\n box-shadow: 0 0 5px currentColor, 0 0 10px currentColor;\n transition: transform 0.15s ease, box-shadow 0.15s ease;\n}\n\n.seat:hover {\n z-index: 10;\n transform: translate(-50%, -50%) scale(1.45);\n box-shadow: 0 0 8px currentColor, 0 0 16px currentColor;\n}\n\n/* Farben nach Status */\n.seat.frei {\n background: #22c55e; /* Grün */\n color: #22c55e;\n}\n\n.seat.belegt {\n background: #ef4444; /* Rot */\n color: #ef4444;\n}\n\n.seat.selected {\n outline: 3px solid #2563eb;\n outline-offset: 3px;\n}\n\n/* Legende */\n#legend {\n display: flex;\n flex-wrap: wrap;\n gap: 14px;\n margin-top: 8px;\n color: #374151;\n font-size: 13px;\n}\n\n.legendItem {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n}\n\n.legendColor {\n display: inline-block;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n}\n\n.legendColor.frei {\n background: #22c55e;\n}\n\n.legendColor.belegt {\n background: #ef4444;\n}",
"html": "<div id=\"seatPlan\">\n\n <div id=\"imgHolder\">\n <!-- Kein src hier, das Bild kommt über JavaScript -->\n <img id=\"floorplanImage\" alt=\"Büroplan\">\n\t\t<div id=\"seatLayer\"></div>\n\t\t\n\t\t\n </div>\n</div>",
pages/Sitzplätze/widgets/SeatCalendar/Button1.json
-49
View File
@@ -1,49 +0,0 @@
{
"animateLoading": true,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"bottomRow": 55,
"boxShadow": "none",
"buttonColor": "{{appsmith.theme.colors.primaryColor}}",
"buttonStyle": "PRIMARY",
"buttonVariant": "SECONDARY",
"disabledWhenInvalid": false,
"dynamicBindingPathList": [
{
"key": "buttonColor"
},
{
"key": "borderRadius"
}
],
"dynamicTriggerPathList": [
{
"key": "onClick"
}
],
"isDefaultClickDisabled": true,
"isDisabled": false,
"isLoading": false,
"isVisible": true,
"key": "ecgxpla2dn",
"leftColumn": 35,
"minWidth": 120,
"mobileBottomRow": 22,
"mobileLeftColumn": 31,
"mobileRightColumn": 47,
"mobileTopRow": 18,
"needsErrorInfo": false,
"onClick": "{{closeModal(SeatCalendar.name);}}",
"parentId": "ekq4ry46pv",
"placement": "CENTER",
"recaptchaType": "V3",
"renderMode": "CANVAS",
"resetFormOnClick": false,
"responsiveBehavior": "hug",
"rightColumn": 48,
"text": "Close",
"topRow": 51,
"type": "BUTTON_WIDGET",
"version": 1,
"widgetId": "7pn60oleot",
"widgetName": "Button1"
}
pages/Sitzplätze/widgets/SeatCalendar/Button2.json → pages/Sitzplätze/widgets/SeatCalendar/ButtonBuchen.json
+14 -12
View File
@@ -1,10 +1,9 @@
{
"animateLoading": true,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"bottomRow": 55,
"bottomRow": 7,
"boxShadow": "none",
"buttonColor": "{{appsmith.theme.colors.primaryColor}}",
"buttonStyle": "PRIMARY_BUTTON",
"buttonVariant": "PRIMARY",
"disabledWhenInvalid": false,
"dynamicBindingPathList": [
@@ -15,29 +14,32 @@
"key": "borderRadius"
}
],
"dynamicTriggerPathList": [],
"isDefaultClickDisabled": true,
"isDisabled": false,
"isLoading": false,
"isVisible": true,
"key": "ecgxpla2dn",
"leftColumn": 48,
"leftColumn": 45,
"minWidth": 120,
"mobileBottomRow": 22,
"mobileLeftColumn": 47,
"mobileRightColumn": 63,
"mobileTopRow": 18,
"mobileBottomRow": 7,
"mobileLeftColumn": 42,
"mobileRightColumn": 58,
"mobileTopRow": 3,
"needsErrorInfo": false,
"parentColumnSpace": 9.1875,
"parentId": "ekq4ry46pv",
"parentRowSpace": 10,
"placement": "CENTER",
"recaptchaType": "V3",
"renderMode": "CANVAS",
"resetFormOnClick": false,
"responsiveBehavior": "hug",
"rightColumn": 62,
"text": "Confirm",
"topRow": 51,
"rightColumn": 58,
"text": "Speichern",
"topRow": 2,
"type": "BUTTON_WIDGET",
"version": 1,
"widgetId": "zhd8u92koc",
"widgetName": "Button2"
"widgetId": "0a20eja5yr",
"widgetName": "ButtonBuchen"
}
pages/Sitzplätze/widgets/SeatCalendar/Custom5.json
+2 -2
View File
@@ -3,7 +3,7 @@
"borderColor": "#E0DEDE",
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"borderWidth": "1",
"bottomRow": 51,
"bottomRow": 54,
"boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}",
"defaultModel": "{{\n {\n events: GetSeats.data || [],\n seatId: appsmith.store.selectedSeatId,\n seatName: appsmith.store.selectedSeatName\n }\n}}",
"dynamicBindingPathList": [
@@ -54,7 +54,7 @@
"js": "let calendar = null;\nfunction getModel() {\n const model = appsmith.model || {};\n if (typeof model === \"string\") {\n try {\n return JSON.parse(model);\n } catch (error) {\n return {};\n }\n }\n return model;\n}\nfunction getEvents() {\n const model = getModel();\n if (!Array.isArray(model.events)) {\n return [];\n }\n return model.events;\n}\nfunction getSeatName() {\n const model = getModel();\n return model.seatName || model.seatId || \"kein Platz ausgewählt\";\n}\nfunction updateSeatTitle() {\n const titleElement = document.getElementById(\"calendarSeatTitle\");\n if (!titleElement) {\n return;\n }\n titleElement.textContent = `Kalender für ${getSeatName()}`;\n}\nfunction updateSelectionText(text) {\n const selectionElement = document.getElementById(\"calendarSelection\");\n if (!selectionElement) {\n return;\n }\n selectionElement.textContent = text;\n}\nfunction createCalendar() {\n const calendarElement = document.getElementById(\"calendar\");\n if (!calendarElement) {\n return;\n }\n if (typeof FullCalendar === \"undefined\") {\n calendarElement.textContent = \"FullCalendar konnte nicht geladen werden.\";\n return;\n }\n if (calendar) {\n calendar.destroy();\n }\n calendar = new FullCalendar.Calendar(calendarElement, {\n initialView: \"dayGridMonth\",\n locale: \"de\",\n firstDay: 1,\n navLinks: true,\n selectable: true,\n selectMirror: true,\n editable: false,\n eventStartEditable: false,\n eventDurationEditable: false,\n height: \"auto\",\n headerToolbar: {\n left: \"prev,next today\",\n center: \"title\",\n right: \"\"\n },\n buttonText: {\n today: \"Heute\"\n },\n slotDuration: \"00:30:00\",\n snapDuration: \"00:30:00\",\n slotMinTime: \"07:00:00\",\n slotMaxTime: \"20:00:00\",\n allDaySlot: true,\n nowIndicator: true,\n events: getEvents(),\n dateClick(info) {\n if (info.view.type === \"dayGridMonth\") {\n calendar.changeView(\"timeGridDay\", info.date);\n return;\n }\n updateSelectionText(`Ausgewählter Zeitpunkt: ${info.dateStr}`);\n },\n navLinkDayClick(date) {\n calendar.changeView(\"timeGridDay\", date);\n },\n select(info) {\n const start = formatDateTime(info.start);\n const end = formatDateTime(info.end);\n updateSelectionText(`Ausgewählt: ${start} bis ${end}`);\n appsmith.updateModel({\n selectedRange: {\n start: info.startStr,\n end: info.endStr,\n allDay: info.allDay\n }\n });\n },\n eventClick(info) {\n const event = info.event;\n const start = event.start ? formatDateTime(event.start) : \"\";\n const end = event.end ? formatDateTime(event.end) : \"\";\n const rangeText = event.allDay ? \"Ganztägig\" : `${start} bis ${end}`;\n updateSelectionText(`${event.title || \"Buchung\"} – ${rangeText}`);\n }\n });\n calendar.render();\n}\nfunction formatDateTime(date) {\n if (!date) {\n return \"\";\n }\n return new Intl.DateTimeFormat(\"de-DE\", {\n dateStyle: \"short\",\n timeStyle: \"short\"\n }).format(date);\n}\nfunction registerButtons() {\n const monthButton = document.getElementById(\"monthButton\");\n const dayButton = document.getElementById(\"dayButton\");\n if (monthButton) {\n monthButton.addEventListener(\"click\", () => {\n if (calendar) {\n calendar.changeView(\"dayGridMonth\");\n }\n });\n }\n if (dayButton) {\n dayButton.addEventListener(\"click\", () => {\n if (calendar) {\n calendar.changeView(\"timeGridDay\", calendar.getDate());\n }\n });\n }\n}\nfunction refreshCalendarEvents() {\n if (!calendar) {\n createCalendar();\n return;\n }\n calendar.removeAllEventSources();\n calendar.addEventSource(getEvents());\n}\nappsmith.onReady(() => {\n updateSeatTitle();\n registerButtons();\n createCalendar();\n appsmith.onModelChange(() => {\n updateSeatTitle();\n refreshCalendarEvents();\n });\n});"
},
"theme": "{{appsmith.theme}}",
"topRow": 4,
"topRow": 7,
"type": "CUSTOM_WIDGET",
"uncompiledSrcDoc": {
"css": "html,\nbody {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n font-family: Arial, sans-serif;\n overflow: auto;\n}\n\n#calendarWrapper {\n width: 100%;\n min-height: 620px;\n box-sizing: border-box;\n padding: 10px;\n background: #ffffff;\n}\n\n#calendarHeader {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 10px;\n padding: 8px 10px;\n border: 1px solid #d1d5db;\n border-radius: 6px;\n background: #f9fafb;\n}\n\n#calendarSeatTitle {\n font-size: 15px;\n font-weight: 600;\n color: #374151;\n}\n\n#calendarViewButtons {\n display: flex;\n gap: 6px;\n}\n\n#calendarViewButtons button {\n padding: 6px 10px;\n border: 1px solid #9ca3af;\n border-radius: 5px;\n background: #ffffff;\n color: #374151;\n cursor: pointer;\n}\n\n#calendarViewButtons button:hover {\n background: #e5e7eb;\n}\n\n#calendar {\n width: 100%;\n min-height: 520px;\n}\n\n#calendarSelection {\n margin-top: 10px;\n padding: 8px 10px;\n border: 1px solid #d1d5db;\n border-radius: 5px;\n background: #f9fafb;\n color: #374151;\n font-size: 13px;\n}\n\n/* FullCalendar-Anpassungen */\n\n.fc {\n font-size: 13px;\n}\n\n.fc .fc-button {\n background: #374151;\n border-color: #374151;\n}\n\n.fc .fc-button:hover,\n.fc .fc-button-active {\n background: #111827;\n border-color: #111827;\n}\n\n.fc .fc-daygrid-day.fc-day-today,\n.fc .fc-timegrid-col.fc-day-today {\n background: #eff6ff;\n}\n\n.fc .fc-event {\n cursor: pointer;\n}",
pages/Sitzplätze/widgets/SeatCalendar/InputEndzeit.json
+54
View File
@@ -0,0 +1,54 @@
{
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"animateLoading": true,
"autoFocus": false,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"bottomRow": 7,
"boxShadow": "none",
"defaultText": "",
"dynamicBindingPathList": [
{
"key": "accentColor"
},
{
"key": "borderRadius"
}
],
"dynamicHeight": "FIXED",
"dynamicTriggerPathList": [],
"iconAlign": "left",
"inputType": "TEXT",
"isDisabled": false,
"isLoading": false,
"isRequired": false,
"isVisible": true,
"key": "ta0c6wkf1z",
"label": "Endzeit",
"labelAlignment": "left",
"labelPosition": "Top",
"labelStyle": "",
"labelTextSize": "0.875rem",
"labelWidth": 5,
"leftColumn": 21,
"maxDynamicHeight": 9000,
"minDynamicHeight": 4,
"minWidth": 450,
"mobileBottomRow": 7,
"mobileLeftColumn": 26,
"mobileRightColumn": 46,
"mobileTopRow": 0,
"needsErrorInfo": false,
"parentColumnSpace": 9.1875,
"parentId": "ekq4ry46pv",
"parentRowSpace": 10,
"renderMode": "CANVAS",
"resetOnSubmit": true,
"responsiveBehavior": "fill",
"rightColumn": 32,
"showStepArrows": false,
"topRow": 0,
"type": "INPUT_WIDGET_V2",
"version": 2,
"widgetId": "ta8xd32gsh",
"widgetName": "InputEndzeit"
}
pages/Sitzplätze/widgets/SeatCalendar/InputGebuchtVon.json
+54
View File
@@ -0,0 +1,54 @@
{
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"animateLoading": true,
"autoFocus": false,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"bottomRow": 7,
"boxShadow": "none",
"defaultText": "",
"dynamicBindingPathList": [
{
"key": "accentColor"
},
{
"key": "borderRadius"
}
],
"dynamicHeight": "FIXED",
"dynamicTriggerPathList": [],
"iconAlign": "left",
"inputType": "TEXT",
"isDisabled": false,
"isLoading": false,
"isRequired": false,
"isVisible": true,
"key": "ta0c6wkf1z",
"label": "Gebucht von",
"labelAlignment": "left",
"labelPosition": "Top",
"labelStyle": "",
"labelTextSize": "0.875rem",
"labelWidth": 5,
"leftColumn": 32,
"maxDynamicHeight": 9000,
"minDynamicHeight": 4,
"minWidth": 450,
"mobileBottomRow": 7,
"mobileLeftColumn": 36,
"mobileRightColumn": 56,
"mobileTopRow": 0,
"needsErrorInfo": false,
"parentColumnSpace": 9.1875,
"parentId": "ekq4ry46pv",
"parentRowSpace": 10,
"renderMode": "CANVAS",
"resetOnSubmit": true,
"responsiveBehavior": "fill",
"rightColumn": 45,
"showStepArrows": false,
"topRow": 0,
"type": "INPUT_WIDGET_V2",
"version": 2,
"widgetId": "gdgks90sqi",
"widgetName": "InputGebuchtVon"
}
pages/Sitzplätze/widgets/SeatCalendar/InputStartzeit.json
+54
View File
@@ -0,0 +1,54 @@
{
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"animateLoading": true,
"autoFocus": false,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"bottomRow": 7,
"boxShadow": "none",
"defaultText": "",
"dynamicBindingPathList": [
{
"key": "accentColor"
},
{
"key": "borderRadius"
}
],
"dynamicHeight": "FIXED",
"dynamicTriggerPathList": [],
"iconAlign": "left",
"inputType": "TEXT",
"isDisabled": false,
"isLoading": false,
"isRequired": false,
"isVisible": true,
"key": "ta0c6wkf1z",
"label": "Startzeit",
"labelAlignment": "left",
"labelPosition": "Top",
"labelStyle": "",
"labelTextSize": "0.875rem",
"labelWidth": 5,
"leftColumn": 9,
"maxDynamicHeight": 9000,
"minDynamicHeight": 4,
"minWidth": 450,
"mobileBottomRow": 7,
"mobileLeftColumn": 14,
"mobileRightColumn": 34,
"mobileTopRow": 0,
"needsErrorInfo": false,
"parentColumnSpace": 9.1875,
"parentId": "ekq4ry46pv",
"parentRowSpace": 10,
"renderMode": "CANVAS",
"resetOnSubmit": true,
"responsiveBehavior": "fill",
"rightColumn": 21,
"showStepArrows": false,
"topRow": 0,
"type": "INPUT_WIDGET_V2",
"version": 2,
"widgetId": "fp4jilo4ey",
"widgetName": "InputStartzeit"
}
pages/Sitzplätze/widgets/SeatCalendar/InputTitel.json
+53
View File
@@ -0,0 +1,53 @@
{
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"animateLoading": true,
"autoFocus": false,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"bottomRow": 7,
"boxShadow": "none",
"defaultText": "",
"dynamicBindingPathList": [
{
"key": "accentColor"
},
{
"key": "borderRadius"
}
],
"dynamicHeight": "FIXED",
"iconAlign": "left",
"inputType": "TEXT",
"isDisabled": false,
"isLoading": false,
"isRequired": false,
"isVisible": true,
"key": "ta0c6wkf1z",
"label": "Label",
"labelAlignment": "left",
"labelPosition": "Top",
"labelStyle": "",
"labelTextSize": "0.875rem",
"labelWidth": 5,
"leftColumn": 0,
"maxDynamicHeight": 9000,
"minDynamicHeight": 4,
"minWidth": 450,
"mobileBottomRow": 7,
"mobileLeftColumn": 1,
"mobileRightColumn": 21,
"mobileTopRow": 0,
"needsErrorInfo": false,
"parentColumnSpace": 9.1875,
"parentId": "ekq4ry46pv",
"parentRowSpace": 10,
"renderMode": "CANVAS",
"resetOnSubmit": true,
"responsiveBehavior": "fill",
"rightColumn": 9,
"showStepArrows": false,
"topRow": 0,
"type": "INPUT_WIDGET_V2",
"version": 2,
"widgetId": "0k8djo34h7",
"widgetName": "InputTitel"
}
pages/Sitzplätze/widgets/SeatCalendar/IconButton1.json → pages/Sitzplätze/widgets/SeatCalendar/Schliessen.json
+1 -1
View File
@@ -40,5 +40,5 @@
"type": "ICON_BUTTON_WIDGET",
"version": 1,
"widgetId": "djgr636dvq",
"widgetName": "IconButton1"
"widgetName": "Schliessen"
}
pages/Sitzplätze/widgets/SeatCalendar/SeatCalendar.json
+3 -3
View File
@@ -1,14 +1,14 @@
{
"animateLoading": true,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"bottomRow": 595,
"bottomRow": 585,
"boxShadow": "none",
"canEscapeKeyClose": true,
"canOutsideClickClose": true,
"children": [
{
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"bottomRow": 570,
"bottomRow": 560,
"boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}",
"canExtend": true,
"detachFromLayout": true,
@@ -57,7 +57,7 @@
}
],
"dynamicHeight": "AUTO_HEIGHT",
"height": 570,
"height": 560,
"isCanvas": true,
"isLoading": false,
"key": "u2wwvtyano",
pages/Sitzplätze/widgets/SeatCalendar/Text1.json
-47
View File
@@ -1,47 +0,0 @@
{
"animateLoading": true,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"bottomRow": 4,
"dynamicBindingPathList": [
{
"key": "truncateButtonColor"
},
{
"key": "fontFamily"
},
{
"key": "borderRadius"
}
],
"dynamicHeight": "AUTO_HEIGHT",
"fontFamily": "{{appsmith.theme.fontFamily.appFont}}",
"fontSize": "1.25rem",
"fontStyle": "BOLD",
"isLoading": false,
"isVisible": true,
"key": "an6hvv1l3x",
"leftColumn": 0,
"maxDynamicHeight": 9000,
"minDynamicHeight": 4,
"minWidth": 450,
"mobileBottomRow": 5,
"mobileLeftColumn": 1,
"mobileRightColumn": 41,
"mobileTopRow": 1,
"needsErrorInfo": false,
"overflow": "NONE",
"parentId": "ekq4ry46pv",
"renderMode": "CANVAS",
"responsiveBehavior": "fill",
"rightColumn": 40,
"shouldTruncate": false,
"text": "Modal Title",
"textAlign": "LEFT",
"textColor": "#231F20",
"topRow": 0,
"truncateButtonColor": "{{appsmith.theme.colors.primaryColor}}",
"type": "TEXT_WIDGET",
"version": 1,
"widgetId": "0p7o0uvgok",
"widgetName": "Text1"
}