Skip to content

Commit a6356a0

Browse files
author
gondzo
committed
add react challenge #3 files
1 parent e1925ec commit a6356a0

File tree

102 files changed

+3161
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

102 files changed

+3161
-0
lines changed

‎src/components/Breadcrumb/Breadcrumb.jsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React, { PropTypes } from 'react';
2+
import CSSModules from 'react-css-modules';
3+
import { Link } from 'react-router';
4+
import styles from './Breadcrumb.scss';
5+
6+
export const Breadcrumb = ({ items }) => (
7+
<ul styleName="breadcrumb">
8+
{items.map((item, index) => (
9+
<li styleName="item" key={index}>
10+
{item.path
11+
? <Link to={item.path}>{item.text}</Link>
12+
: <span key={index}>{item.text}</span>}
13+
</li>
14+
))}
15+
</ul>
16+
);
17+
18+
const BreadcrumbItemPropType = {
19+
text: PropTypes.string.isRequired,
20+
path: PropTypes.string,
21+
};
22+
23+
Breadcrumb.propTypes = {
24+
items: PropTypes.arrayOf(
25+
PropTypes.shape(BreadcrumbItemPropType)
26+
).isRequired,
27+
};
28+
29+
export default CSSModules(Breadcrumb, styles);

‎src/components/Breadcrumb/Breadcrumb.scss

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.breadcrumb {
2+
background-color: #fff;
3+
border-bottom: 1px solid #d8d8d8;
4+
border-top: 1px solid #d8d8d8;
5+
color: #525051;
6+
font-size: 12px;
7+
line-height: 37px;
8+
margin: 0;
9+
padding: 0 30px;
10+
}
11+
12+
.item {
13+
display: inline;
14+
list-style: none;
15+
16+
&:after {
17+
content: '>';
18+
display: inline;
19+
margin-left: 4px;
20+
margin-right: 8px;
21+
}
22+
23+
&:last-child:after {
24+
content: '';
25+
display: none;
26+
}
27+
28+
> a {
29+
color: #525051;
30+
}
31+
32+
> span {
33+
color: #525051;
34+
font-weight: 600;
35+
}
36+
}

‎src/components/Breadcrumb/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Breadcrumb from './Breadcrumb';
2+
3+
export default Breadcrumb;

‎src/components/InfoWindow/InfoWindow.jsx

+262
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
import React, { Component, PropTypes } from 'react';
2+
import CSSModules from 'react-css-modules';
3+
import { Grid, Row, Col } from 'react-flexbox-grid/lib/index';
4+
import TextField from 'components/TextField';
5+
import styles from './InfoWindow.scss';
6+
import Select from '../Select';
7+
8+
import commands from './data/commands.js';
9+
import frames from './data/frames.js';
10+
11+
class InfoWindow extends Component {
12+
13+
constructor(props) {
14+
super(props);
15+
this.getSelectedCommand = this.getSelectedCommand.bind(this);
16+
this.getSequence = this.getSequence.bind(this);
17+
this.handleSelectChange = this.handleSelectChange.bind(this);
18+
this.toggleFullBody = this.toggleFullBody.bind(this);
19+
this.deleteSelf = this.deleteSelf.bind(this);
20+
21+
this.state = {
22+
fullBody: 'hidden',
23+
};
24+
}
25+
26+
getSelectedCommand() {
27+
let commandText = `command: ${this.props.command} / type: ${this.getType()} `;
28+
29+
if (this.props.command === 22) {
30+
commandText = `Takeoff (${this.props.command} / ${this.getType()} ) `;
31+
} else if (this.props.command === 16) {
32+
commandText = `Waypoint (${this.props.command} / ${this.getType()} ) `;
33+
} else if (this.props.command === 21) {
34+
commandText = `Land (${this.props.command} / ${this.getType()} ) `;
35+
}
36+
37+
return commandText;
38+
}
39+
40+
getSequence() {
41+
let seqText = this.props.id;
42+
43+
if (this.getType() !== 'W') {
44+
seqText = this.getType();
45+
}
46+
47+
return seqText;
48+
}
49+
50+
getType() {
51+
let typeText = 'W';
52+
53+
if (this.props.id === 0) {
54+
typeText = 'H';
55+
} else if (this.props.id === 1) {
56+
typeText = 'T';
57+
}
58+
59+
return typeText;
60+
}
61+
62+
getCurrentMissionItem() {
63+
return {
64+
autoContinue: true,
65+
id: this.props.id,
66+
coordinate: [this.props.lat, this.props.lng, this.props.alt],
67+
param1: this.props.param1,
68+
param2: this.props.param2,
69+
param3: this.props.param3,
70+
param4: this.props.param4,
71+
command: this.props.command,
72+
frame: this.props.frame,
73+
type: 'missionItem',
74+
};
75+
}
76+
77+
deleteSelf() {
78+
this.props.deleteWaypoint(this.props.id);
79+
}
80+
81+
toggleFullBody() {
82+
const newState = this.state.fullBody === 'hidden' ? 'visible' : 'hidden';
83+
this.setState({ fullBody: newState });
84+
}
85+
86+
handleNumberChange(name, event) {
87+
const value = event.target.value;
88+
const missionItem = this.getCurrentMissionItem();
89+
90+
if (value.match(/^-?\d*(\.\d*)?$/)) {
91+
const coord = ['lat', 'lng', 'alt'].indexOf(name);
92+
93+
if (coord > -1) {
94+
missionItem.coordinate[coord] = value;
95+
} else {
96+
missionItem[name] = value;
97+
}
98+
99+
this.props.onUpdate(this.props.id, missionItem);
100+
}
101+
}
102+
103+
handleSelectChange(name, option) {
104+
const value = option.value;
105+
const missionItem = this.getCurrentMissionItem();
106+
107+
missionItem[name] = value;
108+
109+
this.props.onUpdate(this.props.id, missionItem);
110+
}
111+
112+
render() {
113+
const isHome = this.getType() === 'H';
114+
115+
return (
116+
<form>
117+
<Grid styleName="info-window-container">
118+
<Row>
119+
<Col sm={1}><span styleName={this.state.fullBody === 'hidden' ? 'toggle_down' : 'toggle_up'} onClick={this.toggleFullBody} /></Col>
120+
<Col sm={2}>{this.getSequence()}</Col>
121+
<Col sm={8} styleName="text-right">{this.getSelectedCommand()}</Col>
122+
<Col sm={1} styleName="text-right">{!isHome && <span styleName="delete" onClick={this.deleteSelf} />}</Col>
123+
</Row>
124+
<div styleName={this.state.fullBody}>
125+
{ isHome === false &&
126+
<Row>
127+
<Col sm={12}>
128+
<p>Provides advanced access to all commands. Be very careful!</p>
129+
</Col>
130+
</Row>
131+
}
132+
{ isHome === true ? (
133+
<div>
134+
<Row>
135+
<Col sm={12}>
136+
<p>Planned home position. Actual home position set by vehicle</p>
137+
</Col>
138+
</Row>
139+
<Row styleName="row">
140+
<Col sm={3}>
141+
<span styleName="label">Lat/X:</span>
142+
</Col>
143+
<Col sm={9}>
144+
<TextField value={this.props.lat} onChange={this.handleNumberChange.bind(this, 'lat')} size="narrow" />
145+
</Col>
146+
</Row>
147+
<Row styleName="row">
148+
<Col sm={3}>
149+
<span styleName="label">Lon/Y:</span>
150+
</Col>
151+
<Col sm={9}>
152+
<TextField value={this.props.lng} onChange={this.handleNumberChange.bind(this, 'lng')} size="narrow" />
153+
</Col>
154+
</Row>
155+
<Row>
156+
<Col sm={3}>
157+
<span styleName="label">Alt/Z:</span>
158+
</Col>
159+
<Col sm={9}>
160+
<TextField value={this.props.alt} onChange={this.handleNumberChange.bind(this, 'alt')} size="narrow" />
161+
</Col>
162+
</Row>
163+
</div>
164+
) : (
165+
<div>
166+
<Row styleName="row">
167+
<Col sm={12}>
168+
<Select
169+
clearable={false} searchable={false} name="command" value={this.props.command}
170+
options={commands} onChange={this.handleSelectChange.bind(this, 'command')} disabled={this.props.id < 2}
171+
/>
172+
</Col>
173+
</Row>
174+
<Row styleName="row">
175+
<Col sm={12}>
176+
<Select
177+
clearable={false} searchable={false} name="frame" value={this.props.frame}
178+
options={frames} onChange={this.handleSelectChange.bind(this, 'frame')}
179+
/>
180+
</Col>
181+
</Row>
182+
<Row styleName="row">
183+
<Col sm={3}>
184+
<span styleName="label">Lat/X:</span>
185+
</Col>
186+
<Col sm={9}>
187+
<TextField value={this.props.lat} onChange={this.handleNumberChange.bind(this, 'lat')} size="narrow" />
188+
</Col>
189+
</Row>
190+
<Row styleName="row">
191+
<Col sm={3}>
192+
<span styleName="label">Lon/Y:</span>
193+
</Col>
194+
<Col sm={9}>
195+
<TextField value={this.props.lng} onChange={this.handleNumberChange.bind(this, 'lng')} size="narrow" />
196+
</Col>
197+
</Row>
198+
<Row styleName="row">
199+
<Col sm={3}>
200+
<span styleName="label">Param1:</span>
201+
</Col>
202+
<Col sm={9}>
203+
<TextField value={this.props.param1} onChange={this.handleNumberChange.bind(this, 'param1')} size="narrow" />
204+
</Col>
205+
</Row>
206+
<Row styleName="row">
207+
<Col sm={3}>
208+
<span styleName="label">Param2:</span>
209+
</Col>
210+
<Col sm={9}>
211+
<TextField value={this.props.param2} onChange={this.handleNumberChange.bind(this, 'param2')} size="narrow" />
212+
</Col>
213+
</Row>
214+
<Row styleName="row">
215+
<Col sm={3}>
216+
<span styleName="label">Param3:</span>
217+
</Col>
218+
<Col sm={9}>
219+
<TextField value={this.props.param3} onChange={this.handleNumberChange.bind(this, 'param3')} size="narrow" />
220+
</Col>
221+
</Row>
222+
<Row styleName="row">
223+
<Col sm={3}>
224+
<span styleName="label">Param4:</span>
225+
</Col>
226+
<Col sm={9}>
227+
<TextField value={this.props.param4} onChange={this.handleNumberChange.bind(this, 'param4')} size="narrow" />
228+
</Col>
229+
</Row>
230+
<Row>
231+
<Col sm={3}>
232+
<span styleName="label">Alt/Z:</span>
233+
</Col>
234+
<Col sm={9}>
235+
<TextField value={this.props.alt} onChange={this.handleNumberChange.bind(this, 'alt')} size="narrow" />
236+
</Col>
237+
</Row>
238+
</div>
239+
)}
240+
</div>
241+
</Grid>
242+
</form>
243+
);
244+
}
245+
}
246+
247+
InfoWindow.propTypes = {
248+
id: PropTypes.any,
249+
lat: PropTypes.any,
250+
lng: PropTypes.any,
251+
alt: PropTypes.any,
252+
param1: PropTypes.any,
253+
param2: PropTypes.any,
254+
param3: PropTypes.any,
255+
param4: PropTypes.any,
256+
command: PropTypes.any,
257+
frame: PropTypes.any,
258+
onUpdate: PropTypes.any,
259+
deleteWaypoint: PropTypes.any,
260+
};
261+
262+
export default CSSModules(InfoWindow, styles);

0 commit comments

Comments
 (0)