diff --git a/SAS/TMSS/frontend/tmss_webapp/package.json b/SAS/TMSS/frontend/tmss_webapp/package.json
index e9cc1d244a28ffcb034292897693fb7875c7a0f9..5de0cf8841f3e116bcd8cf264c26613650b2467f 100644
--- a/SAS/TMSS/frontend/tmss_webapp/package.json
+++ b/SAS/TMSS/frontend/tmss_webapp/package.json
@@ -38,6 +38,7 @@
"react-bootstrap-datetimepicker": "0.0.22",
"react-calendar-timeline": "^0.27.0",
"react-dom": "^16.13.1",
+ "react-flatpickr": "^3.10.7",
"react-frame-component": "^4.1.2",
"react-json-to-table": "^0.1.7",
"react-json-view": "^1.19.1",
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/CustomDateComp.js b/SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/CustomDateComp.js
index 98d84429009f475b44411113fe6d7d6d319dcf88..50623578335782048c11ba4ff25bb4f182370119 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/CustomDateComp.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/CustomDateComp.js
@@ -1,7 +1,11 @@
import React, { Component } from 'react';
+import Flatpickr from "react-flatpickr";
import {Calendar} from 'primereact/calendar';
import moment from 'moment';
import UIConstants from '../../utils/ui.constants';
+import UtilService from '../../services/util.service';
+
+import "flatpickr/dist/flatpickr.css";
//const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
@@ -16,9 +20,13 @@ export default class CustomDateComp extends Component {
componentDidMount(){
let parentRows = this.props.agGridReact.props.rowData[this.props.node.rowIndex];
let parentCellData = parentRows[this.props.colDef.field];
- this.setState({
- date:parentCellData
- })
+ UtilService.getUTC()
+ .then(systemTime => {
+ this.setState({
+ date:parentCellData,
+ systemTime: moment.utc(systemTime)
+ })
+ });
}
isPopup() {
@@ -33,30 +41,30 @@ export default class CustomDateComp extends Component {
}
render() {
- return (
- <Calendar
- d dateFormat = {UIConstants.CALENDAR_DATE_FORMAT}
- value= {this.state.date}
- onChange= {e => {this.updateDateChanges(e)}}
- // onBlur= {e => {this.updateDateChanges(e)}}
- //data-testid="start"
- todayButtonClassName="today-calendar-btn"
- showButtonBar
- showTime= {true}
- showSeconds= {true}
- hourFormat= "24"
- showIcon= {false} inline
- />
- );
+ return this.state.systemTime?(
+ <Flatpickr
+ data-enable-time
+ options={{
+ "inline": true,
+ "enableSeconds": true,
+ "time_24hr": true,
+ "defaultDate": this.state.systemTime?this.state.systemTime.format(UIConstants.CALENDAR_DEFAULTDATE_FORMAT):"",
+ "defaultHour": this.state.systemTime?this.state.systemTime.hours():12,
+ "defaultMinute": this.state.systemTime?this.state.systemTime.minutes():0
+ }}
+ value={this.state.date}
+ onChange= {value => {this.updateDateChanges(value[0]?value[0]:this.state.date)}}
+ />
+ ):"";
}
updateDateChanges(e){
- this.setState({date : e.value || ''});
+ this.setState({date : e || ''});
}
ondatechange(e){
- this.setState({date : e.value});
+ this.setState({date : e});
}
getDate() {
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/Scheduling.Constraints.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/Scheduling.Constraints.js
index 35725047eaeceb182457875029cbba90b4cd7320..396b74fd9c413e4ca93798b76ba3462889ac7dd0 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/Scheduling.Constraints.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/Scheduling.Constraints.js
@@ -4,6 +4,7 @@ import _ from 'lodash';
import Jeditor from '../../components/JSONEditor/JEditor';
import UnitConversion from '../../utils/unit.converter';
import UIConstants from '../../utils/ui.constants';
+import UtilService from '../../services/util.service';
/* eslint-disable react-hooks/exhaustive-deps */
export default (props) => {
@@ -11,6 +12,7 @@ export default (props) => {
const { parentFunction = (editorFn) => { editorFunction = editorFn;} } = props;
const [constraintSchema, setConstraintSchema] = useState();
const [initialValue, setInitialValue] = useState();
+ const [systemTime, setSystemTime] = useState();
//SU Constraint Editor Property Order,format and validation
const configureProperties = (properties) => {
for (const propertyKey in properties) {
@@ -69,7 +71,8 @@ export default (props) => {
}
};
//DateTime flatPicker component enabled with seconds
- const setDateTimeOption = (propertyValue) => {
+ const setDateTimeOption = async(propertyValue) => {
+ const systemTime = moment.utc((await UtilService.getUTC()));
propertyValue.format = 'datetime-local';
propertyValue.validationType = 'dateTime';
propertyValue.skipFormat = true;
@@ -83,6 +86,9 @@ export default (props) => {
"enableSeconds": true,
"time_24hr": true,
"allowInput": true,
+ "defaultDate": systemTime.format(UIConstants.CALENDAR_DEFAULTDATE_FORMAT),
+ "defaultHour": systemTime.hour(),
+ "defaultMinute": systemTime.minutes()
}
};
};
@@ -101,7 +107,7 @@ export default (props) => {
} else if(definitionName === 'timewindow') {
for (let property in schema.definitions.timewindow.properties) {
if(property === 'to' || property === 'from'){
- setDateTimeOption(schema.definitions.timewindow.properties[property]);
+ // setDateTimeOption(schema.definitions.timewindow.properties[property]);
if (property === 'from') {
schema.definitions.timewindow.properties[property].propertyOrder = 1;
} else {
@@ -148,7 +154,9 @@ export default (props) => {
}
}
- const constraintStrategy = () => {
+ const constraintStrategy = async() => {
+ const currentSystemTime = moment.utc(await UtilService.getUTC())
+ setSystemTime(currentSystemTime);
// const constraintTemplate = { ...props.constraintTemplate }
const constraintTemplate = _.cloneDeep(props.constraintTemplate);
if (constraintTemplate.schema) {
@@ -196,6 +204,9 @@ export default (props) => {
if (!props.constraintTemplate) {
return;
}
+ UtilService.getUTC().then(utcTime => {
+ setSystemTime(moment.utc(utcTime));
+ });
if (props.initValue) {
modifyInitiValue();
}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/reservation.create.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/reservation.create.js
index 4809304616b85fe9a91f3828a8a16f5b29f64dda..f46cc5ea034024c5a1ed7314c04f495df09b9bfd 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/reservation.create.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/reservation.create.js
@@ -6,6 +6,7 @@ import { Growl } from 'primereact/components/growl/Growl';
import AppLoader from '../../layout/components/AppLoader';
import PageHeader from '../../layout/components/PageHeader';
import UIConstants from '../../utils/ui.constants';
+import Flatpickr from "react-flatpickr";
import { Calendar } from 'primereact/calendar';
import { InputMask } from 'primereact/inputmask';
import { Dropdown } from 'primereact/dropdown';
@@ -18,6 +19,9 @@ import ProjectService from '../../services/project.service';
import ReservationService from '../../services/reservation.service';
import UnitService from '../../utils/unit.converter';
import Jeditor from '../../components/JSONEditor/JEditor';
+import UtilService from '../../services/util.service';
+
+import "flatpickr/dist/flatpickr.css";
/**
* Component to create a new Reservation
@@ -38,7 +42,7 @@ export class ReservationCreate extends Component {
reservation: {
name: '',
description: '',
- start_time: '',
+ start_time: null,
duration: '',
project: (props.match?props.match.params.project:null) || null,
},
@@ -78,9 +82,11 @@ export class ReservationCreate extends Component {
async initReservation() {
const promises = [ ProjectService.getProjectList(),
ReservationService.getReservationTemplates(),
+ UtilService.getUTC()
];
let emptyProjects = [{url: null, name: "Select Project"}];
Promise.all(promises).then(responses => {
+ let systemTime = moment.utc(responses[2]);
this.projects = emptyProjects.concat(responses[0]);
this.reservationTemplates = responses[1];
@@ -95,8 +101,9 @@ export class ReservationCreate extends Component {
paramsSchema: schema,
isLoading: false,
reservationTemplate: reservationTemplate,
+ systemTime: systemTime
});
- });
+ });
}
@@ -209,7 +216,6 @@ export class ReservationCreate extends Component {
}
}
}
-
this.setState({errors: errors, validFields: validFields});
if (Object.keys(validFields).length === Object.keys(this.formRules).length) {
validForm = true;
@@ -356,20 +362,27 @@ export class ReservationCreate extends Component {
<div className="p-field p-grid">
<label htmlFor="reservationName" className="col-lg-2 col-md-2 col-sm-12">From Date <span style={{color:'red'}}>*</span></label>
<div className="col-lg-3 col-md-3 col-sm-12">
- <Calendar
- d dateFormat="yy-mm-dd"
- value= {this.state.reservation.start_time}
- onChange= {e => this.setParams('start_time',e.value)}
- data-testid="start_time"
- tooltip="Moment at which the reservation starts from, that is, when its reservation can run." tooltipOptions={this.tooltipOptions}
- showIcon={true}
- showTime= {true}
- showSeconds= {true}
- hourFormat= "24"
+ <Flatpickr
+ data-enable-time className={`p-inputtext p-component ${this.state.errors.start_time && this.state.touched.start_time?'input-error':''}`}
+ placeholder="YYYY-MM-DD HH:mm:ss"
+ options={{
+ "inlineHideInput": true,
+ // "wrap": true,
+ "enableSeconds": true,
+ "time_24hr": true,
+ "allowInput": true,
+ "defaultDate": this.state.systemTime.format(UIConstants.CALENDAR_DEFAULTDATE_FORMAT),
+ "defaultHour": this.state.systemTime.hours(),
+ "defaultMinute": this.state.systemTime.minutes()
+ }}
+ tooltip="Moment at which the reservation starts from, that is, when its reservation can run."
+ value={this.state.reservation.start_time}
+ onChange= {value => this.setParams('start_time', value[0]?value[0]:this.state.reservation.start_time)}
+ onBlur= {(e) => {this.setReservationParams('start_time', e.target.value?moment(e.target.value).toDate():this.state.reservation.start_time)}}
/>
-
- <label className={this.state.errors.from?"error":"info"}>
- {this.state.errors.start_time ? this.state.errors.start_time : ""}
+ <i className="fa fa-calendar" style={{position: "absolute", marginLeft: '-25px', marginTop:'5px'}}></i>
+ <label className={this.state.errors.start_time && this.state.touched.start_time?"error":"info"}>
+ {this.state.errors.start_time && this.state.touched.start_time ? this.state.errors.start_time : ""}
</label>
</div>
<div className="col-lg-1 col-md-1 col-sm-12"></div>
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 828386d19450af0473e199ad44430a7b4491e8ed..56437953e4ee0ed1bd91c69fda2fd9512bb7f703 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js
@@ -845,9 +845,9 @@ export class TimelineView extends Component {
if (this.state.redirect) {
return <Redirect to={ {pathname: this.state.redirect} }></Redirect>
}
- if (this.state.loader) {
- return <AppLoader />
- }
+ // if (this.state.loader) {
+ // return <AppLoader />
+ // }
const isSUDetsVisible = this.state.isSUDetsVisible;
const isTaskDetsVisible = this.state.isTaskDetsVisible;
const canExtendSUList = this.state.canExtendSUList;