|
1 import './Navbar.css'; |
1 import PropTypes from 'prop-types'; |
2 import PropTypes from 'prop-types'; |
2 import React, { Component } from 'react'; |
3 import React, { Component } from 'react'; |
3 import { connect } from 'react-redux'; |
4 import { connect } from 'react-redux'; |
4 import { withRouter } from 'react-router'; |
5 import { withRouter } from 'react-router'; |
5 import { bindActionCreators } from 'redux'; |
6 import { bindActionCreators } from 'redux'; |
6 // import logo from './logo.svg'; |
7 // import logo from './logo.svg'; |
7 import { Navbar, Nav, NavItem, NavDropdown, MenuItem, Modal, Button } from 'react-bootstrap'; |
8 import { NavDropdown, MenuItem, Modal} from 'react-bootstrap'; |
8 import * as authActions from '../actions/authActions'; |
9 import * as authActions from '../actions/authActions'; |
9 import { forceSync } from '../actions/networkActions'; |
10 import { forceSync } from '../actions/networkActions'; |
10 import { groupSetCurrent } from '../actions/groupActions'; |
11 import { groupSetCurrent } from '../actions/groupActions'; |
11 import { isAuthenticated, getCurrentUser, getOnline, getCurrentGroup, getGroups } from '../selectors/authSelectors'; |
12 import { isAuthenticated, getCurrentUser, getOnline, getCurrentGroup, getGroups } from '../selectors/authSelectors'; |
12 import { isSynchronizing, isSynchronized } from '../selectors/syncSelectors'; |
13 import { isSynchronizing, isSynchronized } from '../selectors/syncSelectors'; |
13 import './Navbar.css'; |
|
14 |
14 |
15 const LoginNav = ({isAuthenticated, currentUser, history, authActions, onLogout}) => { |
15 const LoginNav = ({isAuthenticated, currentUser, history, authActions, onLogout}) => { |
16 |
16 |
17 const onClickSettings = (e) => { |
17 const onClickSettings = (e) => { |
18 e.preventDefault(); |
18 e.preventDefault(); |
24 history.push('/login'); |
24 history.push('/login'); |
25 } |
25 } |
26 |
26 |
27 if (isAuthenticated) { |
27 if (isAuthenticated) { |
28 return ( |
28 return ( |
29 <NavDropdown title={ currentUser.get('username') } id="user-dropdown"> |
29 <NavDropdown title={ currentUser.get('username') }> |
30 <MenuItem onClick={onClickSettings}>Settings</MenuItem> |
30 <li> |
31 <MenuItem onClick={onLogout}>Logout</MenuItem> |
31 <a href="#settings" onClick={onClickSettings}>Paramètres</a> |
32 </NavDropdown> |
32 </li> |
|
33 <li> |
|
34 <a href="#logout" onClick={onLogout}>Se déconnecter</a> |
|
35 </li> |
|
36 </NavDropdown> |
33 ); |
37 ); |
34 } |
38 } |
35 return ( |
39 return ( |
36 <NavItem onClick={onClickLogin} href="/login">Login</NavItem> |
40 <li> |
|
41 <a onClick={onClickLogin} href="/login">Se connecter</a> |
|
42 </li> |
37 ); |
43 ); |
38 } |
44 } |
39 |
45 |
40 const Online = ({ online }) => { |
46 const Online = ({ online }) => { |
41 return ( |
47 return ( |
42 <NavItem> |
48 <li> |
43 <span className="material-icons" style={{ color: online ? '#2ECC71' : '#E74C3C' }}>signal_wifi_4_bar</span> |
49 <a> |
44 </NavItem> |
50 <span className="material-icons" style={{ color: online ? '#2ECC71' : '#F95B5B' }}>signal_wifi_4_bar</span> |
|
51 </a> |
|
52 </li> |
45 ) |
53 ) |
46 } |
54 } |
47 |
55 |
48 const SyncButton = ({ onSyncClick, isSynchronizing, isSynchronized, id }) => { |
56 const SyncButton = ({ isAuthenticated, onSyncClick, isSynchronizing, isSynchronized, id }) => { |
49 const classnames = "material-icons" |
57 const classnames = "material-icons" |
50 + ((!isSynchronized)?" sync-button-not-synchronized":"") |
58 + ((!isSynchronized)?" sync-button-not-synchronized":"") |
51 + ((isSynchronizing)?" sync-button-synchronizing":""); |
59 + ((isSynchronizing)?" sync-button-synchronizing":""); |
52 let title = "Synchronize"; |
60 let title = "Synchronize"; |
53 let clickCb = onSyncClick; |
61 let clickCb = onSyncClick; |
56 clickCb = () => {}; |
64 clickCb = () => {}; |
57 } else if (!isSynchronized) { |
65 } else if (!isSynchronized) { |
58 title += ": not synchronized"; |
66 title += ": not synchronized"; |
59 } |
67 } |
60 |
68 |
|
69 if (isAuthenticated) { |
|
70 return ( |
|
71 <li> |
|
72 <a title={title} onClick={clickCb} id={id || null}> |
|
73 <span className={classnames}></span> </a> |
|
74 </li> |
|
75 ); |
|
76 } |
61 return ( |
77 return ( |
62 <NavItem title={title} onClick={clickCb} id={id || null}> |
78 <li> |
63 <span className={classnames}></span> |
79 <a> |
64 </NavItem> |
80 <span></span> |
65 ) |
81 </a> |
66 } |
82 </li> |
|
83 ); |
|
84 } |
|
85 |
67 |
86 |
68 const GroupStatus = ({currentGroup, groups, onSelect}) => { |
87 const GroupStatus = ({currentGroup, groups, onSelect}) => { |
69 |
88 |
70 if(currentGroup) { |
89 if(currentGroup) { |
71 const currentGroupName = currentGroup.get('name'); |
90 const currentGroupName = currentGroup.get('name'); |
72 return ( |
91 return ( |
73 <NavDropdown title={currentGroupName} id="group-dropdown" onSelect={onSelect}> |
92 <NavDropdown title={currentGroupName} onSelect={onSelect}> |
74 { groups && groups.map((group, key) => { |
93 { groups && groups.map((group, key) => { |
75 const groupName = group.get('name'); |
94 const groupName = group.get('name'); |
76 const className = (groupName === currentGroupName)?'active':null; |
95 const className = (groupName === currentGroupName)?'active':null; |
77 return <MenuItem className={className} key={key} eventKey={groupName}>{ groupName }</MenuItem> |
96 return <MenuItem id="groups" className={className} key={key} eventKey={groupName}>{ groupName }</MenuItem> |
78 } |
97 } |
79 )} |
98 )} |
80 <MenuItem key="-1" eventKey="__create_group__">Créer un groupe...</MenuItem> |
99 <MenuItem key="-1" eventKey="__create_group__">Créer un groupe...</MenuItem> |
81 </NavDropdown> |
100 </NavDropdown> |
82 ) |
101 ) |
147 } |
166 } |
148 } |
167 } |
149 |
168 |
150 render() { |
169 render() { |
151 return ( |
170 return ( |
152 <Navbar fluid inverse fixedTop> |
171 <nav className="navbar navbar-inverse navbar-fixed-top"> |
153 <Navbar.Header> |
172 <div className="container-fluid"> |
154 <Navbar.Brand> |
173 <div className="navbar-header"> |
155 <a onClick={this.onClickHome} href="/">IRI Notes</a> |
174 <a className="navbar-brand" onClick={this.onClickHome} href="/">IRI Notes</a> |
156 </Navbar.Brand> |
175 <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> |
157 <Navbar.Toggle /> |
176 <span className="sr-only">Toggle navigation</span> |
158 </Navbar.Header> |
177 <span className="icon-bar"></span> |
159 <Navbar.Collapse> |
178 <span className="icon-bar"></span> |
160 <Nav> |
179 <span className="icon-bar"></span> |
161 <NavItem onClick={this.onClickSessions} href="/sessions">Sessions</NavItem> |
180 </button> |
162 </Nav> |
181 </div> |
163 <Nav pullRight> |
182 <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> |
164 <GroupStatus currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/> |
183 <ul className="nav navbar-nav"> |
165 <SyncButton id='sync-button' onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} /> |
184 <li> |
166 <Online {...this.props} /> |
185 <a onClick={this.onClickSessions} href="/sessions">Accueil</a> |
167 <LoginNav {...this.props} onLogout={this.onClickLogout} /> |
186 </li> |
168 </Nav> |
187 </ul> |
169 </Navbar.Collapse> |
188 <ul className="nav navbar-nav navbar-right"> |
170 <Modal show={this.state.showModal} onHide={this.closeModal}> |
189 <GroupStatus currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/> |
171 <Modal.Body> |
190 <SyncButton id='sync-button' isAuthenticated={this.props.isAuthenticated} onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} /> |
172 <p className="text-center"> |
191 <Online {...this.props} /> |
173 Some data is not synchronized with server. |
192 <LoginNav {...this.props} onLogout={this.onClickLogout} /> |
174 <br /> |
193 </ul> |
175 If you continue, it will be lost. |
194 </div> |
176 </p> |
195 <Modal show={this.state.showModal} onHide={this.closeModal}> |
177 </Modal.Body> |
196 <Modal.Body> |
178 <Modal.Footer> |
197 <p className="text-center"> |
179 <Button bsStyle="primary" onClick={this.confirmLogout}>Confirm</Button> |
198 Certaines données n'ont pas encore été sauvegardées. |
180 <Button onClick={this.closeModal}>Close</Button> |
199 <br /> |
181 </Modal.Footer> |
200 Si vous continuez, elles seront perdues. |
182 </Modal> |
201 </p> |
183 </Navbar> |
202 </Modal.Body> |
|
203 <Modal.Footer> |
|
204 <button type="submit" className="btn btn-primary btn-lg" onClick={this.confirmLogout}>Confirmer</button> |
|
205 <button type="submit" className="btn btn-default btn-lg" onClick={this.closeModal}>Fermer</button> |
|
206 </Modal.Footer> |
|
207 </Modal> |
|
208 </div> |
|
209 </nav> |
|
210 |
184 ); |
211 ); |
185 } |
212 } |
186 } |
213 } |
187 |
214 |
188 AppNavbar.propTypes = { |
215 AppNavbar.propTypes = { |