webio-node/src/components/AdminPage/Wristband/index.js

70 lines
2.7 KiB
JavaScript

import React from 'react';
import {Grid, Container, Segment, Menu, List} from 'semantic-ui-react';
import LocStatus from '../../../containers/AdminPage/Wristband/LocStatus';
import WristbandInfo from '../../../containers/AdminPage/Wristband/WristbandInfo';
import Location from '../../../containers/AdminPage/Wristband/Location';
import LocStatusWloc from '../../../containers/AdminPage/Wristband/LocStatusWloc';
class WristbandPage extends React.Component{
state = {
page: ''
}
changePage = (page) => {
this.setState({
page
})
}
getRenderPage = () => {
let {i18n} = this.props;
switch(this.state.page) {
case 'locstatus':
return <LocStatus/>;
case 'locstatus_wloc':
return <LocStatusWloc />;
case 'wristband':
return <WristbandInfo />;
case 'location':
return <Location />
default:
return null;
}
}
render(){
let {i18n} = this.props;
return (
<Container fluid style={{paddingLeft: '10px', paddingRight: '10px'}}>
<Grid>
<Grid.Column width={4}>
<Menu vertical={true} fluid>
<Menu.Item>
<Menu.Header>主選單</Menu.Header>
<Menu.Menu>
<Menu.Item active={this.state.page == 'wristband'} onClick={()=>{this.changePage('wristband')}}>
手環名稱設定
</Menu.Item>
<Menu.Item active={this.state.page == 'location'} onClick={()=>{this.changePage('location')}}>
定位點設定
</Menu.Item>
<Menu.Item active={this.state.page == 'locstatus'} onClick={()=>{ this.changePage('locstatus'); }}>
位置資訊
</Menu.Item>
<Menu.Item active={this.state.page == 'locstatus_wloc'} onClick={()=>{ this.changePage('locstatus_wloc'); }}>
位置資訊 - 地點分類
</Menu.Item>
</Menu.Menu>
</Menu.Item>
</Menu>
</Grid.Column>
<Grid.Column width={12}>
{this.getRenderPage()}
</Grid.Column>
</Grid>
</Container>
)
}
}
export default WristbandPage;