70 lines
2.7 KiB
JavaScript
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; |