Untitled
unknown
plain_text
4 years ago
13 kB
22
Indexable
import React, {useState, useEffect} from 'react';
import {View, Dimensions, ScrollView} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import request from '../../utils/request';
import {
Layout,
Text,
withStyles,
Button,
Select,
CheckBox,
SelectItem,
Input,
} from '@ui-kitten/components';
import Constants from '../../constants';
import MapView from 'react-native-maps';
function OrderLocationSetting(props) {
const [destinations, setDestinations] = useState([]);
const [address, setAddress] = useState('');
const [name, setName] = useState('');
const [selectedLocation, setSelectedLocation] = useState(null);
const [stores, setStores] = useState([]);
const [selectedStore, setSelectedStore] = useState(null);
const [machineId, setMachineId] = useState(null);
const [checkedBreakfast, setCheckedBreakfast] = useState(false);
const [checkedLunch, setCheckedLunch] = useState(false);
const [checkedDinner, setCheckedDinner] = useState(false);
const [coordinates, setCoordinates] = useState({
latitude: 24.8019906,
longitude: 120.9903586,
latitudeDelta: 0.02,
longitudeDelta: 0.01,
});
useEffect(() => {
getDestinations();
}, []);
useEffect(() => {
getStore();
}, []);
function handleSelect(inputPlace) {
setMachineId(inputPlace.id);
setName(inputPlace.name);
setAddress(inputPlace.address);
setSelectedLocation(inputPlace);
setCoordinates({
latitude: inputPlace.latitude,
longitude: inputPlace.longitude,
latitudeDelta: 0.02,
longitudeDelta: 0.01,
});
}
async function getStore() {
try {
const response = await request.get('/stores');
var items = response.data;
if (items && items.length > 0) {
setStores(items);
}
} catch (error) {
alert('無法取得分店名稱，請稍後再試');
console.log(error);
return false;
}
}
async function getDestinations() {
try {
const response = await request.get('/destination/machines');
if (response.data && response.data.length > 0) {
console.log(response.data);
setDestinations(response.data);
}
} catch (error) {
alert('無法取得已設置販賣機位置，請稍後再試');
console.log(error);
return false;
}
}
async function createMachine() {
console.log('createMachine', {
machine_id: machineId,
store_id: selectedStore.id,
breakfast: checkedBreakfast,
lunch: checkedLunch,
dinner: checkedDinner,
});
try {
await request.post('/destination/addmachine/', {
machine_id: machineId,
store_id: selectedStore.id,
breakfast: checkedBreakfast,
lunch: checkedLunch,
dinner: checkedDinner,
});
setAddress('');
setName('');
alert('調整時段及據點完成');
return true;
} catch (err) {
alert('伺服器發生問題，請稍後再試');
console.log(err);
return false;
}
}
function handleAddAddress() {
if (selectedStore == null) {
alert('未選擇營運門市');
return;
}
if (address == '') {
alert('未選擇販賣機');
return;
}
if (
coordinates.latitude == 24.8019906 &&
coordinates.longitude == 120.9903586
) {
alert('未選擇新座標位置');
return;
}
//without any money dealing & deliver fee
if (!(checkedDinner || checkedLunch || checkedBreakfast)) {
alert('請至少選擇一個時段');
return;
}
if (!createMachine()) {
return;
}
if (!getDestinations()) {
return;
}
}
function handleTimeSetting(target){
}
function handleClosedTime(target){
}
function handlePress(location) {
setCoordinates({
latitude: location.latitude,
longitude: location.longitude,
});
}
return (
<Layout style={{flex: 1}}>
<ScrollView contentContainerStyle={{padding: 24, flexGrow: 1}}>
<View>
<Text category="h6">選擇販賣機位置並綁定販售門市</Text>
</View>
<Select
size="large"
label="販賣機據點清單："
style={{marginTop: 24}}
placeholder="現有販賣機"
data={destinations}
value={name}
disabled={destinations.length === 0}
onSelect={index => handleSelect(destinations[index - 1])}>
{destinations.map(({name}) => {
return <SelectItem key={name} title={name} />;
})}
</Select>
{address ? (
<Text status="info" category="label" style={{marginTop: 12}}>
{address}
</Text>
) : null}
{/* <Select
size="large"
label="營運門市"
style={{marginTop: 24}}
placeholder="請選擇營運販賣機門市"
data={stores}
value={selectedStore ? selectedStore.name : null}
disabled={stores.length === 0}
onSelect={index => setSelectedStore(stores[index - 1])}>
{stores.map(({name}) => (
<SelectItem key={name} title={name} />
))}
</Select> */}
<View style={{marginVertical: 24}}>
<Text category="h6">提供營運時段</Text>
<View
style={{
paddingVertical: 24,
}}>
<CheckBox
checked={checkedBreakfast}
onChange={nextChecked => setCheckedBreakfast(nextChecked)}>
早餐 (7:00:00~)
</CheckBox>
{checkedBreakfast && (
<View style={{margin:10}}>
<Text>時間設定</Text>
<View
style={{
flexDirection: "row",
margin:10
}}>
<View style={{flex: 0.2 }}>
<Text>早上:</Text>
</View>
<View style={{flex: 0.4 }}>
<Text>停售時間</Text>
</View>
<View style={{flex: 0.4 }}>
<Text>釋放的時間</Text>
</View>
</View>
<View style={{
flexDirection: "row"}}>
<Input style={{flex: 0.8,margin:2,marginLeft:60}}
name="breakfast_end_time"
onChange={(e) => handleTimeSetting(e.target)}
placeholder='10:00:00'/>
<Input style={{flex: 0.8,margin:2,marginLeft:8}}
name="breakfastReleaseTime"
placeholder='分鐘'/>
</View>
<View style={{
flexDirection: "row",
margin:10,
marginLeft:76
}}>
<Text>結單時間：顧客最晚訂購時間</Text>
</View>
<View>
<Input style={{flex: 0.8,margin:2,marginLeft:60}}
name="breakfast_closed_time"
placeholder='範例：19:30:00'
onChange={(e)=>handleClosedTime(e.target)}
/>
</View>
</View>
)}
<CheckBox
style={{marginTop: 24}}
checked={checkedLunch}
onChange={nextChecked => setCheckedLunch(nextChecked)}>
午餐 (11:00:00~)
</CheckBox>
{checkedLunch && (
<View style={{margin:10}}>
<Text>時間設定</Text>
<View
style={{
flexDirection: "row",
margin:10
}}>
<View style={{flex: 0.2 }}>
<Text>中午:</Text>
</View>
<View style={{flex: 0.4 }}>
<Text>停售時間</Text>
</View>
<View style={{flex: 0.4 }}>
<Text>釋放的時間</Text>
</View>
</View>
<View style={{
flexDirection: "row"}}>
<Input style={{flex: 0.8,margin:2,marginLeft:60}}
name="lunch_end_time"
placeholder='13:00:00'
onChange={(e) => handleTimeSetting(e.target)}/>
<Input style={{flex: 0.8,margin:2,marginLeft:8}}
name="lunchReleaseTime"
placeholder='分鐘'
/>
</View>
<View style={{
flexDirection: "row",
margin:10,
marginLeft:76
}}>
<Text>結單時間：顧客最晚訂購時間</Text>
</View>
<View>
<Input style={{flex: 0.8,margin:2,marginLeft:60}}
name="lunch_closed_time"
// inputRef={register}
placeholder='範例：14:00:00'
onChange={(e)=>handleClosedTime(e.target)}
/>
</View>
</View>
)}
<CheckBox
style={{marginTop: 24}}
checked={checkedDinner}
onChange={nextChecked => setCheckedDinner(nextChecked)}>
晚餐 (18:00:00~)
</CheckBox>
{checkedDinner && (
<View style={{margin:10}}>
<Text>時間設定</Text>
<View
style={{
flexDirection: "row",
margin:10
}}>
<View style={{flex: 0.2 }}>
<Text>晚上:</Text>
</View>
<View style={{flex: 0.4 }}>
<Text>停售時間</Text>
</View>
<View style={{flex: 0.4 }}>
<Text>釋放的時間</Text>
</View>
</View>
<View style={{
flexDirection: "row"}}>
<Input style={{flex: 0.8,margin:2,marginLeft:60}}
name="dinner_end_time"
onChange={(e) => handleTimeSetting(e.target)}
placeholder="19:30:00"
/>
<Input style={{flex: 0.8,margin:2,marginLeft:8}}
name="dinnerReleaseTime"
placeholder='分鐘'
/>
</View>
<View style={{
flexDirection: "row",
margin:10,
marginLeft:76
}}>
<Text>結單時間：顧客最晚訂購時間</Text>
</View>
<View>
<Input style={{flex: 0.8,margin:2,marginLeft:60}}
name="dinner_closed_time"
placeholder='範例：19:30:00'
onChange={(e)=>handleClosedTime(e.target)}
/>
</View>
</View>
)}
</View>
</View>
<MapView
style={{
width: Dimensions.get('window').width - 32,
height: 240,
}}
onPress={event => handlePress(event.nativeEvent.coordinate)}
region={{
latitude: coordinates.latitude,
longitude: coordinates.longitude,
longitudeDelta: 0.02,
latitudeDelta: 0.01,
}}
initialRegion={{
latitude: 24.8527315,
longitude: 121.0842217,
latitudeDelta: 0.05,
longitudeDelta: 0.04,
}}>
<MapView.Marker.Animated
coordinate={coordinates}
title="選擇位置"
description="想要增加的位置"
/>
</MapView>
</ScrollView>
<View
style={{
width: '100%',
position: 'absolute',
padding: 12,
bottom: 0,
backgroundColor: '#fff',
}}>
<Button onPress={handleAddAddress}>更新</Button>
</View>
</Layout>
);
}
export default OrderLocationSetting = withStyles(
OrderLocationSetting,
theme => ({}),
);
Editor is loading...