@zonetrix/viewer 2.10.1 → 2.10.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/hooks/useFirebaseSeatStates.d.ts +1 -0
- package/dist/index.js +1 -1
- package/dist/index.mjs +481 -448
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,99 +1,99 @@
|
|
|
1
|
-
import { jsx as y, jsxs as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { Stage as
|
|
4
|
-
import { ref as
|
|
5
|
-
import { fromFirebaseSeatMap as
|
|
6
|
-
function
|
|
7
|
-
const [n,
|
|
1
|
+
import { jsx as y, jsxs as D } from "react/jsx-runtime";
|
|
2
|
+
import { useState as N, useEffect as W, useRef as A, useCallback as I, useMemo as $, memo as re, useSyncExternalStore as dt } from "react";
|
|
3
|
+
import { Stage as ut, Layer as Me, Group as ht, Rect as De, Text as Ee, Circle as ft } from "react-konva";
|
|
4
|
+
import { ref as ye, onValue as Le, off as Ne, get as gt } from "firebase/database";
|
|
5
|
+
import { fromFirebaseSeatMap as pt } from "@zonetrix/shared";
|
|
6
|
+
function vt(t) {
|
|
7
|
+
const [n, i] = N(null), [r, d] = N(!1), [c, o] = N(null), x = async () => {
|
|
8
8
|
if (t) {
|
|
9
|
-
d(!0),
|
|
9
|
+
d(!0), o(null);
|
|
10
10
|
try {
|
|
11
11
|
const f = await fetch(t);
|
|
12
12
|
if (!f.ok)
|
|
13
13
|
throw new Error(`Failed to fetch config: ${f.statusText}`);
|
|
14
|
-
const
|
|
15
|
-
|
|
14
|
+
const a = await f.json();
|
|
15
|
+
i(a);
|
|
16
16
|
} catch (f) {
|
|
17
|
-
const
|
|
18
|
-
a
|
|
17
|
+
const a = f instanceof Error ? f : new Error("Unknown error occurred");
|
|
18
|
+
o(a), console.error("Failed to fetch seat map config:", a);
|
|
19
19
|
} finally {
|
|
20
20
|
d(!1);
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
|
-
return
|
|
25
|
-
|
|
24
|
+
return W(() => {
|
|
25
|
+
x();
|
|
26
26
|
}, [t]), {
|
|
27
27
|
config: n,
|
|
28
28
|
loading: r,
|
|
29
|
-
error:
|
|
30
|
-
refetch:
|
|
29
|
+
error: c,
|
|
30
|
+
refetch: x
|
|
31
31
|
};
|
|
32
32
|
}
|
|
33
|
-
function
|
|
34
|
-
const [n,
|
|
35
|
-
return
|
|
33
|
+
function bt(t) {
|
|
34
|
+
const [n, i] = N({ width: 0, height: 0 });
|
|
35
|
+
return W(() => {
|
|
36
36
|
const r = t.current;
|
|
37
37
|
if (!r) return;
|
|
38
|
-
const { width: d, height:
|
|
39
|
-
d > 0 &&
|
|
40
|
-
const
|
|
41
|
-
const f =
|
|
38
|
+
const { width: d, height: c } = r.getBoundingClientRect();
|
|
39
|
+
d > 0 && c > 0 && i({ width: d, height: c });
|
|
40
|
+
const o = new ResizeObserver((x) => {
|
|
41
|
+
const f = x[0];
|
|
42
42
|
if (!f) return;
|
|
43
|
-
const { width:
|
|
44
|
-
|
|
43
|
+
const { width: a, height: s } = f.contentRect;
|
|
44
|
+
a > 0 && s > 0 && i((u) => u.width === a && u.height === s ? u : { width: a, height: s });
|
|
45
45
|
});
|
|
46
|
-
return
|
|
47
|
-
|
|
46
|
+
return o.observe(r), () => {
|
|
47
|
+
o.disconnect();
|
|
48
48
|
};
|
|
49
49
|
}, [t]), n;
|
|
50
50
|
}
|
|
51
|
-
function
|
|
51
|
+
function Ie(t, n) {
|
|
52
52
|
return Math.sqrt(Math.pow(n.x - t.x, 2) + Math.pow(n.y - t.y, 2));
|
|
53
53
|
}
|
|
54
|
-
function
|
|
54
|
+
function Fe(t, n) {
|
|
55
55
|
return {
|
|
56
56
|
x: (t.x + n.x) / 2,
|
|
57
57
|
y: (t.y + n.y) / 2
|
|
58
58
|
};
|
|
59
59
|
}
|
|
60
|
-
function
|
|
61
|
-
const
|
|
62
|
-
|
|
63
|
-
const
|
|
64
|
-
if (!
|
|
65
|
-
const
|
|
60
|
+
function yt(t, n) {
|
|
61
|
+
const i = A(null), r = A(null), d = A(1);
|
|
62
|
+
W(() => {
|
|
63
|
+
const c = t.current;
|
|
64
|
+
if (!c || !n.enabled) return;
|
|
65
|
+
const o = c.container(), x = (s) => {
|
|
66
66
|
if (s.touches.length === 2) {
|
|
67
67
|
s.preventDefault();
|
|
68
|
-
const u = { x: s.touches[0].clientX, y: s.touches[0].clientY },
|
|
69
|
-
|
|
68
|
+
const u = { x: s.touches[0].clientX, y: s.touches[0].clientY }, g = { x: s.touches[1].clientX, y: s.touches[1].clientY };
|
|
69
|
+
i.current = Ie(u, g), r.current = Fe(u, g), d.current = n.currentScale;
|
|
70
70
|
}
|
|
71
71
|
}, f = (s) => {
|
|
72
72
|
if (s.touches.length !== 2) return;
|
|
73
73
|
s.preventDefault();
|
|
74
|
-
const u = { x: s.touches[0].clientX, y: s.touches[0].clientY },
|
|
75
|
-
if (
|
|
76
|
-
const
|
|
77
|
-
Math.max(n.currentScale *
|
|
74
|
+
const u = { x: s.touches[0].clientX, y: s.touches[0].clientY }, g = { x: s.touches[1].clientX, y: s.touches[1].clientY }, h = Ie(u, g), p = Fe(u, g);
|
|
75
|
+
if (i.current !== null && r.current !== null) {
|
|
76
|
+
const w = h / i.current, R = Math.min(
|
|
77
|
+
Math.max(n.currentScale * w, n.minScale),
|
|
78
78
|
n.maxScale
|
|
79
|
-
),
|
|
80
|
-
x: (M - n.currentPosition.x) /
|
|
81
|
-
y: (
|
|
82
|
-
},
|
|
83
|
-
x: M -
|
|
84
|
-
y:
|
|
79
|
+
), F = o.getBoundingClientRect(), M = p.x - F.left, k = p.y - F.top, Y = n.currentScale, T = {
|
|
80
|
+
x: (M - n.currentPosition.x) / Y,
|
|
81
|
+
y: (k - n.currentPosition.y) / Y
|
|
82
|
+
}, X = p.x - r.current.x, j = p.y - r.current.y, oe = {
|
|
83
|
+
x: M - T.x * R + X,
|
|
84
|
+
y: k - T.y * R + j
|
|
85
85
|
};
|
|
86
|
-
n.onScaleChange(
|
|
86
|
+
n.onScaleChange(R, oe), i.current = h, r.current = p;
|
|
87
87
|
}
|
|
88
|
-
},
|
|
89
|
-
s.touches.length < 2 && (
|
|
88
|
+
}, a = (s) => {
|
|
89
|
+
s.touches.length < 2 && (i.current = null, r.current = null);
|
|
90
90
|
};
|
|
91
|
-
return
|
|
92
|
-
|
|
91
|
+
return o.addEventListener("touchstart", x, { passive: !1 }), o.addEventListener("touchmove", f, { passive: !1 }), o.addEventListener("touchend", a), () => {
|
|
92
|
+
o.removeEventListener("touchstart", x), o.removeEventListener("touchmove", f), o.removeEventListener("touchend", a);
|
|
93
93
|
};
|
|
94
94
|
}, [t, n]);
|
|
95
95
|
}
|
|
96
|
-
const
|
|
96
|
+
const St = {
|
|
97
97
|
canvasBackground: "#1a1a1a",
|
|
98
98
|
stageColor: "#808080",
|
|
99
99
|
seatAvailable: "#2C2B30",
|
|
@@ -103,25 +103,25 @@ const yt = {
|
|
|
103
103
|
seatHidden: "#4a4a4a",
|
|
104
104
|
gridLines: "#404040",
|
|
105
105
|
currency: "KD"
|
|
106
|
-
},
|
|
106
|
+
}, Te = re(({ seat: t, state: n, colors: i, onClick: r, onMouseEnter: d, onMouseLeave: c }) => {
|
|
107
107
|
const f = {
|
|
108
|
-
available:
|
|
109
|
-
reserved:
|
|
110
|
-
selected:
|
|
111
|
-
unavailable:
|
|
112
|
-
hidden:
|
|
108
|
+
available: i.seatAvailable,
|
|
109
|
+
reserved: i.seatReserved,
|
|
110
|
+
selected: i.seatSelected,
|
|
111
|
+
unavailable: i.seatUnavailable,
|
|
112
|
+
hidden: i.seatHidden
|
|
113
113
|
// Hidden seats are filtered out, but included for type safety
|
|
114
|
-
}[n],
|
|
115
|
-
|
|
116
|
-
}, [t, r,
|
|
117
|
-
d(t,
|
|
118
|
-
const
|
|
119
|
-
|
|
120
|
-
}, [t, d,
|
|
121
|
-
|
|
122
|
-
const
|
|
123
|
-
|
|
124
|
-
}, [
|
|
114
|
+
}[n], a = n === "available" || n === "selected", s = I(() => {
|
|
115
|
+
a && r(t);
|
|
116
|
+
}, [t, r, a]), u = I((p) => {
|
|
117
|
+
d(t, p);
|
|
118
|
+
const w = p.target.getStage();
|
|
119
|
+
w && a && (w.container().style.cursor = "pointer");
|
|
120
|
+
}, [t, d, a]), g = I((p) => {
|
|
121
|
+
c();
|
|
122
|
+
const w = p.target.getStage();
|
|
123
|
+
w && (w.container().style.cursor = "grab");
|
|
124
|
+
}, [c]), h = {
|
|
125
125
|
x: t.position.x,
|
|
126
126
|
y: t.position.y,
|
|
127
127
|
fill: f,
|
|
@@ -130,18 +130,18 @@ const yt = {
|
|
|
130
130
|
onClick: s,
|
|
131
131
|
onTap: s,
|
|
132
132
|
onMouseEnter: u,
|
|
133
|
-
onMouseLeave:
|
|
133
|
+
onMouseLeave: g
|
|
134
134
|
};
|
|
135
135
|
return t.shape === "circle" ? /* @__PURE__ */ y(
|
|
136
|
-
|
|
136
|
+
ft,
|
|
137
137
|
{
|
|
138
|
-
...
|
|
138
|
+
...h,
|
|
139
139
|
radius: 12
|
|
140
140
|
}
|
|
141
141
|
) : /* @__PURE__ */ y(
|
|
142
|
-
|
|
142
|
+
De,
|
|
143
143
|
{
|
|
144
|
-
...
|
|
144
|
+
...h,
|
|
145
145
|
width: 24,
|
|
146
146
|
height: 24,
|
|
147
147
|
offsetX: 12,
|
|
@@ -150,9 +150,9 @@ const yt = {
|
|
|
150
150
|
}
|
|
151
151
|
);
|
|
152
152
|
});
|
|
153
|
-
|
|
154
|
-
const
|
|
155
|
-
const
|
|
153
|
+
Te.displayName = "ViewerSeat";
|
|
154
|
+
const ze = re(({ stage: t, stageColor: n }) => {
|
|
155
|
+
const i = (c) => ({
|
|
156
156
|
stage: "🎭",
|
|
157
157
|
table: "⬜",
|
|
158
158
|
wall: "▬",
|
|
@@ -161,10 +161,10 @@ const Ae = se(({ stage: t, stageColor: n }) => {
|
|
|
161
161
|
bar: "🍷",
|
|
162
162
|
"entry-exit": "🚪",
|
|
163
163
|
custom: "➕"
|
|
164
|
-
})[
|
|
165
|
-
return /* @__PURE__ */
|
|
164
|
+
})[c || "stage"] || "🎭", r = t.config.color || n, d = i(t.config.objectType);
|
|
165
|
+
return /* @__PURE__ */ D(ht, { x: t.position.x, y: t.position.y, rotation: t.config.rotation || 0, children: [
|
|
166
166
|
/* @__PURE__ */ y(
|
|
167
|
-
|
|
167
|
+
De,
|
|
168
168
|
{
|
|
169
169
|
width: t.config.width,
|
|
170
170
|
height: t.config.height,
|
|
@@ -175,7 +175,7 @@ const Ae = se(({ stage: t, stageColor: n }) => {
|
|
|
175
175
|
}
|
|
176
176
|
),
|
|
177
177
|
/* @__PURE__ */ y(
|
|
178
|
-
|
|
178
|
+
Ee,
|
|
179
179
|
{
|
|
180
180
|
text: d,
|
|
181
181
|
x: 0,
|
|
@@ -189,7 +189,7 @@ const Ae = se(({ stage: t, stageColor: n }) => {
|
|
|
189
189
|
}
|
|
190
190
|
),
|
|
191
191
|
/* @__PURE__ */ y(
|
|
192
|
-
|
|
192
|
+
Ee,
|
|
193
193
|
{
|
|
194
194
|
text: t.config.label,
|
|
195
195
|
x: 0,
|
|
@@ -205,20 +205,20 @@ const Ae = se(({ stage: t, stageColor: n }) => {
|
|
|
205
205
|
)
|
|
206
206
|
] });
|
|
207
207
|
});
|
|
208
|
-
|
|
209
|
-
const
|
|
208
|
+
ze.displayName = "ViewerStage";
|
|
209
|
+
const Ae = re(({
|
|
210
210
|
floors: t,
|
|
211
211
|
currentFloorId: n,
|
|
212
|
-
onFloorChange:
|
|
212
|
+
onFloorChange: i,
|
|
213
213
|
showAllOption: r,
|
|
214
214
|
allLabel: d,
|
|
215
|
-
position:
|
|
216
|
-
className:
|
|
215
|
+
position: c,
|
|
216
|
+
className: o
|
|
217
217
|
}) => {
|
|
218
|
-
const
|
|
219
|
-
() => [...t].sort((
|
|
218
|
+
const x = $(
|
|
219
|
+
() => [...t].sort((g, h) => g.order - h.order),
|
|
220
220
|
[t]
|
|
221
|
-
),
|
|
221
|
+
), a = {
|
|
222
222
|
position: "absolute",
|
|
223
223
|
display: "flex",
|
|
224
224
|
alignItems: "center",
|
|
@@ -233,7 +233,7 @@ const Xe = se(({
|
|
|
233
233
|
"top-right": { top: 0, right: 0 },
|
|
234
234
|
"bottom-left": { bottom: 0, left: 0 },
|
|
235
235
|
"bottom-right": { bottom: 0, right: 0 }
|
|
236
|
-
}[
|
|
236
|
+
}[c]
|
|
237
237
|
}, s = {
|
|
238
238
|
padding: "10px 16px",
|
|
239
239
|
fontSize: "14px",
|
|
@@ -251,37 +251,37 @@ const Xe = se(({
|
|
|
251
251
|
backgroundColor: "#3A7DE5",
|
|
252
252
|
borderColor: "#3A7DE5"
|
|
253
253
|
};
|
|
254
|
-
return /* @__PURE__ */
|
|
254
|
+
return /* @__PURE__ */ D("div", { className: o, style: a, children: [
|
|
255
255
|
r && /* @__PURE__ */ y(
|
|
256
256
|
"button",
|
|
257
257
|
{
|
|
258
258
|
type: "button",
|
|
259
|
-
onClick: () =>
|
|
259
|
+
onClick: () => i(null),
|
|
260
260
|
style: n === null ? u : s,
|
|
261
261
|
children: d
|
|
262
262
|
}
|
|
263
263
|
),
|
|
264
|
-
|
|
264
|
+
x.map((g) => /* @__PURE__ */ y(
|
|
265
265
|
"button",
|
|
266
266
|
{
|
|
267
267
|
type: "button",
|
|
268
|
-
onClick: () =>
|
|
269
|
-
style: n ===
|
|
270
|
-
children:
|
|
268
|
+
onClick: () => i(g.id),
|
|
269
|
+
style: n === g.id ? u : s,
|
|
270
|
+
children: g.name
|
|
271
271
|
},
|
|
272
|
-
|
|
272
|
+
g.id
|
|
273
273
|
))
|
|
274
274
|
] });
|
|
275
275
|
});
|
|
276
|
-
|
|
277
|
-
const
|
|
276
|
+
Ae.displayName = "FloorSelectorBar";
|
|
277
|
+
const Xe = re(({
|
|
278
278
|
scale: t,
|
|
279
279
|
minScale: n,
|
|
280
|
-
maxScale:
|
|
280
|
+
maxScale: i,
|
|
281
281
|
onZoomIn: r,
|
|
282
282
|
onZoomOut: d,
|
|
283
|
-
position:
|
|
284
|
-
className:
|
|
283
|
+
position: c,
|
|
284
|
+
className: o
|
|
285
285
|
}) => {
|
|
286
286
|
const f = {
|
|
287
287
|
position: "absolute",
|
|
@@ -298,8 +298,8 @@ const Ye = se(({
|
|
|
298
298
|
"top-right": { top: 0, right: 0 },
|
|
299
299
|
"bottom-left": { bottom: 0, left: 0 },
|
|
300
300
|
"bottom-right": { bottom: 0, right: 0 }
|
|
301
|
-
}[
|
|
302
|
-
},
|
|
301
|
+
}[c]
|
|
302
|
+
}, a = {
|
|
303
303
|
width: "44px",
|
|
304
304
|
height: "44px",
|
|
305
305
|
minWidth: "44px",
|
|
@@ -317,18 +317,18 @@ const Ye = se(({
|
|
|
317
317
|
transition: "all 0.2s ease",
|
|
318
318
|
touchAction: "manipulation"
|
|
319
319
|
}, s = {
|
|
320
|
-
...
|
|
320
|
+
...a,
|
|
321
321
|
opacity: 0.4,
|
|
322
322
|
cursor: "not-allowed"
|
|
323
|
-
}, u = t <
|
|
324
|
-
return /* @__PURE__ */
|
|
323
|
+
}, u = t < i, g = t > n;
|
|
324
|
+
return /* @__PURE__ */ D("div", { className: o, style: f, children: [
|
|
325
325
|
/* @__PURE__ */ y(
|
|
326
326
|
"button",
|
|
327
327
|
{
|
|
328
328
|
type: "button",
|
|
329
329
|
onClick: r,
|
|
330
330
|
disabled: !u,
|
|
331
|
-
style: u ?
|
|
331
|
+
style: u ? a : s,
|
|
332
332
|
title: "Zoom In",
|
|
333
333
|
children: "+"
|
|
334
334
|
}
|
|
@@ -338,28 +338,28 @@ const Ye = se(({
|
|
|
338
338
|
{
|
|
339
339
|
type: "button",
|
|
340
340
|
onClick: d,
|
|
341
|
-
disabled: !
|
|
342
|
-
style:
|
|
341
|
+
disabled: !g,
|
|
342
|
+
style: g ? a : s,
|
|
343
343
|
title: "Zoom Out",
|
|
344
344
|
children: "−"
|
|
345
345
|
}
|
|
346
346
|
)
|
|
347
347
|
] });
|
|
348
348
|
});
|
|
349
|
-
|
|
350
|
-
const
|
|
349
|
+
Xe.displayName = "ZoomControls";
|
|
350
|
+
const Ye = re(({
|
|
351
351
|
visible: t,
|
|
352
352
|
x: n,
|
|
353
|
-
y:
|
|
353
|
+
y: i,
|
|
354
354
|
seat: r,
|
|
355
355
|
currency: d,
|
|
356
|
-
state:
|
|
356
|
+
state: c
|
|
357
357
|
}) => {
|
|
358
358
|
if (!t || !r) return null;
|
|
359
|
-
const
|
|
359
|
+
const o = r.seatNumber || (r.rowLabel && r.columnLabel ? `${r.rowLabel}-${r.columnLabel}` : "N/A"), x = {
|
|
360
360
|
position: "fixed",
|
|
361
361
|
left: `${n + 15}px`,
|
|
362
|
-
top: `${
|
|
362
|
+
top: `${i + 15}px`,
|
|
363
363
|
zIndex: 1e3,
|
|
364
364
|
pointerEvents: "none"
|
|
365
365
|
}, f = {
|
|
@@ -371,7 +371,7 @@ const je = se(({
|
|
|
371
371
|
fontSize: "13px",
|
|
372
372
|
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
|
|
373
373
|
minWidth: "140px"
|
|
374
|
-
},
|
|
374
|
+
}, a = {
|
|
375
375
|
color: "#9ca3af",
|
|
376
376
|
marginRight: "4px"
|
|
377
377
|
}, s = {
|
|
@@ -379,499 +379,532 @@ const je = se(({
|
|
|
379
379
|
}, u = {
|
|
380
380
|
color: "#4ade80",
|
|
381
381
|
fontWeight: 600
|
|
382
|
-
},
|
|
382
|
+
}, g = {
|
|
383
383
|
fontSize: "11px",
|
|
384
384
|
color: "#6b7280",
|
|
385
385
|
textTransform: "capitalize",
|
|
386
386
|
marginTop: "4px"
|
|
387
387
|
};
|
|
388
|
-
return /* @__PURE__ */ y("div", { style:
|
|
389
|
-
r.sectionName && /* @__PURE__ */
|
|
390
|
-
/* @__PURE__ */ y("span", { style:
|
|
388
|
+
return /* @__PURE__ */ y("div", { style: x, children: /* @__PURE__ */ D("div", { style: f, children: [
|
|
389
|
+
r.sectionName && /* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
|
|
390
|
+
/* @__PURE__ */ y("span", { style: a, children: "Section:" }),
|
|
391
391
|
/* @__PURE__ */ y("span", { style: { ...s, color: "#3b82f6" }, children: r.sectionName })
|
|
392
392
|
] }),
|
|
393
|
-
/* @__PURE__ */
|
|
394
|
-
/* @__PURE__ */ y("span", { style:
|
|
395
|
-
/* @__PURE__ */ y("span", { style: s, children:
|
|
393
|
+
/* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
|
|
394
|
+
/* @__PURE__ */ y("span", { style: a, children: "Seat:" }),
|
|
395
|
+
/* @__PURE__ */ y("span", { style: s, children: o })
|
|
396
396
|
] }),
|
|
397
|
-
r.price !== void 0 && r.price > 0 &&
|
|
398
|
-
/* @__PURE__ */ y("span", { style:
|
|
399
|
-
/* @__PURE__ */
|
|
397
|
+
r.price !== void 0 && r.price > 0 && c === "available" && /* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
|
|
398
|
+
/* @__PURE__ */ y("span", { style: a, children: "Price:" }),
|
|
399
|
+
/* @__PURE__ */ D("span", { style: u, children: [
|
|
400
400
|
d,
|
|
401
401
|
" ",
|
|
402
402
|
r.price.toFixed(2)
|
|
403
403
|
] })
|
|
404
404
|
] }),
|
|
405
|
-
/* @__PURE__ */
|
|
405
|
+
/* @__PURE__ */ D("div", { style: g, children: [
|
|
406
406
|
"Status: ",
|
|
407
|
-
|
|
407
|
+
c
|
|
408
408
|
] })
|
|
409
409
|
] }) });
|
|
410
410
|
});
|
|
411
|
-
|
|
412
|
-
const
|
|
411
|
+
Ye.displayName = "SeatTooltip";
|
|
412
|
+
const It = ({
|
|
413
413
|
config: t,
|
|
414
414
|
configUrl: n,
|
|
415
|
-
floorId:
|
|
415
|
+
floorId: i,
|
|
416
416
|
onFloorChange: r,
|
|
417
417
|
reservedSeats: d = [],
|
|
418
|
-
unavailableSeats:
|
|
419
|
-
selectedSeats:
|
|
420
|
-
myReservedSeats:
|
|
418
|
+
unavailableSeats: c = [],
|
|
419
|
+
selectedSeats: o,
|
|
420
|
+
myReservedSeats: x = [],
|
|
421
421
|
onSeatSelect: f,
|
|
422
|
-
onSeatDeselect:
|
|
422
|
+
onSeatDeselect: a,
|
|
423
423
|
onSelectionChange: s,
|
|
424
424
|
colorOverrides: u,
|
|
425
|
-
showTooltip:
|
|
426
|
-
zoomEnabled:
|
|
427
|
-
className:
|
|
428
|
-
onConfigLoad:
|
|
429
|
-
onError:
|
|
425
|
+
showTooltip: g = !0,
|
|
426
|
+
zoomEnabled: h = !0,
|
|
427
|
+
className: p = "",
|
|
428
|
+
onConfigLoad: w,
|
|
429
|
+
onError: R,
|
|
430
430
|
// Floor selector props
|
|
431
|
-
showFloorSelector:
|
|
431
|
+
showFloorSelector: F,
|
|
432
432
|
floorSelectorPosition: M = "top-left",
|
|
433
|
-
floorSelectorClassName:
|
|
434
|
-
showAllFloorsOption:
|
|
435
|
-
allFloorsLabel:
|
|
436
|
-
fitToView:
|
|
437
|
-
fitPadding:
|
|
433
|
+
floorSelectorClassName: k,
|
|
434
|
+
showAllFloorsOption: Y = !0,
|
|
435
|
+
allFloorsLabel: T = "All",
|
|
436
|
+
fitToView: X = !0,
|
|
437
|
+
fitPadding: j = 40,
|
|
438
438
|
// Zoom controls
|
|
439
|
-
showZoomControls:
|
|
440
|
-
zoomControlsPosition:
|
|
441
|
-
zoomControlsClassName:
|
|
442
|
-
minZoom:
|
|
443
|
-
maxZoom:
|
|
444
|
-
zoomStep:
|
|
439
|
+
showZoomControls: oe = !0,
|
|
440
|
+
zoomControlsPosition: je = "bottom-right",
|
|
441
|
+
zoomControlsClassName: Pe,
|
|
442
|
+
minZoom: xe,
|
|
443
|
+
maxZoom: B = 3,
|
|
444
|
+
zoomStep: ie = 0.25,
|
|
445
445
|
// Touch gestures
|
|
446
|
-
touchEnabled:
|
|
446
|
+
touchEnabled: We = !0
|
|
447
447
|
}) => {
|
|
448
|
-
const
|
|
449
|
-
|
|
450
|
-
}, [
|
|
451
|
-
() =>
|
|
452
|
-
[
|
|
453
|
-
),
|
|
454
|
-
if (!
|
|
455
|
-
let e =
|
|
456
|
-
return
|
|
457
|
-
(
|
|
448
|
+
const fe = A(null), we = A(null), E = bt(we), [O, Ce] = N(/* @__PURE__ */ new Set()), [L, G] = N(1), [z, H] = N({ x: 0, y: 0 }), [Be, Ue] = N(null), [$e, He] = N(1), se = A({ width: 0, height: 0 }), [Z, Re] = N({ visible: !1, x: 0, y: 0, seat: null, state: "available" }), { config: Ve, loading: Oe, error: K } = vt(n), v = t || Ve, ge = i !== void 0, P = ge ? i || null : Be, ae = o !== void 0, _e = I((e) => {
|
|
449
|
+
ge || Ue(e), r?.(e);
|
|
450
|
+
}, [ge, r]), pe = v?.floors || [], qe = F !== void 0 ? F : pe.length > 1, ce = $(
|
|
451
|
+
() => v ? { ...v.colors, ...u } : { ...St, ...u },
|
|
452
|
+
[v, u]
|
|
453
|
+
), _ = $(() => {
|
|
454
|
+
if (!v) return [];
|
|
455
|
+
let e = v.seats.filter((l) => l.state !== "hidden");
|
|
456
|
+
return P && (e = e.filter(
|
|
457
|
+
(l) => l.floorId === P || !l.floorId && P === "floor_default"
|
|
458
458
|
)), e;
|
|
459
|
-
}, [
|
|
460
|
-
(e) => e.floorId ===
|
|
461
|
-
) :
|
|
462
|
-
if (!
|
|
459
|
+
}, [v, P]), le = $(() => v?.stages ? P ? v.stages.filter(
|
|
460
|
+
(e) => e.floorId === P || !e.floorId && P === "floor_default"
|
|
461
|
+
) : v.stages : [], [v, P]), U = $(() => {
|
|
462
|
+
if (!v || _.length === 0 && le.length === 0)
|
|
463
463
|
return null;
|
|
464
464
|
const e = 12;
|
|
465
|
-
let
|
|
466
|
-
return
|
|
467
|
-
|
|
468
|
-
}),
|
|
469
|
-
|
|
470
|
-
}), { minX:
|
|
471
|
-
}, [
|
|
472
|
-
|
|
473
|
-
if (!
|
|
474
|
-
const e = Math.abs(E.width -
|
|
475
|
-
if (!(
|
|
476
|
-
|
|
477
|
-
const
|
|
478
|
-
|
|
479
|
-
}, [
|
|
480
|
-
const
|
|
481
|
-
const e = new Set(d),
|
|
482
|
-
return { reserved: e, unavailable:
|
|
483
|
-
}, [d,
|
|
484
|
-
const
|
|
485
|
-
return
|
|
486
|
-
}, [
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
}, [
|
|
490
|
-
|
|
491
|
-
}, [
|
|
492
|
-
|
|
493
|
-
}, [
|
|
494
|
-
const
|
|
495
|
-
const
|
|
496
|
-
if (
|
|
465
|
+
let l = 1 / 0, b = 1 / 0, S = -1 / 0, m = -1 / 0;
|
|
466
|
+
return _.forEach((C) => {
|
|
467
|
+
l = Math.min(l, C.position.x - e), b = Math.min(b, C.position.y - e), S = Math.max(S, C.position.x + e), m = Math.max(m, C.position.y + e);
|
|
468
|
+
}), le.forEach((C) => {
|
|
469
|
+
l = Math.min(l, C.position.x), b = Math.min(b, C.position.y), S = Math.max(S, C.position.x + (C.config?.width || 200)), m = Math.max(m, C.position.y + (C.config?.height || 100));
|
|
470
|
+
}), { minX: l, minY: b, maxX: S, maxY: m, width: S - l, height: m - b };
|
|
471
|
+
}, [v, _, le]);
|
|
472
|
+
W(() => {
|
|
473
|
+
if (!X || !v || !U || E.width === 0 || E.height === 0) return;
|
|
474
|
+
const e = Math.abs(E.width - se.current.width), l = Math.abs(E.height - se.current.height);
|
|
475
|
+
if (!(se.current.width === 0) && e < 10 && l < 10) return;
|
|
476
|
+
se.current = E;
|
|
477
|
+
const S = E.width, m = E.height, C = S - j * 2, ee = m - j * 2, de = C / U.width, be = ee / U.height, ue = Math.min(de, be, B), ot = U.minX + U.width / 2, it = U.minY + U.height / 2, st = S / 2, at = m / 2, ct = st - ot * ue, lt = at - it * ue;
|
|
478
|
+
G(ue), H({ x: ct, y: lt }), He(ue);
|
|
479
|
+
}, [X, v, U, j, B, E, P]);
|
|
480
|
+
const V = $(() => {
|
|
481
|
+
const e = new Set(d), l = new Set(c), b = new Set(x);
|
|
482
|
+
return { reserved: e, unavailable: l, myReserved: b };
|
|
483
|
+
}, [d, c, x]), ve = $(() => o ? new Set(o) : null, [o]), J = I((e) => {
|
|
484
|
+
const l = e.id, b = e.seatNumber || "";
|
|
485
|
+
return V.unavailable.has(l) || V.unavailable.has(b) ? "unavailable" : V.reserved.has(l) || V.reserved.has(b) ? "reserved" : V.myReserved.has(l) || V.myReserved.has(b) || O.has(l) ? "selected" : e.state;
|
|
486
|
+
}, [V, O]);
|
|
487
|
+
W(() => {
|
|
488
|
+
v && w && w(v);
|
|
489
|
+
}, [v, w]), W(() => {
|
|
490
|
+
K && R && R(K);
|
|
491
|
+
}, [K, R]), W(() => {
|
|
492
|
+
ae && ve && Ce(ve);
|
|
493
|
+
}, [ae, ve]);
|
|
494
|
+
const Ge = I((e) => {
|
|
495
|
+
const l = J(e);
|
|
496
|
+
if (l !== "available" && l !== "selected")
|
|
497
497
|
return;
|
|
498
|
-
const
|
|
499
|
-
|
|
500
|
-
const
|
|
501
|
-
return
|
|
502
|
-
}),
|
|
503
|
-
}, [
|
|
504
|
-
|
|
505
|
-
s?.(
|
|
506
|
-
}, [
|
|
507
|
-
const
|
|
508
|
-
if (!
|
|
509
|
-
const e = Math.min(
|
|
510
|
-
if (e !==
|
|
511
|
-
const
|
|
512
|
-
x: (
|
|
513
|
-
y: (
|
|
498
|
+
const b = O.has(e.id);
|
|
499
|
+
ae || Ce((S) => {
|
|
500
|
+
const m = new Set(S);
|
|
501
|
+
return b ? m.delete(e.id) : m.add(e.id), m;
|
|
502
|
+
}), b ? a?.(e) : (f?.(e), f || console.log("Seat selected:", e));
|
|
503
|
+
}, [J, O, ae, f, a]), Q = $(() => v ? _.filter((e) => O.has(e.id)) : [], [_, O]);
|
|
504
|
+
W(() => {
|
|
505
|
+
s?.(Q);
|
|
506
|
+
}, [Q, s]);
|
|
507
|
+
const q = xe !== void 0 ? xe : $e, Ze = I(() => {
|
|
508
|
+
if (!h) return;
|
|
509
|
+
const e = Math.min(L + ie, B);
|
|
510
|
+
if (e !== L) {
|
|
511
|
+
const l = E.width || v?.canvas.width || 800, b = E.height || v?.canvas.height || 600, S = l / 2, m = b / 2, C = {
|
|
512
|
+
x: (S - z.x) / L,
|
|
513
|
+
y: (m - z.y) / L
|
|
514
514
|
};
|
|
515
|
-
|
|
516
|
-
x:
|
|
517
|
-
y:
|
|
515
|
+
G(e), H({
|
|
516
|
+
x: S - C.x * e,
|
|
517
|
+
y: m - C.y * e
|
|
518
518
|
});
|
|
519
519
|
}
|
|
520
|
-
}, [
|
|
521
|
-
if (!
|
|
522
|
-
const e = Math.max(
|
|
523
|
-
if (e !==
|
|
524
|
-
const
|
|
525
|
-
x: (
|
|
526
|
-
y: (
|
|
520
|
+
}, [h, L, ie, B, E, v, z]), Ke = I(() => {
|
|
521
|
+
if (!h) return;
|
|
522
|
+
const e = Math.max(L - ie, q);
|
|
523
|
+
if (e !== L) {
|
|
524
|
+
const l = E.width || v?.canvas.width || 800, b = E.height || v?.canvas.height || 600, S = l / 2, m = b / 2, C = {
|
|
525
|
+
x: (S - z.x) / L,
|
|
526
|
+
y: (m - z.y) / L
|
|
527
527
|
};
|
|
528
|
-
|
|
529
|
-
x:
|
|
530
|
-
y:
|
|
528
|
+
G(e), H({
|
|
529
|
+
x: S - C.x * e,
|
|
530
|
+
y: m - C.y * e
|
|
531
531
|
});
|
|
532
532
|
}
|
|
533
|
-
}, [
|
|
534
|
-
|
|
533
|
+
}, [h, L, ie, q, E, v, z]), Je = I((e) => {
|
|
534
|
+
H({
|
|
535
535
|
x: e.target.x(),
|
|
536
536
|
y: e.target.y()
|
|
537
537
|
});
|
|
538
|
-
}, []),
|
|
539
|
-
if (!
|
|
538
|
+
}, []), Qe = I((e) => {
|
|
539
|
+
if (!h) return;
|
|
540
540
|
e.evt.preventDefault();
|
|
541
|
-
const
|
|
542
|
-
if (!
|
|
543
|
-
const
|
|
544
|
-
if (!
|
|
545
|
-
const
|
|
546
|
-
x: (
|
|
547
|
-
y: (
|
|
548
|
-
},
|
|
549
|
-
x:
|
|
550
|
-
y:
|
|
541
|
+
const l = fe.current;
|
|
542
|
+
if (!l) return;
|
|
543
|
+
const b = l.scaleX(), S = l.getPointerPosition();
|
|
544
|
+
if (!S) return;
|
|
545
|
+
const m = 1.1, C = e.evt.deltaY > 0 ? b / m : b * m, ee = Math.min(Math.max(C, q), B), de = {
|
|
546
|
+
x: (S.x - z.x) / b,
|
|
547
|
+
y: (S.y - z.y) / b
|
|
548
|
+
}, be = {
|
|
549
|
+
x: S.x - de.x * ee,
|
|
550
|
+
y: S.y - de.y * ee
|
|
551
551
|
};
|
|
552
|
-
|
|
553
|
-
}, [
|
|
554
|
-
|
|
555
|
-
enabled:
|
|
556
|
-
minScale:
|
|
557
|
-
maxScale:
|
|
558
|
-
currentScale:
|
|
559
|
-
currentPosition:
|
|
560
|
-
onScaleChange: (e,
|
|
561
|
-
|
|
552
|
+
G(ee), H(be);
|
|
553
|
+
}, [h, z, q, B]);
|
|
554
|
+
yt(fe, {
|
|
555
|
+
enabled: We && h,
|
|
556
|
+
minScale: q,
|
|
557
|
+
maxScale: B,
|
|
558
|
+
currentScale: L,
|
|
559
|
+
currentPosition: z,
|
|
560
|
+
onScaleChange: (e, l) => {
|
|
561
|
+
G(e), H(l);
|
|
562
562
|
},
|
|
563
563
|
onPositionChange: (e) => {
|
|
564
|
-
|
|
564
|
+
H(e);
|
|
565
565
|
}
|
|
566
566
|
});
|
|
567
|
-
const
|
|
568
|
-
if (!
|
|
569
|
-
const
|
|
570
|
-
if (!p) return;
|
|
571
|
-
const b = p.getPointerPosition();
|
|
567
|
+
const et = I((e, l) => {
|
|
568
|
+
if (!g) return;
|
|
569
|
+
const b = l.target.getStage();
|
|
572
570
|
if (!b) return;
|
|
573
|
-
const
|
|
574
|
-
|
|
571
|
+
const S = b.getPointerPosition();
|
|
572
|
+
if (!S) return;
|
|
573
|
+
const m = b.container().getBoundingClientRect();
|
|
574
|
+
Re({
|
|
575
575
|
visible: !0,
|
|
576
|
-
x:
|
|
577
|
-
y:
|
|
576
|
+
x: m.left + S.x,
|
|
577
|
+
y: m.top + S.y,
|
|
578
578
|
seat: e,
|
|
579
|
-
state:
|
|
579
|
+
state: J(e)
|
|
580
580
|
});
|
|
581
|
-
}, [
|
|
582
|
-
|
|
581
|
+
}, [g, J]), tt = I(() => {
|
|
582
|
+
Re((e) => ({ ...e, visible: !1 }));
|
|
583
583
|
}, []);
|
|
584
|
-
if (
|
|
585
|
-
return /* @__PURE__ */ y("div", { className: `flex items-center justify-center h-full ${
|
|
586
|
-
if (
|
|
587
|
-
return /* @__PURE__ */ y("div", { className: `flex items-center justify-center h-full ${
|
|
584
|
+
if (Oe)
|
|
585
|
+
return /* @__PURE__ */ y("div", { className: `flex items-center justify-center h-full ${p}`, children: /* @__PURE__ */ y("p", { children: "Loading seat map..." }) });
|
|
586
|
+
if (K)
|
|
587
|
+
return /* @__PURE__ */ y("div", { className: `flex items-center justify-center h-full ${p}`, children: /* @__PURE__ */ D("p", { className: "text-red-500", children: [
|
|
588
588
|
"Error loading seat map: ",
|
|
589
|
-
|
|
589
|
+
K.message
|
|
590
590
|
] }) });
|
|
591
|
-
if (!
|
|
592
|
-
return /* @__PURE__ */ y("div", { className: `flex items-center justify-center h-full ${
|
|
593
|
-
const
|
|
594
|
-
return /* @__PURE__ */
|
|
591
|
+
if (!v)
|
|
592
|
+
return /* @__PURE__ */ y("div", { className: `flex items-center justify-center h-full ${p}`, children: /* @__PURE__ */ y("p", { children: "No configuration provided" }) });
|
|
593
|
+
const nt = E.width || v.canvas.width, rt = E.height || v.canvas.height;
|
|
594
|
+
return /* @__PURE__ */ D(
|
|
595
595
|
"div",
|
|
596
596
|
{
|
|
597
|
-
ref:
|
|
598
|
-
className: `relative ${
|
|
597
|
+
ref: we,
|
|
598
|
+
className: `relative ${p}`,
|
|
599
599
|
style: { width: "100%", height: "100%" },
|
|
600
600
|
children: [
|
|
601
|
-
|
|
602
|
-
|
|
601
|
+
qe && pe.length > 0 && /* @__PURE__ */ y(
|
|
602
|
+
Ae,
|
|
603
603
|
{
|
|
604
|
-
floors:
|
|
605
|
-
currentFloorId:
|
|
606
|
-
onFloorChange:
|
|
607
|
-
showAllOption:
|
|
608
|
-
allLabel:
|
|
604
|
+
floors: pe,
|
|
605
|
+
currentFloorId: P,
|
|
606
|
+
onFloorChange: _e,
|
|
607
|
+
showAllOption: Y,
|
|
608
|
+
allLabel: T,
|
|
609
609
|
position: M,
|
|
610
|
-
className:
|
|
610
|
+
className: k
|
|
611
611
|
}
|
|
612
612
|
),
|
|
613
|
-
/* @__PURE__ */
|
|
614
|
-
|
|
613
|
+
/* @__PURE__ */ D(
|
|
614
|
+
ut,
|
|
615
615
|
{
|
|
616
|
-
ref:
|
|
617
|
-
width:
|
|
618
|
-
height:
|
|
619
|
-
scaleX:
|
|
620
|
-
scaleY:
|
|
621
|
-
x:
|
|
622
|
-
y:
|
|
616
|
+
ref: fe,
|
|
617
|
+
width: nt,
|
|
618
|
+
height: rt,
|
|
619
|
+
scaleX: L,
|
|
620
|
+
scaleY: L,
|
|
621
|
+
x: z.x,
|
|
622
|
+
y: z.y,
|
|
623
623
|
draggable: !0,
|
|
624
624
|
onDragEnd: Je,
|
|
625
|
-
onWheel:
|
|
626
|
-
style: { backgroundColor:
|
|
625
|
+
onWheel: Qe,
|
|
626
|
+
style: { backgroundColor: v.canvas.backgroundColor, cursor: "grab" },
|
|
627
627
|
children: [
|
|
628
|
-
/* @__PURE__ */ y(
|
|
629
|
-
|
|
628
|
+
/* @__PURE__ */ y(Me, { listening: !1, children: le.map((e) => /* @__PURE__ */ y(
|
|
629
|
+
ze,
|
|
630
630
|
{
|
|
631
631
|
stage: e,
|
|
632
|
-
stageColor:
|
|
632
|
+
stageColor: ce.stageColor
|
|
633
633
|
},
|
|
634
634
|
e.id
|
|
635
635
|
)) }),
|
|
636
|
-
/* @__PURE__ */ y(
|
|
637
|
-
|
|
636
|
+
/* @__PURE__ */ y(Me, { children: _.map((e) => /* @__PURE__ */ y(
|
|
637
|
+
Te,
|
|
638
638
|
{
|
|
639
639
|
seat: e,
|
|
640
|
-
state:
|
|
641
|
-
colors:
|
|
642
|
-
onClick:
|
|
643
|
-
onMouseEnter:
|
|
644
|
-
onMouseLeave:
|
|
640
|
+
state: J(e),
|
|
641
|
+
colors: ce,
|
|
642
|
+
onClick: Ge,
|
|
643
|
+
onMouseEnter: et,
|
|
644
|
+
onMouseLeave: tt
|
|
645
645
|
},
|
|
646
646
|
e.id
|
|
647
647
|
)) })
|
|
648
648
|
]
|
|
649
649
|
}
|
|
650
650
|
),
|
|
651
|
-
|
|
652
|
-
|
|
651
|
+
g && /* @__PURE__ */ y(
|
|
652
|
+
Ye,
|
|
653
653
|
{
|
|
654
|
-
visible:
|
|
655
|
-
x:
|
|
656
|
-
y:
|
|
657
|
-
seat:
|
|
658
|
-
currency:
|
|
659
|
-
state:
|
|
654
|
+
visible: Z.visible,
|
|
655
|
+
x: Z.x,
|
|
656
|
+
y: Z.y,
|
|
657
|
+
seat: Z.seat,
|
|
658
|
+
currency: ce.currency,
|
|
659
|
+
state: Z.state
|
|
660
660
|
}
|
|
661
661
|
),
|
|
662
|
-
|
|
663
|
-
|
|
662
|
+
oe && h && /* @__PURE__ */ y(
|
|
663
|
+
Xe,
|
|
664
664
|
{
|
|
665
|
-
scale:
|
|
666
|
-
minScale:
|
|
667
|
-
maxScale:
|
|
668
|
-
onZoomIn:
|
|
669
|
-
onZoomOut:
|
|
670
|
-
position:
|
|
671
|
-
className:
|
|
665
|
+
scale: L,
|
|
666
|
+
minScale: q,
|
|
667
|
+
maxScale: B,
|
|
668
|
+
onZoomIn: Ze,
|
|
669
|
+
onZoomOut: Ke,
|
|
670
|
+
position: je,
|
|
671
|
+
className: Pe
|
|
672
672
|
}
|
|
673
673
|
),
|
|
674
|
-
|
|
675
|
-
/* @__PURE__ */
|
|
674
|
+
Q.length > 0 && /* @__PURE__ */ D("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
|
|
675
|
+
/* @__PURE__ */ D("h3", { className: "font-semibold mb-2", children: [
|
|
676
676
|
"Selected Seats (",
|
|
677
|
-
|
|
677
|
+
Q.length,
|
|
678
678
|
")"
|
|
679
679
|
] }),
|
|
680
|
-
/* @__PURE__ */ y("div", { className: "max-h-48 overflow-y-auto space-y-1", children:
|
|
680
|
+
/* @__PURE__ */ y("div", { className: "max-h-48 overflow-y-auto space-y-1", children: Q.map((e) => /* @__PURE__ */ D("div", { className: "text-sm", children: [
|
|
681
681
|
e.seatNumber,
|
|
682
|
-
e.price && ` - ${
|
|
682
|
+
e.price && ` - ${ce.currency} ${e.price.toFixed(2)}`
|
|
683
683
|
] }, e.id)) })
|
|
684
684
|
] })
|
|
685
685
|
]
|
|
686
686
|
}
|
|
687
687
|
);
|
|
688
688
|
};
|
|
689
|
-
let
|
|
689
|
+
let ne = null;
|
|
690
690
|
function Ft(t) {
|
|
691
|
-
|
|
691
|
+
ne = t;
|
|
692
692
|
}
|
|
693
|
-
function
|
|
694
|
-
if (!
|
|
693
|
+
function Se() {
|
|
694
|
+
if (!ne)
|
|
695
695
|
throw new Error(
|
|
696
696
|
"Firebase database not initialized. Call initializeFirebaseForViewer(db) first."
|
|
697
697
|
);
|
|
698
|
-
return
|
|
698
|
+
return ne;
|
|
699
699
|
}
|
|
700
|
-
function
|
|
701
|
-
return
|
|
700
|
+
function me() {
|
|
701
|
+
return ne !== null;
|
|
702
702
|
}
|
|
703
|
-
function
|
|
704
|
-
|
|
703
|
+
function kt() {
|
|
704
|
+
ne = null;
|
|
705
705
|
}
|
|
706
|
-
function
|
|
706
|
+
function te(t, n) {
|
|
707
707
|
if (t.length !== n.length) return !1;
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
return !0;
|
|
711
|
-
}
|
|
712
|
-
function bt(t, n) {
|
|
713
|
-
return Se(t.myReserved, n.myReserved) && Se(t.otherReserved, n.otherReserved) && Se(t.unavailable, n.unavailable);
|
|
708
|
+
const i = [...t].sort(), r = [...n].sort();
|
|
709
|
+
return i.every((d, c) => d === r[c]);
|
|
714
710
|
}
|
|
715
|
-
function
|
|
716
|
-
const
|
|
717
|
-
return Object.entries(t).forEach(([
|
|
718
|
-
|
|
719
|
-
}), {
|
|
711
|
+
function ke(t, n) {
|
|
712
|
+
const i = [], r = [], d = [];
|
|
713
|
+
return Object.entries(t).forEach(([c, o]) => {
|
|
714
|
+
o && typeof o == "object" && o.state && (o.state === "unavailable" ? d.push(c) : o.state === "reserved" && (n && o.userId === n ? i.push(c) : r.push(c)));
|
|
715
|
+
}), {
|
|
716
|
+
myReserved: i.sort(),
|
|
717
|
+
otherReserved: r.sort(),
|
|
718
|
+
unavailable: d.sort()
|
|
719
|
+
};
|
|
720
720
|
}
|
|
721
|
+
const he = {
|
|
722
|
+
states: null,
|
|
723
|
+
loading: !0,
|
|
724
|
+
error: null,
|
|
725
|
+
lastUpdated: null,
|
|
726
|
+
myReservedSeats: [],
|
|
727
|
+
otherReservedSeats: [],
|
|
728
|
+
unavailableSeats: []
|
|
729
|
+
};
|
|
721
730
|
function mt(t) {
|
|
722
|
-
const { seatMapId: n, currentUserId:
|
|
723
|
-
|
|
724
|
-
const
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
731
|
+
const { seatMapId: n, currentUserId: i, enabled: r = !0, onStateChange: d, onError: c } = t, o = A({ ...he }), x = A(d), f = A(c), a = A(i);
|
|
732
|
+
x.current = d, f.current = c, a.current = i;
|
|
733
|
+
const s = I(
|
|
734
|
+
(p) => {
|
|
735
|
+
if (!r || !n)
|
|
736
|
+
return o.current = { ...he, loading: !1 }, () => {
|
|
737
|
+
};
|
|
738
|
+
if (!me())
|
|
739
|
+
return o.current = {
|
|
740
|
+
...he,
|
|
741
|
+
loading: !1,
|
|
742
|
+
error: new Error("Firebase not initialized. Call initializeFirebaseForViewer first.")
|
|
743
|
+
}, () => {
|
|
744
|
+
};
|
|
745
|
+
const w = Se(), R = ye(w, `seat_states/${n}`);
|
|
746
|
+
return Le(R, (k) => {
|
|
747
|
+
const T = k.val() || {}, X = ke(T, a.current), j = o.current;
|
|
748
|
+
(j.loading || !te(j.myReservedSeats, X.myReserved) || !te(j.otherReservedSeats, X.otherReserved) || !te(j.unavailableSeats, X.unavailable)) && (o.current = {
|
|
749
|
+
states: T,
|
|
750
|
+
loading: !1,
|
|
751
|
+
error: null,
|
|
752
|
+
lastUpdated: Date.now(),
|
|
753
|
+
myReservedSeats: X.myReserved,
|
|
754
|
+
otherReservedSeats: X.otherReserved,
|
|
755
|
+
unavailableSeats: X.unavailable
|
|
756
|
+
}, x.current?.(T), p());
|
|
757
|
+
}, (k) => {
|
|
758
|
+
o.current = {
|
|
759
|
+
...o.current,
|
|
760
|
+
loading: !1,
|
|
761
|
+
error: k
|
|
762
|
+
}, f.current?.(k), p();
|
|
763
|
+
}), () => {
|
|
764
|
+
Ne(R);
|
|
765
|
+
};
|
|
766
|
+
},
|
|
767
|
+
[n, r]
|
|
768
|
+
), u = I(() => o.current, []), g = I(() => he, []), h = dt(s, u, g);
|
|
769
|
+
return W(() => {
|
|
770
|
+
if (h.states && i !== void 0) {
|
|
771
|
+
const p = ke(h.states, i), w = o.current;
|
|
772
|
+
(!te(w.myReservedSeats, p.myReserved) || !te(w.otherReservedSeats, p.otherReserved)) && (o.current = {
|
|
773
|
+
...w,
|
|
774
|
+
myReservedSeats: p.myReserved,
|
|
775
|
+
otherReservedSeats: p.otherReserved,
|
|
776
|
+
unavailableSeats: p.unavailable,
|
|
777
|
+
lastUpdated: Date.now()
|
|
778
|
+
});
|
|
737
779
|
}
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
};
|
|
747
|
-
}, [n, r]), {
|
|
748
|
-
states: a,
|
|
749
|
-
loading: f,
|
|
750
|
-
error: s,
|
|
751
|
-
lastUpdated: h,
|
|
752
|
-
myReservedSeats: S,
|
|
753
|
-
otherReservedSeats: F,
|
|
754
|
-
unavailableSeats: M,
|
|
780
|
+
}, [i]), {
|
|
781
|
+
states: h.states,
|
|
782
|
+
loading: h.loading,
|
|
783
|
+
error: h.error,
|
|
784
|
+
lastUpdated: h.lastUpdated,
|
|
785
|
+
myReservedSeats: h.myReservedSeats,
|
|
786
|
+
otherReservedSeats: h.otherReservedSeats,
|
|
787
|
+
unavailableSeats: h.unavailableSeats,
|
|
755
788
|
// Legacy alias
|
|
756
|
-
reservedSeats:
|
|
789
|
+
reservedSeats: h.otherReservedSeats
|
|
757
790
|
};
|
|
758
791
|
}
|
|
759
792
|
function xt(t) {
|
|
760
793
|
const {
|
|
761
794
|
seatMapId: n,
|
|
762
|
-
enabled:
|
|
795
|
+
enabled: i = !0,
|
|
763
796
|
subscribeToChanges: r = !1,
|
|
764
797
|
onConfigLoad: d,
|
|
765
|
-
onError:
|
|
766
|
-
} = t, [
|
|
767
|
-
|
|
768
|
-
const
|
|
798
|
+
onError: c
|
|
799
|
+
} = t, [o, x] = N(null), [f, a] = N(!0), [s, u] = N(null), g = A(d), h = A(c);
|
|
800
|
+
g.current = d, h.current = c;
|
|
801
|
+
const p = I(async () => {
|
|
769
802
|
if (!n) return;
|
|
770
|
-
if (!
|
|
771
|
-
u(new Error("Firebase not initialized. Call initializeFirebaseForViewer first.")),
|
|
803
|
+
if (!me()) {
|
|
804
|
+
u(new Error("Firebase not initialized. Call initializeFirebaseForViewer first.")), a(!1);
|
|
772
805
|
return;
|
|
773
806
|
}
|
|
774
|
-
const
|
|
807
|
+
const w = Se(), R = ye(w, `seatmaps/${n}`);
|
|
775
808
|
try {
|
|
776
|
-
|
|
777
|
-
const M = (await
|
|
809
|
+
a(!0), u(null);
|
|
810
|
+
const M = (await gt(R)).val();
|
|
778
811
|
if (M) {
|
|
779
|
-
const
|
|
780
|
-
|
|
812
|
+
const k = pt(M);
|
|
813
|
+
x(k), g.current?.(k);
|
|
781
814
|
} else
|
|
782
815
|
u(new Error(`Seat map ${n} not found in Firebase`));
|
|
783
|
-
} catch (
|
|
784
|
-
const M =
|
|
785
|
-
u(M),
|
|
816
|
+
} catch (F) {
|
|
817
|
+
const M = F instanceof Error ? F : new Error("Unknown error");
|
|
818
|
+
u(M), h.current?.(M);
|
|
786
819
|
} finally {
|
|
787
|
-
|
|
820
|
+
a(!1);
|
|
788
821
|
}
|
|
789
822
|
}, [n]);
|
|
790
|
-
return
|
|
791
|
-
if (!
|
|
792
|
-
|
|
823
|
+
return W(() => {
|
|
824
|
+
if (!i || !n) {
|
|
825
|
+
a(!1);
|
|
793
826
|
return;
|
|
794
827
|
}
|
|
795
|
-
if (
|
|
796
|
-
const
|
|
797
|
-
let
|
|
798
|
-
return
|
|
799
|
-
if (
|
|
800
|
-
|
|
828
|
+
if (p(), r && me()) {
|
|
829
|
+
const w = Se(), R = ye(w, `seatmaps/${n}/meta/updated_at`);
|
|
830
|
+
let F = !0, M = null;
|
|
831
|
+
return Le(R, (Y) => {
|
|
832
|
+
if (F) {
|
|
833
|
+
F = !1, M = Y.val();
|
|
801
834
|
return;
|
|
802
835
|
}
|
|
803
|
-
const
|
|
804
|
-
|
|
836
|
+
const T = Y.val();
|
|
837
|
+
Y.exists() && T !== M && (M = T, p());
|
|
805
838
|
}), () => {
|
|
806
|
-
|
|
839
|
+
Ne(R);
|
|
807
840
|
};
|
|
808
841
|
}
|
|
809
|
-
}, [n,
|
|
810
|
-
config:
|
|
842
|
+
}, [n, i, r]), {
|
|
843
|
+
config: o,
|
|
811
844
|
loading: f,
|
|
812
845
|
error: s,
|
|
813
|
-
refetch:
|
|
846
|
+
refetch: p
|
|
814
847
|
};
|
|
815
848
|
}
|
|
816
|
-
function
|
|
849
|
+
function Dt(t) {
|
|
817
850
|
const {
|
|
818
851
|
seatMapId: n,
|
|
819
|
-
userId:
|
|
852
|
+
userId: i,
|
|
820
853
|
enabled: r = !0,
|
|
821
854
|
subscribeToDesignChanges: d = !1,
|
|
822
|
-
onConfigLoad:
|
|
823
|
-
onStateChange:
|
|
824
|
-
onError:
|
|
855
|
+
onConfigLoad: c,
|
|
856
|
+
onStateChange: o,
|
|
857
|
+
onError: x
|
|
825
858
|
} = t, {
|
|
826
859
|
config: f,
|
|
827
|
-
loading:
|
|
860
|
+
loading: a,
|
|
828
861
|
error: s,
|
|
829
862
|
refetch: u
|
|
830
863
|
} = xt({
|
|
831
864
|
seatMapId: n,
|
|
832
865
|
enabled: r,
|
|
833
866
|
subscribeToChanges: d,
|
|
834
|
-
onConfigLoad:
|
|
835
|
-
onError:
|
|
867
|
+
onConfigLoad: c,
|
|
868
|
+
onError: x
|
|
836
869
|
}), {
|
|
837
|
-
states:
|
|
838
|
-
loading:
|
|
839
|
-
error:
|
|
840
|
-
lastUpdated:
|
|
841
|
-
myReservedSeats:
|
|
842
|
-
otherReservedSeats:
|
|
870
|
+
states: g,
|
|
871
|
+
loading: h,
|
|
872
|
+
error: p,
|
|
873
|
+
lastUpdated: w,
|
|
874
|
+
myReservedSeats: R,
|
|
875
|
+
otherReservedSeats: F,
|
|
843
876
|
unavailableSeats: M,
|
|
844
|
-
reservedSeats:
|
|
877
|
+
reservedSeats: k
|
|
845
878
|
} = mt({
|
|
846
879
|
seatMapId: n,
|
|
847
|
-
currentUserId:
|
|
880
|
+
currentUserId: i,
|
|
848
881
|
enabled: r,
|
|
849
|
-
onStateChange:
|
|
850
|
-
onError:
|
|
882
|
+
onStateChange: o,
|
|
883
|
+
onError: x
|
|
851
884
|
});
|
|
852
885
|
return {
|
|
853
886
|
config: f,
|
|
854
|
-
loading:
|
|
855
|
-
error: s ||
|
|
856
|
-
myReservedSeats:
|
|
857
|
-
otherReservedSeats:
|
|
887
|
+
loading: a || h,
|
|
888
|
+
error: s || p,
|
|
889
|
+
myReservedSeats: R,
|
|
890
|
+
otherReservedSeats: F,
|
|
858
891
|
unavailableSeats: M,
|
|
859
|
-
reservedSeats:
|
|
860
|
-
seatStates:
|
|
861
|
-
lastUpdated:
|
|
892
|
+
reservedSeats: k,
|
|
893
|
+
seatStates: g,
|
|
894
|
+
lastUpdated: w,
|
|
862
895
|
refetch: u
|
|
863
896
|
};
|
|
864
897
|
}
|
|
865
898
|
export {
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
899
|
+
St as DEFAULT_COLORS,
|
|
900
|
+
It as SeatMapViewer,
|
|
901
|
+
kt as clearFirebaseInstance,
|
|
869
902
|
Ft as initializeFirebaseForViewer,
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
903
|
+
me as isFirebaseInitialized,
|
|
904
|
+
vt as useConfigFetcher,
|
|
905
|
+
bt as useContainerSize,
|
|
873
906
|
xt as useFirebaseConfig,
|
|
874
907
|
mt as useFirebaseSeatStates,
|
|
875
|
-
|
|
876
|
-
|
|
908
|
+
Dt as useRealtimeSeatMap,
|
|
909
|
+
yt as useTouchGestures
|
|
877
910
|
};
|