Merge pull request #2 from Distributed-Noracle/develop

Develop

Author: pedela

.angular-cli.json

@@ -27,7 +27,8 @@
       "environmentSource": "environments/environment.ts",
       "environments": {
         "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
+        "prod": "environments/environment.prod.ts",
+        "las2peer": "environments/environments.las2peer.ts"
       }
     }
   ],

src/app/app.module.ts

@@ -1,50 +1,51 @@
 import {BrowserModule} from '@angular/platform-browser';
-import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
+import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {HttpModule} from '@angular/http';
-
 import {AppComponent} from './app.component';
 import {GraphViewModule} from './graph-view/graph-view.module';
 import {PolymerModule} from '@codebakery/origami';
-import {IronElementsModule, PaperElementsModule} from '@codebakery/origami/collections';
 import {AuthModule, OidcSecurityService, OpenIDImplicitFlowConfiguration} from 'angular-auth-oidc-client';
 import {RouterModule} from '@angular/router';
-import {LoginComponent} from './login/login.component';
 import {environment} from '../environments/environment';
-import {GraphViewPageComponent} from './graph-view/graph-view-page/graph-view-page.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {FlexLayoutModule} from '@angular/flex-layout';
-import {MdButtonModule, MdMenuModule, MdToolbarModule} from '@angular/material';
-import {NavComponent} from './nav/nav.component';
-import {AuthGuardService} from './auth-guard/auth-guard.service';
+import {AuthGuardService} from './shared/auth-guard/auth-guard.service';
+import {NavigationModule} from './navigation/navigation.module';
+import {SharedModule} from './shared/shared.module';
+import {LoginModule} from './login/login.module';
+import {LoginPageComponent} from './login/login-page/login-page.component';
+import {GraphViewPageComponent} from './graph-view/graph-view-page/graph-view-page.component';
+import {WelcomePageComponent} from './login/welcome-page/welcome-page.component';
+import {SpaceModule} from './space/space.module';
+import {SubscribedSpacesOverviewComponent} from './space/subscribed-spaces-overview/subscribed-spaces-overview.component';
+import {CreateSpaceComponent} from './space/create-space/create-space.component';
+import {AfterLoginComponent} from './login/after-login/after-login.component';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    LoginComponent,
-    NavComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [AppComponent],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     FormsModule,
     HttpModule,
-    IronElementsModule,
-    PaperElementsModule,
-    FlexLayoutModule,
+    SharedModule,
+    NavigationModule,
+    LoginModule,
+    SpaceModule,
     GraphViewModule,
-    MdMenuModule,
-    MdToolbarModule,
-    MdButtonModule,
     RouterModule.forRoot([
-      {path: 'login', component: LoginComponent},
-      {path: 'graph', component: GraphViewPageComponent, canActivate: [AuthGuardService]},
-      {path: '**', redirectTo: 'login' }
+      {path: 'welcome', component: WelcomePageComponent},
+      {path: 'login', component: LoginPageComponent},
+      {path: 'afterlogin', component: AfterLoginComponent},
+      {path: 'myspaces', component: SubscribedSpacesOverviewComponent, canActivate: [AuthGuardService]},
+      {path: 'spaces/create', component: CreateSpaceComponent, canActivate: [AuthGuardService]},
+      {path: 'spaces/:spaceId', component: GraphViewPageComponent, canActivate: [AuthGuardService]},
+      {path: '**', redirectTo: 'welcome'}
     ]),
     PolymerModule.forRoot(),
     AuthModule.forRoot()
   ],
-  providers: [OidcSecurityService, AuthGuardService],
+  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule {
@@ -57,12 +58,13 @@ export class AppModule {
     openIDImplicitFlowConfiguration.response_type = 'id_token token';
     openIDImplicitFlowConfiguration.scope = 'openid email profile';
     openIDImplicitFlowConfiguration.post_logout_redirect_uri = environment.redirectUrl;
-    openIDImplicitFlowConfiguration.startup_route = '/graph';
+    openIDImplicitFlowConfiguration.startup_route = '/afterlogin';
     openIDImplicitFlowConfiguration.auto_userinfo = true;
     openIDImplicitFlowConfiguration.log_console_warning_active = !environment.production;
     openIDImplicitFlowConfiguration.log_console_debug_active = !environment.production;
     openIDImplicitFlowConfiguration.max_id_token_iat_offset_allowed_in_seconds = 10;
     openIDImplicitFlowConfiguration.override_well_known_configuration = false;
+    openIDImplicitFlowConfiguration.silent_renew = false;
 
     // TODO: configure
     openIDImplicitFlowConfiguration.forbidden_route = '/Forbidden';

src/app/login/login.component.css renamed to src/app/graph-view/create-question-dialog/create-question-dialog.component.css

@@ -0,0 +1,11 @@
+<h1 md-dialog-title>{{data.title}}</h1>
+<div md-dialog-content>
+  <p>{{data.message}}</p>
+  <md-form-field>
+    <textarea mdInput tabindex="1" [(ngModel)]="data.text"></textarea>
+  </md-form-field>
+</div>
+<div md-dialog-actions>
+  <button md-button [md-dialog-close]="data.text" tabindex="2">Ok</button>
+  <button md-button (click)="onCancel()" tabindex="-1">Cancel</button>
+</div>

src/app/graph-view/create-question-dialog/create-question-dialog.component.html

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateQuestionDialogComponent } from './create-question-dialog.component';
+
+describe('CreateQuestionDialogComponent', () => {
+  let component: CreateQuestionDialogComponent;
+  let fixture: ComponentFixture<CreateQuestionDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateQuestionDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateQuestionDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/graph-view/create-question-dialog/create-question-dialog.component.spec.ts

@@ -0,0 +1,22 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MD_DIALOG_DATA, MdDialogRef} from '@angular/material';
+
+@Component({
+  selector: 'dnor-create-question-dialog',
+  templateUrl: './create-question-dialog.component.html',
+  styleUrls: ['./create-question-dialog.component.css']
+})
+export class CreateQuestionDialogComponent implements OnInit {
+
+  constructor(public dialogRef: MdDialogRef<CreateQuestionDialogComponent>,
+              @Inject(MD_DIALOG_DATA) public data: any) {
+  }
+
+  ngOnInit() {
+  }
+
+  onCancel(): void {
+    this.dialogRef.close();
+  }
+
+}

src/app/graph-view/create-question-dialog/create-question-dialog.component.ts

@@ -1,9 +1,17 @@
 <!--<h1>Noracle Graph</h1>-->
 <div #graphContainer>
-  <dnor-graph-view [height]="height" [width]="width" [interactionMode]="interactionMode"></dnor-graph-view>
+  <div *ngIf="subscriptionInProgress" fxLayout="column" fxLayoutAlign="space-around center">
+    <p>Subscribing to space&hellip;</p>
+    <md-spinner></md-spinner>
+  </div>
+  <dnor-graph-view *ngIf="!subscriptionInProgress"
+    [spaceId]="spaceId"
+    [selectedQuestions]="selectedQuestions" [height]="height" [width]="width"
+    [interactionMode]="interactionMode"></dnor-graph-view>
 </div>
 <div #below>
-  <md-radio-group fxLayout="row" fxLayoutGap="20px" [(ngModel)]="interactionMode">
+  <md-radio-group *ngIf="!subscriptionInProgress"
+    fxLayout="row" fxLayoutGap="20px" [(ngModel)]="interactionMode">
     <md-radio-button *ngFor="let m of getInteractionModes()" [value]="m">
       {{getInteractionModeLabel(m)}}
     </md-radio-button>

src/app/graph-view/graph-view-page/graph-view-page.component.html

@@ -1,21 +1,29 @@
-import {Component, ElementRef, HostListener, OnInit, ViewChild} from '@angular/core';
+import {Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {GraphInteractionMode} from '../graph-view/graph-data-model/graph-interaction-mode.enum';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Subscription} from 'rxjs/Subscription';
+import {MyspacesService} from '../../shared/myspaces/myspaces.service';
 
 @Component({
   selector: 'dnor-graph-view-page',
   templateUrl: './graph-view-page.component.html',
   styleUrls: ['./graph-view-page.component.css']
 })
-export class GraphViewPageComponent implements OnInit {
+export class GraphViewPageComponent implements OnInit, OnDestroy {
   @ViewChild('graphContainer')
   private graphContainer;
   @ViewChild('below')
   private below;
   private elementRef: ElementRef;
 
-  public interactionMode = GraphInteractionMode.SelectAndNavigate;
-  public height = 600;
-  public width = 800;
+  private subscriptionInProgress = false;
+  private interactionMode = GraphInteractionMode.SelectAndNavigate;
+  private height = 600;
+  private width = 800;
+  private paramSubscription: Subscription;
+  private queryParamSubscription: Subscription;
+  private spaceId = '1';
+  private selectedQuestions;
 
   private adjustSize() {
     this.height = (window.innerHeight
@@ -24,14 +32,42 @@ export class GraphViewPageComponent implements OnInit {
     this.width = window.innerWidth * 0.9;
   }
 
-  constructor(elementRef: ElementRef) {
+  constructor(elementRef: ElementRef, private activatedRoute: ActivatedRoute,
+              private router: Router, private myspacesService: MyspacesService) {
     this.elementRef = elementRef;
   }
 
   ngOnInit() {
+    this.paramSubscription = this.activatedRoute.params.subscribe((params) => {
+      this.spaceId = params['spaceId'];
+    });
+    this.queryParamSubscription = this.activatedRoute.queryParams.subscribe((queryParams) => {
+      const pw = queryParams['pw'];
+      if (pw !== undefined) {
+        this.subscriptionInProgress = true;
+        this.myspacesService.subscribeToSpace(this.spaceId, pw).then(() => {
+          const qp = queryParams['sq'] !== undefined ? {sq: queryParams['sq']} : {};
+          this.router.navigate([], {queryParams: qp, replaceUrl: true}).then(() =>
+            this.subscriptionInProgress = false
+          );
+        });
+
+      }
+      const q = queryParams['sq'];
+      if (q === undefined) {
+        this.selectedQuestions = [];
+      } else {
+        this.selectedQuestions = JSON.parse(q);
+      }
+    });
     this.adjustSize();
   }
 
+  ngOnDestroy() {
+    this.paramSubscription.unsubscribe();
+    this.queryParamSubscription.unsubscribe();
+  }
+
   @HostListener('window:resize', ['$event'])
   onWindowResize(event) {
     this.adjustSize();

src/app/graph-view/graph-view-page/graph-view-page.component.ts

@@ -1,29 +1,38 @@
 import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {GraphViewComponent} from './graph-view/graph-view.component';
-import {RestService} from './rest-service/rest.service';
-import {SpaceService} from './space.service';
-import {QuestionService} from './question.service';
-import {RelationService} from './relation.service';
 import {D3Service} from 'd3-ng2-service';
 import {GraphViewPageComponent} from './graph-view-page/graph-view-page.component';
-import {MdButtonModule, MdRadioModule} from '@angular/material';
+import {
+  MdButtonModule, MdDialogModule, MdFormFieldModule, MdInputModule, MdProgressSpinnerModule,
+  MdRadioModule, MdSnackBarModule
+} from '@angular/material';
 import {FormsModule} from '@angular/forms';
-import { GraphViewService } from './graph-view/graph-view.service';
+import {GraphViewService} from './graph-view/graph-view.service';
 import {FlexLayoutModule} from '@angular/flex-layout';
+import {SharedModule} from '../shared/shared.module';
+import {RelationPickerDialogComponent} from './relation-picker-dialog/relation-picker-dialog.component';
+import { CreateQuestionDialogComponent } from './create-question-dialog/create-question-dialog.component';
 
 @NgModule({
   imports: [
     CommonModule,
     MdButtonModule,
     MdRadioModule,
+    MdDialogModule,
+    MdSnackBarModule,
+    MdProgressSpinnerModule,
+    MdFormFieldModule,
+    MdInputModule,
     FormsModule,
-    FlexLayoutModule
+    FlexLayoutModule,
+    SharedModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  declarations: [GraphViewComponent, GraphViewPageComponent],
+  declarations: [GraphViewComponent, GraphViewPageComponent, RelationPickerDialogComponent, CreateQuestionDialogComponent],
+  bootstrap: [RelationPickerDialogComponent, CreateQuestionDialogComponent],
   exports: [GraphViewPageComponent],
-  providers: [RestService, SpaceService, QuestionService, RelationService, D3Service, GraphViewService]
+  providers: [D3Service, GraphViewService]
 })
 export class GraphViewModule {
 }

src/app/graph-view/graph-view.module.ts

@@ -1,22 +1,50 @@
 import {SimulationLinkDatum} from 'd3-force';
 import {GraphNode} from './graph-node';
+import {Relation} from '../../../shared/rest-data-model/relation';
 
 export class Edge implements SimulationLinkDatum<GraphNode> {
 
-  public source: string | number | GraphNode;
-  public target: string | number | GraphNode;
   public isSelected = false;
 
-  constructor(from: number | GraphNode, to: number | GraphNode) {
-    this.source = from;
-    this.target = to;
+  constructor(public id: string,
+              public source: string | number | GraphNode,
+              public target: string | number | GraphNode, public relation: Relation) {
   }
 
   getDistance() {
     return (this.source as GraphNode).radius + (this.target as GraphNode).radius + 10;
   }
 
   draw(context: CanvasRenderingContext2D) {
+    if (this.relation.directed) {
+      this.drawDirected(context);
+    } else {
+      this.drawUndirected(context);
+    }
+  }
+
+  drawDirected(context: CanvasRenderingContext2D) {
+    context.beginPath();
+    const arrowSize = 3;
+    const arrowGap = 5;
+    const dx = (this.target as GraphNode).x - (this.source as GraphNode).x;
+    const dy = (this.target as GraphNode).y - (this.source as GraphNode).y;
+    const len = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
+    const dx0 = dx / len;
+    const dy0 = dy / len;
+    for (let i = 0; i <= len; i += arrowGap) {
+      const x = (this.source as GraphNode).x + i * dx0;
+      const y = (this.source as GraphNode).y + i * dy0;
+      context.moveTo(x - dx0 * arrowSize - dy0 * arrowSize, y - dy0 * arrowSize + dx0 * arrowSize);
+      context.lineTo(x, y);
+      context.lineTo(x - dx0 * arrowSize + dy0 * arrowSize, y - dy0 * arrowSize - dx0 * arrowSize);
+    }
+    context.lineWidth = this.isSelected ? 3 : 1;
+    context.strokeStyle = '#000';
+    context.stroke();
+  }
+
+  drawUndirected(context: CanvasRenderingContext2D) {
     context.beginPath();
     context.moveTo((this.source as GraphNode).x, (this.source as GraphNode).y);
     context.lineTo((this.target as GraphNode).x, (this.target as GraphNode).y);