From 9eab065905e7b97beab91f6fa54f30c49b17f567 Mon Sep 17 00:00:00 2001
From: Muthukrishnanmatriot
<76949556+muthukrishnanmatriot@users.noreply.github.com>
Date: Fri, 27 Aug 2021 12:11:46 +0530
Subject: [PATCH] TMSS-936- updated the code for week view
---
.../src/components/DynamicScheduler.js | 12 +-
.../src/routes/Timeline/week.view.js | 399 ++++++++++--------
2 files changed, 224 insertions(+), 187 deletions(-)
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/components/DynamicScheduler.js b/SAS/TMSS/frontend/tmss_webapp/src/components/DynamicScheduler.js
index 29df7378f83..a03a4f9ec46 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/components/DynamicScheduler.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/components/DynamicScheduler.js
@@ -64,14 +64,10 @@ export default class DynamicScheduler extends Component {
<Growl ref={(el) => this.growl = el} />
<div className="p-field p-grid">
<label htmlFor="autodeletion" style={{marginRight: '10px', marginLeft: '50px'}}>Dynamic Scheduling : </label>
- <div data-testid="autodeletion" >
- <ToggleButton onLabel="On" offLabel="Off" onIcon="pi pi-check" offIcon="pi pi-times"
- checked={this.state.dsStatus} onChange={(e) => this.showConfirmDialog(e)}
- tooltip={`Click to ${this.state.dsStatus? "'Switch Off'" : "'Switch On'"} the Dynamic Scheduling`}
- tooltipOptions={this.tooltipOptions}/>
-
-
- </div>
+ <ToggleButton onLabel="On" offLabel="Off" onIcon="pi pi-check" offIcon="pi pi-times" style={{top: '-4px'}}
+ checked={this.state.dsStatus} onChange={(e) => this.showConfirmDialog(e)}
+ tooltip={`Click to ${this.state.dsStatus? "'Switch Off'" : "'Switch On'"} the Dynamic Scheduling`}
+ tooltipOptions={this.tooltipOptions}/>
</div>
<CustomDialog type="confirmation" visible={this.state.showDialog} width={'35vw'}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/week.view.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/week.view.js
index e07a63a57a0..8c353d98805 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/week.view.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/week.view.js
@@ -7,9 +7,11 @@ import Websocket from 'react-websocket';
// import SplitPane, { Pane } from 'react-split-pane';
// import { Dropdown } from 'primereact/dropdown';
+import { CustomDialog } from '../../layout/components/CustomDialog';
import AppLoader from '../../layout/components/AppLoader';
import PageHeader from '../../layout/components/PageHeader';
import Timeline from '../../components/Timeline';
+import DynamicScheduler from '../../components/DynamicScheduler';
import ScheduleService from '../../services/schedule.service';
import TaskService from '../../services/task.service';
@@ -28,6 +30,7 @@ import TimelineListTabs from './list.tabs';
import TimelineCommonUtils from './common.utils';
import ReservationService from '../../services/reservation.service';
import AuthUtil from '../../utils/auth.util';
+import AuthStore from '../../authenticate/auth.store';
// Color constant for status
const STATUS_COLORS = {
@@ -67,7 +70,9 @@ export class WeekTimelineView extends Component {
stationGroup: [],
reservationEnabled: true,
suStatusList: [],
- taskStatusList: []
+ taskStatusList: [],
+ showDialog: false,
+ userrole: AuthStore.getState(),
}
this.STATUS_BEFORE_SCHEDULED = ['defining', 'defined', 'schedulable']; // Statuses before scheduled to get station_group
this.reservations = [];
@@ -89,6 +94,9 @@ export class WeekTimelineView extends Component {
this.addNewData = this.addNewData.bind(this);
this.updateExistingData = this.updateExistingData.bind(this);
this.updateSchedulingUnit = this.updateSchedulingUnit.bind(this);
+ this.showDymanicSchedulerPopup = this.showDymanicSchedulerPopup.bind(this);
+ this.close = this.close.bind(this);
+
}
async componentDidMount() {
@@ -826,7 +834,22 @@ export class WeekTimelineView extends Component {
this.setState({suStatusList: suStatusList, taskStatusList: taskStatusList});
}
+ /**
+ * Show Dynamic Scheduling popup
+ */
+ showDymanicSchedulerPopup(){
+ this.setState({showDialog: true});
+ }
+
+ /**
+ * Close Dynamic Scheduling popup
+ */
+ close() {
+ this.setState({showDialog: false});
+ }
+
render() {
+ const {dynamicScheduler} = this.state.userrole.userRolePermission;
if (this.state.redirect) {
return <Redirect to={{ pathname: this.state.redirect }}></Redirect>
}
@@ -846,197 +869,215 @@ export class WeekTimelineView extends Component {
const mouseOverItem = this.state.mouseOverItem;
return (
<React.Fragment>
- <TieredMenu className="app-header-menu" model={this.state.menuOptions} popup ref={el => this.optionsMenu = el} />
- <PageHeader location={this.props.location} title={'Scheduling Units - Week View'}
- actions={[
- { icon: 'fa-bars', title: '', type: 'button', actOn: 'mouseOver', props: { callback: this.showOptionMenu }, },
- { icon: 'fa-clock', title: 'View Timeline', props: { pathname: `/su/timelineview` } }]} />
- { this.state.isLoading ? <AppLoader /> :
+ {dynamicScheduler &&
<>
- {/* <div className="p-field p-grid">
- <div className="col-lg-6 col-md-6 col-sm-12" data-testid="project" >
- <Dropdown inputId="project" optionLabel="name" optionValue="name"
- value={this.state.selectedProject} options={this.state.projects}
- onChange={(e) => {this.filterByProject(e.value)}}
- placeholder="Filter by Project" />
- </div>
- </div> */}
- <div className="p-grid">
- {/* SU List Panel */}
- <div className={isSUListVisible && (isSUDetsVisible || isReservDetsVisible ||
- (canExtendSUList && !canShrinkSUList) ? "col-lg-4 col-md-4 col-sm-12" :
- ((canExtendSUList && canShrinkSUList) ? "col-lg-5 col-md-5 col-sm-12" : "col-lg-6 col-md-6 col-sm-12"))}
- style={isSUListVisible ? { position: "inherit", borderRight: "5px solid #efefef", paddingTop: "10px" } : { display: "none" }}>
- <TimelineListTabs suBlueprintList={this.state.suBlueprintList}
- suListFilterCallback={this.suListFilterCallback}
- reservationList={this.getReservationList()}
- suStatusList={this.state.suStatusList}
- taskStatusList={this.state.taskStatusList}
- ></TimelineListTabs>
- </div>
- {/* Timeline Panel */}
- <div className={isSUListVisible ? ((isSUDetsVisible || isReservDetsVisible) ? "col-lg-5 col-md-5 col-sm-12" :
- (!canExtendSUList && canShrinkSUList) ? "col-lg-6 col-md-6 col-sm-12" :
- ((canExtendSUList && canShrinkSUList) ? "col-lg-7 col-md-7 col-sm-12" : "col-lg-8 col-md-8 col-sm-12")) :
- ((isSUDetsVisible || isReservDetsVisible) ? "col-lg-9 col-md-9 col-sm-12" : "col-lg-12 col-md-12 col-sm-12")}
- // style={{borderLeft: "3px solid #efefef"}}
- >
- {/* Panel Resize buttons */}
- {isSUListVisible &&
- <div className="resize-div">
- <button className="p-link resize-btn" disabled={!this.state.canShrinkSUList}
- title="Shrink List/Expand Timeline"
- onClick={(e) => { this.resizeSUList(-1) }}>
- <i className="pi pi-step-backward"></i>
- </button>
- <button className="p-link resize-btn" disabled={!this.state.canExtendSUList}
- title="Expandd List/Shrink Timeline"
- onClick={(e) => { this.resizeSUList(1) }}>
- <i className="pi pi-step-forward"></i>
- </button>
- </div>
- }
- <div className={isSUListVisible ? "resize-div su-visible" : "resize-div su-hidden"}>
+ <TieredMenu className="app-header-menu" model={this.state.menuOptions} popup ref={el => this.optionsMenu = el} />
+ <PageHeader location={this.props.location} title={'Scheduling Units - Week View'}
+ actions={[
+ { icon: 'fa-cog', title: dynamicScheduler.setting? 'Switch On/Off the Dynamic Scheduling': `Don't have permission to Switch On/Off the Dynamic Scheduling`,
+ type: 'button', actOn: 'click', props: { callback: this.showDymanicSchedulerPopup },
+ disabled: dynamicScheduler.setting?!dynamicScheduler.setting:true, },
+ { icon: 'fa-bars', title: '', type: 'button', actOn: 'mouseOver', props: { callback: this.showOptionMenu }, },
+ { icon: 'fa-clock', title: 'View Timeline', props: { pathname: `/su/timelineview` } }]} />
+ { this.state.isLoading ? <AppLoader /> :
+ <>
+ {/* <div className="p-field p-grid">
+ <div className="col-lg-6 col-md-6 col-sm-12" data-testid="project" >
+ <Dropdown inputId="project" optionLabel="name" optionValue="name"
+ value={this.state.selectedProject} options={this.state.projects}
+ onChange={(e) => {this.filterByProject(e.value)}}
+ placeholder="Filter by Project" />
+ </div>
+ </div> */}
+ <div className="p-grid">
+ {/* SU List Panel */}
+ <div className={isSUListVisible && (isSUDetsVisible || isReservDetsVisible ||
+ (canExtendSUList && !canShrinkSUList) ? "col-lg-4 col-md-4 col-sm-12" :
+ ((canExtendSUList && canShrinkSUList) ? "col-lg-5 col-md-5 col-sm-12" : "col-lg-6 col-md-6 col-sm-12"))}
+ style={isSUListVisible ? { position: "inherit", borderRight: "5px solid #efefef", paddingTop: "10px" } : { display: "none" }}>
+ <TimelineListTabs suBlueprintList={this.state.suBlueprintList}
+ suListFilterCallback={this.suListFilterCallback}
+ reservationList={this.getReservationList()}
+ suStatusList={this.state.suStatusList}
+ taskStatusList={this.state.taskStatusList}
+ ></TimelineListTabs>
+ </div>
+ {/* Timeline Panel */}
+ <div className={isSUListVisible ? ((isSUDetsVisible || isReservDetsVisible) ? "col-lg-5 col-md-5 col-sm-12" :
+ (!canExtendSUList && canShrinkSUList) ? "col-lg-6 col-md-6 col-sm-12" :
+ ((canExtendSUList && canShrinkSUList) ? "col-lg-7 col-md-7 col-sm-12" : "col-lg-8 col-md-8 col-sm-12")) :
+ ((isSUDetsVisible || isReservDetsVisible) ? "col-lg-9 col-md-9 col-sm-12" : "col-lg-12 col-md-12 col-sm-12")}
+ // style={{borderLeft: "3px solid #efefef"}}
+ >
+ {/* Panel Resize buttons */}
{isSUListVisible &&
- <button className="p-link resize-btn"
- title="Hide List"
- onClick={(e) => { this.setState({ isSUListVisible: false }) }}>
- <i className="pi pi-eye-slash"></i>
- </button>
- }
- {!isSUListVisible &&
- <button className="p-link resize-btn"
- title="Show List"
- onClick={(e) => { this.setState({ isSUListVisible: true }) }}>
- <i className="pi pi-eye"> Show List</i>
- </button>
+ <div className="resize-div">
+ <button className="p-link resize-btn" disabled={!this.state.canShrinkSUList}
+ title="Shrink List/Expand Timeline"
+ onClick={(e) => { this.resizeSUList(-1) }}>
+ <i className="pi pi-step-backward"></i>
+ </button>
+ <button className="p-link resize-btn" disabled={!this.state.canExtendSUList}
+ title="Expandd List/Shrink Timeline"
+ onClick={(e) => { this.resizeSUList(1) }}>
+ <i className="pi pi-step-forward"></i>
+ </button>
+ </div>
}
- </div>
- <div className={`timeline-view-toolbar ${this.state.reservationEnabled && 'alignTimeLineHeader'}`}>
- <div className="sub-header">
- <label >Show Reservations</label>
- <InputSwitch checked={this.state.reservationEnabled} onChange={(e) => { this.showReservations(e) }} />
-
+ <div className={isSUListVisible ? "resize-div su-visible" : "resize-div su-hidden"}>
+ {isSUListVisible &&
+ <button className="p-link resize-btn"
+ title="Hide List"
+ onClick={(e) => { this.setState({ isSUListVisible: false }) }}>
+ <i className="pi pi-eye-slash"></i>
+ </button>
+ }
+ {!isSUListVisible &&
+ <button className="p-link resize-btn"
+ title="Show List"
+ onClick={(e) => { this.setState({ isSUListVisible: true }) }}>
+ <i className="pi pi-eye"> Show List</i>
+ </button>
+ }
</div>
-
- {this.state.reservationEnabled &&
+ <div className={`timeline-view-toolbar ${this.state.reservationEnabled && 'alignTimeLineHeader'}`}>
<div className="sub-header">
- <label style={{ marginLeft: '20px' }}>Reservation</label>
- <Dropdown optionLabel="name" optionValue="name"
- style={{ top: '2px' }}
- value={this.state.reservationFilter}
- options={this.reservationReasons}
- filter showClear={true} filterBy="name"
- onChange={(e) => { this.setReservationFilter(e.value) }}
- placeholder="Reason" />
+ <label >Show Reservations</label>
+ <InputSwitch checked={this.state.reservationEnabled} onChange={(e) => { this.showReservations(e) }} />
</div>
- }
- </div>
- <Timeline ref={(tl) => { this.timeline = tl }}
- group={this.state.group}
- items={this.state.items}
- currentUTC={this.state.currentUTC}
- rowHeight={50}
- itemClickCallback={this.onItemClick}
- itemMouseOverCallback={this.onItemMouseOver}
- itemMouseOutCallback={this.onItemMouseOut}
- sidebarWidth={150}
- stackItems={true}
- startTime={moment.utc(this.state.currentUTC).hour(0).minutes(0).seconds(0)}
- endTime={moment.utc(this.state.currentUTC).hour(23).minutes(59).seconds(59)}
- zoomLevel="1 Day"
- showLive={false} showDateRange={false} viewType={UIConstants.timeline.types.WEEKVIEW}
- dateRangeCallback={this.dateRangeCallback}
- ></Timeline>
- </div>
- {/* Details Panel */}
- {this.state.isSUDetsVisible &&
- <div className="col-lg-3 col-md-3 col-sm-12"
- style={{ borderLeft: "1px solid #efefef", marginTop: "0px", backgroundColor: "#f2f2f2" }}>
- {this.state.isSummaryLoading ? <AppLoader /> :
- <SchedulingUnitSummary schedulingUnit={suBlueprint} suTaskList={this.state.suTaskList}
- viewInNewWindow
- constraintsTemplate={this.state.suConstraintTemplate}
- closeCallback={this.closeSUDets}
- stationGroup={this.state.stationGroup}
- location={this.props.location}></SchedulingUnitSummary>
- }
- </div>
- }
- {this.state.isReservDetsVisible &&
- <div className="col-lg-3 col-md-3 col-sm-12"
- style={{ borderLeft: "1px solid #efefef", marginTop: "0px", backgroundColor: "#f2f2f2" }}>
- {this.state.isSummaryLoading ? <AppLoader /> :
- <ReservationSummary reservation={reservation} location={this.props.location} closeCallback={this.closeSUDets}></ReservationSummary>
- }
+ {this.state.reservationEnabled &&
+ <div className="sub-header">
+ <label style={{ marginLeft: '20px' }}>Reservation</label>
+ <Dropdown optionLabel="name" optionValue="name"
+ style={{ top: '2px' }}
+ value={this.state.reservationFilter}
+ options={this.reservationReasons}
+ filter showClear={true} filterBy="name"
+ onChange={(e) => { this.setReservationFilter(e.value) }}
+ placeholder="Reason" />
+
+ </div>
+ }
+ </div>
+
+ <Timeline ref={(tl) => { this.timeline = tl }}
+ group={this.state.group}
+ items={this.state.items}
+ currentUTC={this.state.currentUTC}
+ rowHeight={50}
+ itemClickCallback={this.onItemClick}
+ itemMouseOverCallback={this.onItemMouseOver}
+ itemMouseOutCallback={this.onItemMouseOut}
+ sidebarWidth={150}
+ stackItems={true}
+ startTime={moment.utc(this.state.currentUTC).hour(0).minutes(0).seconds(0)}
+ endTime={moment.utc(this.state.currentUTC).hour(23).minutes(59).seconds(59)}
+ zoomLevel="1 Day"
+ showLive={false} showDateRange={false} viewType={UIConstants.timeline.types.WEEKVIEW}
+ dateRangeCallback={this.dateRangeCallback}
+ ></Timeline>
</div>
- }
- </div>
- </>
- }
- {/* SU Item Tooltip popover with SU status color */}
- <OverlayPanel className="timeline-popover" ref={(el) => this.popOver = el} dismissable>
- {mouseOverItem && mouseOverItem.type === "SCHEDULE" &&
- <div className={`p-grid su-${mouseOverItem.status}`} style={{ width: '350px' }}>
- <label className={`col-5 su-${mouseOverItem.status}-icon`}>Project:</label>
- <div className="col-7">{mouseOverItem.project}</div>
- <label className={`col-5 su-${mouseOverItem.status}-icon`}>Scheduling Unit:</label>
- <div className="col-7">{mouseOverItem.name}</div>
- <label className={`col-5 su-${mouseOverItem.status}-icon`}>Scheduler:</label>
- <div className="col-7">{mouseOverItem.scheduleMethod}</div>
- <label className={`col-5 su-${mouseOverItem.status}-icon`}>Friends:</label>
- <div className="col-7">{mouseOverItem.friends ? mouseOverItem.friends : "-"}</div>
- <label className={`col-5 su-${mouseOverItem.status}-icon`}>Start Time:</label>
- <div className="col-7">{mouseOverItem.suStartTime.format(UIConstants.CALENDAR_DATETIME_FORMAT)}</div>
- <label className={`col-5 su-${mouseOverItem.status}-icon`}>End Time:</label>
- <div className="col-7">{mouseOverItem.suStopTime.format(UIConstants.CALENDAR_DATETIME_FORMAT)}</div>
- <label className={`col-5 su-${mouseOverItem.status}-icon`}>Antenna Set:</label>
- <div className="col-7">{mouseOverItem.antennaSet}</div>
- <label className={`col-5 su-${mouseOverItem.status}-icon`}>Stations:</label>
- <div className="col-7">{mouseOverItem.stations.groups}:{mouseOverItem.stations.counts}</div>
- <label className={`col-5 su-${mouseOverItem.status}-icon`}>Status:</label>
- <div className="col-7">{mouseOverItem.status}</div>
- <label className={`col-5 su-${mouseOverItem.status}-icon`}>Duration:</label>
- <div className="col-7">{mouseOverItem.duration}</div>
- </div>
+ {/* Details Panel */}
+ {this.state.isSUDetsVisible &&
+ <div className="col-lg-3 col-md-3 col-sm-12"
+ style={{ borderLeft: "1px solid #efefef", marginTop: "0px", backgroundColor: "#f2f2f2" }}>
+ {this.state.isSummaryLoading ? <AppLoader /> :
+ <SchedulingUnitSummary schedulingUnit={suBlueprint} suTaskList={this.state.suTaskList}
+ viewInNewWindow
+ constraintsTemplate={this.state.suConstraintTemplate}
+ closeCallback={this.closeSUDets}
+ stationGroup={this.state.stationGroup}
+ location={this.props.location}></SchedulingUnitSummary>
+ }
+ </div>
+ }
+ {this.state.isReservDetsVisible &&
+ <div className="col-lg-3 col-md-3 col-sm-12"
+ style={{ borderLeft: "1px solid #efefef", marginTop: "0px", backgroundColor: "#f2f2f2" }}>
+ {this.state.isSummaryLoading ? <AppLoader /> :
+ <ReservationSummary reservation={reservation} location={this.props.location} closeCallback={this.closeSUDets}></ReservationSummary>
+ }
+ </div>
+ }
+ </div>
+ </>
}
- {(mouseOverItem && mouseOverItem.type === "RESERVATION") &&
- <div className={`p-grid`} style={{ width: '350px', backgroundColor: mouseOverItem.bgColor, color: mouseOverItem.color }}>
- <h3 className={`col-12`}>Reservation Overview</h3>
- <hr></hr>
- <label className={`col-5`} style={{ color: mouseOverItem.color }}>Name:</label>
- <div className="col-7">{mouseOverItem.name}</div>
- <label className={`col-5`} style={{ color: mouseOverItem.color }}>Description:</label>
- <div className="col-7">{mouseOverItem.desc}</div>
- <label className={`col-5`} style={{ color: mouseOverItem.color }}>Type:</label>
- <div className="col-7">{mouseOverItem.activity_type}</div>
- <label className={`col-5`} style={{ color: mouseOverItem.color }}>Stations:</label>
- {/* <div className="col-7"><ListBox options={mouseOverItem.stations} /></div> */}
- <div className="col-7 station-list">
- {mouseOverItem.stations.map((station, index) => (
- <div key={`stn-${index}`}>{station}</div>
- ))}
+ {/* SU Item Tooltip popover with SU status color */}
+ <OverlayPanel className="timeline-popover" ref={(el) => this.popOver = el} dismissable>
+ {mouseOverItem && mouseOverItem.type === "SCHEDULE" &&
+ <div className={`p-grid su-${mouseOverItem.status}`} style={{ width: '350px' }}>
+ <label className={`col-5 su-${mouseOverItem.status}-icon`}>Project:</label>
+ <div className="col-7">{mouseOverItem.project}</div>
+ <label className={`col-5 su-${mouseOverItem.status}-icon`}>Scheduling Unit:</label>
+ <div className="col-7">{mouseOverItem.name}</div>
+ <label className={`col-5 su-${mouseOverItem.status}-icon`}>Scheduler:</label>
+ <div className="col-7">{mouseOverItem.scheduleMethod}</div>
+ <label className={`col-5 su-${mouseOverItem.status}-icon`}>Friends:</label>
+ <div className="col-7">{mouseOverItem.friends ? mouseOverItem.friends : "-"}</div>
+ <label className={`col-5 su-${mouseOverItem.status}-icon`}>Start Time:</label>
+ <div className="col-7">{mouseOverItem.suStartTime.format(UIConstants.CALENDAR_DATETIME_FORMAT)}</div>
+ <label className={`col-5 su-${mouseOverItem.status}-icon`}>End Time:</label>
+ <div className="col-7">{mouseOverItem.suStopTime.format(UIConstants.CALENDAR_DATETIME_FORMAT)}</div>
+ <label className={`col-5 su-${mouseOverItem.status}-icon`}>Antenna Set:</label>
+ <div className="col-7">{mouseOverItem.antennaSet}</div>
+ <label className={`col-5 su-${mouseOverItem.status}-icon`}>Stations:</label>
+ <div className="col-7">{mouseOverItem.stations.groups}:{mouseOverItem.stations.counts}</div>
+ <label className={`col-5 su-${mouseOverItem.status}-icon`}>Status:</label>
+ <div className="col-7">{mouseOverItem.status}</div>
+ <label className={`col-5 su-${mouseOverItem.status}-icon`}>Duration:</label>
+ <div className="col-7">{mouseOverItem.duration}</div>
</div>
- <label className={`col-5`} style={{ color: mouseOverItem.color }}>Project:</label>
- <div className="col-7">{mouseOverItem.project ? mouseOverItem.project : "-"}</div>
- <label className={`col-5`} style={{ color: mouseOverItem.color }}>Start Time:</label>
- <div className="col-7">{mouseOverItem.displayStartTime.format(UIConstants.CALENDAR_DATETIME_FORMAT)}</div>
- <label className={`col-5`} style={{ color: mouseOverItem.color }}>End Time:</label>
- <div className="col-7">{mouseOverItem.displayEndTime ? mouseOverItem.displayEndTime.format(UIConstants.CALENDAR_DATETIME_FORMAT) : 'Unknown'}</div>
- {/* <label className={`col-5`} style={{color: mouseOverItem.color}}>Stations:</label>
- <div className="col-7">{mouseOverItem.stations.groups}:{mouseOverItem.stations.counts}</div> */}
- <label className={`col-5`} style={{ color: mouseOverItem.color }}>Duration:</label>
- <div className="col-7">{mouseOverItem.duration}</div>
- <label className={`col-5`} style={{ color: mouseOverItem.color }}>Planned:</label>
- <div className="col-7">{mouseOverItem.planned ? 'Yes' : 'No'}</div>
+ }
+ {(mouseOverItem && mouseOverItem.type === "RESERVATION") &&
+ <div className={`p-grid`} style={{ width: '350px', backgroundColor: mouseOverItem.bgColor, color: mouseOverItem.color }}>
+ <h3 className={`col-12`}>Reservation Overview</h3>
+ <hr></hr>
+ <label className={`col-5`} style={{ color: mouseOverItem.color }}>Name:</label>
+ <div className="col-7">{mouseOverItem.name}</div>
+ <label className={`col-5`} style={{ color: mouseOverItem.color }}>Description:</label>
+ <div className="col-7">{mouseOverItem.desc}</div>
+ <label className={`col-5`} style={{ color: mouseOverItem.color }}>Type:</label>
+ <div className="col-7">{mouseOverItem.activity_type}</div>
+ <label className={`col-5`} style={{ color: mouseOverItem.color }}>Stations:</label>
+ {/* <div className="col-7"><ListBox options={mouseOverItem.stations} /></div> */}
+ <div className="col-7 station-list">
+ {mouseOverItem.stations.map((station, index) => (
+ <div key={`stn-${index}`}>{station}</div>
+ ))}
+ </div>
+ <label className={`col-5`} style={{ color: mouseOverItem.color }}>Project:</label>
+ <div className="col-7">{mouseOverItem.project ? mouseOverItem.project : "-"}</div>
+ <label className={`col-5`} style={{ color: mouseOverItem.color }}>Start Time:</label>
+ <div className="col-7">{mouseOverItem.displayStartTime.format(UIConstants.CALENDAR_DATETIME_FORMAT)}</div>
+ <label className={`col-5`} style={{ color: mouseOverItem.color }}>End Time:</label>
+ <div className="col-7">{mouseOverItem.displayEndTime ? mouseOverItem.displayEndTime.format(UIConstants.CALENDAR_DATETIME_FORMAT) : 'Unknown'}</div>
+ {/* <label className={`col-5`} style={{color: mouseOverItem.color}}>Stations:</label>
+ <div className="col-7">{mouseOverItem.stations.groups}:{mouseOverItem.stations.counts}</div> */}
+ <label className={`col-5`} style={{ color: mouseOverItem.color }}>Duration:</label>
+ <div className="col-7">{mouseOverItem.duration}</div>
+ <label className={`col-5`} style={{ color: mouseOverItem.color }}>Planned:</label>
+ <div className="col-7">{mouseOverItem.planned ? 'Yes' : 'No'}</div>
+ </div>
+ }
+ </OverlayPanel>
+ {/* Open Websocket after loading all initial data */}
+ {!this.state.isLoading &&
+ <Websocket url={process.env.REACT_APP_WEBSOCKET_URL} onOpen={this.onConnect} onMessage={this.handleData} onClose={this.onDisconnect} />}
+ {this.state.showDialog &&
+ <div className="p-grid" data-testid="confirm_dialog">
+ <CustomDialog type="success" visible={this.state.showDialog} width="30vw" showIcon={false}
+ header="Dynamic Scheduling Settings" message={<DynamicScheduler />}
+ content={''}
+ actions={ [
+ {id:"no", title: 'Close', callback: this.close} ]}
+ onClose={this.close}
+ />
</div>
}
- </OverlayPanel>
- {/* Open Websocket after loading all initial data */}
- {!this.state.isLoading &&
- <Websocket url={process.env.REACT_APP_WEBSOCKET_URL} onOpen={this.onConnect} onMessage={this.handleData} onClose={this.onDisconnect} />}
+ </>
+ }
</React.Fragment>
);
}
--
GitLab