{ "backgroundColor": "{{appsmith.theme.colors.backgroundColor}}", "borderColor": "{{appsmith.theme.colors.backgroundColor}}", "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "borderWidth": "1", "bottomRow": 79, "boxShadow": "none", "defaultModel": "{{\n {\n seats: GetSeats.data || []\n }\n}}", "dynamicBindingPathList": [ { "key": "theme" }, { "key": "borderRadius" }, { "key": "backgroundColor" }, { "key": "borderColor" }, { "key": "defaultModel" } ], "dynamicHeight": "FIXED", "dynamicPropertyPathList": [ { "key": "seatSelected" } ], "dynamicTriggerPathList": [ { "key": "seatSelected" } ], "events": [ "seatSelected" ], "isCanvas": false, "isLoading": false, "isSearchWildcard": true, "isVisible": true, "key": "22lyh696pi", "leftColumn": 13, "maxDynamicHeight": 9000, "minDynamicHeight": 4, "mobileBottomRow": 59, "mobileLeftColumn": 8, "mobileRightColumn": 31, "mobileTopRow": 29, "needsErrorInfo": false, "parentColumnSpace": 19.546875, "parentId": "0", "parentRowSpace": 10, "renderMode": "CANVAS", "rightColumn": 64, "seatSelected": "{{\n storeValue(\n \"selectedSeatId\",\n Custom4.model.seatId ||\n Custom4.model.selectedSeat?.id ||\n \"\",\n false\n )\n .then(() =>\n storeValue(\n \"selectedSeatName\",\n Custom4.model.seatName ||\n Custom4.model.selectedSeat?.name ||\n \"\",\n false\n )\n )\n .then(() =>\n GetSeatBookings.run()\n )\n .then(() =>\n showModal(\n SeatCalendar.name\n )\n )\n}}", "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": "