Untitled

mail@pastecode.io avatar
unknown
plain_text
2 years ago
13 kB
3
Indexable
Never
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 => ({}),
);