Skip to content

Commit 46ace78

Browse files
chqy24gondzo
chqy24
authored and
gondzo
committed
challenge 30056133 -- ADD SERVICE REQUEST DETAILS
1 parent fcb1d8d commit 46ace78

File tree

7 files changed

+145
-5
lines changed

7 files changed

+145
-5
lines changed

‎src/routes/ServiceRequest/components/Zones/Zones.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
.label {
1414
line-height: 36px;
1515
}
16-
1716
.item {
1817
margin-top: 15px;
1918

‎src/routes/StatusDetail/components/StatusDetailView.jsx

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, {PropTypes} from 'react';
22
import CSSModules from 'react-css-modules';
3+
import cn from 'classnames';
34
import Breadcrumb from 'components/Breadcrumb';
45
import StatusLabel from 'components/StatusLabel';
56
import StatusProjectInfo from '../containers/StatusProjectInfoContainer';
@@ -12,10 +13,11 @@ import ModalRatePilot from '../containers/ModalRatePilotContainer';
1213
import StatusDetailHeader from './StatusDetailHeader';
1314
import StatusDetailCamera from './StatusDetailCamera';
1415
import styles from './StatusDetailView.scss';
16+
import Zones from './Zones';
1517

1618
const shouldHaveDetails = (status) => (status === 'in-progress' || status === 'completed');
1719

18-
export const StatusDetailView = ({title, status, fcStreamSrc, bcStreamSrc, showPerformance}) => (
20+
export const StatusDetailView = ({title, status, fcStreamSrc, bcStreamSrc, showPerformance, zones}) => (
1921
<div styleName="status-detail-view">
2022
<Breadcrumb
2123
items={[
@@ -35,9 +37,18 @@ export const StatusDetailView = ({title, status, fcStreamSrc, bcStreamSrc, showP
3537
<div styleName="column-project-info">
3638
<StatusProjectInfo />
3739
</div>
38-
<div styleName="column-route-small">
40+
<div styleName={cn({'column-route-small': true, imagery: zones && zones.length > 0})}>
3941
<StatusDetailMapRoute isSmall />
4042
</div>
43+
{
44+
zones && zones.length > 0 ?
45+
(<div styleName="column-zones-completed">
46+
<h2 styleName="section-title">Zones</h2>
47+
<div styleName="zones-wrap-completed">
48+
<Zones zones={zones} />
49+
</div>
50+
</div>) : null
51+
}
4152
</div>
4253
{
4354
showPerformance ?
@@ -69,14 +80,25 @@ export const StatusDetailView = ({title, status, fcStreamSrc, bcStreamSrc, showP
6980
</div>
7081
<div styleName="panel">
7182
<div styleName="columns">
72-
<div styleName="column-route">
83+
<div styleName={cn({'column-route': true, imagery: zones && zones.length > 0})}>
7384
<section styleName="section">
7485
<h2 styleName="section-title">Route</h2>
7586
<div styleName="route-big-wrap">
7687
<StatusDetailMapRoute showMapLegends />
7788
</div>
7889
</section>
7990
</div>
91+
{
92+
zones && zones.length > 0 ?
93+
(<div styleName="column-zones">
94+
<section styleName="section">
95+
<h2 styleName="section-title">Zones</h2>
96+
<div styleName="zones-wrap">
97+
<Zones zones={zones} />
98+
</div>
99+
</section>
100+
</div>) : null
101+
}
80102
<div styleName="column-cameras">
81103
<section styleName="section">
82104
<h2 styleName="section-title">Real Time Camera</h2>
@@ -103,6 +125,7 @@ StatusDetailView.propTypes = {
103125
fcStreamSrc: PropTypes.string,
104126
bcStreamSrc: PropTypes.string,
105127
showPerformance: PropTypes.bool.isRequired,
128+
zones: PropTypes.array,
106129
};
107130

108-
export default CSSModules(StatusDetailView, styles);
131+
export default CSSModules(StatusDetailView, styles, {allowMultiple: true});

‎src/routes/StatusDetail/components/StatusDetailView.scss

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,18 @@
2424

2525
.column-route {
2626
width: calc(100% - 313px);
27+
&.imagery{
28+
width: calc(100% - 626px);
29+
}
30+
}
31+
32+
.column-zones{
33+
width:313px;
34+
}
35+
.zones-wrap{
36+
max-height: 600px;
37+
overflow-y: auto;
38+
overflow-x: hidden;
2739
}
2840

2941
.column-cameras {
@@ -34,10 +46,22 @@
3446
width: 58%;
3547
}
3648

49+
.column-zones-completed{
50+
width: 20%;
51+
}
52+
.zones-wrap-completed{
53+
max-height: 236px;
54+
overflow-y: auto;
55+
overflow-x: hidden;
56+
}
57+
3758
.column-route-small {
3859
background-color: #ccc;
3960
height: 266px;
4061
width: 36%;
62+
&.imagery{
63+
width:20%;
64+
}
4165
}
4266

4367
.column-overall-performance {

‎src/routes/StatusDetail/components/Zones/Zones.jsx

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React, {PropTypes} from 'react';
2+
import CSSModules from 'react-css-modules';
3+
import {Row, Col} from 'react-flexbox-grid/lib/index';
4+
import styles from './Zones.scss';
5+
6+
export const Zones = ({zones}) => (
7+
<div styleName="zones">
8+
{zones.length === 0 && <div styleName="no-zone"> No zones for now.</div>}
9+
{zones.map((zone, i) =>
10+
<div key={i} styleName="item">
11+
<Row>
12+
<Col sm={4}>
13+
<span styleName="label">
14+
Type:
15+
</span>
16+
</Col>
17+
<Col sm={8}>
18+
<span styleName="label">
19+
{zone.location.type}
20+
</span>
21+
</Col>
22+
</Row>
23+
<Row>
24+
<Col sm={4}>
25+
<span styleName="label">
26+
Description:
27+
</span>
28+
</Col>
29+
<Col sm={8}>
30+
<span styleName="label">
31+
{zone.description}
32+
</span>
33+
</Col>
34+
</Row>
35+
{zone.location.type !== 'Point' && <Row>
36+
<Col sm={4}>
37+
<span styleName="label">
38+
Color:
39+
</span>
40+
</Col>
41+
<Col sm={8}>
42+
<span styleName="label color">
43+
{zone.style.fillColor}
44+
</span>
45+
</Col>
46+
</Row>}
47+
</div>
48+
)}
49+
</div>
50+
);
51+
52+
Zones.propTypes = {
53+
zones: PropTypes.array.isRequired,
54+
};
55+
56+
export default CSSModules(Zones, styles, {allowMultiple: true});

‎src/routes/StatusDetail/components/Zones/Zones.scss

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.zones {
2+
background-color: transparent;
3+
&.error{
4+
.no-zone{
5+
color:red;
6+
}
7+
}
8+
:global {
9+
10+
}
11+
}
12+
13+
.label {
14+
line-height: 36px;
15+
}
16+
.color{
17+
text-transform: capitalize;
18+
}
19+
20+
.item {
21+
margin-top: 15px;
22+
23+
+ .item {
24+
border-top: 1px solid #ccc;
25+
padding-top: 15px;
26+
}
27+
}
28+
29+
.actions {
30+
margin-top: 5px;
31+
}

‎src/routes/StatusDetail/components/Zones/index.js

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

‎src/routes/StatusDetail/modules/StatusDetail.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ export const load = (id) => async(dispatch) => {
2222
title: res.title,
2323
mission: res.mission,
2424
zones: res.zones,
25+
startLocation: null,
26+
endLocation: null,
2527
};
2628

2729
const {mission, startingPoint, destinationPoint} = res;
@@ -77,6 +79,8 @@ export const load = (id) => async(dispatch) => {
7779
}
7880
}
7981

82+
window.statusDetail = statusDetail;
83+
8084
dispatch({type: LOADED, payload: statusDetail});
8185
};
8286

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