|
|
|
@@ -1,11 +1,11 @@
|
|
|
|
|
{
|
|
|
|
|
"backgroundColor": "{{appsmith.theme.colors.backgroundColor}}",
|
|
|
|
|
"borderColor": "{{appsmith.theme.colors.backgroundColor}}",
|
|
|
|
|
"backgroundColor": "#FFFFFF",
|
|
|
|
|
"borderColor": "#E0DEDE",
|
|
|
|
|
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
|
|
|
|
|
"borderWidth": "1",
|
|
|
|
|
"bottomRow": 69,
|
|
|
|
|
"boxShadow": "none",
|
|
|
|
|
"defaultModel": "{\n \"seats\": [\n {\n \"id\": \"A01\",\n \"name\": \"Arbeitsplatz A01\",\n \"x\": 70,\n \"y\": 7,\n \"status\": \"frei\"\n },\n {\n \"id\": \"A02\",\n \"name\": \"Arbeitsplatz A02\",\n \"x\": 70,\n \"y\": 13,\n \"status\": \"belegt\"\n },\n {\n \"id\": \"A03\",\n \"name\": \"Arbeitsplatz A03\",\n \"x\": 76,\n \"y\": 7,\n \"status\": \"frei\"\n },\n {\n \"id\": \"B01\",\n \"name\": \"Arbeitsplatz B01\",\n \"x\": 76,\n \"y\": 13,\n \"status\": \"reserviert\"\n },\n {\n \"id\": \"B02\",\n \"name\": \"Arbeitsplatz B02\",\n \"x\": 35,\n \"y\": 55,\n \"status\": \"frei\"\n }\n ]\n}",
|
|
|
|
|
"bottomRow": 78,
|
|
|
|
|
"boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}",
|
|
|
|
|
"defaultModel": "{{\n {\n seats: GetSeats.data || []\n }\n}}",
|
|
|
|
|
"dynamicBindingPathList": [
|
|
|
|
|
{
|
|
|
|
|
"key": "theme"
|
|
|
|
@@ -14,54 +14,55 @@
|
|
|
|
|
"key": "borderRadius"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"key": "borderColor"
|
|
|
|
|
"key": "boxShadow"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"key": "backgroundColor"
|
|
|
|
|
"key": "defaultModel"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"dynamicHeight": "FIXED",
|
|
|
|
|
"dynamicPropertyPathList": [],
|
|
|
|
|
"dynamicTriggerPathList": [
|
|
|
|
|
{
|
|
|
|
|
"key": "onResetClick"
|
|
|
|
|
"key": "seatSelected"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"events": [
|
|
|
|
|
"onResetClick"
|
|
|
|
|
"seatSelected"
|
|
|
|
|
],
|
|
|
|
|
"isCanvas": false,
|
|
|
|
|
"isLoading": false,
|
|
|
|
|
"isSearchWildcard": true,
|
|
|
|
|
"isVisible": true,
|
|
|
|
|
"key": "fztl1t0wyo",
|
|
|
|
|
"key": "a8osgg6qvl",
|
|
|
|
|
"leftColumn": 2,
|
|
|
|
|
"maxDynamicHeight": 9000,
|
|
|
|
|
"minDynamicHeight": 4,
|
|
|
|
|
"mobileBottomRow": 49,
|
|
|
|
|
"mobileLeftColumn": 2,
|
|
|
|
|
"mobileRightColumn": 25,
|
|
|
|
|
"mobileTopRow": 19,
|
|
|
|
|
"mobileBottomRow": 58,
|
|
|
|
|
"mobileLeftColumn": 8,
|
|
|
|
|
"mobileRightColumn": 31,
|
|
|
|
|
"mobileTopRow": 28,
|
|
|
|
|
"needsErrorInfo": false,
|
|
|
|
|
"onResetClick": "{{showAlert('Successfully reset!!', '');}}",
|
|
|
|
|
"parentColumnSpace": 19.546875,
|
|
|
|
|
"parentId": "0",
|
|
|
|
|
"parentRowSpace": 10,
|
|
|
|
|
"renderMode": "CANVAS",
|
|
|
|
|
"rightColumn": 62,
|
|
|
|
|
"rightColumn": 56,
|
|
|
|
|
"seatSelected": "{{showModal(Modal1.name);}}",
|
|
|
|
|
"srcDoc": {
|
|
|
|
|
"css": "html,\nbody {\n margin: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n font-family: Arial, sans-serif;\n}\n\n#seatPlan {\n width: 100%;\n min-height: 100%;\n box-sizing: border-box;\n padding: 8px;\n background: #f1f5f9;\n}\n\n#toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n min-height: 38px;\n margin-bottom: 8px;\n padding: 6px 10px;\n border: 1px solid #d1d5db;\n border-radius: 6px;\n background: #f9fafb;\n color: #374151;\n font-size: 14px;\n}\n\n#selectedSeatText {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n#clearSelectionButton {\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#clearSelectionButton:hover {\n background: #f3f4f6;\n}\n\n#imgHolder {\n position: relative;\n width: 100%;\n aspect-ratio: 1920/1080;\n overflow: hidden;\n border: 1px solid #d1d5db;\n border-radius: 6px;\n background: #f3f4f6;\n}\n\n#floorplanImage {\n position: absolute;\n inset: 0;\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n#seatLayer {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.seat {\n position: absolute;\n z-index: 2;\n transform: translate(-50%, -50%);\n min-width: 42px;\n min-height: 30px;\n padding: 4px 7px;\n border: 2px solid #ffffff;\n border-radius: 6px;\n color: #ffffff;\n font-size: 12px;\n font-weight: bold;\n line-height: 1;\n cursor: pointer;\n pointer-events: auto;\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n transition: transform 0.12s ease, box-shadow 0.12s ease;\n}\n\n.seat:hover {\n z-index: 10;\n transform: translate(-50%, -50%) scale(1.12);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);\n}\n\n.seat.frei {\n background: #16a34a;\n}\n\n.seat.reserviert {\n background: #f59e0b;\n color: #111827;\n}\n\n.seat.belegt {\n background: #dc2626;\n}\n\n.seat.selected {\n outline: 4px solid #2563eb;\n outline-offset: 2px;\n}\n\n.seat.disabled {\n cursor: not-allowed;\n opacity: 0.75;\n}\n\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: 3px;\n}\n\n.legendColor.frei {\n background: #16a34a;\n}\n\n.legendColor.reserviert {\n background: #f59e0b;\n}\n\n.legendColor.belegt {\n background: #dc2626;\n}",
|
|
|
|
|
"html": "<div id=\"seatPlan\">\n <div id=\"toolbar\">\n <span id=\"selectedSeatText\">Kein Platz ausgewählt</span>\n <button id=\"clearSelectionButton\" type=\"button\">\n Auswahl löschen\n </button>\n </div>\n\n <div id=\"imgHolder\">\n <img id=\"floorplanImage\" alt=\"Büroplan\">\n <div id=\"seatLayer\"></div>\n </div>\n\n <div id=\"legend\">\n <span class=\"legendItem\">\n <span class=\"legendColor frei\"></span>\n Frei\n </span>\n\n <span class=\"legendItem\">\n <span class=\"legendColor reserviert\"></span>\n Reserviert\n </span>\n\n <span class=\"legendItem\">\n <span class=\"legendColor belegt\"></span>\n Belegt\n </span>\n </div>\n</div>",
|
|
|
|
|
"js": "const FLOORPLAN_IMAGE = \"data:image/jpeg;base64,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 truncated
|
|
|
|
|
"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#seatPlan {\n width: 100%;\n min-height: 100%;\n box-sizing: border-box;\n padding: 8px;\n background: #ffffff;\n}\n\n/* Toolbar oben */\n#toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n min-height: 38px;\n margin-bottom: 8px;\n padding: 6px 10px;\n border: 1px solid #d1d5db;\n border-radius: 6px;\n background: #f9fafb;\n color: #374151;\n font-size: 14px;\n}\n\n#selectedSeatText {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n#clearSelectionButton {\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#clearSelectionButton:hover {\n background: #f3f4f6;\n}\n\n/* Bild + Overlay */\n#imgHolder {\n position: relative;\n width: 100%;\n height: 600px; /* feste Höhe, damit sicher nicht 0 */\n overflow: hidden;\n border: 1px solid #d1d5db;\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 <div id=\"toolbar\">\n <span id=\"selectedSeatText\">Kein Platz ausgewählt</span>\n\n <button id=\"clearSelectionButton\" type=\"button\">\n Auswahl löschen\n </button>\n </div>\n\n <div id=\"imgHolder\">\n <!-- Kein src hier, das Bild kommt über JavaScript -->\n <img id=\"floorplanImage\" alt=\"Büroplan\">\n <div id=\"seatLayer\"></div>\n </div>\n\n <div id=\"legend\">\n <span class=\"legendItem\">\n <span class=\"legendColor frei\"></span>\n Frei\n </span>\n\n <span class=\"legendItem\">\n <span class=\"legendColor belegt\"></span>\n Belegt\n </span>\n </div>\n</div>",
|
|
|
|
|
"js": "let selectedSeat = null;\nconst FLOORPLAN_IMAGE = \"data:image/png;base64,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 truncated
|
|
|
|
|
},
|
|
|
|
|
"theme": "{{appsmith.theme}}",
|
|
|
|
|
"topRow": 14,
|
|
|
|
|
"topRow": 20,
|
|
|
|
|
"type": "CUSTOM_WIDGET",
|
|
|
|
|
"uncompiledSrcDoc": {
|
|
|
|
|
"css": "html,\nbody {\n margin: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n font-family: Arial, sans-serif;\n}\n\n#seatPlan {\n width: 100%;\n min-height: 100%;\n box-sizing: border-box;\n padding: 8px;\n background: #f1f5f9;\n}\n\n#toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n min-height: 38px;\n margin-bottom: 8px;\n padding: 6px 10px;\n border: 1px solid #d1d5db;\n border-radius: 6px;\n background: #f9fafb;\n color: #374151;\n font-size: 14px;\n}\n\n#selectedSeatText {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n#clearSelectionButton {\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#clearSelectionButton:hover {\n background: #f3f4f6;\n}\n\n#imgHolder {\n position: relative;\n width: 100%;\n aspect-ratio: 1920 / 1080;\n overflow: hidden;\n border: 1px solid #d1d5db;\n border-radius: 6px;\n background: #f3f4f6;\n}\n\n#floorplanImage {\n position: absolute;\n inset: 0;\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n#seatLayer {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.seat {\n position: absolute;\n z-index: 2;\n transform: translate(-50%, -50%);\n min-width: 42px;\n min-height: 30px;\n padding: 4px 7px;\n border: 2px solid #ffffff;\n border-radius: 6px;\n color: #ffffff;\n font-size: 12px;\n font-weight: bold;\n line-height: 1;\n cursor: pointer;\n pointer-events: auto;\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n transition: transform 0.12s ease, box-shadow 0.12s ease;\n}\n\n.seat:hover {\n z-index: 10;\n transform: translate(-50%, -50%) scale(1.12);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);\n}\n\n.seat.frei {\n background: #16a34a;\n}\n\n.seat.reserviert {\n background: #f59e0b;\n color: #111827;\n}\n\n.seat.belegt {\n background: #dc2626;\n}\n\n.seat.selected {\n outline: 4px solid #2563eb;\n outline-offset: 2px;\n}\n\n.seat.disabled {\n cursor: not-allowed;\n opacity: 0.75;\n}\n\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: 3px;\n}\n\n.legendColor.frei {\n background: #16a34a;\n}\n\n.legendColor.reserviert {\n background: #f59e0b;\n}\n\n.legendColor.belegt {\n background: #dc2626;\n}",
|
|
|
|
|
"html": "<div id=\"seatPlan\">\n <div id=\"toolbar\">\n <span id=\"selectedSeatText\">Kein Platz ausgewählt</span>\n <button id=\"clearSelectionButton\" type=\"button\">\n Auswahl löschen\n </button>\n </div>\n\n <div id=\"imgHolder\">\n <img id=\"floorplanImage\" alt=\"Büroplan\">\n <div id=\"seatLayer\"></div>\n </div>\n\n <div id=\"legend\">\n <span class=\"legendItem\">\n <span class=\"legendColor frei\"></span>\n Frei\n </span>\n\n <span class=\"legendItem\">\n <span class=\"legendColor reserviert\"></span>\n Reserviert\n </span>\n\n <span class=\"legendItem\">\n <span class=\"legendColor belegt\"></span>\n Belegt\n </span>\n </div>\n</div>",
|
|
|
|
|
"js": "\nconst FLOORPLAN_IMAGE =\n \"data:image/jpeg;base64,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 truncated
|
|
|
|
|
"css": "html,\nbody {\n margin: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n font-family: Arial, sans-serif;\n}\n\n#seatPlan {\n width: 100%;\n min-height: 100%;\n box-sizing: border-box;\n padding: 8px;\n background: #ffffff;\n}\n\n/* Toolbar oben */\n#toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n min-height: 38px;\n margin-bottom: 8px;\n padding: 6px 10px;\n border: 1px solid #d1d5db;\n border-radius: 6px;\n background: #f9fafb;\n color: #374151;\n font-size: 14px;\n}\n\n#selectedSeatText {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n#clearSelectionButton {\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#clearSelectionButton:hover {\n background: #f3f4f6;\n}\n\n/* Bild + Overlay */\n#imgHolder {\n position: relative;\n width: 100%;\n height: 600px; /* feste Höhe, damit sicher nicht 0 */\n overflow: hidden;\n border: 1px solid #d1d5db;\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:\n 0 0 5px currentColor,\n 0 0 10px currentColor;\n transition:\n transform 0.15s ease,\n 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:\n 0 0 8px currentColor,\n 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 <div id=\"toolbar\">\n <span id=\"selectedSeatText\">Kein Platz ausgewählt</span>\n\n <button id=\"clearSelectionButton\" type=\"button\">\n Auswahl löschen\n </button>\n </div>\n\n <div id=\"imgHolder\">\n <!-- Kein src hier, das Bild kommt über JavaScript -->\n <img id=\"floorplanImage\" alt=\"Büroplan\">\n <div id=\"seatLayer\"></div>\n </div>\n\n <div id=\"legend\">\n <span class=\"legendItem\">\n <span class=\"legendColor frei\"></span>\n Frei\n </span>\n\n <span class=\"legendItem\">\n <span class=\"legendColor belegt\"></span>\n Belegt\n </span>\n </div>\n</div>",
|
|
|
|
|
"js": "let selectedSeat = null;\n\nconst FLOORPLAN_IMAGE = \"data:image/png;base64,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 truncated
|
|
|
|
|
},
|
|
|
|
|
"version": 1,
|
|
|
|
|
"widgetId": "9tlkh1l3xk",
|
|
|
|
|
"widgetId": "42ddbp8pss",
|
|
|
|
|
"widgetName": "Custom4"
|
|
|
|
|
}
|
Admin committed