From cec490ca2cfa8bea23a6a7c5acb77aa055a4db1a Mon Sep 17 00:00:00 2001 From: Remi Date: Thu, 18 May 2023 22:39:02 +0800 Subject: [PATCH] feat: add bus with multiple choose feature --- screens/Map/BusScreen/BusDetailViewCell.jsx | 341 ++++++++++++++++ screens/Map/BusScreen/busDetailView.jsx | 428 +++++++++++++------- theme/index.js | 4 + 3 files changed, 625 insertions(+), 148 deletions(-) create mode 100644 screens/Map/BusScreen/BusDetailViewCell.jsx diff --git a/screens/Map/BusScreen/BusDetailViewCell.jsx b/screens/Map/BusScreen/BusDetailViewCell.jsx new file mode 100644 index 0000000..a8c5ba8 --- /dev/null +++ b/screens/Map/BusScreen/BusDetailViewCell.jsx @@ -0,0 +1,341 @@ +import React from "react"; +import { Box, ZStack, VStack, Text, HStack, Center, Circle } from "native-base"; + +function SingleRouteCell({ item, index, data, selectedBusList, availableBusList }) { + const firstBusColor = "secondary.600"; + const secondBusColor = "secondary.100"; + const busColor = (item.bus[0].name === availableBusList[0] ? firstBusColor : secondBusColor); + const renderLine = (item) => { + let lineList = []; + // upper line + if (index !== 0) { + lineList.push( + + ); + } + // down line + if (index !== data.length - 1) { + lineList.push( + + ); + } + return lineList; + }; + + return ( + + + + + {renderLine(item)} + + +
+ +
+ + + {item.type === 0 ? ( + {item.stop} + ) : ( + {item.stop} + )} + + + {item.bus[0].name} + + +
+ {item.bus[0].time} +
+ + + ); +} + +function DoubleRouteCell({ item, index, data, selectedBusList, availableBusList }) { + const firstBusColor = "secondary.600"; + const secondBusColor = "secondary.100"; + const busColor = (item.bus[0].name === availableBusList[0] ? firstBusColor : secondBusColor); + console.log(selectedBusList); + const renderLine = (item) => { + let lineList = []; + if (item.type !== 0) { + return ( + + ); + } + // upper line + if (index !== 0 && data[index - 1].type !== 0) { + lineList.push( + + ); + } else if (index !== 0) { + lineList.push( + + ); + } + // down line + if (index !== data.length - 1 && data[index + 1].type !== 0) { + lineList.push( + + ); + } else if (index !== data.length - 1) { + lineList.push( + + ); + } + return lineList; + }; + + const renderLine2 = (item) => { + let lineList = []; + if (item.type !== 0) { + return ( + + + + ); + } + // upper line + if (index !== 0 && data[index - 1].type !== 0) { + lineList.push( + + ); + } else if (index !== 0) { + lineList.push( + + ); + } + // down line + if (index !== data.length - 1 && data[index + 1].type !== 0) { + lineList.push( + + ); + } else if (index !== data.length - 1) { + lineList.push( + + ); + } + return lineList; + }; + + return ( + + + + + + {renderLine(item)} + {item.type === 1 && item.pass.indexOf(selectedBusList[0]) !== -1 && ( + + )} + + + {renderLine2(item)} + + {item.type === 1 && item.pass.indexOf(selectedBusList[1]) !== -1 && ( + + )} + + + +
+ {item.type === 0 && ( + + )} +
+ + + {item.type === 0 ? ( + {item.stop} + ) : ( + {item.stop} + )} + + + {item.bus[0].name} + + +
+ {item.bus[0].time} +
+ + + ); +} + +export default function BusDetailViewCell({ item, index, data, selectedBusList, availableBusList }) { + availableBusList.sort(); + if (selectedBusList.length == 0) { + + } + else if (selectedBusList.length == 1) { + return ( + + ); + } else { + return ( + + ); + } +} diff --git a/screens/Map/BusScreen/busDetailView.jsx b/screens/Map/BusScreen/busDetailView.jsx index c85dbdc..9f9a9e6 100644 --- a/screens/Map/BusScreen/busDetailView.jsx +++ b/screens/Map/BusScreen/busDetailView.jsx @@ -1,179 +1,311 @@ -import React, { useState, useEffect } from "react"; -import { Animated } from 'react-native' -import { Box, Container, FormControl, WarningOutlineIcon, FlatList, ZStack, Heading, Avatar, HStack, VStack, Text, Spacer, Center, Pressable, StatusBar, Checkbox, useColorModeValue, NativeBaseProvider } from "native-base"; -import { TabView, SceneMap } from 'react-native-tab-view'; -import BusController from '../../../controller/Bus'; +import React, { useState, useEffect } from 'react' +import { + Box, + ZStack, + VStack, + Text, + HStack, + Checkbox, + WarningOutlineIcon, + Pressable, + Center, + ScrollView, + StatusBar, + Circle, + Container +} from 'native-base' +import { TabView } from 'react-native-tab-view' +import BusController from '../../../controller/Bus' +import BusDetailViewCell from './BusDetailViewCell' -const TimeTableRoute = ({ direction, busInfo }) => { - const [data, setData] = useState([{}]); - // const [refreshing, setRefreshing] = useState(true); +const testData = [ + { + alert: 0, + type: 0, // 0 合併, 1 分岔 + pass: ['132', '133'], + bus: [ // 最近五班車 + { + name: '133', + time: '14:00' + }, + { + name: '132', + time: '15:00' + } + ], + stop: '中壢公車站' + }, + { + alert: 0, + type: 0, + pass: ['132', '133'], + bus: [ // 進五班車 + { + name: '133', + time: '14:00' + }, + { + name: '132', + time: '15:00' + } + ], + stop: '第一銀行' + }, + { + alert: 0, + type: 1, + pass: ['132'], + bus: [ // 進五班車 + { + name: '132', + time: '15:00' + } + ], + stop: '第一市場' + }, + { + alert: 0, + type: 1, + pass: ['132'], + bus: [ // 進五班車 + { + name: '132', + time: '15:00' + } + ], + stop: '舊社' + }, + { + alert: 0, + type: 1, + pass: ['133'], + bus: [ // 進五班車 + { + name: '133', + time: '15:00' + } + ], + stop: '新明國中(民族路)' + }, + { + alert: 0, + type: 0, + pass: ['132', '133'], + bus: [ // 進五班車 + { + name: '133', + time: '14:00' + }, + { + name: '132', + time: '15:00' + } + ], + stop: '廣興' + }, + { + alert: 0, + type: 0, + pass: ['132', '133'], + bus: [ // 進五班車 + { + name: '133', + time: '14:00' + }, + { + name: '132', + time: '15:00' + } + ], + stop: '仁愛新村' + } +] + +function BusSelector ({ + navigation, + availableBusList, + selectedBusList, + setSelectedBusList +}) { + return ( + + + { + setSelectedBusList(values || []) + }} + > + {availableBusList.map((busName) => ( + + {busName} + + ))} + + {selectedBusList.length === 0 && ( + + + 請選擇公車班次 + + )} + + { + // navigation.navigate("BusTimeTable"); + }} + > +
+ 發車時刻表 +
+ + + ) +} + +function TimeTableRoute ({ direction, selectedBusList, availableBusList }) { + const [data, setData] = useState(testData) // useState([{}]) + // const [refreshing, setRefreshing] = useState(true); const onRefresh = () => { - BusController({ buses: busInfo, dir: direction }).then((res) => { - setData(res); - }); - }; + BusController({ buses: selectedBusList, dir: direction }).then((res) => { + setData(testData) // using testData + }) + } useEffect(() => { - onRefresh(); - let id = setInterval(onRefresh, 10000); + onRefresh() + const id = setInterval(onRefresh, 10000) return () => { - clearInterval(id); - }; - }, [busInfo]); + clearInterval(id) + } + }, [selectedBusList]) - - return
- { - return - - - {item.time} - -
- {item.bus} -
- - {item.stop} - - - - }} /> -
; + return ( + +
+ + {data.map((item, index) => { + return + })} + +
+ + ) } -const renderScene = ({ route }, busInfo) => { - // console.log(busInfo) - +const renderScene = ({ route }, selectedBusList, availableBusList) => { switch (route.key) { case 'first': - return ; + return case 'second': - return ; + return default: - return null; + return null } } - - - -const Example = ({ navigation, routeInfo }) => { - let busList = [] - if (routeInfo.name == 'toZhongli') busList = ['132', '133'] - else if (routeInfo.name == 'toHSR') busList = ['172', '173'] - else busList = [routeInfo.name] - const [groupValues, setGroupValues] = React.useState(busList); - - const BusSelector = () => { - return - - { - setGroupValues(values || []); - }}> - {busList.map((busName) => { - return - {busName} - - })} - - {groupValues.length == 0 && - - - You must select at least three methods - } - - +const renderTabBar = (props, index, setIndex) => { + const inputRange = props.navigationState.routes.map((x, i) => i) + return ( + + {props.navigationState.routes.map((route, i) => { + const borderColor = index === i ? '#476685' : 'coolGray.200' + return ( + + { + setIndex(i) + }} + > + {route.title} + + + ) + })} + ) +} - { navigation.navigate('BusTimeTable'); }} - > -
- 發車時刻表 -
- - - ; - }; +function BusTimeTableTabView ({ navigation, routeInfo }) { + let availableBusList = [] + if (routeInfo.name === 'toZhongli') availableBusList = ['132', '133'] + else if (routeInfo.name === 'toHSR') availableBusList = ['172', '173'] + else availableBusList = [routeInfo.name] - console.log("routeInfo", routeInfo) - let destination = { - 'route0': '往中央大學', - 'route1': '' + const [selectedBusList, setSelectedBusList] = + React.useState(availableBusList) + const [index, setIndex] = React.useState(0) // TabBar index (can't change valuable name) + const destination = { + route0: '往中央大學', + route1: '' } switch (routeInfo.name) { case 'toZhongli': destination.route1 = '往中壢公車站' - break; + break case 'toHSR': destination.route1 = '往桃園高鐵站' - break; + break case '9025A': destination.route1 = '松山機場' + break default: destination.route1 = 'unknown' } - const [index, setIndex] = React.useState(0); - const [routes] = React.useState([{ - key: 'first', - title: destination.route0 - }, { - key: 'second', - title: destination.route1 - }]); - - const renderTabBar = props => { - const inputRange = props.navigationState.routes.map((x, i) => i); - return - {props.navigationState.routes.map((route, i) => { - const opacity = props.position.interpolate({ - inputRange, - outputRange: inputRange.map(inputIndex => inputIndex === i ? 1 : 0.5) - }); - const color = index === i ? '#476685' : '#000'; - const borderColor = index === i ? '#476685' : 'coolGray.200'; - return - { - console.log(i); - setIndex(i); - }}> - - {route.title} - - - ; - })} - ; - }; - - - return - - - {routeInfo.nameZH_TW} - - - - - renderScene(props, groupValues)} renderTabBar={renderTabBar} onIndexChange={setIndex} style={{ marginTop: StatusBar.currentHeight }} />; - ; -}; - + const [routes] = React.useState([ + { + key: 'first', + title: destination.route0 + }, + { + key: 'second', + title: destination.route1 + } + ]) + return ( + + + + + {routeInfo.nameZH_TW} + + + + + renderScene(props, selectedBusList, availableBusList)} + renderTabBar={(props) => renderTabBar(props, index, setIndex)} + onIndexChange={setIndex} + style={{ marginTop: StatusBar.currentHeight }} + /> + + ) +} -export default ({ route, navigation }) => { +export default function ({ route, navigation }) { return ( - - - - - - ); -}; + + + + ) +} diff --git a/theme/index.js b/theme/index.js index 79e1ace..e1b7149 100644 --- a/theme/index.js +++ b/theme/index.js @@ -13,6 +13,10 @@ export const BaseTheme = extendTheme({ 600: '#476685', 100: '#E5EBF1', }, + secondary: { + 600: "#ffaf42", + 100: "#7946e6" + } }, config: { // Changing initialColorMode to 'dark'