From a54c934d571863a2e68def65ed57d1ec28abf7cc Mon Sep 17 00:00:00 2001
From: Muthukrishnanmatriot
<76949556+muthukrishnanmatriot@users.noreply.github.com>
Date: Tue, 31 Aug 2021 17:43:55 +0530
Subject: [PATCH] Update review comments
---
.../src/components/DynamicScheduler.js | 16 +-
.../tmss_webapp/src/routes/Timeline/view.js | 565 +++++++++---------
.../src/routes/Timeline/week.view.js | 387 ++++++------
3 files changed, 482 insertions(+), 486 deletions(-)
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/components/DynamicScheduler.js b/SAS/TMSS/frontend/tmss_webapp/src/components/DynamicScheduler.js
index a03a4f9ec46..cdf2739b385 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/components/DynamicScheduler.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/components/DynamicScheduler.js
@@ -2,7 +2,8 @@ import React, { Component } from 'react';
import UtilService from '../services/util.service';
import { CustomDialog } from '../layout/components/CustomDialog';
import { Growl } from 'primereact/components/growl/Growl';
-import { ToggleButton } from 'primereact/togglebutton';
+import {InputSwitch} from 'primereact/inputswitch';
+import AuthStore from '../authenticate/auth.store';
export default class DynamicScheduler extends Component {
constructor(props) {
@@ -11,6 +12,7 @@ export default class DynamicScheduler extends Component {
this.state= {
dsStatus: false, // Dynamic Scheduler Status
showDialog: false,
+ userrole: AuthStore.getState(),
}
this.currentStatus = null;
this.updateDSStatus = this.updateDSStatus.bind(this);
@@ -59,19 +61,23 @@ export default class DynamicScheduler extends Component {
}
render() {
+ const {dynamicScheduler} = this.state.userrole.userRolePermission;
+ const tooltip = dynamicScheduler.setting?`Turn ${this.state.dsStatus? "'Off'" : "'On'"} Dynamic Scheduling`: "Don't have permission to Trun On/Off Dynamic Scheduling"
return (
<>
<Growl ref={(el) => this.growl = el} />
<div className="p-field p-grid">
- <label htmlFor="autodeletion" style={{marginRight: '10px', marginLeft: '50px'}}>Dynamic Scheduling : </label>
- <ToggleButton onLabel="On" offLabel="Off" onIcon="pi pi-check" offIcon="pi pi-times" style={{top: '-4px'}}
+ <label htmlFor="autodeletion" style={{marginRight: '10px', marginLeft: '1em'}}>Dynamic Scheduling :</label>
+ <label htmlFor="onLabel" style={{ marginRight: '0.25em', color: 'black'}}>OFF</label>
+ <InputSwitch disabled={dynamicScheduler.setting?!dynamicScheduler.setting:true}
checked={this.state.dsStatus} onChange={(e) => this.showConfirmDialog(e)}
- tooltip={`Click to ${this.state.dsStatus? "'Switch Off'" : "'Switch On'"} the Dynamic Scheduling`}
+ tooltip={tooltip}
tooltipOptions={this.tooltipOptions}/>
+ <label htmlFor="onLabel" style={{marginLeft: '0.25em', color: 'black'}}>ON</label>
</div>
<CustomDialog type="confirmation" visible={this.state.showDialog} width={'35vw'}
- header={'Confirmation'} message={`Are you sure want to switch ${this.currentStatus === true ? 'On' : 'Off'} the Dynamic Scheduling?` }
+ header={'Confirmation'} message={`Do you want to turn ${this.currentStatus === true ? 'On' : 'Off'} Dynamic Scheduling?` }
content={''} showIcon={true}
onClose={this.closeDialog} onCancel={this.closeDialog} onSubmit={this.updateDSStatus}
/>
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 2dd9e702b34..6eea35d5314 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js
@@ -1144,307 +1144,302 @@ export class TimelineView extends Component {
let mouseOverItem = this.state.mouseOverItem;
return (
<React.Fragment>
- {dynamicScheduler &&
- <>
- <TieredMenu className="app-header-menu" model={this.state.menuOptions} popup ref={el => this.optionsMenu = el} />
- <PageHeader location={this.props.location} title={'Scheduling Units - Timeline 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-calendar-alt', title: 'Week View', props: { pathname: `/su/timelineview/week` } }
- ]}
- />
- { this.state.isLoading ? <AppLoader /> :
- <div className="p-grid">
- {/* SU List Panel */}
- <div className={isSUListVisible && (isSUDetsVisible || isReservDetsVisible || isTaskDetsVisible ||
- (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: "3px 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>
+ <TieredMenu className="app-header-menu" model={this.state.menuOptions} popup ref={el => this.optionsMenu = el} />
+ <PageHeader location={this.props.location} title={'Scheduling Units - Timeline View'}
+ actions={[
+ { icon: 'fa-cog', title: 'Dynamic Scheduling Settings',
+ type: 'button', actOn: 'click', props: { callback: this.showDymanicSchedulerPopup }, },
+ { icon: 'fa-bars', title: '',
+ type: 'button', actOn: 'mouseOver', props: { callback: this.showOptionMenu }, },
+ { icon: 'fa-calendar-alt', title: 'Week View', props: { pathname: `/su/timelineview/week` } }
+ ]}
+ />
+ { this.state.isLoading ? <AppLoader /> :
+ <div className="p-grid">
+ {/* SU List Panel */}
+ <div className={isSUListVisible && (isSUDetsVisible || isReservDetsVisible || isTaskDetsVisible ||
+ (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: "3px 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 || isTaskDetsVisible) ? "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="Expand List/Shrink Timeline"
+ onClick={(e) => { this.resizeSUList(1) }}>
+ <i className="pi pi-step-forward"></i>
+ </button>
</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 || isTaskDetsVisible) ? "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="Expand List/Shrink Timeline"
- onClick={(e) => { this.resizeSUList(1) }}>
- <i className="pi pi-step-forward"></i>
- </button>
+ }
+ <div className={isSUListVisible ? "resize-div su-visible" : "resize-div su-hidden"}>
+ {isSUListVisible &&
+ <button className="p-link resize-btn"
+ title="Hide List"
+ onClick={(e) => { this.showListPanel(false) }}>
+ <i className="pi pi-eye-slash"></i>
+ </button>
+ }
+ {!isSUListVisible &&
+ <button className="p-link resize-btn"
+ title="Show List"
+ onClick={(e) => { this.showListPanel(true) }}>
+ <i className="pi pi-eye"> Show List</i>
+ </button>
+ }
+ </div>
+ <div className={`timeline-view-toolbar p-grid ${this.state.stationView && 'alignTimeLineHeader'}`}>
+ <div className="sub-header col-lg-2">
+ <label >Station View</label>
+ <InputSwitch checked={this.state.stationView} onChange={(e) => { this.setStationView(e) }} />
+ </div>
+ {this.state.stationView &&
+ <>
+ <div className="sub-header col-lg-2">
+ <label>Show</label>
+ <Button className="p-button-rounded toggle-btn"
+ tooltip={this.state.isStationTasksVisible?"Show Scheduling Units":"Show Tasks"}
+ style={{minWidth: "50px"}}
+ label={this.state.isStationTasksVisible?"SUs":"Tasks"}
+ onClick={e => this.changeViewBlocks()} />
+ </div>
+ <div className="sub-header col-lg-4">
+ <label style={{ marginLeft: '20px' }}>Stations Group</label>
+ <MultiSelect data-testid="stations" id="stations" optionLabel="value" optionValue="value"
+ style={{ top: '2px', width: '175px' }}
+ tooltip="Select Stations"
+ value={this.state.selectedStationGroup}
+ options={this.mainStationGroupOptions}
+ placeholder="Select Group"
+ onChange={(e) => this.setSelectedStationGroup(e.value)}
+ />
+ </div>
+ </>
+ }
+ {!this.state.stationView &&
+ <>
+ <div className="sub-header col-lg-5">
+ <div className={`sub-header-content ${isSUListVisible?"col-lg-12":"col-lg-8"}`} style={{padding: '0px !important'}}>
+ <fieldset>
+ <label style={{ marginLeft: '0px' }}>Show :</label>
+ <input type="radio" value="su" name="Only SUs" className="timeline-toolbar-radio" inputId="suOnly" onClick={(e) => this.showTimelineItems(e.target.value)} checked={this.state.showSUs && !this.state.showTasks} />
+ <label htmlFor="suOnly">Only SU</label>
+ <input type="radio" value="task" name="Only Tasks" className="timeline-toolbar-radio" inputId="taskOnly" onChange={(e) => this.showTimelineItems(e.target.value)} checked={!this.state.showSUs && this.state.showTasks} />
+ <label htmlFor="suOnly">Only Task</label>
+ <input type="radio" value="suTask" name="Both" className="timeline-toolbar-radio" inputId="bothSuTask" onChange={(e) => this.showTimelineItems(e.target.value)} checked={this.state.showSUs && this.state.showTasks} />
+ <label htmlFor="suOnly">Both</label>
+ </fieldset>
</div>
- }
- <div className={isSUListVisible ? "resize-div su-visible" : "resize-div su-hidden"}>
- {isSUListVisible &&
- <button className="p-link resize-btn"
- title="Hide List"
- onClick={(e) => { this.showListPanel(false) }}>
- <i className="pi pi-eye-slash"></i>
- </button>
- }
- {!isSUListVisible &&
- <button className="p-link resize-btn"
- title="Show List"
- onClick={(e) => { this.showListPanel(true) }}>
- <i className="pi pi-eye"> Show List</i>
- </button>
+ {this.state.showTasks &&
+ <div className={`sub-header-content ${isSUListVisible?"col-lg-12":"col-lg-3"}`} style={{padding: '0px !important', marginLeft: `${isSUListVisible?"50px":"0px"}`}}>
+ <MultiSelect data-testid="tasks" id="tasks" optionLabel="value" optionValue="value"
+ style={{ width: '120px', height: '25px', marginRight: '10px' }}
+ tooltip={this.state.selectedTaskTypes.length>0?
+ `Showing tasks of task type(s) ${this.state.selectedTaskTypes.join(', ')}`:
+ "Select task type(s) to show in the timeline"}
+ maxSelectedLabels="1"
+ selectedItemsLabel="{0} Task Types"
+ value={this.state.selectedTaskTypes}
+ options={this.state.taskTypes}
+ placeholder="Task Type"
+ onChange={(e) => {this.setSelectedTaskTypes(e.value)}}
+ />
+ </div>
}
</div>
- <div className={`timeline-view-toolbar p-grid ${this.state.stationView && 'alignTimeLineHeader'}`}>
- <div className="sub-header col-lg-2">
- <label >Station View</label>
- <InputSwitch checked={this.state.stationView} onChange={(e) => { this.setStationView(e) }} />
- </div>
- {this.state.stationView &&
+ <div className="sub-header col-lg-2" style={{paddingTop: "15px !important"}}>
+ {this.state.groupByProject &&
+ <Button className="p-button-rounded toggle-btn" label="Group By SU" onClick={e => this.setGroupByProject(false)} />}
+ {!this.state.groupByProject &&
+ <Button className="p-button-rounded toggle-btn" label="Group By Project" onClick={e => this.setGroupByProject(true)} />}
+ </div>
+ </>
+ }
+ <div className="sub-header col-lg-3">
+ {!this.state.stationView &&
+ <Button className="p-button-rounded toggle-btn"
+ tooltip={this.state.showReservation?"Hide Reservations":"Show Reservations"}
+ style={{minWidth: "50px"}}
+ label={this.state.showReservation?"Hide Reservation":"Show Reservation"}
+ onClick={e => this.showReservationBlocks()} />
+ }
+ { this.state.stationView &&
+ <label style={{ marginLeft: '20px' }}>Reservation</label>
+ }
+ { (this.state.stationView || this.state.showReservation) &&
<>
- <div className="sub-header col-lg-2">
- <label>Show</label>
- <Button className="p-button-rounded toggle-btn"
- tooltip={this.state.isStationTasksVisible?"Show Scheduling Units":"Show Tasks"}
- style={{minWidth: "50px"}}
- label={this.state.isStationTasksVisible?"SUs":"Tasks"}
- onClick={e => this.changeViewBlocks()} />
- </div>
- <div className="sub-header col-lg-4">
- <label style={{ marginLeft: '20px' }}>Stations Group</label>
- <MultiSelect data-testid="stations" id="stations" optionLabel="value" optionValue="value"
- style={{ top: '2px', width: '175px' }}
- tooltip="Select Stations"
- value={this.state.selectedStationGroup}
- options={this.mainStationGroupOptions}
- placeholder="Select Group"
- onChange={(e) => this.setSelectedStationGroup(e.value)}
- />
- </div>
+ <MultiSelect data-testid="reserv-reasons" id="reserv-reasons"
+ optionLabel="name" optionValue="name"
+ style={{ top: '2px', marginLeft:'5px', minWidth: '100px' }}
+ panelStyle={{right: '0px'}}
+ tooltip="Select Reservation Reason(s)"
+ value={this.state.reservationFilter}
+ options={this.reservationReasons}
+ maxSelectedLabels="1"
+ filter showClear={true} filterBy="name"
+ placeholder="Reason"
+ onChange={(e) => this.setReservationFilter(e.value)}
+ />
</>
- }
- {!this.state.stationView &&
- <>
- <div className="sub-header col-lg-5">
- <div className={`sub-header-content ${isSUListVisible?"col-lg-12":"col-lg-8"}`} style={{padding: '0px !important'}}>
- <fieldset>
- <label style={{ marginLeft: '0px' }}>Show :</label>
- <input type="radio" value="su" name="Only SUs" className="timeline-toolbar-radio" inputId="suOnly" onClick={(e) => this.showTimelineItems(e.target.value)} checked={this.state.showSUs && !this.state.showTasks} />
- <label htmlFor="suOnly">Only SU</label>
- <input type="radio" value="task" name="Only Tasks" className="timeline-toolbar-radio" inputId="taskOnly" onChange={(e) => this.showTimelineItems(e.target.value)} checked={!this.state.showSUs && this.state.showTasks} />
- <label htmlFor="suOnly">Only Task</label>
- <input type="radio" value="suTask" name="Both" className="timeline-toolbar-radio" inputId="bothSuTask" onChange={(e) => this.showTimelineItems(e.target.value)} checked={this.state.showSUs && this.state.showTasks} />
- <label htmlFor="suOnly">Both</label>
- </fieldset>
- </div>
- {this.state.showTasks &&
- <div className={`sub-header-content ${isSUListVisible?"col-lg-12":"col-lg-3"}`} style={{padding: '0px !important', marginLeft: `${isSUListVisible?"50px":"0px"}`}}>
- <MultiSelect data-testid="tasks" id="tasks" optionLabel="value" optionValue="value"
- style={{ width: '120px', height: '25px', marginRight: '10px' }}
- tooltip={this.state.selectedTaskTypes.length>0?
- `Showing tasks of task type(s) ${this.state.selectedTaskTypes.join(', ')}`:
- "Select task type(s) to show in the timeline"}
- maxSelectedLabels="1"
- selectedItemsLabel="{0} Task Types"
- value={this.state.selectedTaskTypes}
- options={this.state.taskTypes}
- placeholder="Task Type"
- onChange={(e) => {this.setSelectedTaskTypes(e.value)}}
- />
- </div>
- }
- </div>
- <div className="sub-header col-lg-2" style={{paddingTop: "15px !important"}}>
- {this.state.groupByProject &&
- <Button className="p-button-rounded toggle-btn" label="Group By SU" onClick={e => this.setGroupByProject(false)} />}
- {!this.state.groupByProject &&
- <Button className="p-button-rounded toggle-btn" label="Group By Project" onClick={e => this.setGroupByProject(true)} />}
- </div>
- </>
- }
- <div className="sub-header col-lg-3">
- {!this.state.stationView &&
- <Button className="p-button-rounded toggle-btn"
- tooltip={this.state.showReservation?"Hide Reservations":"Show Reservations"}
- style={{minWidth: "50px"}}
- label={this.state.showReservation?"Hide Reservation":"Show Reservation"}
- onClick={e => this.showReservationBlocks()} />
- }
- { this.state.stationView &&
- <label style={{ marginLeft: '20px' }}>Reservation</label>
- }
- { (this.state.stationView || this.state.showReservation) &&
- <>
- <MultiSelect data-testid="reserv-reasons" id="reserv-reasons"
- optionLabel="name" optionValue="name"
- style={{ top: '2px', marginLeft:'5px', minWidth: '100px' }}
- panelStyle={{right: '0px'}}
- tooltip="Select Reservation Reason(s)"
- value={this.state.reservationFilter}
- options={this.reservationReasons}
- maxSelectedLabels="1"
- filter showClear={true} filterBy="name"
- placeholder="Reason"
- onChange={(e) => this.setReservationFilter(e.value)}
- />
- </>
- }
- </div>
+ }
+ </div>
- </div>
+ </div>
- <Timeline ref={(tl) => { this.timeline = tl }}
- defaultStartTime={this.state.currentStartTime}
- defaultEndTime={this.state.currentEndTime}
- group={this.state.group}
- items={this.state.items}
- currentUTC={this.state.currentUTC}
- rowHeight={this.state.stationView ? 50 : 50}
- sidebarWidth={!this.state.showSUs ? 250 : 200}
- itemClickCallback={this.onItemClick}
- itemMouseOverCallback={this.onItemMouseOver}
- itemMouseOutCallback={this.onItemMouseOut}
- dateRangeCallback={this.dateRangeCallback}
- showSunTimings={!this.state.stationView}
- timelineCommonUtils={this.timelineCommonUtils}
- timelineUIAttributes={this.timelineUIAttributes}
- // stackItems ={this.state.stationView}
- stackItems
- className="timeline-toolbar-margin-top-0"></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}
- stationGroup={this.state.stationGroup}
- closeCallback={this.closeSUDets}></SchedulingUnitSummary>
- }
- </div>
+ <Timeline ref={(tl) => { this.timeline = tl }}
+ defaultStartTime={this.state.currentStartTime}
+ defaultEndTime={this.state.currentEndTime}
+ group={this.state.group}
+ items={this.state.items}
+ currentUTC={this.state.currentUTC}
+ rowHeight={this.state.stationView ? 50 : 50}
+ sidebarWidth={!this.state.showSUs ? 250 : 200}
+ itemClickCallback={this.onItemClick}
+ itemMouseOverCallback={this.onItemMouseOver}
+ itemMouseOutCallback={this.onItemMouseOut}
+ dateRangeCallback={this.dateRangeCallback}
+ showSunTimings={!this.state.stationView}
+ timelineCommonUtils={this.timelineCommonUtils}
+ timelineUIAttributes={this.timelineUIAttributes}
+ // stackItems ={this.state.stationView}
+ stackItems
+ className="timeline-toolbar-margin-top-0"></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}
+ stationGroup={this.state.stationGroup}
+ closeCallback={this.closeSUDets}></SchedulingUnitSummary>
}
- {this.state.isTaskDetsVisible &&
- <div className="col-lg-3 col-md-3 col-sm-12"
- style={{ borderLeft: "1px solid #efefef", marginTop: "0px", backgroundColor: "#f2f2f2" }}>
- {this.state.isSummaryLoading ? <AppLoader /> :
- <div>Yet to be developed <i className="fa fa-times" onClick={this.closeSUDets}></i></div>
- }
- </div>
+ </div>
+ }
+ {this.state.isTaskDetsVisible &&
+ <div className="col-lg-3 col-md-3 col-sm-12"
+ style={{ borderLeft: "1px solid #efefef", marginTop: "0px", backgroundColor: "#f2f2f2" }}>
+ {this.state.isSummaryLoading ? <AppLoader /> :
+ <div>Yet to be developed <i className="fa fa-times" onClick={this.closeSUDets}></i></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} viewInNewWindow={true}
- closeCallback={this.closeSUDets}></ReservationSummary>
- }
- </div>
+ </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} viewInNewWindow={true}
+ closeCallback={this.closeSUDets}></ReservationSummary>
}
</div>
-
}
- {/* SU Item Tooltip popover with SU status color */}
- <OverlayPanel className="timeline-popover" ref={(el) => this.popOver = el} dismissable>
- {(mouseOverItem && (["SCHEDULE", "TASK", "STATION_TASK"].indexOf(mouseOverItem.type) >= 0)) &&
- <div className={`p-grid su-${mouseOverItem.status}`} style={{ width: '350px' }}>
- <h3 className={`col-12 su-${mouseOverItem.status}-icon`}>{mouseOverItem.type === 'SCHEDULE' ? 'Scheduling Unit ' : 'Task '}Overview</h3>
- <hr></hr>
- <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.suName}</div>
- {mouseOverItem.type === 'SCHEDULE' &&
- <>
+ </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>
- </>}
- { (mouseOverItem.type === 'TASK' || mouseOverItem.type === 'STATION_TASK') &&
- <>
- <label className={`col-5 su-${mouseOverItem.status}-icon`}>Task Name:</label>
- <div className="col-7">{mouseOverItem.name}</div>
- </>}
- <label className={`col-5 su-${mouseOverItem.status}-icon`}>Start Time:</label>
- <div className="col-7">{mouseOverItem.start_time.format(UIConstants.CALENDAR_DATETIME_FORMAT)}</div>
- <label className={`col-5 su-${mouseOverItem.status}-icon`}>End Time:</label>
- <div className="col-7">{mouseOverItem.end_time.format(UIConstants.CALENDAR_DATETIME_FORMAT)}</div>
- {mouseOverItem.type === 'SCHEDULE' &&
- <>
- <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>
- }
- {(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>
+ }
+ {/* SU Item Tooltip popover with SU status color */}
+ <OverlayPanel className="timeline-popover" ref={(el) => this.popOver = el} dismissable>
+ {(mouseOverItem && (["SCHEDULE", "TASK", "STATION_TASK"].indexOf(mouseOverItem.type) >= 0)) &&
+ <div className={`p-grid su-${mouseOverItem.status}`} style={{ width: '350px' }}>
+ <h3 className={`col-12 su-${mouseOverItem.status}-icon`}>{mouseOverItem.type === 'SCHEDULE' ? 'Scheduling Unit ' : 'Task '}Overview</h3>
+ <hr></hr>
+ <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.suName}</div>
+ {mouseOverItem.type === 'SCHEDULE' &&
+ <>
+
+ <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>
+ </>}
+ { (mouseOverItem.type === 'TASK' || mouseOverItem.type === 'STATION_TASK') &&
+ <>
+ <label className={`col-5 su-${mouseOverItem.status}-icon`}>Task 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.start_time.format(UIConstants.CALENDAR_DATETIME_FORMAT)}</div>
- <label className={`col-5`} style={{ color: mouseOverItem.color }}>End Time:</label>
- <div className="col-7">{mouseOverItem.duration!=="Unknown"?mouseOverItem.end_time.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>
- {!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}
- />
+ </>}
+ <label className={`col-5 su-${mouseOverItem.status}-icon`}>Start Time:</label>
+ <div className="col-7">{mouseOverItem.start_time.format(UIConstants.CALENDAR_DATETIME_FORMAT)}</div>
+ <label className={`col-5 su-${mouseOverItem.status}-icon`}>End Time:</label>
+ <div className="col-7">{mouseOverItem.end_time.format(UIConstants.CALENDAR_DATETIME_FORMAT)}</div>
+ {mouseOverItem.type === 'SCHEDULE' &&
+ <>
+ <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>
+ }
+ {(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.start_time.format(UIConstants.CALENDAR_DATETIME_FORMAT)}</div>
+ <label className={`col-5`} style={{ color: mouseOverItem.color }}>End Time:</label>
+ <div className="col-7">{mouseOverItem.duration!=="Unknown"?mouseOverItem.end_time.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>
+ {!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>
}
</React.Fragment>
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 8c353d98805..a7f44266cf2 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
@@ -869,215 +869,210 @@ export class WeekTimelineView extends Component {
const mouseOverItem = this.state.mouseOverItem;
return (
<React.Fragment>
- {dynamicScheduler &&
+ <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: 'Dynamic Scheduling Settings',
+ type: 'button', actOn: 'click', props: { callback: this.showDymanicSchedulerPopup }, },
+ { 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 /> :
<>
- <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 */}
+ {/* <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"}>
{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>
+ <button className="p-link resize-btn"
+ title="Hide List"
+ onClick={(e) => { this.setState({ isSUListVisible: false }) }}>
+ <i className="pi pi-eye-slash"></i>
+ </button>
}
- <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>
- }
+ {!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>
+ <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>
- <div className={`timeline-view-toolbar ${this.state.reservationEnabled && 'alignTimeLineHeader'}`}>
+
+ {this.state.reservationEnabled &&
<div className="sub-header">
- <label >Show Reservations</label>
- <InputSwitch checked={this.state.reservationEnabled} onChange={(e) => { this.showReservations(e) }} />
+ <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>
-
- {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>
- {/* 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>
- </>
- }
- {/* 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>
+
+ <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>
- }
- {(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>
- ))}
+ {/* 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>
- <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>
+ </>
+ }
+ {/* 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>
+ }
+ {(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>
- }
- </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}
- />
+ <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>
+ }
</React.Fragment>
);
}
--
GitLab