This commit is contained in:
Nikolaos Laskaris 2017-11-13 18:19:43 +02:00
parent 6084125de0
commit 1e78d583c6
9 changed files with 142 additions and 50 deletions

View File

@ -36,9 +36,15 @@
cursor: pointer; cursor: pointer;
} }
.navbar {
-webkit-box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.73);
-moz-box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.73);
box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.73);
margin-bottom: 5px;
}
.navbar-title
{ .navbar-title {
position: absolute; position: absolute;
width: 100%; width: 100%;
left: 0; left: 0;

View File

@ -1,6 +1,6 @@
<div> <div>
<nav class="navbar navbar-default"> <nav class="navbar navbar-default shadowed">
<div class="container-fluid"> <div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display --> <!-- Brand and toggle get grouped for better mobile display -->

View File

@ -1,3 +1,11 @@
.hide{
display:none;
}
.show {
display:block;
}
.btncustom{ .btncustom{
background-color:#337ab7; background-color:#337ab7;
color:white; color:white;
@ -5,27 +13,78 @@
} }
.parent-div { .parent-div {
height: calc(100vh - 80px); height: calc(100vh - 65px); /* is height of window minus heigh of header bar */
width:100%; width:100%;
} }
.child-div-left{ .child-div-left{
-webkit-box-shadow: 0px 0px 9px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 9px 2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 9px 2px rgba(0,0,0,0.75);
padding:0px;
height: 100%; height: 100%;
-webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
transition: 0.5s;
}
.child-div-caret{
position: absolute;
left: 98%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
font-size: 2em;
cursor: pointer;
} }
.child-div-right { .child-div-right {
overflow-y: scroll; overflow-y: scroll;
height: 100%; height: 100%;
-webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
transition: 0.5s;
transition: visibility 0s, opacity 0.5s linear;
} }
.form-body-container{ .form-body-container{
height: calc(100vh - 80px - 130px); padding-bottom: 10px;
height: calc(100vh - 85px - 138px); /* is height of window minus heigh of app header bar minus height of form footer bar */
overflow-y:scroll; overflow-y:scroll;
} }
.form-footer-container { .form-footer-seperator{
height: 130px;
border-style: solid;
border-width: 1px;
border-color: rgb(112, 112, 112);
/*
-webkit-box-shadow: 0px 0px 11px 1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 11px 1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 11px 1px rgba(0,0,0,0.75);
*/
/*border-width: thin;*/
width:100%;
}
.form-footer-container {
/*
-webkit-box-shadow: 0px -3px 5px 0px rgba(128,128,128,1);
-moz-box-shadow: 0px -3px 5px 0px rgba(128,128,128,1);
box-shadow: 0px -3px 5px 0px rgba(128,128,128,1);
*/
height: 138px;
}
.progress{
margin-top: 8px;
margin-bottom: 0px;
} }

View File

@ -1,9 +1,7 @@
<div class="parent-div"> <div class="parent-div">
<div class="col-md-8 col-sm-9 child-div-left" > <div class=" child-div-left" [ngClass]="{true:'col-md-8 col-sm-9', false:'col-md-12 col-sm-12'}[expandedToc]">
<div class="col-md-12 form-body-container" id="form-container"> <div class="col-md-12 form-body-container" id="form-container">
@ -38,8 +36,20 @@
</form> </form>
</div> </div>
<div class="col-md-12 form-footer-seperator" >
</div>
<div class="col-md-12 form-footer-container" > <div class="col-md-12 form-footer-container" >
<div >
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow= "" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': dirtyValues + '%'}">
<!-- {{dirtyValues}}% -->
</div>
</div>
</div>
<div> <div>
<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" (click)="SaveFinalize();">Save</button> <button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" (click)="SaveFinalize();">Save</button>
@ -90,7 +100,12 @@
<div class="col-md-4 col-sm-3 child-div-right" id="toc-container"> <div class="child-div-caret" (click)="toggleTOC()">
<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ></i>
</div>
<div class="child-div-right" [ngClass]="{true:'col-md-4 col-sm-3', false:'hide' }[expandedToc]" id="toc-container">
<toc [dataModel]="dataModel" (setPage)="setPage($event)"></toc> <toc [dataModel]="dataModel" (setPage)="setPage($event)"></toc>
</div> </div>

View File

@ -61,7 +61,6 @@ export class DynamicFormComponent implements OnInit {
private fragment: string; private fragment: string;
xml2jsonOBJ: any; xml2jsonOBJ: any;
expandedForm : boolean = false;
expandedToc : boolean = true; expandedToc : boolean = true;
@ -295,4 +294,9 @@ export class DynamicFormComponent implements OnInit {
this.tokenService.setToken(null); //kanonika prepei na mpei mesa sthn function..... this.tokenService.setToken(null); //kanonika prepei na mpei mesa sthn function.....
} }
toggleTOC(){
console.log("toggling toc")
this.expandedToc = !this.expandedToc;
}
} }

View File

@ -1,3 +1,10 @@
.cursor-hand{ .cursor-hand{
cursor: pointer; cursor: pointer;
} }
.toc-toggler {
position: absolute;
left: 0%;
top: 50%;
transform: translate(-50%, -50%);
}

View File

@ -1,43 +1,43 @@
<body data-spy="scroll" data-target="#toc"> <body data-spy="scroll" data-target="#toc">
<nav id="toc" data-toggle="toc"> <nav id="toc" data-toggle="toc">
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item"> <li class="nav-item">
<div *ngFor="let group of dataModel.groups"> <!-- All contents in the first page --> <div *ngFor="let group of dataModel.groups"> <!-- All contents in the first page -->
<ul> <ul>
<li> <li>
<a class="cursor-hand" (click)='scrollToElemID(group.key, group.page)'>{{group.title}}</a> <a class="cursor-hand" (click)='scrollToElemID(group.key, group.page)'>{{group.title}}</a>
<ul *ngFor="let field of group.groupFields"> <ul *ngFor="let field of group.groupFields">
<li *ngIf="field.visible == 'true' && field.label"> <!-- && field.label for sections without field label as data summery --> <li *ngIf="field.visible == 'true' && field.label"> <!-- && field.label for sections without field label as data summery -->
<a class="cursor-hand" (click)='scrollToElemID(field.key, group.page)'>{{field.label}} </a> <a class="cursor-hand" (click)='scrollToElemID(field.key, group.page)'>{{field.label}} </a>
</li> </li>
</ul> </ul>
</li> </li>
</ul> </ul>
</div> </div>
<!-- <div *ngFor="let group of dataModel.groups"> <!-- <div *ngFor="let group of dataModel.groups">
<ul> <ul>
<li><a class="nav-link" [routerLink]="['.']" fragment="{{group.key}}">{{group.title}}</a> <li><a class="nav-link" [routerLink]="['.']" fragment="{{group.key}}">{{group.title}}</a>
<ul *ngFor="let field of group.groupFields"> <ul *ngFor="let field of group.groupFields">
<li *ngIf="field.visible == 'true'"> <li *ngIf="field.visible == 'true'">
<a class="nav-link" href="#field.key">{{field.label}}</a> <a class="nav-link" href="#field.key">{{field.label}}</a>
</li> </li>
</ul> </ul>
</li> </li>
</ul> </ul>
</div> --> </div> -->
</li> </li>
</ul> </ul>
</nav> </nav>
</body> </body>

View File

@ -83,6 +83,7 @@ export class TokenService {
logout(){ logout(){
debugger;
//set the log out actions here //set the log out actions here
this.setLoggedIn(false); this.setLoggedIn(false);
this.setEmail(null); this.setEmail(null);

View File

@ -18,6 +18,7 @@ export class RestBase {
/* /*
protocol: string = "http"; protocol: string = "http";
hostname: string ="dl010.madgik.di.uoa.gr" ;//"localhost";//"dl010.madgik.di.uoa.gr";// hostname: string ="dl010.madgik.di.uoa.gr" ;//"localhost";//"dl010.madgik.di.uoa.gr";//
@ -33,7 +34,6 @@ export class RestBase {
webappname: string = "dmp-backend"; webappname: string = "dmp-backend";
proxyPath : string = this.protocol+"://"+this.hostname+":"+this.port+"/"+this.webappname+"/proxy/"; proxyPath : string = this.protocol+"://"+this.hostname+":"+this.port+"/"+this.webappname+"/proxy/";
loginPath : string = this.protocol+"://"+this.hostname+":"+this.port+"/"+this.webappname+"/login/"; loginPath : string = this.protocol+"://"+this.hostname+":"+this.port+"/"+this.webappname+"/login/";
restPath: string = this.protocol+"://"+this.hostname+":"+this.port+"/"+this.webappname+"/rest/"; restPath: string = this.protocol+"://"+this.hostname+":"+this.port+"/"+this.webappname+"/rest/";