MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

--

This commit is contained in:
Nikolaos Laskaris 2017-11-09 16:18:02 +02:00
parent 264977c72e
commit 95bace54c8
10 changed files with 146 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
dmp-frontend/src/app/app.component.css
View File

@ -15,7 +15,7 @@
}
.navbar-center {
.navbar-center {
position: absolute;
width: 100%;
left: 0;
@ -66,30 +66,32 @@
width:100%;
float:left;
}
.child_div{
.child_div_left{
height:100%;
/*
width:100%;
*/
float:left;
}
.child_div_right{
height:100%;
float:right;
}
.sidenav {
/*
position: absolute;
padding-bottom: 500px;
*/
display:none;
border-radius: 15px;
z-index: 1;
overflow-x: hidden;
height: 100%;
width: 0px;
/*
top: 0px;
height: 100%;
left: 0px;
*/
overflow-x: hidden;
background-color: #f8f8f8;
transition: 0.5s;
padding-top: 60px;
@ -97,6 +99,9 @@
.sidenav.expanded{
width: 15%;
display: block;
border-style: solid;
border-width: thin;

53
dmp-frontend/src/app/app.component.html
View File

@ -42,32 +42,33 @@
<div class="parent_div">
<div id="appSidebar" class="sidenav child_div">
<!--<a href="javascript:void(0)" class="closebtn" (click)='slideNav()'>&times;</a>-->
<a class="cursor">My Workspace</a>
<a class="cursor">Orphan Datasets</a>
<a class="cursor">...</a>
<a class="cursor">Basically</a>
<a class="cursor">George</a>
<a class="cursor">tell us</a>
<a class="cursor">what to</a>
<a class="cursor">put here</a>
</div>
<div id="appBody" class="child_div">
<router-outlet [ngClass]="{true:'visible'}[tokenService.isLoggedIn() == true]" ></router-outlet>
<!--
<main-window [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]"></main-window>
-->
<!--this should be invisible -->
<app-main-sign-in [ngClass]="'invisible'"></app-main-sign-in>
<!--
<sample-form></sample-form>
-->
<div id="appSidebar" class="sidenav child_div_left">
<a class="cursor">My Workspace</a>
<a class="cursor">Orphan Datasets</a>
<a class="cursor">...</a>
<a class="cursor">Basically</a>
<a class="cursor">George</a>
<a class="cursor">tell us</a>
<a class="cursor">what to</a>
<a class="cursor">put here</a>
</div>
<!--
-->
<div id="appBody" class="child_div_right">
<router-outlet [ngClass]="{true:'visible'}[tokenService.isLoggedIn() == true]" ></router-outlet>
<!--
<main-window [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]"></main-window>
-->
<!--this should be invisible -->
<app-main-sign-in [ngClass]="'invisible'"></app-main-sign-in>
<!--
<sample-form></sample-form>
-->
</div>
</div>

39
dmp-frontend/src/app/form/dynamic-form.component.css Normal file
View File

@ -0,0 +1,39 @@
.btncustom{
background-color:#337ab7;
color:white;
margin-top:15px;
}
.styled-scrollbar::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
.styled-scrollbar::-webkit-scrollbar-thumb {
border-radius: 10px;
background-image: -webkit-gradient(linear,
left bottom,
left top,
color-stop(0.44, rgb(122,153,217)),
color-stop(0.72, rgb(73,125,189)),
color-stop(0.86, rgb(28,58,148)));
}
.parent-div {
height: calc(100vh - 80px);
width:100%;
}
.child-div-left{
overflow-y: scroll;
height: 100%;
}
.child-div-right {
overflow-y: scroll;
height: 100%;
}

120
dmp-frontend/src/app/form/dynamic-form.component.html
View File

@ -1,8 +1,8 @@
<div class="col-md-8 col-sm-9">
<div class="parent-div">
<div class="panel-body">
<div class="col-md-8 col-sm-9 child-div-left styled-scrollbar" >
<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
<div *ngFor = "let section of dataModel.sections; let i = index;">
@ -42,82 +42,70 @@
</form>
<p>Form value: {{ form.value | json }}</p>
<!--
<div class="col-md-4">
<h4>On this page:</h4>
<div *ngIf="dataModel.groups.length">
<toc [dataModel]="dataModel"></toc>
</div>
</div>
-->
</div>
<div class="text-center">
<!-- pagination -->
<ul *ngIf="pagination.pages && pagination.pages.length" class="pagination">
<li [ngClass]="{disabled:pagination.currentPage === 1}">
<a (click)="setPage(1)" class="cursor-link" >First</a>
</li>
<li [ngClass]="{disabled:pagination.currentPage === 1}">
<a (click)="setPage(pagination.currentPage - 1)" class="cursor-link">Previous</a>
</li>
<li *ngFor="let page of pagination.pages" [ngClass]="{active:pagination.currentPage === page}">
<a (click)="setPage(page)" class="cursor-link">{{page}}</a>
</li>
<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
<a (click)="setPage(pagination.currentPage + 1)" class="cursor-link">Next</a>
</li>
<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
<a (click)="setPage(pagination.totalPages)" class="cursor-link">Last</a>
</li>
</ul>
</div>
<div class="text-center">
<!-- pagination -->
<ul *ngIf="pagination.pages && pagination.pages.length" class="pagination">
<li [ngClass]="{disabled:pagination.currentPage === 1}">
<a (click)="setPage(1)" class="cursor-link" >First</a>
</li>
<li [ngClass]="{disabled:pagination.currentPage === 1}">
<a (click)="setPage(pagination.currentPage - 1)" class="cursor-link">Previous</a>
</li>
<li *ngFor="let page of pagination.pages" [ngClass]="{active:pagination.currentPage === page}">
<a (click)="setPage(page)" class="cursor-link">{{page}}</a>
</li>
<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
<a (click)="setPage(pagination.currentPage + 1)" class="cursor-link">Next</a>
</li>
<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
<a (click)="setPage(pagination.totalPages)" class="cursor-link">Last</a>
</li>
</ul>
</div>
<div class="panel-footer">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow= "" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': dirtyValues + '%'}">
{{dirtyValues}}%
<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 class="col-md-4 col-sm-3 child-div-right styled-scrollbar">
<toc [dataModel]="dataModel" (setPage)="setPage($event)"></toc>
</div>
</div>
<div class="col-md-4 col-sm-3" > <!-- style="overflow:scroll; height: 100%;" *ngIf="dataModel.groups.length" -->
<div > <!-- ngDraggable style="top:60; position:fixed;" to ekana sxolio gia na ginetai responsive-->
<div class="panel panel-default" >
<div class="panel-heading" data-toggle="collapse" href="#collapse-panel">
<h4>Table of contents:</h4>
</div>
<div class="panel-body" id="collapse-panel" class="panel-collapse">
<toc [dataModel]="dataModel" (setPage)="setPage($event)"></toc>
</div>
</div>
</div>
</div>
<!--Modal for Confirmation -->
<!--Modal for Confirmation -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="newVersionDmpModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Confirmation Message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to save and finalize?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" (click)="SaveFinalize();">Save and Finalize</button>
</div>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Confirmation Message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to save and finalize?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" (click)="SaveFinalize();">Save and Finalize</button>
</div>
</div>
</div>
</div>

6
dmp-frontend/src/app/form/dynamic-form.component.ts
View File

@ -33,7 +33,7 @@ import * as scroll from '../../assets/jquery.scrollTo.min.js';
@Component({
selector: 'dynamic-form',
templateUrl: './dynamic-form.component.html',
styleUrls: ['./dynamic-form.css'],
styleUrls: ['./dynamic-form.component.css'],
providers: [FieldControlService, ServerService, dataModelBuilder]
})
export class DynamicFormComponent implements OnInit {
@ -53,7 +53,7 @@ export class DynamicFormComponent implements OnInit {
expandedForm : boolean = false;
expandedToc : boolean = true;
constructor(private qcs: FieldControlService, private serverService: ServerService, private dataModelService: dataModelBuilder, private router: Router,
private route: ActivatedRoute, private pagerService: PaginationService, private tokenService: TokenService) {
@ -122,7 +122,7 @@ export class DynamicFormComponent implements OnInit {
this.dataModel = new DataModel();
this.dataModel = this.dataModelService.getDataModel(data, formValues); debugger;
this.dataModel = this.dataModelService.getDataModel(data, formValues);
this.form = this.qcs.toFormGroup(this.dataModel.fields, this.dataModel.groups);

5
dmp-frontend/src/app/form/dynamic-form.css
View File

@ -1,5 +0,0 @@
.btncustom{
background-color:#337ab7;
color:white;
margin-top:15px;
}

3
dmp-frontend/src/app/form/tableOfContents/toc.component.css Normal file
View File

@ -0,0 +1,3 @@
.cursor-hand{
cursor: pointer;
}

4
dmp-frontend/src/app/form/tableOfContents/toc.component.html
View File

@ -5,10 +5,10 @@
<div *ngFor="let group of dataModel.groups"> <!-- All contents in the first page -->
<ul>
<li>
<a (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">
<li *ngIf="field.visible == 'true' && field.label"> <!-- && field.label for sections without field label as data summery -->
<a (click)='scrollToElemID(field.key, group.page)'>{{field.label}} </a>
<a class="cursor-hand" (click)='scrollToElemID(field.key, group.page)'>{{field.label}} </a>
</li>
</ul>
</li>

1
dmp-frontend/src/app/form/tableOfContents/toc.component.ts
View File

@ -8,6 +8,7 @@ import * as scroll from '../../../assets/jquery.scrollTo.min.js';
@Component({
selector: 'toc',
templateUrl: '/toc.component.html',
styleUrls: ['./toc.component.css'],
providers: []
})
export class TocComponent implements OnInit{

1
dmp-frontend/src/index.html
View File

@ -43,7 +43,6 @@
<script src="assets/custom.js"></script>
</head>
<body>
<script>