@zonetrix/viewer 2.10.2 → 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 +494 -466
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,99 +1,99 @@
|
|
|
1
1
|
import { jsx as y, jsxs as D } from "react/jsx-runtime";
|
|
2
|
-
import { useState as
|
|
3
|
-
import { Stage as
|
|
4
|
-
import { ref as
|
|
5
|
-
import { fromFirebaseSeatMap as
|
|
6
|
-
function
|
|
7
|
-
const [n,
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
24
|
+
return W(() => {
|
|
25
25
|
x();
|
|
26
26
|
}, [t]), {
|
|
27
27
|
config: n,
|
|
28
28
|
loading: r,
|
|
29
|
-
error:
|
|
29
|
+
error: c,
|
|
30
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:
|
|
39
|
-
|
|
40
|
-
const
|
|
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
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
|
|
66
|
-
if (
|
|
67
|
-
|
|
68
|
-
const
|
|
69
|
-
|
|
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
|
+
if (s.touches.length === 2) {
|
|
67
|
+
s.preventDefault();
|
|
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
|
-
}, f = (
|
|
72
|
-
if (
|
|
73
|
-
|
|
74
|
-
const
|
|
75
|
-
if (
|
|
76
|
-
const
|
|
77
|
-
Math.max(n.currentScale *
|
|
71
|
+
}, f = (s) => {
|
|
72
|
+
if (s.touches.length !== 2) return;
|
|
73
|
+
s.preventDefault();
|
|
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
|
-
|
|
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,45 +103,45 @@ const vt = {
|
|
|
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
|
-
|
|
118
|
-
const
|
|
119
|
-
|
|
120
|
-
}, [t,
|
|
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,
|
|
128
128
|
stroke: "#ffffff",
|
|
129
129
|
strokeWidth: 1,
|
|
130
|
-
onClick:
|
|
131
|
-
onTap:
|
|
132
|
-
onMouseEnter:
|
|
133
|
-
onMouseLeave:
|
|
130
|
+
onClick: s,
|
|
131
|
+
onTap: s,
|
|
132
|
+
onMouseEnter: u,
|
|
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 vt = {
|
|
|
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 Ye = ce(({ stage: t, stageColor: n }) => {
|
|
|
161
161
|
bar: "🍷",
|
|
162
162
|
"entry-exit": "🚪",
|
|
163
163
|
custom: "➕"
|
|
164
|
-
})[
|
|
165
|
-
return /* @__PURE__ */ D(
|
|
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,9 +175,9 @@ const Ye = ce(({ stage: t, stageColor: n }) => {
|
|
|
175
175
|
}
|
|
176
176
|
),
|
|
177
177
|
/* @__PURE__ */ y(
|
|
178
|
-
|
|
178
|
+
Ee,
|
|
179
179
|
{
|
|
180
|
-
text:
|
|
180
|
+
text: d,
|
|
181
181
|
x: 0,
|
|
182
182
|
y: 0,
|
|
183
183
|
width: t.config.width,
|
|
@@ -189,7 +189,7 @@ const Ye = ce(({ 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 Ye = ce(({ 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
|
-
allLabel:
|
|
215
|
-
position:
|
|
216
|
-
className:
|
|
214
|
+
allLabel: d,
|
|
215
|
+
position: c,
|
|
216
|
+
className: o
|
|
217
217
|
}) => {
|
|
218
|
-
const x =
|
|
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,8 +233,8 @@ const je = ce(({
|
|
|
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
|
-
}[
|
|
237
|
-
},
|
|
236
|
+
}[c]
|
|
237
|
+
}, s = {
|
|
238
238
|
padding: "10px 16px",
|
|
239
239
|
fontSize: "14px",
|
|
240
240
|
fontWeight: 500,
|
|
@@ -246,42 +246,42 @@ const je = ce(({
|
|
|
246
246
|
transition: "all 0.2s ease",
|
|
247
247
|
minHeight: "44px",
|
|
248
248
|
touchAction: "manipulation"
|
|
249
|
-
},
|
|
250
|
-
...
|
|
249
|
+
}, u = {
|
|
250
|
+
...s,
|
|
251
251
|
backgroundColor: "#3A7DE5",
|
|
252
252
|
borderColor: "#3A7DE5"
|
|
253
253
|
};
|
|
254
|
-
return /* @__PURE__ */ D("div", { className:
|
|
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: () =>
|
|
260
|
-
style: n === null ?
|
|
261
|
-
children:
|
|
259
|
+
onClick: () => i(null),
|
|
260
|
+
style: n === null ? u : s,
|
|
261
|
+
children: d
|
|
262
262
|
}
|
|
263
263
|
),
|
|
264
|
-
x.map((
|
|
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
|
-
onZoomOut:
|
|
283
|
-
position:
|
|
284
|
-
className:
|
|
282
|
+
onZoomOut: d,
|
|
283
|
+
position: c,
|
|
284
|
+
className: o
|
|
285
285
|
}) => {
|
|
286
286
|
const f = {
|
|
287
287
|
position: "absolute",
|
|
@@ -298,8 +298,8 @@ const We = ce(({
|
|
|
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",
|
|
@@ -316,19 +316,19 @@ const We = ce(({
|
|
|
316
316
|
justifyContent: "center",
|
|
317
317
|
transition: "all 0.2s ease",
|
|
318
318
|
touchAction: "manipulation"
|
|
319
|
-
},
|
|
320
|
-
...
|
|
319
|
+
}, s = {
|
|
320
|
+
...a,
|
|
321
321
|
opacity: 0.4,
|
|
322
322
|
cursor: "not-allowed"
|
|
323
|
-
},
|
|
324
|
-
return /* @__PURE__ */ D("div", { className:
|
|
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
|
-
disabled: !
|
|
331
|
-
style:
|
|
330
|
+
disabled: !u,
|
|
331
|
+
style: u ? a : s,
|
|
332
332
|
title: "Zoom In",
|
|
333
333
|
children: "+"
|
|
334
334
|
}
|
|
@@ -337,29 +337,29 @@ const We = ce(({
|
|
|
337
337
|
"button",
|
|
338
338
|
{
|
|
339
339
|
type: "button",
|
|
340
|
-
onClick:
|
|
341
|
-
disabled: !
|
|
342
|
-
style:
|
|
340
|
+
onClick: d,
|
|
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
|
-
currency:
|
|
356
|
-
state:
|
|
355
|
+
currency: d,
|
|
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,15 +371,15 @@ const Pe = ce(({
|
|
|
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 = {
|
|
378
378
|
fontWeight: 600
|
|
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",
|
|
@@ -387,258 +387,258 @@ const Pe = ce(({
|
|
|
387
387
|
};
|
|
388
388
|
return /* @__PURE__ */ y("div", { style: x, children: /* @__PURE__ */ D("div", { style: f, children: [
|
|
389
389
|
r.sectionName && /* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
|
|
390
|
-
/* @__PURE__ */ y("span", { style:
|
|
391
|
-
/* @__PURE__ */ y("span", { style: { ...
|
|
390
|
+
/* @__PURE__ */ y("span", { style: a, children: "Section:" }),
|
|
391
|
+
/* @__PURE__ */ y("span", { style: { ...s, color: "#3b82f6" }, children: r.sectionName })
|
|
392
392
|
] }),
|
|
393
393
|
/* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
|
|
394
|
-
/* @__PURE__ */ y("span", { style:
|
|
395
|
-
/* @__PURE__ */ y("span", { style:
|
|
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__ */ D("span", { style:
|
|
400
|
-
|
|
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
|
+
d,
|
|
401
401
|
" ",
|
|
402
402
|
r.price.toFixed(2)
|
|
403
403
|
] })
|
|
404
404
|
] }),
|
|
405
|
-
/* @__PURE__ */ D("div", { style:
|
|
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
|
-
reservedSeats:
|
|
418
|
-
unavailableSeats:
|
|
419
|
-
selectedSeats:
|
|
417
|
+
reservedSeats: d = [],
|
|
418
|
+
unavailableSeats: c = [],
|
|
419
|
+
selectedSeats: o,
|
|
420
420
|
myReservedSeats: x = [],
|
|
421
421
|
onSeatSelect: f,
|
|
422
|
-
onSeatDeselect:
|
|
423
|
-
onSelectionChange:
|
|
424
|
-
colorOverrides:
|
|
425
|
-
showTooltip:
|
|
426
|
-
zoomEnabled:
|
|
427
|
-
className:
|
|
428
|
-
onConfigLoad:
|
|
429
|
-
onError:
|
|
422
|
+
onSeatDeselect: a,
|
|
423
|
+
onSelectionChange: s,
|
|
424
|
+
colorOverrides: u,
|
|
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:
|
|
433
|
+
floorSelectorClassName: k,
|
|
434
|
+
showAllFloorsOption: Y = !0,
|
|
435
|
+
allFloorsLabel: T = "All",
|
|
436
|
+
fitToView: X = !0,
|
|
437
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(
|
|
482
|
-
return { reserved: e, unavailable:
|
|
483
|
-
}, [
|
|
484
|
-
const
|
|
485
|
-
return
|
|
486
|
-
}, [
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
}, [
|
|
490
|
-
|
|
491
|
-
}, [
|
|
492
|
-
|
|
493
|
-
}, [
|
|
494
|
-
const Ge =
|
|
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
|
-
|
|
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
|
-
}, []), Qe =
|
|
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 et =
|
|
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 nt = E.width ||
|
|
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
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
|
-
qe &&
|
|
602
|
-
|
|
601
|
+
qe && pe.length > 0 && /* @__PURE__ */ y(
|
|
602
|
+
Ae,
|
|
603
603
|
{
|
|
604
|
-
floors:
|
|
605
|
-
currentFloorId:
|
|
604
|
+
floors: pe,
|
|
605
|
+
currentFloorId: P,
|
|
606
606
|
onFloorChange: _e,
|
|
607
|
-
showAllOption:
|
|
608
|
-
allLabel:
|
|
607
|
+
showAllOption: Y,
|
|
608
|
+
allLabel: T,
|
|
609
609
|
position: M,
|
|
610
|
-
className:
|
|
610
|
+
className: k
|
|
611
611
|
}
|
|
612
612
|
),
|
|
613
613
|
/* @__PURE__ */ D(
|
|
614
|
-
|
|
614
|
+
ut,
|
|
615
615
|
{
|
|
616
|
-
ref:
|
|
616
|
+
ref: fe,
|
|
617
617
|
width: nt,
|
|
618
618
|
height: rt,
|
|
619
|
-
scaleX:
|
|
620
|
-
scaleY:
|
|
621
|
-
x:
|
|
622
|
-
y:
|
|
619
|
+
scaleX: L,
|
|
620
|
+
scaleY: L,
|
|
621
|
+
x: z.x,
|
|
622
|
+
y: z.y,
|
|
623
623
|
draggable: !0,
|
|
624
|
-
onDragEnd:
|
|
624
|
+
onDragEnd: Je,
|
|
625
625
|
onWheel: Qe,
|
|
626
|
-
style: { backgroundColor:
|
|
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:
|
|
640
|
+
state: J(e),
|
|
641
|
+
colors: ce,
|
|
642
642
|
onClick: Ge,
|
|
643
643
|
onMouseEnter: et,
|
|
644
644
|
onMouseLeave: tt
|
|
@@ -648,235 +648,263 @@ const Et = ({
|
|
|
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
|
-
|
|
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
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;
|
|
708
|
+
const i = [...t].sort(), r = [...n].sort();
|
|
709
|
+
return i.every((d, c) => d === r[c]);
|
|
711
710
|
}
|
|
712
|
-
function
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
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
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
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
|
+
});
|
|
751
779
|
}
|
|
752
|
-
}, [
|
|
753
|
-
states:
|
|
754
|
-
loading:
|
|
755
|
-
error:
|
|
756
|
-
lastUpdated: h,
|
|
757
|
-
myReservedSeats:
|
|
758
|
-
otherReservedSeats:
|
|
759
|
-
unavailableSeats:
|
|
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,
|
|
760
788
|
// Legacy alias
|
|
761
|
-
reservedSeats:
|
|
789
|
+
reservedSeats: h.otherReservedSeats
|
|
762
790
|
};
|
|
763
791
|
}
|
|
764
792
|
function xt(t) {
|
|
765
793
|
const {
|
|
766
794
|
seatMapId: n,
|
|
767
|
-
enabled:
|
|
795
|
+
enabled: i = !0,
|
|
768
796
|
subscribeToChanges: r = !1,
|
|
769
|
-
onConfigLoad:
|
|
770
|
-
onError:
|
|
771
|
-
} = t, [
|
|
772
|
-
|
|
773
|
-
const
|
|
797
|
+
onConfigLoad: d,
|
|
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 () => {
|
|
774
802
|
if (!n) return;
|
|
775
|
-
if (!
|
|
776
|
-
|
|
803
|
+
if (!me()) {
|
|
804
|
+
u(new Error("Firebase not initialized. Call initializeFirebaseForViewer first.")), a(!1);
|
|
777
805
|
return;
|
|
778
806
|
}
|
|
779
|
-
const
|
|
807
|
+
const w = Se(), R = ye(w, `seatmaps/${n}`);
|
|
780
808
|
try {
|
|
781
|
-
|
|
782
|
-
const M = (await
|
|
809
|
+
a(!0), u(null);
|
|
810
|
+
const M = (await gt(R)).val();
|
|
783
811
|
if (M) {
|
|
784
|
-
const
|
|
785
|
-
x(
|
|
812
|
+
const k = pt(M);
|
|
813
|
+
x(k), g.current?.(k);
|
|
786
814
|
} else
|
|
787
|
-
|
|
788
|
-
} catch (
|
|
789
|
-
const M =
|
|
790
|
-
|
|
815
|
+
u(new Error(`Seat map ${n} not found in Firebase`));
|
|
816
|
+
} catch (F) {
|
|
817
|
+
const M = F instanceof Error ? F : new Error("Unknown error");
|
|
818
|
+
u(M), h.current?.(M);
|
|
791
819
|
} finally {
|
|
792
|
-
|
|
820
|
+
a(!1);
|
|
793
821
|
}
|
|
794
822
|
}, [n]);
|
|
795
|
-
return
|
|
796
|
-
if (!
|
|
797
|
-
|
|
823
|
+
return W(() => {
|
|
824
|
+
if (!i || !n) {
|
|
825
|
+
a(!1);
|
|
798
826
|
return;
|
|
799
827
|
}
|
|
800
|
-
if (
|
|
801
|
-
const
|
|
802
|
-
let
|
|
803
|
-
return
|
|
804
|
-
if (
|
|
805
|
-
|
|
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();
|
|
806
834
|
return;
|
|
807
835
|
}
|
|
808
|
-
const
|
|
809
|
-
|
|
836
|
+
const T = Y.val();
|
|
837
|
+
Y.exists() && T !== M && (M = T, p());
|
|
810
838
|
}), () => {
|
|
811
|
-
|
|
839
|
+
Ne(R);
|
|
812
840
|
};
|
|
813
841
|
}
|
|
814
|
-
}, [n,
|
|
815
|
-
config:
|
|
842
|
+
}, [n, i, r]), {
|
|
843
|
+
config: o,
|
|
816
844
|
loading: f,
|
|
817
|
-
error:
|
|
818
|
-
refetch:
|
|
845
|
+
error: s,
|
|
846
|
+
refetch: p
|
|
819
847
|
};
|
|
820
848
|
}
|
|
821
849
|
function Dt(t) {
|
|
822
850
|
const {
|
|
823
851
|
seatMapId: n,
|
|
824
|
-
userId:
|
|
852
|
+
userId: i,
|
|
825
853
|
enabled: r = !0,
|
|
826
|
-
subscribeToDesignChanges:
|
|
827
|
-
onConfigLoad:
|
|
828
|
-
onStateChange:
|
|
854
|
+
subscribeToDesignChanges: d = !1,
|
|
855
|
+
onConfigLoad: c,
|
|
856
|
+
onStateChange: o,
|
|
829
857
|
onError: x
|
|
830
858
|
} = t, {
|
|
831
859
|
config: f,
|
|
832
|
-
loading:
|
|
833
|
-
error:
|
|
834
|
-
refetch:
|
|
860
|
+
loading: a,
|
|
861
|
+
error: s,
|
|
862
|
+
refetch: u
|
|
835
863
|
} = xt({
|
|
836
864
|
seatMapId: n,
|
|
837
865
|
enabled: r,
|
|
838
|
-
subscribeToChanges:
|
|
839
|
-
onConfigLoad:
|
|
866
|
+
subscribeToChanges: d,
|
|
867
|
+
onConfigLoad: c,
|
|
840
868
|
onError: x
|
|
841
869
|
}), {
|
|
842
|
-
states:
|
|
843
|
-
loading:
|
|
844
|
-
error:
|
|
845
|
-
lastUpdated:
|
|
846
|
-
myReservedSeats:
|
|
847
|
-
otherReservedSeats:
|
|
870
|
+
states: g,
|
|
871
|
+
loading: h,
|
|
872
|
+
error: p,
|
|
873
|
+
lastUpdated: w,
|
|
874
|
+
myReservedSeats: R,
|
|
875
|
+
otherReservedSeats: F,
|
|
848
876
|
unavailableSeats: M,
|
|
849
|
-
reservedSeats:
|
|
877
|
+
reservedSeats: k
|
|
850
878
|
} = mt({
|
|
851
879
|
seatMapId: n,
|
|
852
|
-
currentUserId:
|
|
880
|
+
currentUserId: i,
|
|
853
881
|
enabled: r,
|
|
854
|
-
onStateChange:
|
|
882
|
+
onStateChange: o,
|
|
855
883
|
onError: x
|
|
856
884
|
});
|
|
857
885
|
return {
|
|
858
886
|
config: f,
|
|
859
|
-
loading:
|
|
860
|
-
error:
|
|
861
|
-
myReservedSeats:
|
|
862
|
-
otherReservedSeats:
|
|
887
|
+
loading: a || h,
|
|
888
|
+
error: s || p,
|
|
889
|
+
myReservedSeats: R,
|
|
890
|
+
otherReservedSeats: F,
|
|
863
891
|
unavailableSeats: M,
|
|
864
|
-
reservedSeats:
|
|
865
|
-
seatStates:
|
|
866
|
-
lastUpdated:
|
|
867
|
-
refetch:
|
|
892
|
+
reservedSeats: k,
|
|
893
|
+
seatStates: g,
|
|
894
|
+
lastUpdated: w,
|
|
895
|
+
refetch: u
|
|
868
896
|
};
|
|
869
897
|
}
|
|
870
898
|
export {
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
899
|
+
St as DEFAULT_COLORS,
|
|
900
|
+
It as SeatMapViewer,
|
|
901
|
+
kt as clearFirebaseInstance,
|
|
874
902
|
Ft as initializeFirebaseForViewer,
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
903
|
+
me as isFirebaseInitialized,
|
|
904
|
+
vt as useConfigFetcher,
|
|
905
|
+
bt as useContainerSize,
|
|
878
906
|
xt as useFirebaseConfig,
|
|
879
907
|
mt as useFirebaseSeatStates,
|
|
880
908
|
Dt as useRealtimeSeatMap,
|
|
881
|
-
|
|
909
|
+
yt as useTouchGestures
|
|
882
910
|
};
|