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

fixed navigation

This commit is contained in:
Nikolaos Laskaris 2017-11-24 10:39:24 +02:00
parent c0ec59681d
commit a6b272806b
13 changed files with 216 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
dmp-frontend/src/app/app-routing.module.ts
View File

@ -14,24 +14,34 @@ import { ProjectDetailedComponent } from './viewers/project-detailed/project-det
const appRoutes: Routes = [
//{ path: 'dynamic-form/:id', component: DynamicFormComponent, canActivate: [AuthGuard] },
{ path: 'dynamic-form', component: DynamicFormComponent, canActivate: [AuthGuard] },
{ path: 'dataset', component: DatasetsComponent },
{ path: 'login', component: MainSignInComponent},
{ path: 'projects', component: ProjectsComponent},
{ path: 'project', component: ProjectDetailedComponent},
{ path: 'dmps', component: DmpComponent},
{ path: 'dmp', component: DmpDetailedComponent},
{ path: 'dmps',
component: DmpComponent,
children: [
{
path: "dmp",
component: DmpDetailedComponent,
data: {
//breadcrumb: "Sign In"
}
},
{
path: "project",
component: ProjectDetailedComponent,
data: {
//breadcrumb: "Sign Up"
}
}
]
},
{ path: 'welcome', component: HomepageComponent},
{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent },
/*
{
path: '',
redirectTo: 'app-root',
pathMatch: 'full'
}
*/
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({

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

@ -78,13 +78,15 @@
<a class="cursor">what to</a>
<a class="cursor">put here</a>
</div>
<!--
-->
<div id="appBody" class="child_div_right">
<router-outlet></router-outlet>
</div>
<div id="appBody" class="child_div_right">
<router-outlet></router-outlet>
</div>
</div>

9
dmp-frontend/src/app/dmps/dmp.component.css
View File

@ -73,7 +73,7 @@ tr.hover:hover > * {
/* START - FOR DETAILS MODALS */
/*
.modal.modal-fullscreen .modal-dialog,
.modal.modal-fullscreen .modal-content {
@ -96,11 +96,10 @@ tr.hover:hover > * {
-moz-box-shadow: inherit;
-o-box-shadow: inherit;
box-shadow: inherit;
/* change bg color below */
/* background:#1abc9c; */
}
.modal.modal-fullscreen.force-fullscreen {
/* Remove the padding inside the body */
}
.modal.modal-fullscreen.force-fullscreen .modal-body {
padding: 0;
@ -117,4 +116,4 @@ tr.hover:hover > * {
.modal.modal-fullscreen.force-fullscreen .modal-footer {
bottom: 0;
}
/* END - FOR DETAILS MODALS */
*/

7
dmp-frontend/src/app/dmps/dmp.component.ts
View File

@ -265,13 +265,14 @@ export class DmpComponent implements OnInit{
viewDetailedDMP(dmp){
console.log(dmp)
this.router.navigate([{ outlets: { dmpDetails: [ 'dmp' ] }}]);
//this.router.navigate(['/dmp'], { queryParams: { "dmpid":dmp.id, "label":dmp.label }});
let random = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
this.router.navigate(['/dmps/dmp'], { queryParams: { "dmpid":dmp.id, "label":dmp.label, random: random}});
}
viewDetailedProject(dmp){
console.log(dmp)
this.router.navigate(['/project'], { queryParams: { "projectid":dmp.project.id, "label":dmp.project.label }});
let random = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
this.router.navigate(['/dmps/project'], { queryParams: { "projectid":dmp.project.id, "label":dmp.project.label, random: random }});
}

33
dmp-frontend/src/app/dmps/dmps.html
View File

@ -231,38 +231,7 @@
<!-- MODAL FOR DETAILS -->
<button class="btn btn-primary" data-toggle="modal" data-target="#dmp-deatils-fullscreen" contenteditable="false">Open Fullscreen Modal</button>
<div class="modal fade modal-fullscreen footer-to-bottom" id="dmp-deatils-fullscreen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog animated zoomInLeft">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p class="">One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<router-outlet name="dmpDetails"></router-outlet>
<router-outlet></router-outlet>

7
dmp-frontend/src/app/services/server.service.ts
View File

@ -70,8 +70,11 @@ export class ServerService {
return this.restBase.get("project/getAll");
}
public getProject(projectID : string){
return this.restBase.get("projects/"+projectID);
public getProject(projectID : string, eager? : boolean){
if(eager)
return this.restBase.get("projects/"+projectID, {"eager": true});
else
return this.restBase.get("projects/"+projectID, {"eager": false});
}
public listProjectsLabelID(){

46
dmp-frontend/src/app/viewers/dmp-detailed/dmp-detailed.component.css
View File

@ -0,0 +1,46 @@
/* START - FOR DETAILS MODALS */
.modal.modal-fullscreen .modal-dialog,
.modal.modal-fullscreen .modal-content {
position: absolute;
left: 1%;
right: 1%;
top: 1%;
bottom: 1%;
}
.modal.modal-fullscreen .modal-dialog {
margin: 0;
width: 98%;
animation-duration:0.5s;
}
.modal.modal-fullscreen .modal-content {
border: none;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: inherit;
-moz-box-shadow: inherit;
-o-box-shadow: inherit;
box-shadow: inherit;
/* change bg color below */
/* background:#1abc9c; */
}
.modal.modal-fullscreen.force-fullscreen {
/* Remove the padding inside the body */
}
.modal.modal-fullscreen.force-fullscreen .modal-body {
padding: 0;
}
.modal.modal-fullscreen.force-fullscreen .modal-header,
.modal.modal-fullscreen.force-fullscreen .modal-footer {
left: 0;
position: absolute;
right: 0;
}
.modal.modal-fullscreen.force-fullscreen .modal-header {
top: 0;
}
.modal.modal-fullscreen.force-fullscreen .modal-footer {
bottom: 0;
}
/* END - FOR DETAILS MODALS */

22
dmp-frontend/src/app/viewers/dmp-detailed/dmp-detailed.component.html
View File

@ -1,3 +1,19 @@
<p>
Under construction
</p>
<div class="modal fade modal-fullscreen footer-to-bottom" id="dmp-details-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog animated zoomInLeft">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
{{dmp | json}}
<p class="">One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

9
dmp-frontend/src/app/viewers/dmp-detailed/dmp-detailed.component.ts
View File

@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap, Params } from '@angular/router';
import {Location} from '@angular/common';
import { ServerService } from '../../../app/services/server.service';
declare var $ :any;
@Component({
selector: 'dmp-detailed',
templateUrl: './dmp-detailed.component.html',
@ -15,11 +17,8 @@ export class DmpDetailedComponent implements OnInit {
dmp : any;
ngOnInit() {
console.log("LOADING DmpDetailedComponent")
let sub = this.route.queryParams.subscribe(params => {
let dmpid = params.dmpid;
@ -27,6 +26,7 @@ export class DmpDetailedComponent implements OnInit {
this.serverService.getDmp(dmpid, getParams).subscribe(
response => {
this.dmp = response;
$('#dmp-details-modal').modal('show');
},
error => {
console.log("Could not load dmp");
@ -35,9 +35,6 @@ export class DmpDetailedComponent implements OnInit {
});
}
}

46
dmp-frontend/src/app/viewers/project-detailed/project-detailed.component.css
View File

@ -0,0 +1,46 @@
/* START - FOR DETAILS MODALS */
.modal.modal-fullscreen .modal-dialog,
.modal.modal-fullscreen .modal-content {
position: absolute;
left: 1%;
right: 1%;
top: 1%;
bottom: 1%;
}
.modal.modal-fullscreen .modal-dialog {
margin: 0;
width: 98%;
animation-duration:0.5s;
}
.modal.modal-fullscreen .modal-content {
border: none;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: inherit;
-moz-box-shadow: inherit;
-o-box-shadow: inherit;
box-shadow: inherit;
/* change bg color below */
/* background:#1abc9c; */
}
.modal.modal-fullscreen.force-fullscreen {
/* Remove the padding inside the body */
}
.modal.modal-fullscreen.force-fullscreen .modal-body {
padding: 0;
}
.modal.modal-fullscreen.force-fullscreen .modal-header,
.modal.modal-fullscreen.force-fullscreen .modal-footer {
left: 0;
position: absolute;
right: 0;
}
.modal.modal-fullscreen.force-fullscreen .modal-header {
top: 0;
}
.modal.modal-fullscreen.force-fullscreen .modal-footer {
bottom: 0;
}
/* END - FOR DETAILS MODALS */

22
dmp-frontend/src/app/viewers/project-detailed/project-detailed.component.html
View File

@ -1,3 +1,19 @@
<p>
Details of project -- Under construction
</p>
<div class="modal fade modal-fullscreen footer-to-bottom" id="project-details-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog animated zoomInLeft">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
{{project | json}}
<p class="">One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

27
dmp-frontend/src/app/viewers/project-detailed/project-detailed.component.ts
View File

@ -1,5 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap, Params } from '@angular/router';
import {Location} from '@angular/common';
import { ServerService } from '../../../app/services/server.service';
declare var $ :any;
@Component({
selector: 'project-detailed',
templateUrl: './project-detailed.component.html',
@ -7,9 +11,30 @@ import { Component, OnInit } from '@angular/core';
})
export class ProjectDetailedComponent implements OnInit {
constructor() { }
constructor(private serverService: ServerService, private router: Router, private _location: Location, private route: ActivatedRoute) {
}
project : any;
ngOnInit() {
let sub = this.route.queryParams.subscribe(params => {
let projectid = params.projectid;
let getParams : any = {"eager":true};
this.serverService.getProject(projectid, getParams).subscribe(
response => {
this.project = response;
$('#project-details-modal').modal('show');
},
error => {
console.log("Could not load project");
}
)
});
}
}

31
dmp-frontend/src/app/widgets/breadcrumb/breadcrumb.component.ts
View File

@ -20,14 +20,15 @@ export class BreadcrumbComponent implements OnInit {
constructor(private router: Router, private route: ActivatedRoute) {
router.events.subscribe(
event =>{
//console.log("Router event captured")
//console.log(event)
console.log("Router event captured")
console.log(event)
if(event instanceof NavigationEnd){
//console.log(event.urlAfterRedirects);
//console.log(this.route);
console.log(event.urlAfterRedirects);
console.log(this.route);
this.route.children.forEach( child => {
let guessed = this.guessMenuItemFromActivatedRoute(child, event);
this.adaptBreadcrumbByMenuItem(guessed.menuItem, guessed.isBaseComponent);
let menuItem = this.guessMenuItemFromActivatedRoute(child, event);
this.adaptBreadcrumbByMenuItem(menuItem);
})
}
@ -44,36 +45,33 @@ export class BreadcrumbComponent implements OnInit {
let componentName = activatedRoute.component.name;
let params = activatedRoute.queryParams.getValue();
let url = event.urlAfterRedirects.split("?")[0];
let url = activatedRoute.url.getValue()[0].path;
//let url = event.urlAfterRedirects.split("?")[0].split("(")[0];
let label = null;
if(componentName == "ProjectsComponent") {
label = "Projects";
isBaseComponent = true;
this.breadcrumbData.length = 0;
}
if(componentName == "DmpComponent"){
label = "My Data Management Plans";
isBaseComponent = true;
this.breadcrumbData.length = 0;
}
if(componentName == "DatasetsComponent"){
label = "Datasets of DMP '"+params["label"]+"'";
isBaseComponent = false;
}
if(componentName == "DynamicFormComponent"){
label = "Form of dataset '"+params["label"]+"'";
isBaseComponent = false;
}
if(componentName == "DmpDetailedComponent"){
label = "Details of DMP '"+params["label"]+"'";
isBaseComponent = false;
}
if(componentName == "ProjectDetailedComponent"){
label = "Details of Project '"+params["label"]+"'";
isBaseComponent = false;
}
@ -82,19 +80,16 @@ export class BreadcrumbComponent implements OnInit {
console.log("COMPONENT NAME="+componentName);
return {"menuItem": menuItem, "isBaseComponent": isBaseComponent};
return menuItem;
}
adaptBreadcrumbByMenuItem(menuItem : MenuItem, isBaseComponent : boolean){
adaptBreadcrumbByMenuItem(menuItem : MenuItem){
if(menuItem==null){
this.breadcrumbData.length = 0;
return;
}
if(isBaseComponent){
this.breadcrumbData.length = 0;
}
let breadcrumbDataNew: MenuItem[] = new Array<MenuItem>();
for(var i=0; i<this.breadcrumbData.length;i++){