esoftplay-event 0.0.0-a

package/event/seat_autopick.tsx

@@ -0,0 +1,120 @@
+// withHooks
+import { applyStyle } from 'esoftplay';
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { LibCollaps } from 'esoftplay/cache/lib/collaps/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import { useEffect } from 'react';
+
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import React from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventSeat_autopickArgs {
+
+}
+export interface EventSeat_autopickProps {
+
+}
+export default function m(props: EventSeat_autopickProps): any {
+
+  const { event_id, ondate, price_id, qty } = LibNavigation.getArgsAll(props)
+  const [availableSeat, setAvailableSeat] = useSafeState()
+
+  let data = [
+    {
+      id: 1,
+      title: esp.lang("event/seat_autopick", "seat_lined")
+    },
+    {
+      id: 2,
+      title: esp.lang("event/seat_autopick", "seat_free")
+    }
+  ]
+  const [selectedType, setSelectedType] = useSafeState()
+
+  useEffect(() => {
+    loadData()
+    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
+  }, [])
+
+  function loadData() {
+    let post = {
+      id: event_id,
+      ondate: ondate,
+      price_id: price_id
+    }
+    new LibCurl('event_seat_adjacent' + LibUtils.objectToUrlParam(post), null, (res, msg) => {
+      setAvailableSeat(res)
+    }, (err) => {
+      LibToastProperty.show(err?.message)
+    })
+  }
+
+  if (!availableSeat) {
+    return <LibLoading />
+  }
+
+
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+      <ComponentHeader title={esp.lang("event/seat_autopick", "confirm")} />
+      <ScrollView>
+        <LibTextstyle textStyle='m_overline' text={esp.lang("event/seat_autopick", "seat_option")} style={{ textAlign: 'center', marginBottom: 20, lineHeight: 20, color: '#000', fontSize: 16, margin: 15, marginTop: 25, fontWeight: 'bold' }} />
+        {
+          data?.map((item: any, i: number) => {
+            let show = true
+            let available = item.id == 1 ? Number(qty) <= Number(availableSeat) : true
+            return (
+              <LibCollaps key={i} style={{ backgroundColor: '#fff', margin: 15, borderRadius: 5, marginTop: 0 }} show={show} header={(show) =>
+                <View style={{ borderBottomWidth: 1, borderBottomColor: '#c9c9c9', overflow: 'hidden', padding: 10, flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'space-between' }}>
+                  <TouchableOpacity activeOpacity={available ? 0 : 1} onPress={() => {
+                    if (available) {
+                      setSelectedType(item)
+                    } else {
+                      LibToastProperty.show(esp.lang("event/seat_autopick", "seat_not_available"))
+                    }
+                  }} style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+                    <LibIcon name={selectedType?.id == item?.id ? 'checkbox-marked-circle-outline' : 'checkbox-blank-circle-outline'} color={selectedType?.id == item?.id ? LibStyle.colorPrimary : '#e6e6e6'} />
+                    <View style={{ marginLeft: 10 }}>
+                      <LibTextstyle textStyle='m_overline' text={item.title} style={{ color: available ? "#000" : '#e6e6e6', fontSize: 14, fontWeight: selectedType?.id == item?.id ? 'bold' : 'normal', letterSpacing: 1 }} />
+                      <Text allowFontScaling={false} style={{ color: available ? LibStyle.colorGreen : LibStyle.colorRed, fontSize: 10, letterSpacing: 1 }}>{available ? esp.lang("event/seat_autopick", "available") : esp.lang("event/seat_autopick", "not_available")}</Text>
+                    </View>
+                  </TouchableOpacity>
+                  <LibIcon name={show ? 'chevron-down' : 'chevron-up'} color={available ? "#000" : '#e6e6e6'} />
+                </View>
+              }>
+                <View style={{ marginHorizontal: 15, backgroundColor: '#fff', marginTop: -20 }}>
+                  <LibPicture source={esp.assets(item.id == 1 ? 'lined.png' : 'spread.png')} resizeMode='contain' style={{ alignItems: 'center', justifyContent: 'center', alignContent: 'center', alignSelf: 'center', width: LibStyle.width - 100, height: (LibStyle.width - 100) / 2 }} />
+                  <Text allowFontScaling={false} style={{ fontSize: 10, letterSpacing: 1, margin: 10, marginTop: 0 }}>{esp.lang("event/seat_autopick", "ilustrasi") + item.title}</Text>
+                </View>
+              </LibCollaps>
+            )
+          })
+        }
+      </ScrollView>
+
+      <View style={applyStyle({ margin: 10, marginVertical: 5 })}>
+        <ComponentButton testID={"next_btn"} label={esp.lang("event/ticket_list", "next")} onPress={() => {
+          if (!selectedType) {
+            LibToastProperty.show(esp.lang("event/seat_autopick", "seat_empty"))
+            return
+          } else {
+            LibNavigation.sendBackResult(selectedType?.id == 1 ? 1 : 0)
+          }
+        }} style={applyStyle({ backgroundColor: LibStyle.colorPrimary })} />
+      </View>
+
+    </View>
+  )
+}

package/event/seat_map.tsx

@@ -0,0 +1,408 @@
+// withHooks
+
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { EventSeat_map_matrix } from 'esoftplay/cache/event/seat_map_matrix/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibObject } from 'esoftplay/cache/lib/object/import';
+import { LibProgress } from 'esoftplay/cache/lib/progress/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTap } from 'esoftplay/cache/lib/tap/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { UseMap } from 'esoftplay/cache/use/map/import';
+import esp from 'esoftplay/esp';
+import useLazyState from 'esoftplay/lazy';
+import { useTimeout } from 'esoftplay/timeout';
+import React, { useEffect, useRef } from 'react';
+import { Dimensions, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+
+export type DataTicket = {
+	"event_id": string,
+	"event_title": string,
+	"charge_payment": number,
+	"charge_payment_type": string,
+	"images": Array<{
+		"image": string,
+		"title": string,
+		"description": string,
+	}>,
+	"qty": string,
+	"selected_ticket": {
+		"price_id": string,
+		"type": string,
+		"list": {
+			"ondate": string,
+		},
+	},
+}
+
+export default function m(props: any) {
+  const { dataTicket, url } = LibNavigation.getArgsAll<any>(props)
+  const qty = dataTicket?.qty
+  let numRows = useRef(0)
+  let numCols = useRef(0)
+  let selectedSeat = useRef<any>(null).current
+
+  const [, setLockId, getLockId] = useLazyState(0)
+  const [isLocks, setIsLocks, getIsLocks] = useLazyState({})
+  const [, setIsSubmit, getIsSubmit] = useLazyState(false)
+  const [, setLockedSeat, getLockedSeat] = useLazyState<any[]>([])
+  const [seatNames, setSeatNames] = useLazyState<string[]>([])
+  const [data, setData] = useLazyState<number[]>([])
+  const [squareSize, setSquareSize] = useLazyState<number>(100)
+  const [coordinates, setCoordinates] = useLazyState<string[]>([])
+  const [selectedSeatData, setSelectedSeatData] = useLazyState<any>({})
+  const [stage, setStage] = useLazyState('')
+  const margin = squareSize * 0.25 // margin size in pixels
+  const boxSize = squareSize + margin
+  const timeout = useTimeout()
+  const rB = squareSize * 0.1
+
+  function next() {
+    let x = squareSize * 3 / 2
+    if (x <= 40) {
+      LibProgress.show(esp.lang("event/seat_map", "zoom"))
+      timeout(() => {
+        setSquareSize(x)()
+      }, 300)
+    } else {
+      LibToastProperty.show(esp.lang("event/seat_map", "zoom_max"))
+    }
+  }
+
+  function prev() {
+    let x = squareSize * 2 / 3
+    if (x >= 10) {
+      LibProgress.show(esp.lang("event/seat_map", "zoom_out"))
+      timeout(() => {
+        setSquareSize(x)()
+      }, 300)
+    } else {
+      LibToastProperty.show(esp.lang("event/seat_map", "zoom_out_max"))
+    }
+  }
+
+  useEffect(() => {
+    timeout(() => {
+      LibProgress.hide()
+    }, 300)
+  }, [squareSize])
+
+  function resetZoom() {
+    return setSquareSize((Dimensions.get('screen').width / numCols.current) * 0.8)
+  }
+
+
+  function lockRelease() {
+    if (getLockedSeat().length > 0) {
+      const y = getLockedSeat().map((item) => item.y).join('|')
+      const x = getLockedSeat().map((item) => item.x).join('|')
+      toggleLock(1, y, x, () => {
+        loadData()
+      })
+    }
+  }
+
+
+  function toggleLock(lock: number, _y: string, _x: string, onDone?: () => void, onFailed?: (msg: string) => void) {
+    const lockUrl = [
+      'event_seat_lock_acquire',
+      'event_seat_lock_release',
+      'event_seat_lock_check'
+    ]
+    setLockId(getLockId() + 1)
+    const idx = getLockId()
+
+    setIsLocks(LibObject.set(getIsLocks(), false)(idx))
+    new LibCurl(lockUrl[lock], {
+      event_id: dataTicket.event_id,
+      price_id: dataTicket?.selected_ticket?.price_id,
+      ondate: dataTicket?.selected_ticket?.list?.ondate,
+      row_id: _y,
+      column_id: _x,
+    },
+      (res, msg) => {
+        setIsLocks(LibObject.set(getIsLocks(), true)(idx))()
+        onDone?.()
+      },
+      (err, msg) => {
+        setIsLocks(LibObject.set(getIsLocks(), true)(idx))()
+        onFailed?.(err.message)
+      })
+  }
+
+  useEffect(() => {
+    loadData()
+    return () => {
+      LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
+      if (!getIsSubmit())
+        lockRelease()
+    }
+  }, []);
+
+  function loadData() {
+    new LibCurl(url + '?' + LibUtils.objectToUrlParam({
+      offset_row: 1, offset_column: 1
+    }), {
+      event_id: dataTicket.event_id,
+      price_id: dataTicket?.selected_ticket?.price_id,
+      ondate: dataTicket?.selected_ticket?.list?.ondate,
+      compact: 4
+    }, (res, msg) => {
+      setStage(res.title)
+      setLockedSeat(res.locked)
+      lockRelease()
+      numRows.current = res.seat_row
+      numCols.current = res.seat_column
+      resetZoom()
+      setSeatNames(buildSeatNames(res.list.names, res.list.layout, setCoordinates))
+      const sizes = res.list.statuses;
+      const sizesArray: number[] = [];
+      sizes?.split(",").forEach((size: string) => {
+        if (size.includes('x')) {
+          const [v, x] = size?.split("x");
+          for (let i = 0; i < parseInt(v); i++) {
+            sizesArray.push(parseInt(x));
+          }
+        } else {
+          sizesArray.push(parseInt(size))
+        }
+      });
+      setData(sizesArray)()
+    }, (err) => {
+      LibNavigation.back()
+      LibToastProperty.show(err.message)
+    }, 1)
+  }
+
+  function toggleSeat(x: number, y: number) {
+    const cx = Math.floor(x / boxSize)
+    const cy = Math.floor(y / boxSize)
+    const index = (((cy * numCols.current) + cx))
+    const [_x, _y] = coordinates[index]?.split?.(":")
+
+    selectedSeat = {
+      x: _x,
+      y: _y,
+      index: index,
+      name: seatNames[index]
+    }
+    const countQty = data.filter((x) => x == -1).length
+    setData(LibObject.update(data, (old) => {
+      let out = old;
+      if (old == 0) {
+        if (countQty >= qty) {
+          LibToastProperty.show(esp.lang("event/seat_map", "max_seat", qty))
+        } else {
+          setSelectedSeatData(LibObject.set(selectedSeatData, selectedSeat)(selectedSeat.index))
+          out = -1;
+          toggleLock(0, _y, _x)
+        }
+      }
+      if (old == -1) {
+        out = 0;
+        setSelectedSeatData(LibObject.set(selectedSeatData, () => null)(selectedSeat.index))
+        toggleLock(1, _y, _x)
+      }
+      return out
+    })(selectedSeat.index))()
+  }
+
+  if (data.length == 0) {
+    return <LibLoading />
+  }
+
+  const disabled = Object.values(isLocks).some((v) => v == false)
+
+  return (
+    <View style={styles.container}>
+      <ComponentHeader title={esp.lang("event/seat_map", "header_title")} subtitle={dataTicket?.selected_ticket?.type} />
+      <View style={{ alignItems: 'center', flex: 1 }}>
+        <ScrollView showsVerticalScrollIndicator style={{ marginTop: 12 }} >
+          <View style={{ marginVertical: 10 }} >
+            <ScrollView horizontal>
+              <UseMap
+                data={getLegends()}
+                renderItem={(item) => (
+                  <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 15, marginRight: 5 }} >
+                    <View style={{ height: 20, width: 20, borderRadius: 2, borderWidth: 0.5, backgroundColor: item[0], marginRight: 8 }} />
+                    <LibTextstyle textStyle='caption1' text={item[1]} />
+                  </View>
+                )}
+              />
+            </ScrollView>
+          </View>
+          <View style={{ height: 40, marginLeft: 20, marginRight: 20, backgroundColor: LibStyle.colorPrimary, marginBottom: 20, borderRadius: 2, justifyContent: 'center', alignItems: 'center' }} >
+            <Text style={{ color: 'white', fontWeight: 'bold' }} >{stage || 'Depan'}</Text>
+          </View>
+          <ScrollView horizontal showsHorizontalScrollIndicator >
+            <LibTap onCoordinateGet={toggleSeat}>
+              <EventSeat_map_matrix
+                title={stage}
+                data={data}
+                mapWidth={numCols.current * boxSize + (margin)}
+                mapHeight={numRows.current * boxSize + (margin)}
+                seatNames={seatNames}
+                numCols={numCols}
+                boxSize={boxSize}
+                margin={margin}
+                squareSize={squareSize}
+                rB={rB}
+              />
+            </LibTap>
+          </ScrollView>
+        </ScrollView>
+      </View>
+      <View style={{ flexDirection: 'row', marginHorizontal: 12, height: 40, borderColor: '#060606', borderWidth: 1, borderRadius: 5, alignItems: 'center' }} >
+        <Pressable onPress={prev} style={{ height: 40, width: 40, alignItems: 'center', justifyContent: 'center' }} >
+          <LibIcon.SimpleLineIcons name='magnifier-remove' />
+        </Pressable>
+        <Pressable onPress={next} style={{ height: 40, width: 40, alignItems: 'center', justifyContent: 'center' }} >
+          <LibIcon.SimpleLineIcons name='magnifier-add' />
+        </Pressable>
+        <View style={{ height: 40, width: 1, backgroundColor: '#060606', marginRight: 12 }} />
+        <Text style={{}} >{esp.lang("event/seat_map", "selected", String(data.filter((x) => x == -1).length), qty)}</Text>
+      </View>
+      <ComponentButton
+        backgroundColor={disabled ? "#aaa" : LibStyle.colorPrimary}
+        testID={"save_btn"}
+        style={{ margin: 12 }}
+        label={disabled ? esp.lang("event/seat_map", "wait") : esp.lang("event/seat_map", "save")}
+        onPress={() => {
+          if (disabled) {
+            LibToastProperty.show(esp.lang("event/seat_map", "wait_toast"))
+            return
+          }
+          const nonNull = Object.values(selectedSeatData).filter((x) => x != null)
+          let value = {
+            column_id: nonNull.map((x: any) => x.x).join('|'),
+            row_id: nonNull.map((x: any) => x.y).join('|'),
+            seat_name: nonNull.map((x: any) => x.name)
+          }
+          if (nonNull.length < qty) {
+            LibToastProperty.show(esp.lang("event/seat_map", "seat_more", (qty - (nonNull.length)).toString()))
+          } else {
+            LibProgress.show(esp.lang("event/seat_map", "check_seat"))
+            const nonNull = Object.values(selectedSeatData).filter((x) => x != null)
+            toggleLock(2, nonNull.map((item: any) => item.y).join('|'), nonNull.map((item: any) => item.x).join('|'), () => {
+              LibProgress.hide()
+              setIsSubmit(true)
+              LibNavigation.sendBackResult(value, LibNavigation.getResultKey(props))
+            }, (msg) => {
+              LibProgress.hide()
+              LibDialog.warning(esp.lang("event/seat_map", "oops"), msg)
+            })
+          }
+        }} />
+    </View>
+  );
+}
+
+
+
+function buildSeatNames(input: string, { letter_axis, letter_position }: any, cb?: (coordinates: string[]) => void) {
+  const output = [];
+  let coordinates = []
+  const sections = input?.split?.(",");
+
+
+  function renderNames(letter_axis: string, letter_position: number, x: number, y: number) {
+    coordinates.push(x + ':' + y)
+    if (letter_position == 0) {
+      if (letter_axis == 'x')
+        output.push(toBase26(x) + y)
+      else if (letter_axis == 'y') {
+        output.push(toBase26(y) + x)
+      }
+    } else {
+      if (letter_axis == 'x')
+        output.push(y + toBase26(x))
+      else if (letter_axis == 'y') {
+        output.push(x + toBase26(y))
+      }
+    }
+  }
+
+
+  for (let a = 0; a < sections.length; a++) {
+    if (sections[a].length == 0) {
+      output.push("")
+      coordinates.push('0:0')
+    } else {
+      const [x, y] = sections[a]?.split?.(":")
+      if (!x.includes("-") && !y.includes('-')) {
+        renderNames(letter_axis, letter_position, parseInt(x), parseInt(y))
+      } else {
+        const [xfrom, xto] = x?.split("-")
+        const [yfrom, yto] = y?.split("-")
+        if (xto) {
+          if (parseInt(xfrom) <= parseInt(xto)) {
+            for (let i1 = parseInt(xfrom); i1 <= parseInt(xto); i1++) {
+              renderNames(letter_axis, letter_position, i1, parseInt(y))
+            }
+          } else {
+            coordinates.push('0:0')
+            output.push("")
+          }
+        } else if (yto) {
+          if (parseInt(yfrom) <= parseInt(yto)) {
+            for (let i = parseInt(yfrom); i <= parseInt(yto); i++) {
+              renderNames(letter_axis, letter_position, i, parseInt(y))
+            }
+          } else {
+            coordinates.push('0:0')
+            output.push("")
+          }
+        }
+      }
+    }
+  }
+
+  if (cb) cb(coordinates)
+
+  return output
+}
+
+
+// Function to convert a number to base26
+function toBase26(num: number) {
+  let result = "";
+
+  while (num > 0) {
+    let remainder = (num - 1) % 26;
+    result = String.fromCharCode(65 + remainder) + result;
+    num = Math.floor((num - 1) / 26);
+  }
+
+  return result;
+}
+
+function getLegends() {
+  const colors: any = [
+    ["#F1F1F1", esp.lang("event/seat_map", "available"), 0],
+    ["#8EF67B", esp.lang("event/seat_map", "chosen"), "-1"],
+    ["#2EBBE8", esp.lang("event/seat_map", "reserved"), 3],
+    ["#6C432C", esp.lang("event/seat_map", "chosen_by"), 7],
+    ["#fff", esp.lang("event/seat_map", "way"), 5],
+    ["#9FA1A4", esp.lang("event/seat_map", "not_sold"), 1],
+    ["#6B71E6", esp.lang("event/seat_map", "seat_hold"), 2],
+    ["#FF4866", esp.lang("event/seat_map", "wall"), 6],
+    ["#FFA601", esp.lang("event/seat_map", "other_type"), 4],
+    ["purple", esp.lang("event/seat_map", "stage"), 8]
+  ]
+  return colors
+}
+
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/event/seat_map_matrix.tsx

@@ -0,0 +1,94 @@
+// withHooks
+// noPage
+import esp from "esoftplay/esp";
+import React from 'react';
+
+
+export interface EventSeat_map_matrixArgs {
+
+}
+export interface EventSeat_map_matrixProps {
+
+}
+export default function m(props: any): any {
+  const { Group, RoundedRect, Text, useFont, Canvas }  = require('@shopify/react-native-skia')
+  const { mapWidth, mapHeight, data, seatNames, numCols, boxSize, margin, squareSize, rB, title } = props
+  const halfMargin = margin * 0.5
+  const fontSize = squareSize * 0.25;
+  const font = useFont(esp.assets("fonts/Arial.ttf"), fontSize);
+  let col = 0
+  let row = 0
+
+  return (
+    <Canvas style={{ width: mapWidth, height: mapHeight }} >
+      {
+        data.map((status: number, i: number) => {
+          const c = seatNames[i]
+          const color = status == -1 ? "#8EF67B" : "#f1f1f1"
+          if (i % (numCols.current) == 0) {
+            col = i / (numCols.current)
+          }
+          row = i % numCols.current
+          const xSize = row * (boxSize) + margin
+          const ySize = col * (boxSize) + margin
+
+          if (status == 0 || status == -1) {
+            return (
+              <Group key={row + ":" + col}>
+                <RoundedRect
+                  x={xSize /* + squareSize * 0.05 */}
+                  r={rB}
+                  y={ySize}
+                  width={squareSize /* - (squareSize * 0.1) */}
+                  height={squareSize}
+                  color={color} />
+                <Text
+                  x={(xSize) + squareSize * 0.3}
+                  y={(ySize) + squareSize * 0.60}
+                  color="#020202"
+                  text={c}
+                  font={font} />
+              </Group>
+            )
+          } else if (status == 8) {
+            return (
+              <RoundedRect
+                key={row + ":" + col}
+                x={xSize - halfMargin}
+                r={0}
+                y={ySize - halfMargin}
+                width={boxSize}
+                height={boxSize}
+                color={getColorByStatus(status)} />
+            )
+          } else {
+            return (
+              <RoundedRect
+                key={row + ":" + col}
+                x={xSize}
+                r={rB}
+                y={ySize}
+                width={squareSize}
+                height={squareSize}
+                color={getColorByStatus(status)} />)
+          }
+        })}
+    </Canvas>
+  )
+}
+
+
+function getColorByStatus(statuses: number) {
+  const colors: any = {
+    8: 'purple',
+    0: "#fff",
+    1: "#9FA1A4",
+    2: "#6B71E6",
+    3: "#2EBBE8",
+    4: "#FFA601",
+    5: "#fff",
+    6: "#FF4866",
+    7: "#6C432C"
+  }
+  return colors[statuses]
+}