add timezone setting

src/components/AdminPage/SystemInfo/TimezoneForm.js

@@ -1,12 +1,14 @@
 import React from 'react';
-import {Form, Input, Button} from 'semantic-ui-react';
+import {Form, Input, Button, Label, Message} from 'semantic-ui-react';
 import {getRequest} from '../../../actions';
 
 class TimezoneForm extends React.Component {
     state = {
         zones: [],
         zone: '',
-        loc: ''
+        loc: '',
+        selZone: null,
+        selLoc: null
     }
 
     componentDidMount(){
@@ -38,14 +40,75 @@ class TimezoneForm extends React.Component {
             })
     }
 
+    zonesChange = (data) => {
+        this.setState({
+            selZone: data == '' ? null : data
+        })
+    }
+
+    handleSubmit = () => {
+        if(this.state.selZone == null || this.state.selLoc == null ) return this.props.showDialog('請選擇區域與城市');
+        let zone = this.state.zones[this.state.selZone].name;
+        let loc = this.state.zones[this.state.selZone].location[this.state.selLoc];
+
+        fetch('/api/system/settimezone', getRequest({timezone: `${zone}/${loc}`}))
+            .then(response=>response.json())
+            .then(json => {
+                if(json.status != 1) return this.props.showDialog(json.message);
+                this.setState({
+                    selZone: null,
+                    selLoc: null
+                }, () => {
+                    this.getZoneSet();
+                })
+            })
+    }
+
     render(){
         return (
-            <Form>
-                <Form.Field>
-                    <Input label="系統Timezone" 
-                        value={`${this.state.zone}${this.state.zone.length > 0 ? '/' : ''}${this.state.loc}`} />
+            <Form onSubmit={(e,d) => {
+                    e.preventDefault();
+                    this.handleSubmit();
+                }} serializer={e=>{
+                    return {};
+                }}>
+                <Form.Field inline>
+                    {/*<Input label="系統Timezone" 
+                        value={`${this.state.zone}${this.state.zone.length > 0 ? '/' : ''}${this.state.loc}`}
+                        disabled />*/}
+                    <label>系統Timezone</label>
+                    <Label content={`${this.state.zone}${this.state.zone.length > 0 ? '/' : ''}${this.state.loc}`} basic/>
                 </Form.Field>
-                
+                <Form.Group inline>
+                    <Form.Field>
+                        <label>設定Timezone</label>
+                        <select value={this.state.selZone == null ? '' : this.state.selZone} onChange={e=>{ this.zonesChange(e.target.value); }}>
+                            <option value="">選擇區域</option>
+                            {
+                                this.state.zones.map((t,idx)=>(
+                                    <option key={idx} value={idx}>{t.name}</option>
+                                ))
+                            }
+                        </select>
+                    </Form.Field>
+                    {
+                        this.state.selZone == null ? null :
+                        (
+                            <Form.Field>
+                                <select value={this.state.selLoc == null ? '' : this.state.selLoc} 
+                                    onChange={e => { this.setState({selLoc: e.target.value == '' ? null : e.target.value}) }}>
+                                    <option value="">選擇城市</option>
+                                    {
+                                        this.state.zones[this.state.selZone].location.map((t,idx) => (
+                                            <option key={idx} value={idx}>{t}</option>
+                                        ))
+                                    }
+                                </select>
+                            </Form.Field>
+                        )
+                    }
+                </Form.Group>
+                <Button type="submit" fluid content="更新Timezone" />
             </Form>
         )
     }