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

Lines changed: 29 additions & 0 deletions
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

Lines changed: 36 additions & 0 deletions
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

Lines changed: 3 additions & 0 deletions
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

Lines changed: 262 additions & 0 deletions
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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy