{ "backgroundColor": "{{appsmith.theme.colors.backgroundColor}}", "borderColor": "{{appsmith.theme.colors.backgroundColor}}", "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}", "dynamicBindingPathList": [ { "key": "theme" }, { "key": "borderRadius" }, { "key": "borderColor" }, { "key": "backgroundColor" } ], "dynamicHeight": "FIXED", "dynamicTriggerPathList": [ { "key": "onResetClick" } ], "events": [ "onResetClick" ], "isCanvas": false, "isLoading": false, "isSearchWildcard": true, "isVisible": true, "key": "fztl1t0wyo", "leftColumn": 2, "maxDynamicHeight": 9000, "minDynamicHeight": 4, "mobileBottomRow": 49, "mobileLeftColumn": 2, "mobileRightColumn": 25, "mobileTopRow": 19, "needsErrorInfo": false, "onResetClick": "{{showAlert('Successfully reset!!', '');}}", "parentColumnSpace": 19.546875, "parentId": "0", "parentRowSpace": 10, "renderMode": "CANVAS", "rightColumn": 62, "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": "