esoftplay-event 0.0.0-y → 0.0.0-z
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/event/test.tsx +142 -142
- package/package.json +1 -1
package/event/test.tsx
CHANGED
|
@@ -1,155 +1,155 @@
|
|
|
1
|
-
// withHooks
|
|
2
|
-
import { Canvas, Group, RoundedRect, Text, useFont } from '@shopify/react-native-skia';
|
|
3
|
-
import { LibCurl } from 'esoftplay/cache/lib/curl/import';
|
|
4
|
-
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
|
|
5
|
-
import useSafeState from 'esoftplay/state';
|
|
6
|
-
import React, { useCallback, useEffect, useState } from 'react';
|
|
7
|
-
import { Dimensions, Pressable, ScrollView, View } from 'react-native';
|
|
8
|
-
import { TapGestureHandler, TapGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';
|
|
1
|
+
// // withHooks
|
|
2
|
+
// import { Canvas, Group, RoundedRect, Text, useFont } from '@shopify/react-native-skia';
|
|
3
|
+
// import { LibCurl } from 'esoftplay/cache/lib/curl/import';
|
|
4
|
+
// import { LibIcon } from 'esoftplay/cache/lib/icon/import';
|
|
5
|
+
// import useSafeState from 'esoftplay/state';
|
|
6
|
+
// import React, { useCallback, useEffect, useState } from 'react';
|
|
7
|
+
// import { Dimensions, Pressable, ScrollView, View } from 'react-native';
|
|
8
|
+
// import { TapGestureHandler, TapGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
export interface EventSeat_map_matrixArgs {
|
|
11
|
+
// export interface EventSeat_map_matrixArgs {
|
|
12
12
|
|
|
13
|
-
}
|
|
14
|
-
export interface EventSeat_map_matrixProps {
|
|
13
|
+
// }
|
|
14
|
+
// export interface EventSeat_map_matrixProps {
|
|
15
15
|
|
|
16
|
-
}
|
|
17
|
-
export default function m(props: any): any {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
16
|
+
// }
|
|
17
|
+
// export default function m(props: any): any {
|
|
18
|
+
// const deviceWidth = Dimensions.get('window').width;
|
|
19
|
+
// const [selectedIdx, setSelectedIdx] = useState<number | null>(null);
|
|
20
|
+
// const [scale, setScale] = useState(1);
|
|
21
|
+
// const [boundingBox, setBoundingBox] = useSafeState({ "x1": 1, "x2": 2, "y1": 1, "y2": 2 })
|
|
22
|
+
// const [data, setData] = useSafeState<[number, number, string, number][]>([])
|
|
23
|
+
// const initialBoxSize = 30;
|
|
24
|
+
// const contentWidth = (boundingBox.x2 - (boundingBox.x1 - 1.1)) * initialBoxSize
|
|
25
25
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
// // Scale boxSize so that contentWidth fits deviceWidth
|
|
27
|
+
// const scaleToFit = deviceWidth / contentWidth;
|
|
28
|
+
// const boxSize = initialBoxSize * scaleToFit;
|
|
29
29
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
// // Recalculate xs, ys, width, height with scaled boxSize
|
|
31
|
+
// const xsScaled = data.map(([x]) => isNaN(x) ? 0 : (boxSize) + (x * boxSize));
|
|
32
|
+
// const ysScaled = data.map(([_, y]) => isNaN(y) ? 0 : (boxSize) + (y * boxSize));
|
|
33
33
|
|
|
34
|
-
|
|
35
|
-
|
|
34
|
+
// const width = Math.max(deviceWidth, xsScaled.length && xsScaled.every(v => !isNaN(v)) ? Math.max(...xsScaled) + boxSize : boxSize * 2);
|
|
35
|
+
// const height = ysScaled.length && ysScaled.every(v => !isNaN(v)) ? Math.max(...ysScaled) + boxSize : boxSize * 2;
|
|
36
36
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
37
|
+
// const fontSize: any = {
|
|
38
|
+
// 1: useFont(require('../../assets/fonts/MonoSpace.ttf'), boxSize * 0.3),
|
|
39
|
+
// 2: useFont(require('../../assets/fonts/MonoSpace.ttf'), boxSize * 0.3),
|
|
40
|
+
// 3: useFont(require('../../assets/fonts/MonoSpace.ttf'), boxSize * 0.25),
|
|
41
|
+
// 4: useFont(require('../../assets/fonts/MonoSpace.ttf'), boxSize * 0.2),
|
|
42
|
+
// 5: useFont(require('../../assets/fonts/MonoSpace.ttf'), boxSize * 0.2),
|
|
43
|
+
// 6: useFont(require('../../assets/fonts/MonoSpace.ttf'), boxSize * 0.15),
|
|
44
|
+
// }
|
|
45
|
+
// const handleTap = useCallback((event: TapGestureHandlerStateChangeEvent) => {
|
|
46
|
+
// if (event.nativeEvent.state !== 5) return;
|
|
47
|
+
// // Adjust tap coordinates for scale
|
|
48
|
+
// const x = event.nativeEvent.x / scale;
|
|
49
|
+
// const y = event.nativeEvent.y / scale;
|
|
50
|
+
// for (let i = 0; i < data.length; i++) {
|
|
51
|
+
// const [sx, sy, seatName] = data[i];
|
|
52
|
+
// const xSize = (boxSize / 2) + (sx * boxSize);
|
|
53
|
+
// const ySize = (boxSize / 2) + (sy * boxSize);
|
|
54
|
+
// if (x >= xSize && x <= xSize + boxSize && y >= ySize && y <= ySize + boxSize) {
|
|
55
|
+
// setSelectedIdx(i);
|
|
56
|
+
// return;
|
|
57
|
+
// }
|
|
58
|
+
// }
|
|
59
|
+
// setSelectedIdx(null);
|
|
60
|
+
// }, [data, boxSize, scale]);
|
|
61
61
|
|
|
62
62
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
63
|
+
// useEffect(() => {
|
|
64
|
+
// new LibCurl("v3/event_seat", {
|
|
65
|
+
// event_id: 398,
|
|
66
|
+
// price_id: 1922,
|
|
67
|
+
// ondate: "0000-00-00"
|
|
68
|
+
// }, (res, msg) => {
|
|
69
|
+
// setBoundingBox(res.metadata.bounding_box)
|
|
70
|
+
// console.log(JSON.stringify(res, undefined, 2))
|
|
71
|
+
// setData(res.layout.split(';').map((item) => item.split(',')).map(([x, y, seatName, status]) => [Number(x), Number(y), seatName, Number(status)]))
|
|
72
|
+
// })
|
|
73
|
+
// }, [])
|
|
74
74
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
}
|
|
75
|
+
// return (
|
|
76
|
+
// <View key={scale} style={{ flex: 1 }} >
|
|
77
|
+
// <ScrollView horizontal style={{ flex: 1 }}>
|
|
78
|
+
// <ScrollView style={{ flex: 1 }}>
|
|
79
|
+
// <TapGestureHandler onHandlerStateChange={handleTap}>
|
|
80
|
+
// <View>
|
|
81
|
+
// <Canvas
|
|
82
|
+
// style={{
|
|
83
|
+
// width: width * scale,
|
|
84
|
+
// height: height * scale,
|
|
85
|
+
// padding: 10,
|
|
86
|
+
// backgroundColor: "#f1f2f3",
|
|
87
|
+
// }}>
|
|
88
|
+
// {
|
|
89
|
+
// data.map(([x, y, name, status], i) => {
|
|
90
|
+
// const color = selectedIdx == i ? "lime" : getColorByStatus(status)
|
|
91
|
+
// const xSize = (boxSize / 2) + (x * boxSize)
|
|
92
|
+
// const ySize = (boxSize / 2) + (y * boxSize)
|
|
93
|
+
// return (
|
|
94
|
+
// <Group key={i}>
|
|
95
|
+
// <RoundedRect
|
|
96
|
+
// x={xSize - 1}
|
|
97
|
+
// r={(boxSize + 2) * 0.34}
|
|
98
|
+
// y={ySize - 1}
|
|
99
|
+
// width={boxSize + 2}
|
|
100
|
+
// transform={[{ scale }]}
|
|
101
|
+
// height={boxSize + 2}
|
|
102
|
+
// color={"#999"} />
|
|
103
|
+
// <RoundedRect
|
|
104
|
+
// x={xSize}
|
|
105
|
+
// r={boxSize * 0.32}
|
|
106
|
+
// y={ySize}
|
|
107
|
+
// width={boxSize}
|
|
108
|
+
// transform={[{ scale }]}
|
|
109
|
+
// height={boxSize}
|
|
110
|
+
// color={color} />
|
|
111
|
+
// {name && fontSize[name.length] && (
|
|
112
|
+
// <Text
|
|
113
|
+
// x={(xSize) + boxSize * (5 - name.length) * 0.1}
|
|
114
|
+
// y={(ySize) + boxSize * 0.60}
|
|
115
|
+
// color="#020202"
|
|
116
|
+
// text={name}
|
|
117
|
+
// transform={[{ scale }]}
|
|
118
|
+
// font={fontSize[name.length]} />
|
|
119
|
+
// )}
|
|
120
|
+
// </Group>
|
|
121
|
+
// )
|
|
122
|
+
// })
|
|
123
|
+
// }
|
|
124
|
+
// </Canvas>
|
|
125
|
+
// </View>
|
|
126
|
+
// </TapGestureHandler>
|
|
127
|
+
// </ScrollView>
|
|
128
|
+
// </ScrollView>
|
|
129
|
+
// <View style={{ flexDirection: "row" }} >
|
|
130
|
+
// <Pressable onPress={() => setScale((x) => x - 0.3)} >
|
|
131
|
+
// <LibIcon.AntDesign name='minuscircleo' />
|
|
132
|
+
// </Pressable>
|
|
133
|
+
// <Pressable onPress={() => setScale((x) => x + 0.3)} >
|
|
134
|
+
// <LibIcon.AntDesign name='pluscircleo' />
|
|
135
|
+
// </Pressable>
|
|
136
|
+
// </View>
|
|
137
|
+
// </View>
|
|
138
|
+
// )
|
|
139
|
+
// }
|
|
140
140
|
|
|
141
141
|
|
|
142
|
-
function getColorByStatus(statuses: number) {
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
}
|
|
142
|
+
// function getColorByStatus(statuses: number) {
|
|
143
|
+
// const colors: any = {
|
|
144
|
+
// 8: 'purple',
|
|
145
|
+
// 0: "white",
|
|
146
|
+
// 1: "#9FA1A4",
|
|
147
|
+
// 2: "#6B71E6",
|
|
148
|
+
// 3: "#2EBBE8",
|
|
149
|
+
// 4: "#FFA601",
|
|
150
|
+
// 5: "#fff",
|
|
151
|
+
// 6: "#FF4866",
|
|
152
|
+
// 7: "#6C432C"
|
|
153
|
+
// }
|
|
154
|
+
// return colors[statuses]
|
|
155
|
+
// }
|