From 108f8ef9a6dffabb3480de712f3e6143804ccde0 Mon Sep 17 00:00:00 2001
From: Ramesh Kumar <r.kumar@redkarma.eu>
Date: Mon, 9 Nov 2020 12:06:15 +0530
Subject: [PATCH] TMSS-424: Sunrise & Sunset timings added for stations in
station view.
---
.../components/Timeline/CalendarTimeline.js | 52 ++++++++++++++++---
.../src/layout/sass/_timeline.scss | 4 ++
.../tmss_webapp/src/routes/Timeline/view.js | 7 ++-
3 files changed, 56 insertions(+), 7 deletions(-)
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/components/Timeline/CalendarTimeline.js b/SAS/TMSS/frontend/tmss_webapp/src/components/Timeline/CalendarTimeline.js
index a370acc085d..4746314d62e 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/components/Timeline/CalendarTimeline.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/components/Timeline/CalendarTimeline.js
@@ -73,7 +73,7 @@ export class CalendarTimeline extends Component {
group: group,
items: props.items || [],
//>>>>>> Properties to pass to react-calendar-timeline component
- stackItems: props.stackItems || true,
+ stackItems: props.stackItems || false,
zoomAllowed: props.zoomAllowed || true,
minZoom: props.minZoom || (1 * 60 * 1000), // One Minute
maxZoom: props.maxZoom || (32 * 24 * 60 * 60 * 1000), // 32 hours
@@ -520,13 +520,15 @@ export class CalendarTimeline extends Component {
color: item.color,
// borderColor,
borderStyle: "solid",
- borderWidth: 1,
+ borderWidth: item.type==="SUNTIME"?0:0,
borderRadius: 3,
borderLeftWidth: itemContext.selected ? 3 : 1,
borderRightWidth: itemContext.selected ? 3 : 1
},
onMouseDown: () => {
- this.onItemClick(item);
+ if (item.type !== "SUNTIME") {
+ this.onItemClick(item);
+ }
}
})}
>
@@ -634,12 +636,47 @@ export class CalendarTimeline extends Component {
}
}
const result = await this.props.dateRangeCallback(startTime, endTime, refreshData);
- if (!this.props.shoSunTimings && this.state.vieType === UIConstants.timeline.types.NORMAL) {
-
+ if (!this.props.showSunTimings && this.state.viewType === UIConstants.timeline.types.NORMAL) {
+ await this.addStationSunTimes(startTime, endTime, result.group, result.items);
}
return result;
}
+ async addStationSunTimes(startTime, endTime, stationGroup, items) {
+ const noOfDays = endTime.diff(startTime, 'days');
+ let sunItems = _.cloneDeep(items);
+ for (const number of _.range(noOfDays+1)) {
+ for (const station of stationGroup) {
+ const date = startTime.clone().add(number, 'days').hours(12).minutes(0).seconds(0);
+ const timings = await UtilService.getSunTimings(date.format("YYYYMMDDTHH:mm:ss")+"Z", station);
+ let sunriseItem = { id: `sunrise-${number}-${station.id}`,
+ group: station.id,
+ title: timings.sun_rise,
+ project: "",
+ name: "",
+ duration: "",
+ start_time: moment.utc(timings.sun_rise),
+ end_time: moment.utc(timings.sun_rise).add(5, 'minutes'),
+ bgColor: "yellow",
+ selectedBgColor: "yellow",
+ type: "SUNTIME"};
+ sunItems.push(sunriseItem);
+ let sunsetItem = _.cloneDeep(sunriseItem);
+ sunsetItem.id = `sunset-${number}-${station.id}`;
+ sunsetItem.start_time = moment.utc(timings.sun_set);
+ sunsetItem.end_time = moment.utc(timings.sun_set).add(5, 'minutes');
+ sunsetItem.bgColor = "orange";
+ sunsetItem.selectedBgColor = "0range";
+ sunItems.push(sunsetItem);
+
+ }
+ }
+ if (!this.props.showSunTimings && this.state.viewType === UIConstants.timeline.types.NORMAL) {
+ items = sunItems;
+ }
+ return items;
+ }
+
/**
* Resets the timeline view to default zoom and move to the current timeline
*/
@@ -847,7 +884,10 @@ export class CalendarTimeline extends Component {
* as objects
* @param {Object} props
*/
- updateTimeline(props) {
+ async updateTimeline(props) {
+ if (!this.props.showSunTimings && this.state.viewType === UIConstants.timeline.types.NORMAL) {
+ props.items = await this.addStationSunTimes(this.state.defaultStartTime, this.state.defaultEndTime, props.group, props.items);
+ }
this.setState({group: DEFAULT_GROUP.concat(props.group), items: props.items});
}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_timeline.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_timeline.scss
index 1c5e635be11..953df590611 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_timeline.scss
+++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_timeline.scss
@@ -6,6 +6,10 @@
background-color: #f0f0f0;
}
+.rct-item {
+ border: none !important;
+}
+
.timeline-view-toolbar {
margin-left: 10px;
}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js
index e6f600209c2..18ef4e0b00f 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js
@@ -289,6 +289,11 @@ export class TimelineView extends Component {
}
}
+ setStationView(e) {
+ this.closeSUDets();
+ this.setState({stationView: e.value});
+ }
+
render() {
if (this.state.redirect) {
return <Redirect to={ {pathname: this.state.redirect} }></Redirect>
@@ -340,7 +345,7 @@ export class TimelineView extends Component {
</div>
<div className="timeline-view-toolbar">
<label>Station View</label>
- <InputSwitch checked={this.state.stationView} onChange={(e) => {this.closeSUDets();this.setState({stationView: e.value})}} />
+ <InputSwitch checked={this.state.stationView} onChange={(e) => {this.setStationView(e)}} />
</div>
<Timeline ref={(tl)=>{this.timeline=tl}}
group={this.state.group}
--
GitLab