diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_timeline.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_timeline.scss
index e9e71c99a8042f651bc6227ef639e90b6f6841b5..5f79c6623120f16b346a9cdd7edc07d08925b8b8 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_timeline.scss
+++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_timeline.scss
@@ -149,6 +149,22 @@
color: orange;
}
+.su-visible {
+ margin-top: 30px;
+ // margin-left: -59px !important;
+}
+
+.su-hidden {
+ margin-left: -20px !important;
+ z-index: 0 !important;
+ margin-top:40px;
+}
+
+.su-hidden>button {
+ width: 80px;
+ transform: translateX(-50%) translateY(-50%) rotate(-90deg);
+ height: 20px;
+}
.resize-div,
.resize-div-min,
.resize-div-avg,
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 7c8436aeacf4e17fa5b73fef1a7c73b81b7eb308..608e07899781932d50e5f30c2cbd3de6d5796fad 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js
@@ -63,6 +63,7 @@ export class TimelineView extends Component {
isTaskDetsVisible: false,
canExtendSUList: true,
canShrinkSUList: false,
+ isSUListVisible: true,
selectedItem: null,
mouseOverItem: null,
suTaskList:[],
@@ -872,6 +873,7 @@ export class TimelineView extends Component {
// if (this.state.loader) {
// return <AppLoader />
// }
+ const isSUListVisible = this.state.isSUListVisible;
const isSUDetsVisible = this.state.isSUDetsVisible;
const isReservDetsVisible = this.state.isReservDetsVisible;
const isTaskDetsVisible = this.state.isTaskDetsVisible;
@@ -898,8 +900,10 @@ export class TimelineView extends Component {
{ this.state.isLoading ? <AppLoader /> :
<div className="p-grid">
{/* SU List Panel */}
- <div className={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={{position: "inherit", borderRight: "5px solid #efefef", paddingTop: "10px"}}>
+ <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'}}>
<ViewTable
viewInNewWindow
data={this.state.suBlueprintList}
@@ -924,8 +928,14 @@ export class TimelineView extends Component {
/>
</div>
{/* Timeline Panel */}
- <div className={isSUDetsVisible || isReservDetsVisible || isTaskDetsVisible || (!canExtendSUList && canShrinkSUList)?"col-lg-5 col-md-5 col-sm-12":((canExtendSUList && canShrinkSUList)?"col-lg-7 col-md-7 col-sm-12":"col-lg-8 col-md-8 col-sm-12")}>
+ <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"
@@ -933,12 +943,28 @@ export class TimelineView extends Component {
<i className="pi pi-step-backward"></i>
</button>
<button className="p-link resize-btn" disabled={!this.state.canExtendSUList}
- title="Expandd List/Shrink Timeline"
+ title="Expand 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 &&
+ <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>
<div className={`timeline-view-toolbar ${this.state.stationView && 'alignTimeLineHeader'}`}>
<div className="sub-header">
<label >Station View</label>
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 08322699a4c79cdcfe50a79e093874b69509c2ad..03a38109bd1fd8963783774bc55eb331a4f3e4d3 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
@@ -50,6 +50,7 @@ export class WeekTimelineView extends Component {
suBlueprintList: [], // SU Blueprints filtered to view
group:[], // Timeline group from scheduling unit draft name
items:[], // Timeline items from scheduling unit blueprints grouped by scheduling unit draft
+ isSUListVisible: true,
isSUDetsVisible: false,
canExtendSUList: true,
canShrinkSUList: false,
@@ -771,6 +772,7 @@ export class WeekTimelineView extends Component {
if (this.state.redirect) {
return <Redirect to={ {pathname: this.state.redirect} }></Redirect>
}
+ const isSUListVisible = this.state.isSUListVisible;
const isSUDetsVisible = this.state.isSUDetsVisible;
const isReservDetsVisible = this.state.isReservDetsVisible;
const canExtendSUList = this.state.canExtendSUList;
@@ -803,8 +805,10 @@ export class WeekTimelineView extends Component {
</div> */}
<div className="p-grid">
{/* SU List Panel */}
- <div className={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={{position: "inherit", borderRight: "5px solid #efefef", paddingTop: "10px"}}>
+ <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"}}>
<ViewTable viewInNewWindow
data={this.state.suBlueprintList}
defaultcolumns={[{name: "Name",
@@ -822,8 +826,14 @@ export class WeekTimelineView extends Component {
/>
</div>
{/* Timeline Panel */}
- <div className={isSUDetsVisible || isReservDetsVisible || (!canExtendSUList && canShrinkSUList)?"col-lg-5 col-md-5 col-sm-12":((canExtendSUList && canShrinkSUList)?"col-lg-7 col-md-7 col-sm-12":"col-lg-8 col-md-8 col-sm-12")}>
+ <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"
@@ -835,7 +845,24 @@ export class WeekTimelineView extends Component {
onClick={(e)=> { this.resizeSUList(1)}}>
<i className="pi pi-step-forward"></i>
</button>
- </div>
+ </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.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>
<div className={`timeline-view-toolbar ${this.state.reservationEnabled && 'alignTimeLineHeader'}`}>
<div className="sub-header">
<label >Show Reservations</label>