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

no message

This commit is contained in:
annabakouli 2017-12-06 11:04:55 +02:00
parent aa22e27f51
commit eec410cead
4 changed files with 189 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,13 @@
<div> <div>
<nav class="navbar navbar-default shadowed"> <nav class="navbar navbar-default shadowed">
<div class="col-md-5" > <div class="col-md-5">
<!-- <!--
<button class="btn btn-primary " [ngClass]="{true:'visible', false:'invisible'}[tokenService.isLoggedIn() == true]" (click)='slideNav()'> <button class="btn btn-primary " [ngClass]="{true:'visible', false:'invisible'}[tokenService.isLoggedIn() == true]" (click)='slideNav()'>
<span style="font-size:20px;cursor:pointer" >&#9776;</span> <span style="font-size:20px;cursor:pointer" >&#9776;</span>
</button> </button>
--> -->
<div class="nav navbar-nav navbar-left"> <div class="nav navbar-nav navbar-left">
<!-- <!--
<div class="dropdown" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]"> <div class="dropdown" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Go To <span class="caret"></span> </button> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Go To <span class="caret"></span> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
@ -17,44 +16,65 @@
</ul> </ul>
</div> </div>
--> -->
<li class="dropdown" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]"> <li class="dropdown" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Quick Navigate <a class="dropdown-toggle" data-toggle="dropdown" href="#">Quick Navigate
<span class="caret"></span></a> <span class="caret"></span>
<ul class="dropdown-menu"> </a>
<li><a class="cursor" (click)="goToDMPs()">My DMPs</a></li> <ul class="dropdown-menu">
<li><a class="cursor" (click)="goToProjects()">Projects</a></li> <li>
</ul> <a class="cursor" (click)="goToDMPs()">My DMPs</a>
</li> </li>
<li>
<a class="cursor" (click)="goToProjects()">Projects</a>
</div>
</div>
<div class="col-md-3" >
<h3 class="navbar-title">Data Management Plans Creator</h3>
</div>
<div class="col-md-4" >
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" [ngClass]="{true:'invisible'}[loggedInAs == null]">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Quick links <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li> </li>
<li [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]"><a>{{tokenService.getEmail()}}</a></li>
<li class="cursor" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]" (click)="logout()"><a>Logout</a></li>
<li class="cursor" [ngClass]="{true:'invisible'}[tokenService.isLoggedIn() == true]" (click)="login()" ><a>Login</a></li>
</ul> </ul>
</li>
</div> </div>
</div>
<div class="col-md-3">
<h3 class="navbar-title">Data Management Plans Creator</h3>
</div>
<div class="col-md-4">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" [ngClass]="{true:'invisible'}[loggedInAs == null]">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Quick links
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li role="separator" class="divider"></li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
</li>
<li [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]">
<a>{{tokenService.getEmail()}}</a>
</li>
<li class="cursor" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]" (click)="logout()">
<a>Logout</a>
</li>
<li class="cursor" [ngClass]="{true:'invisible'}[tokenService.isLoggedIn() == true]" (click)="login()">
<a>Login</a>
</li>
</ul>
</div>
</nav> </nav>
@ -82,9 +102,7 @@
<div id="appBody" class="child_div_right"> <div id="appBody" class="child_div_right">
<router-outlet></router-outlet>
<router-outlet></router-outlet>
</div> </div>

9
dmp-frontend/src/app/app.module.ts
View File

@ -66,7 +66,7 @@ import { NguiAutoCompleteModule } from '@ngui/auto-complete';
import { HTTP_INTERCEPTORS } from '@angular/common/http'; import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { BreadcrumbModule,PanelModule, MenuItem } from 'primeng/primeng'; import { BreadcrumbModule, PanelModule } from 'primeng/primeng';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
@ -95,6 +95,8 @@ import { DmpDetailedComponent } from './viewers/dmp-detailed/dmp-detailed.compon
import { ProjectDetailedComponent } from './viewers/project-detailed/project-detailed.component'; import { ProjectDetailedComponent } from './viewers/project-detailed/project-detailed.component';
import {ProgressBarModule} from 'primeng/primeng'; import {ProgressBarModule} from 'primeng/primeng';
import {StepsModule,MenuItem} from 'primeng/primeng';
import {SidebarModule as NgSidebarModule} from 'primeng/primeng';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -151,8 +153,9 @@ import {ProgressBarModule} from 'primeng/primeng';
ProgressBarModule, ProgressBarModule,
PanelModule, PanelModule,
BrowserAnimationsModule, BrowserAnimationsModule,
SidebarModule.forRoot() SidebarModule.forRoot(),
StepsModule,
NgSidebarModule
], ],
providers: [{ providers: [{
provide: HTTP_INTERCEPTORS, provide: HTTP_INTERCEPTORS,

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

@ -1,111 +1,30 @@
.hide{ .full-width {
display:none; width: 100%;
} }
.show { .ui-steps .ui-steps-item {
display:block; width: 25%;
} }
.btncustom{ .ui-steps.steps-custom {
background-color:#337ab7; margin-bottom: 30px;
color:white;
margin-top:15px;
} }
.parent-div { .ui-steps.steps-custom .ui-steps-item .ui-menuitem-link {
height: calc(100vh - 60px - 32px); /* is height_of(window) - heigh_of(app-header-bar) - height_of(breadcrumb) */ height: 10px;
width:100%; padding: 0 1em;
} }
.ui-steps.steps-custom .ui-steps-item .ui-steps-number {
background-color: #0081c2;
.child-div-left{ color: #FFFFFF;
display: inline-block;
-webkit-box-shadow: 0px 0px 9px 2px rgba(0,0,0,0.75); width: 36px;
-moz-box-shadow: 0px 0px 9px 2px rgba(0,0,0,0.75); border-radius: 50%;
box-shadow: 0px 0px 9px 2px rgba(0,0,0,0.75); margin-top: -14px;
margin-bottom: 10px;
padding:0px;
height: 100%;
-webkit-transition: width 0.5s; /* For Safari 3.1 to 6.0 */
transition: width 0.5s;
} }
.ui-steps.steps-custom .ui-steps-item .ui-steps-title {
.collapsed-div-caret{ color: #555555;
position: absolute;
width: 120px;
left: 98%;
top: 103px;
transform: translate(-50%, -50%);
z-index: 9999;
font-size: 1.3em;
cursor: pointer;
}
.child-div-caret{
position: absolute;
left: 120%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
font-size: 1.3em;
cursor: pointer;
}
.child-div-right {
overflow-y: scroll;
height: calc(100% - 44px);
-webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
transition: width 0.5s;
}
.shrink-width{
width: 0px;
/*visibility:hidden;*/
}
.form-body-container{
padding-bottom: 10px;
height: calc(100vh - 85px - 32px - 138px); /* is height_of(window) - heigh_of(app-header-bar) - height_of(breadcrumb) - height_of(form-footer-bar) */
overflow-y:scroll;
}
.form-footer-seperator{
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;
} }

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

@ -1,111 +1,119 @@
<div class="ui-g"> <div class="ui-g dynamic-form">
<ng-sidebar-container class="ui-g" style="height: 100vh;">
<ng-sidebar mode="push" style="height: 100vh;" position="right" [(opened)]="visibleSidebar">
<table-of-content [model]="dataModel"></table-of-content>
</ng-sidebar>
<div class="ui-g-8" > <div class="ui-g" ng-sidebar-content>
<button class="ui-g" pButton type="button" (click)="toggleSidebar()" icon="fa-arrow-left">Table Of Contents</button>
<button type="button" class="btn btn-primary" (click)="submit();">Save and Finalize</button>
<progress-bar class="ui-g" *ngIf="progressbar" [formGroup]=form></progress-bar>
<div class="ui-g-12">
<p-steps [model]="stepperItems" [(activeIndex)]="activeStepperIndex" [readonly]="false"></p-steps>
</div>
<div class="col-md-12 form-body-container" id="form-container">
<div class="col-md-12 form-body-container" id="form-container"> <form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
<form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()"> <div *ngFor="let section of dataModel.sections; let i = index;">
<df-section [section]="section" [form]="form.get('sections').get(''+i)" [path]="i+1" [pathName]="'sections.'+i"></df-section>
<div *ngFor="let section of dataModel.sections; let i = index;"> </div>
<df-section [section]="section" [form]="form.get('sections').get(''+i)" [path]="i+1" [pathName]="'sections.'+i"></df-section> </form>
</div>
</form>
</div>
<div class="col-md-12 form-footer-container">
<div>
<progress-bar *ngIf="progressbar" [formGroup]=form></progress-bar>
</div> </div>
</div> </div>
<!-- <div class="col-md-12 form-footer-seperator" >
</div>
<div>
<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" (click)="SaveForm();">Save</button>
<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" data-toggle="modal" data-target="#confirmModal">Finalize</button>
</div>
-->
<!--
<div *ngIf="payLoad" class="form-row">
<strong>Saved the following values</strong><br>{{payLoad}}
</div>
-->
<!-- <div class="text-center">
<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>
<!-- <div *ngIf="!expandedToc" class="collapsed-div-caret" (click)="toggleTOC()">
-->
<!--
<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ><div>Show ToC</div></i>
-->
<!-- <i class="fa toc-toggler" aria-hidden="true" ><div>Show ToC</div></i>
</div>
<div *ngIf="expandedToc" class="col-md-12" style="width:200px; text-align: center;">
<h4 style="display: inline-block; text-align: center; width:150px;">Table of Contents</h4>
<div class="child-div-caret" style="display: inline-block; width:50px;" (click)="toggleTOC()"> -->
<!--
<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ><div>Shrink</div></i>
-->
<!-- <i class="fa toc-toggler" aria-hidden="true"><div>(hide)</div></i>
</div>
</div>
-->
<div class="ui-g-4">
<table-of-content [model]="dataModel"></table-of-content>
</div>
<div class="col-md-12 form-footer-container">
<button type="button" class="btn btn-primary" (click)="submit();">Save and Finalize</button>
</div>
</ng-sidebar-container>
</div> </div>
<!-- <div class="col-md-12 form-footer-container">
<div>
</div>
</div> -->
<!-- <div class="col-md-12 form-footer-seperator" >
</div>
<div>
<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" (click)="SaveForm();">Save</button>
<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" data-toggle="modal" data-target="#confirmModal">Finalize</button>
</div>
-->
<!--
<div *ngIf="payLoad" class="form-row">
<strong>Saved the following values</strong><br>{{payLoad}}
</div>
-->
<!-- <div class="text-center">
<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 *ngIf="!expandedToc" class="collapsed-div-caret" (click)="toggleTOC()">
-->
<!--
<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ><div>Show ToC</div></i>
-->
<!-- <i class="fa toc-toggler" aria-hidden="true" ><div>Show ToC</div></i>
</div>
<div *ngIf="expandedToc" class="col-md-12" style="width:200px; text-align: center;">
<h4 style="display: inline-block; text-align: center; width:150px;">Table of Contents</h4>
<div class="child-div-caret" style="display: inline-block; width:50px;" (click)="toggleTOC()"> -->
<!--
<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ><div>Shrink</div></i>
-->
<!-- <i class="fa toc-toggler" aria-hidden="true"><div>(hide)</div></i>
</div>
</div>
-->
<!-- <div class="col-md-12 form-footer-container">
<button type="button" class="btn btn-primary" (click)="submit();">Save and Finalize</button>
</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 fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="newVersionDmpModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Confirmation Message</h5> <h5 class="modal-title" id="exampleModalLabel">Confirmation Message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>Are you sure you want to save and finalize?</p> <p>Are you sure you want to save and finalize?</p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" (click)="SaveFinalizeForm();">Save and Finalize</button> <button type="button" class="btn btn-primary" (click)="SaveFinalizeForm();">Save and Finalize</button>
</div>
</div> </div>
</div> </div>
</div> </div> -->
</div> -->