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)
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