Skip to content

Commit f819178

Browse files
author
gondzo
committed
Merge branch 'loadMission' into dev
# Conflicts: # src/services/APIService.js
2 parents 46ace78 + d0ac947 commit f819178

File tree

8 files changed

+415
-36
lines changed

8 files changed

+415
-36
lines changed

‎src/routes/PilotMissions/components/CheckStatus/CheckStatus.jsx

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
import React from 'react';
2+
import Modal from 'react-modal';
3+
import CSSModules from 'react-css-modules';
4+
import styles from './CheckStatus.scss';
5+
6+
/*
7+
* customStyles
8+
*/
9+
const customStyles = {
10+
overlay: {
11+
position: 'fixed',
12+
top: 0,
13+
left: 0,
14+
right: 0,
15+
bottom: 0,
16+
backgroundColor: 'rgba(9, 9, 9, 0.58)',
17+
zIndex: '9999',
18+
},
19+
content: {
20+
top: '50%',
21+
left: '50%',
22+
right: 'auto',
23+
bottom: 'auto',
24+
marginRight: '-50%',
25+
transform: 'translate(-50%, -50%)',
26+
padding: '0px',
27+
width: '900px',
28+
borderRadius: '10px',
29+
zIndex: '99999',
30+
overflow: 'auto',
31+
height: '500px',
32+
},
33+
};
34+
35+
const CheckStatus = ({modalOpen, droneStatus, closeModal}) => (
36+
<Modal
37+
isOpen={modalOpen}
38+
contentLabel="Check Status"
39+
style={customStyles}
40+
onRequestClose={closeModal}
41+
shouldCloseOnOverlayClick
42+
>
43+
<div styleName="modal-header">
44+
<div onClick={closeModal} styleName="icon-close-modal" />
45+
<div styleName="title">Mission Drone Status</div>
46+
</div>
47+
<div styleName="modal-body">
48+
<div styleName="content-wrapper">
49+
<div styleName="left-col">
50+
<div styleName="content">
51+
<p styleName="content-heading">Current Position</p>
52+
<div styleName="row">
53+
<div styleName="left">Time boot (ms)</div>
54+
<div styleName="right">: {droneStatus.currentPosition.time_boot_ms}</div>
55+
</div>
56+
<div styleName="row">
57+
<div styleName="left">Latitude</div>
58+
<div styleName="right">: {droneStatus.currentPosition.lat}</div>
59+
</div>
60+
<div styleName="row">
61+
<div styleName="left">Longitude</div>
62+
<div styleName="right">: {droneStatus.currentPosition.lon}</div>
63+
</div>
64+
<div styleName="row">
65+
<div styleName="left">Altitude</div>
66+
<div styleName="right">: {droneStatus.currentPosition.alt}</div>
67+
</div>
68+
<div styleName="row">
69+
<div styleName="left">Relative Altitude</div>
70+
<div styleName="right">: {droneStatus.currentPosition.relative_alt}</div>
71+
</div>
72+
<div styleName="row">
73+
<div styleName="left">vx</div>
74+
<div styleName="right">: {droneStatus.currentPosition.vx}</div>
75+
</div>
76+
<div styleName="row">
77+
<div styleName="left">vy</div>
78+
<div styleName="right">: {droneStatus.currentPosition.vy}</div>
79+
</div>
80+
<div styleName="row">
81+
<div styleName="left">vz</div>
82+
<div styleName="right">: {droneStatus.currentPosition.vz}</div>
83+
</div>
84+
<div styleName="row">
85+
<div styleName="left">hdg</div>
86+
<div styleName="right">: {droneStatus.currentPosition.hdg}</div>
87+
</div>
88+
</div>
89+
</div>
90+
<div styleName="right-col">
91+
<div styleName="content">
92+
<p styleName="content-heading">Mission Waypoints</p>
93+
{droneStatus.waypoints.map((point, pi) => (
94+
<div styleName="point" key={pi}>
95+
<div styleName="row">
96+
<div styleName="left">Latitude</div>
97+
<div styleName="right">: {point.y}</div>
98+
</div>
99+
<div styleName="row">
100+
<div styleName="left">Longitude</div>
101+
<div styleName="right">: {point.x}</div>
102+
</div>
103+
<div styleName="row">
104+
<div styleName="left">Altitude</div>
105+
<div styleName="right">: {point.z}</div>
106+
</div>
107+
<div styleName="row">
108+
<div styleName="left">Param1</div>
109+
<div styleName="right">: {point.param1}</div>
110+
</div>
111+
<div styleName="row">
112+
<div styleName="left">Param2</div>
113+
<div styleName="right">: {point.param2}</div>
114+
</div>
115+
<div styleName="row">
116+
<div styleName="left">Param3</div>
117+
<div styleName="right">: {point.param3}</div>
118+
</div>
119+
<div styleName="row">
120+
<div styleName="left">Param4</div>
121+
<div styleName="right">: {point.param4}</div>
122+
</div>
123+
<div styleName="row">
124+
<div styleName="left">Command</div>
125+
<div styleName="right">: {point.command}</div>
126+
</div>
127+
<div styleName="row">
128+
<div styleName="left">Frame</div>
129+
<div styleName="right">: {point.frame}</div>
130+
</div>
131+
</div>
132+
))}
133+
</div>
134+
</div>
135+
</div>
136+
</div>
137+
</Modal>
138+
);
139+
140+
CheckStatus.propTypes = {
141+
modalOpen: React.PropTypes.bool.isRequired,
142+
droneStatus: React.PropTypes.object.isRequired,
143+
closeModal: React.PropTypes.func.isRequired,
144+
};
145+
146+
export default CSSModules(CheckStatus, styles);

‎src/routes/PilotMissions/components/CheckStatus/CheckStatus.scss

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
.modal-header {
2+
background: #fff;
3+
height: 63px;
4+
padding: 13px 12px;
5+
}
6+
.title {
7+
font-size: 24px;
8+
color: #0d0d0d;
9+
text-align: center;
10+
font-weight: bold;
11+
font-family: 'Proxima Nova Rg';
12+
padding-top: 10px;
13+
}
14+
.icon-close-modal {
15+
display: block;
16+
background-repeat: no-repeat;
17+
background-position: 0 0;
18+
width: 26px;
19+
height: 26px;
20+
background: url('icon-close-modal.png') no-repeat 0 0;
21+
margin-left: auto;
22+
cursor: pointer;
23+
}
24+
.modal-body {
25+
padding: 20px;
26+
.content-wrapper {
27+
clear: both;
28+
.content {
29+
border: 1px solid #ccc;
30+
box-shadow: 0px 0px 3px 1px rgba(204,204,204,0.7);
31+
margin: 0 5px;
32+
padding: 5px;
33+
.point {
34+
border-bottom: 1px solid #ccc;
35+
margin: 5px 0;
36+
height: 180px;
37+
}
38+
.content-heading {
39+
font-weight: 600;
40+
margin: 0 0 10px 0;
41+
font-size: 16px;
42+
}
43+
.row {
44+
clear: both;
45+
}
46+
.left {
47+
float: left;
48+
width: 30%;
49+
}
50+
.right {
51+
float: right;
52+
width: 70%;
53+
}
54+
}
55+
.left-col {
56+
float: left;
57+
width: 50%;
58+
.content {
59+
height: 230px;
60+
}
61+
}
62+
.right-col {
63+
float: right;
64+
width: 50%;
65+
}
66+
}
67+
}
68+
:global {
69+
.ReactModal__Body--open {
70+
overflow: hidden;
71+
}
72+
}

‎src/routes/PilotMissions/components/CheckStatus/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import CheckStatus from './CheckStatus';
2+
3+
export default CheckStatus;

0 commit comments

Comments
 (0)