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 a045bc5f47a2b7559902a5ba1f0b9f996bafff9a..a370acc085d585622908ab14def7d379c5c59c33 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/components/Timeline/CalendarTimeline.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/components/Timeline/CalendarTimeline.js
@@ -183,7 +183,7 @@ export class CalendarTimeline extends Component {
currentLST: this.state.currentLST?this.state.currentLST.add(1, 'second'):null});
}
if (this.state.isLive) {
- this.props.dateRangeCallback(this.state.defaultStartTime.add(1, 'second'), this.state.defaultEndTime.add(1, 'second'));
+ this.changeDateRange(this.state.defaultStartTime.add(1, 'second'), this.state.defaultEndTime.add(1, 'second'));
// const result = this.props.dateRangeCallback(this.state.defaultStartTime.add(1, 'second'), this.state.defaultEndTime.add(1, 'second'));
// let group = DEFAULT_GROUP.concat(result.group);
}
@@ -420,6 +420,52 @@ export class CalendarTimeline extends Component {
}
}
+ /**
+ * Function to render sunrise timings on the timeline view in normal view.
+ * @param {Array} sunRiseTimings
+ */
+ renderSunriseMarkers(sunRiseTimings) {
+ return (
+ <>
+ {sunRiseTimings && sunRiseTimings.length>0 && sunRiseTimings.map((item, index) => (
+ <CustomMarker key={"sunrise-"+index} date={item}>
+ {({ styles, date }) => {
+ const customStyles = {
+ ...styles,
+ backgroundColor: 'yellow',
+ width: '3px'
+ }
+ return <div style={customStyles} />
+ }}
+ </CustomMarker>
+ ))}
+ </>
+ );
+ }
+
+ /**
+ * Function to render sunrise timings on the timeline view in normal view.
+ * @param {Array} sunSetTimings
+ */
+ renderSunsetMarkers(sunSetTimings) {
+ return (
+ <>
+ {sunSetTimings && sunSetTimings.length>0 && sunSetTimings.map((item, index) => (
+ <CustomMarker key={"sunset-"+index} date={item}>
+ {({ styles, date }) => {
+ const customStyles = {
+ ...styles,
+ backgroundColor: 'orange',
+ width: '3px'
+ }
+ return <div style={customStyles} />
+ }}
+ </CustomMarker>
+ ))}
+ </>
+ );
+ }
+
/** Custom Render function to pass to the CursorMarker component to display cursor labels on cursor movement */
renderCursor({ styles, date }) {
const utc = moment(date).utc();
@@ -550,7 +596,7 @@ export class CalendarTimeline extends Component {
}
this.loadLSTDateHeaderMap(newVisibleTimeStart, newVisibleTimeEnd, this.state.lstDateHeaderUnit);
updateScrollCanvas(newVisibleTimeStart.valueOf(), newVisibleTimeEnd.valueOf());
- this.props.dateRangeCallback(newVisibleTimeStart, newVisibleTimeEnd);
+ this.changeDateRange(newVisibleTimeStart, newVisibleTimeEnd);
// this.setState({defaultStartTime: moment(visibleTimeStart), defaultEndTime: moment(visibleTimeEnd)})
this.setState({defaultStartTime: newVisibleTimeStart, defaultEndTime: newVisibleTimeEnd});
}
@@ -565,6 +611,35 @@ export class CalendarTimeline extends Component {
}
}
+ /**
+ * Function to call the parent function callback and fetch new data. It also retrieves sunrise and sunset time.
+ * @param {moment} startTime
+ * @param {moment} endTime
+ */
+ async changeDateRange(startTime, endTime, refreshData) {
+ if (this.props.showSunTimings && this.state.viewType===UIConstants.timeline.types.NORMAL) {
+ let sunRiseTimings = [], sunSetTimings = [];
+ const noOfDays = endTime.diff(startTime, 'days');
+ for (const number of _.range(noOfDays+1)) {
+ const date = startTime.clone().add(number, 'days').hours(12).minutes(0).seconds(0);
+ UtilService.getSunTimings(date.format("YYYYMMDDTHH:mm:ss")+"Z").then(timings => {
+ if (moment.utc(timings.sun_rise).isAfter(startTime)) {
+ sunRiseTimings.push(moment.utc(timings.sun_rise));
+ }
+ if (moment.utc(timings.sun_set).isBefore(endTime)) {
+ sunSetTimings.push(moment.utc(timings.sun_set));
+ }
+ this.setState({sunRiseTimings: sunRiseTimings, sunSetTimings: sunSetTimings});
+ });
+ }
+ }
+ const result = await this.props.dateRangeCallback(startTime, endTime, refreshData);
+ if (!this.props.shoSunTimings && this.state.vieType === UIConstants.timeline.types.NORMAL) {
+
+ }
+ return result;
+ }
+
/**
* Resets the timeline view to default zoom and move to the current timeline
*/
@@ -572,7 +647,7 @@ export class CalendarTimeline extends Component {
if (this.state.viewType===UIConstants.timeline.types.NORMAL) {
const startTime = moment().utc().add(-24, 'hours');
const endTime = moment().utc().add(24, 'hours');
- let result = await this.props.dateRangeCallback(startTime, endTime);
+ let result = await this.changeDateRange(startTime, endTime);
let group = DEFAULT_GROUP.concat(result.group);
this.setState({defaultStartTime: startTime, defaultEndTime: endTime,
zoomLevel: DEFAULT_ZOOM_LEVEL, dayHeaderVisible: true,
@@ -626,7 +701,7 @@ export class CalendarTimeline extends Component {
}
}
this.loadLSTDateHeaderMap(startTime, endTime, 'hour');
- let result = await this.props.dateRangeCallback(startTime, endTime);
+ let result = await this.changeDateRange(startTime, endTime);
let group = DEFAULT_GROUP.concat(result.group);
this.setState({zoomLevel: zoomLevel, defaultStartTime: startTime, defaultEndTime: endTime,
isTimelineZoom: isTimelineZoom, zoomRange: null,
@@ -650,7 +725,7 @@ export class CalendarTimeline extends Component {
newVisibleTimeStart = this.state.timelineStartDate.clone().hours(0).minutes(0).seconds(0);
newVisibleTimeEnd = newVisibleTimeStart.clone().add(visibleTimeDiff/1000, 'seconds');
}
- let result = await this.props.dateRangeCallback(newVisibleTimeStart, newVisibleTimeEnd);
+ let result = await this.changeDateRange(newVisibleTimeStart, newVisibleTimeEnd);
this.loadLSTDateHeaderMap(newVisibleTimeStart, newVisibleTimeEnd, 'hour');
let group = DEFAULT_GROUP.concat(result.group);
this.setState({defaultStartTime: newVisibleTimeStart,
@@ -673,7 +748,7 @@ export class CalendarTimeline extends Component {
newVisibleTimeEnd = this.state.timelineEndDate.clone().hours(23).minutes(59).minutes(59);
newVisibleTimeStart = newVisibleTimeEnd.clone().add((-1 * visibleTimeDiff/1000), 'seconds');
}
- let result = await this.props.dateRangeCallback(visibleTimeStart, visibleTimeEnd);
+ let result = await this.changeDateRange(visibleTimeStart, visibleTimeEnd);
this.loadLSTDateHeaderMap(newVisibleTimeStart, newVisibleTimeEnd, 'hour');
let group = DEFAULT_GROUP.concat(result.group);
this.setState({defaultStartTime: newVisibleTimeStart,
@@ -731,7 +806,7 @@ export class CalendarTimeline extends Component {
dayHeaderVisible: dayHeaderVisible, weekHeaderVisible: weekHeaderVisible,
lstDateHeaderUnit: lstDateHeaderUnit
});
- const result = await this.props.dateRangeCallback(startDate, endDate);
+ const result = await this.changeDateRange(startDate, endDate);
let group = DEFAULT_GROUP.concat(result.group);
this.setState({group: group, items: result.items});
this.loadLSTDateHeaderMap(startDate, endDate, lstDateHeaderUnit);
@@ -749,7 +824,7 @@ export class CalendarTimeline extends Component {
let endDate = this.state.group[this.state.group.length-1].value.clone().add(direction * 7, 'days').hours(23).minutes(59).seconds(59);
let timelineStart = this.state.timelineStartDate.clone().add(direction * 7, 'days');
let timelineEnd = this.state.timelineEndDate.clone().add(direction * 7, 'days');
- const result = await this.props.dateRangeCallback(startDate, endDate, true);
+ const result = await this.changeDateRange(startDate, endDate, true);
let group = DEFAULT_GROUP.concat(result.group);
let dayHeaderVisible = this.state.dayHeaderVisible;
let weekHeaderVisible = this.state.weekHeaderVisible;
@@ -898,6 +973,15 @@ export class CalendarTimeline extends Component {
return <div style={customStyles} />
}}
</CustomMarker>
+ {/* Show sunrise and sunset markers for normal timeline view (Not station view and week view */}
+ {this.props.showSunTimings && this.state.viewType===UIConstants.timeline.types.NORMAL &&
+ <>
+ {/* Sunrise time line markers */}
+ { this.renderSunriseMarkers(this.state.sunRiseTimings)}
+ {/* Sunset time line markers */}
+ { this.renderSunsetMarkers(this.state.sunSetTimings)}
+ </>
+ }
{this.state.showCursor?
<CursorMarker>
{this.renderCursor}
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 16524edc0f57b879a3302545d2ba588c2fcc087e..e6f600209c22f20ff628acd0cbb15cc453ff7397 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js
@@ -348,6 +348,7 @@ export class TimelineView extends Component {
currentUTC={this.state.currentUTC}
rowHeight={30} itemClickCallback={this.onItemClick}
dateRangeCallback={this.dateRangeCallback}
+ showSunTimings={!this.state.stationView}
className="timeline-toolbar-margin-top-0"></Timeline>
</div>
{/* Details Panel */}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/services/util.service.js b/SAS/TMSS/frontend/tmss_webapp/src/services/util.service.js
index 4d0d81cba4207dafe52925d3e049a92c1e946426..bbe32f68209c7a193f896913af947fa5b20aa9a5 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/services/util.service.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/services/util.service.js
@@ -1,3 +1,4 @@
+import moment from 'moment';
const axios = require('axios');
axios.defaults.headers.common['Authorization'] = 'Basic dGVzdDp0ZXN0';
@@ -37,6 +38,28 @@ const UtilService = {
} catch(error) {
console.error(error);
}
+ },
+ getSunTimings: async(timestamp, station) => {
+ try {
+ let localSunTimeMap = localStorage.getItem('SUN_TIME_MAP');
+ if (localSunTimeMap) {
+ localSunTimeMap = JSON.parse(localSunTimeMap);
+ if (localSunTimeMap[timestamp]) {
+ return Promise.resolve(localSunTimeMap[timestamp]);
+ }
+ } else {
+ localSunTimeMap = {};
+ }
+ // const url = `/api/sun_rise_and_set/${timestamp}`;
+ // const sunTimings = (await axios.get(url)).data;
+ const sunTimings = {sun_rise: moment.utc(moment(timestamp, "YYYYMMDDTHH:mm:ss")).format('YYYY-MM-DDT06:30:00.sssss')+"Z",
+ sun_set: moment.utc(moment(timestamp, "YYYYMMDDTHH:mm:ss")).format('YYYY-MM-DDT17:00:00.sssss')+"Z"};
+ localSunTimeMap[timestamp] = sunTimings;
+ localStorage.setItem('SUN_TIME_MAP', JSON.stringify(localSunTimeMap));
+ return sunTimings;
+ } catch(error) {
+ console.error(error);
+ }
}
}