d

pages/Sitzplätze/widgets/Custom4.json

@@ -21,13 +21,14 @@
     }
   ],
   "dynamicHeight": "FIXED",
+  "dynamicPropertyPathList": [],
   "dynamicTriggerPathList": [
     {
-      "key": "onResetClick"
+      "key": "seatSelected"
     }
   ],
   "events": [
-    "onResetClick"
+    "seatSelected"
   ],
   "isCanvas": false,
   "isLoading": false,
@@ -42,12 +43,12 @@
   "mobileRightColumn": 31,
   "mobileTopRow": 29,
   "needsErrorInfo": false,
-  "onResetClick": "{{showAlert('Successfully reset!!', '');}}",
   "parentColumnSpace": 19.546875,
   "parentId": "0",
   "parentRowSpace": 10,
   "renderMode": "CANVAS",
   "rightColumn": 63,
+  "seatSelected": "{{showModal(Modal1.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: 600px; /* 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>",