TMSS-936- updated the code for week view

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" 
+                <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>
             </div>
 
             <CustomDialog type="confirmation" visible={this.state.showDialog} width={'35vw'}

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,9 +869,14 @@ 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: 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 /> :
@@ -1037,6 +1065,19 @@ export class WeekTimelineView extends Component {
                     {/* 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>
         );
     }