Frontend as a Package

interactive-mining-angular-frontend/README.md

@@ -2,6 +2,35 @@
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.3.0.
 
+# Import
+
+Import Module
+
+    import {InteractiveMiningModule} from 'interactiveminingv3';
+
+Place these files in your .angular-cli.json
+
+    "styles": [
+      "../node_modules/interactiveminingv3/assets/css/interactive-mining.css",
+      "../node_modules/interactiveminingv3/assets/css/animations.css"
+    ],
+    "scripts": [
+      "../node_modules/jquery/dist/jquery.min.js",
+      "../node_modules/uikit/dist/js/uikit.min.js",
+      "../node_modules/uikit/dist/js/uikit-icons.min.js",
+      "../node_modules/interactiveminingv3/assets/js/ResizeSensor.js",
+      "../node_modules/interactiveminingv3/assets/js/jquery.sticky-sidebar.js"
+    ]
+
+Store to LocalStorage the Username and the Backend
+
+    localStorage.setItem('user_id', this._userid);
+    localStorage.setItem('mining_backend_address', this._backendserveraddress);
+
+# Usage
+
+Navigate to `http://.../mining` with your project's router
+
 ## Development server
 
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
@@ -22,7 +51,3 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
 
 Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
 Before running the tests make sure you are serving the app via `ng serve`.
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

interactive-mining-angular-frontend/public_api.ts

@@ -1 +1 @@
-export * from './src/app/interactivemining/interactivemining.module';
+export * from './src/app/interactivemining/interactive-mining.module';

interactive-mining-angular-frontend/src/app/app-routing.module.ts

@@ -1,20 +1,12 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import {ContentComponent} from './contents/contents.component';
-import {ConfigurationComponent} from './configuration/configuration.component';
-import {SaveprofileComponent} from './saveprofile/saveprofile.component';
-import {ManageprofilesComponent} from './manageprofiles/manageprofiles.component';
 
-export const InteractiveMiningRoutes: Routes = [
+export const AppRoutes: Routes = [
-  { path: '', redirectTo: '/manage-profiles', pathMatch: 'full' },
+  { path: '', redirectTo: '/mining', pathMatch: 'full' }
-  { path: 'manage-profiles', component: ManageprofilesComponent },
-  { path: 'upload-content', component: ContentComponent },
-  { path: 'configure-profile', component: ConfigurationComponent },
-  { path: 'save-profile', component: SaveprofileComponent }
 ];
 
 @NgModule({
-  imports: [ RouterModule.forRoot(InteractiveMiningRoutes) ],
+  imports: [ RouterModule.forRoot(AppRoutes) ],
   exports: [ RouterModule ]
 })
 export class AppRoutingModule { }

interactive-mining-angular-frontend/src/app/app.component.html

@@ -1 +1 @@
-<app-interactivemining [userid]="'user5649231'" [backendserveraddress]="'http://localhost:8080'"></app-interactivemining>
+<router-outlet></router-outlet>

interactive-mining-angular-frontend/src/app/app.component.ts

@@ -1,10 +1,21 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
+
+  private _userid = 'user5649231';
+  private _backendserveraddress = 'http://localhost:8080';
+
   title = 'app';
+
+  ngOnInit() {
+    localStorage.setItem('user_id', this._userid);
+    console.log(localStorage.getItem('user_id'), this._userid);
+    localStorage.setItem('mining_backend_address', this._backendserveraddress);
+    console.log(localStorage.getItem('mining_backend_address'), this._backendserveraddress);
+  }
 }

interactive-mining-angular-frontend/src/app/app.module.ts

@@ -1,16 +1,25 @@
 import {NgModule} from '@angular/core';
 
 import {AppComponent} from './app.component';
-import {InteractiveMiningModule} from './interactivemining/interactivemining.module';
+import {AppRoutingModule} from './app-routing.module';
+import {Router} from '@angular/router';
+import {BrowserModule} from '@angular/platform-browser';
+import {InteractiveMiningModule} from './interactivemining/interactive-mining.module';
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
-    InteractiveMiningModule
+    BrowserModule,
+    InteractiveMiningModule,
+    AppRoutingModule
   ],
   bootstrap: [AppComponent]
 })
 export class AppModule {
+  // Diagnostic only: inspect router configuration
+  constructor(router: Router) {
+    console.log('Routes: ', JSON.stringify(router.config, undefined, 2));
+  }
 }

interactive-mining-angular-frontend/src/app/configuration/configuration.component.html

@@ -1,3 +1,4 @@
+<app-stepsnvabar></app-stepsnvabar>
 <div id="parent">
   <app-settings  id="child1" class="cm-config-settings-section uk-margin-small-top"></app-settings>
   <app-resultspreview id="child2" class="uk-margin-medium-top"></app-resultspreview>

interactive-mining-angular-frontend/src/app/configuration/configuration.module.ts

@@ -5,12 +5,14 @@ import { ConfigurationComponent } from './configuration.component';
 import { SettingsComponent } from './settings/settings.component';
 import { ResultspreviewComponent } from './resultspreview/resultspreview.component';
 import {ConfigurationService} from './configuration.service';
+import {StepsnavbarModule} from '../stepsnvabar/stepsnavbar.module';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    StepsnavbarModule
   ],
   exports: [
     ConfigurationComponent

interactive-mining-angular-frontend/src/app/configuration/settings/settings.component.ts

@@ -3,7 +3,7 @@ import {Settings} from './settings';
 import {Phrase} from './phrase';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {ConfigurationService} from '../configuration.service';
-import {Router} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 
 @Component({
   selector: 'app-settings',
@@ -31,7 +31,7 @@ export class SettingsComponent implements OnInit {
     { value: 'lowercase', display: ' lowercase' }
   ];
 
-  constructor(private formBuilder: FormBuilder, private router: Router, private configurationService: ConfigurationService) { }
+  constructor(private formBuilder: FormBuilder, private route: ActivatedRoute, private router: Router, private configurationService: ConfigurationService) { }
 
   ngOnInit() {
     this.positivePhraseForm = this.formBuilder.group({
@@ -245,7 +245,7 @@ export class SettingsComponent implements OnInit {
 
   saveProfile(): void {
     this.configurationService.saveProfileParameters(this.getSettingsFromLocalStorage())
-      .subscribe(() => this.router.navigate(['/save-profile']));
+      .subscribe(() => this.router.navigate(['../save-profile'], {relativeTo: this.route}));
   }
 
 }

interactive-mining-angular-frontend/src/app/contents/contents.component.html

@@ -1,3 +1,4 @@
+<app-stepsnvabar></app-stepsnvabar>
 <div class="uk-section uk-section-default uk-margin-medium-top uk-padding-remove-top">
   <div class="uk-container">
     <!--<h4>Content to match</h4>-->

interactive-mining-angular-frontend/src/app/contents/contents.module.ts

@@ -6,6 +6,7 @@ import { ContentComponent } from './contents.component';
 import {ContentsService} from './contents.service';
 import {FileUploadDirective} from '../file-upload.directive';
 import {AutosizeDirective} from './autosize.directive';
+import {StepsnavbarModule} from '../stepsnvabar/stepsnavbar.module';
 
 @NgModule({
   exports: [
@@ -16,7 +17,8 @@ import {AutosizeDirective} from './autosize.directive';
   ],
   imports: [
     CommonModule,
-    FormsModule
+    FormsModule,
+    StepsnavbarModule
   ],
   declarations: [
     ContentstableComponent,

interactive-mining-angular-frontend/src/app/contents/contentstable/contentstable.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit, ViewChildren} from '@angular/core';
 import { Content } from '../content';
 import {ContentsService} from '../contents.service';
-import {Router} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 
 @Component({
   selector: 'app-contentstable',
@@ -16,7 +16,7 @@ export class ContentstableComponent implements OnInit {
   results = '';
   @ViewChildren('focusOnNew') focusOnNewInputs;
 
-  constructor(private contentsService: ContentsService, private router: Router) { }
+  constructor(private contentsService: ContentsService, private route: ActivatedRoute, private router: Router) { }
 
   ngOnInit() {
     this.getContent();
@@ -98,7 +98,7 @@ export class ContentstableComponent implements OnInit {
     this.contentsService.updateContent(this.contentArray)
       .subscribe(value => {
         localStorage.setItem('concepts', value);
-        this.router.navigate(['/configure-profile']);
+        this.router.navigate(['../configure-profile'], {relativeTo: this.route});
       });
   }
 

interactive-mining-angular-frontend/src/app/interactivemining/interactive-mining-routing.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {SaveprofileComponent} from '../saveprofile/saveprofile.component';
+import {ConfigurationComponent} from '../configuration/configuration.component';
+import {ContentComponent} from '../contents/contents.component';
+import {ManageprofilesComponent} from '../manageprofiles/manageprofiles.component';
+import {InteractiveMiningComponent} from './interactive-mining.component';
+
+const interactiveMiningRoutes: Routes = [
+  {
+    path: 'mining',
+    component: InteractiveMiningComponent,
+    children: [
+      { path: 'manage-profiles', component: ManageprofilesComponent },
+      { path: 'upload-content', component: ContentComponent },
+      { path: 'configure-profile', component: ConfigurationComponent },
+      { path: 'save-profile', component: SaveprofileComponent }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(interactiveMiningRoutes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class InteractiveMiningRoutingModule { }

interactive-mining-angular-frontend/src/app/interactivemining/interactive-mining.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

interactive-mining-angular-frontend/src/app/interactivemining/interactive-mining.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { InteractiveminingComponent } from './interactivemining.component';
+import { InteractiveMiningComponent } from './interactive-mining.component';
 
-describe('InteractiveminingComponent', () => {
+describe('InteractiveMiningComponent', () => {
-  let component: InteractiveminingComponent;
+  let component: InteractiveMiningComponent;
-  let fixture: ComponentFixture<InteractiveminingComponent>;
+  let fixture: ComponentFixture<InteractiveMiningComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ InteractiveminingComponent ]
+      declarations: [ InteractiveMiningComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(InteractiveminingComponent);
+    fixture = TestBed.createComponent(InteractiveMiningComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

interactive-mining-angular-frontend/src/app/interactivemining/interactive-mining.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+
+@Component({
+  selector: 'app-interactive-mining',
+  templateUrl: './interactive-mining.component.html',
+  styleUrls: ['./interactive-mining.component.css']
+})
+export class InteractiveMiningComponent implements OnInit {
+
+  constructor(private route: ActivatedRoute, private router: Router) { }
+
+  ngOnInit() {
+    this.router.navigate(['manage-profiles'], {relativeTo: this.route});
+  }
+
+}

interactive-mining-angular-frontend/src/app/interactivemining/interactive-mining.module.ts

@@ -1,32 +1,30 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {InteractiveminingComponent} from './interactivemining.component';
 import {ConfigurationModule} from '../configuration/configuration.module';
-import {ManagprofilesModule} from '../manageprofiles/manageprofiles.module';
+import {ManageprofilesModule} from '../manageprofiles/manageprofiles.module';
 import {SaveprofileModule} from '../saveprofile/saveprofile.module';
-import {BrowserModule} from '@angular/platform-browser';
 import {ContentModule} from '../contents/contents.module';
-import {AppRoutingModule} from '../app-routing.module';
 import {HttpClientModule} from '@angular/common/http';
-import {StepsnvabarComponent} from '../stepsnvabar/stepsnvabar.component';
+import {AppRoutingModule} from '../app-routing.module';
+import {InteractiveMiningRoutingModule} from './interactive-mining-routing.module';
+import {InteractiveMiningComponent} from './interactive-mining.component';
 
 @NgModule({
   imports: [
     CommonModule,
-    BrowserModule,
+    InteractiveMiningRoutingModule,
-    ManagprofilesModule,
+    ManageprofilesModule,
     ContentModule,
     ConfigurationModule,
     SaveprofileModule,
     HttpClientModule,
-    AppRoutingModule
+    AppRoutingModule,
-  ],
-  exports: [
-    InteractiveminingComponent
   ],
   declarations: [
-    InteractiveminingComponent,
+    InteractiveMiningComponent
-    StepsnvabarComponent
+  ],
+  exports: [
+    InteractiveMiningComponent
   ]
 })
 export class InteractiveMiningModule {

interactive-mining-angular-frontend/src/app/interactivemining/interactivemining.component.html

@@ -1,2 +0,0 @@
-<app-stepsnvabar></app-stepsnvabar>
-<router-outlet></router-outlet>

interactive-mining-angular-frontend/src/app/interactivemining/interactivemining.component.ts

@@ -1,31 +0,0 @@
-import {Component, Input, OnInit} from '@angular/core';
-
-@Component({
-  selector: 'app-interactivemining',
-  templateUrl: './interactivemining.component.html',
-  styleUrls: ['./interactivemining.component.css']
-})
-export class InteractiveminingComponent implements OnInit {
-
-  private _userid = 'None';
-  private _backendserveraddress = 'None';
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-  @Input('userid')
-  set userid(userid: string) {
-    localStorage.setItem('user_id', userid);
-    this._userid = userid;
-  }
-
-  @Input('backendserveraddress')
-  set backendserveraddress(backendserveraddress: string) {
-    localStorage.setItem('backendaddress', backendserveraddress);
-    this._backendserveraddress = backendserveraddress;
-
-  }
-
-}

interactive-mining-angular-frontend/src/app/manageprofiles/manageprofiles.component.html

@@ -1,3 +1,4 @@
+<app-stepsnvabar></app-stepsnvabar>
 <div class="uk-section uk-section-default">
   <div class="uk-container uk-container-large">
     <h4>Your mining profiles <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h4>

interactive-mining-angular-frontend/src/app/manageprofiles/manageprofiles.component.ts

@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {ManageprofilesService} from './manageprofiles.service';
-import {Router} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 import UIkit from 'uikit';
 import {PaginationInstance} from 'ngx-pagination';
 import {ProfileMetadata} from './profile-metadata';
@@ -25,7 +25,7 @@ export class ManageprofilesComponent implements OnInit {
     currentPage: 1
   };
 
-  constructor(private manageProfilesService: ManageprofilesService, private router: Router) {
+  constructor(private manageProfilesService: ManageprofilesService, private route: ActivatedRoute, private router: Router) {
   }
 
   ngOnInit() {
@@ -71,7 +71,7 @@ export class ManageprofilesComponent implements OnInit {
         localStorage.setItem('punctuation', res.punctuation);
         localStorage.setItem('stopwords', res.stopwords);
         localStorage.setItem('lettercase', res.lettercase);
-        this.router.navigate(['/upload-content']);
+        this.router.navigate(['../upload-content'], {relativeTo: this.route});
       });
   }
 
@@ -94,7 +94,7 @@ export class ManageprofilesComponent implements OnInit {
     // clear localstorage values
     this.clearLocalStorage();
     this.manageProfilesService.createNewProfile()
-      .subscribe(() => this.router.navigate(['/upload-content']));
+      .subscribe(() => this.router.navigate(['../upload-content'], {relativeTo: this.route}));
   }
 
   fileChangeUpload(event): void {
@@ -118,7 +118,7 @@ export class ManageprofilesComponent implements OnInit {
           localStorage.setItem('punctuation', res.punctuation);
           localStorage.setItem('stopwords', res.stopwords);
           localStorage.setItem('lettercase', res.lettercase);
-          this.router.navigate(['/upload-content']);
+          this.router.navigate(['../upload-content'], {relativeTo: this.route});
         });
     }
   }
@@ -148,7 +148,7 @@ export class ManageprofilesComponent implements OnInit {
         localStorage.setItem('punctuation', res.punctuation);
         localStorage.setItem('stopwords', res.stopwords);
         localStorage.setItem('lettercase', res.lettercase);
-        this.router.navigate(['/upload-content']);
+        this.router.navigate(['../upload-content'], {relativeTo: this.route});
       });
   }
 

interactive-mining-angular-frontend/src/app/manageprofiles/manageprofiles.module.ts

@@ -4,12 +4,14 @@ import { CommonModule } from '@angular/common';
 import { ManageprofilesComponent } from './manageprofiles.component';
 import { NgxPaginationModule } from 'ngx-pagination';
 import { ManageprofilesService } from './manageprofiles.service';
+import {StepsnavbarModule} from '../stepsnvabar/stepsnavbar.module';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
-    NgxPaginationModule
+    NgxPaginationModule,
+    StepsnavbarModule
   ],
   exports: [
     ManageprofilesComponent
@@ -19,4 +21,4 @@ import { ManageprofilesService } from './manageprofiles.service';
   ],
   declarations: [ManageprofilesComponent]
 })
-export class ManagprofilesModule { }
+export class ManageprofilesModule { }

interactive-mining-angular-frontend/src/app/manageprofiles/manageprofiles.service.ts

@@ -36,7 +36,7 @@ export class ManageprofilesService {
 
   downloadProfile(profileId: string): Observable<any> {
     return this.http.post(this.backendServerAddress + this.downloadProfileUrl,
-      {user: this.userId, id: profileId}, {responseType: 'blob', withCredentials: true})
+      {user: this.userId, id: profileId}, {responseType: 'blob'})
       .catch(this.util.handleError);
   }
 

interactive-mining-angular-frontend/src/app/saveprofile/saveprofile.component.html

@@ -1,3 +1,4 @@
+<app-stepsnvabar></app-stepsnvabar>
 <div class="uk-section uk-section-default uk-margin-medium-top uk-padding-remove-top">
   <div class="uk-container uk-container-small">
     <label for="profile-name" [ngClass]="{'uk-text-danger':!profileName}">Current name:</label>

interactive-mining-angular-frontend/src/app/saveprofile/saveprofile.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import UIkit from 'uikit';
 import {SaveprofileService} from './saveprofile.service';
-import {Router} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 
 @Component({
   selector: 'app-saveprofile',
@@ -14,7 +14,7 @@ export class SaveprofileComponent implements OnInit {
   public docnName = '';
   public docsNumber = 0;
 
-  constructor(private saveprofileService: SaveprofileService, private router: Router) { }
+  constructor(private saveprofileService: SaveprofileService, private route: ActivatedRoute, private router: Router) { }
 
   ngOnInit() {
     if (localStorage.getItem('profilename') && localStorage.getItem('profilename') !== 'undefined') {
@@ -39,7 +39,7 @@ export class SaveprofileComponent implements OnInit {
       return;
     } else {
       this.saveprofileService.saveProfile(this.profileName, localStorage.getItem('profileid'), this.docnName, this.docsNumber)
-        .subscribe(() => this.router.navigate(['/manage-profiles']));
+        .subscribe(() => this.router.navigate(['../manage-profiles'], {relativeTo: this.route}));
     }
   }
 

interactive-mining-angular-frontend/src/app/saveprofile/saveprofile.module.ts

@@ -3,11 +3,13 @@ import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { SaveprofileComponent } from './saveprofile.component';
 import {SaveprofileService} from './saveprofile.service';
+import {StepsnavbarModule} from '../stepsnvabar/stepsnavbar.module';
 
 @NgModule({
   imports: [
     CommonModule,
-    FormsModule
+    FormsModule,
+    StepsnavbarModule
   ],
   exports: [
     SaveprofileComponent

interactive-mining-angular-frontend/src/app/stepsnvabar/stepsnavbar.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {StepsnvabarComponent} from './stepsnvabar.component';
+import {RouterModule} from '@angular/router';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule
+  ],
+  exports: [
+    StepsnvabarComponent
+  ],
+  declarations: [
+    StepsnvabarComponent
+  ]
+})
+export class StepsnavbarModule { }

interactive-mining-angular-frontend/src/app/stepsnvabar/stepsnvabar.component.html

@@ -30,9 +30,9 @@
 
 <div *ngIf="proccessStep>0" class="uk-grid-collapse uk-child-width-expand" uk-grid>
   <div class="cm-nav2 uk-width-expand">
-    <a class="cm-nav2-step" [ngClass]="{'cm-nav2-step-active':proccessStep===1, 'cm-nav2-step-disabled':proccessStep<1}" [routerLink]="proccessStep>1 ? ['/upload-content'] : []">Matching context definition</a>
+    <a class="cm-nav2-step" [ngClass]="{'cm-nav2-step-active':proccessStep===1, 'cm-nav2-step-disabled':proccessStep<1}" [routerLink]="proccessStep>1 ? ['upload-content'] : []">Matching context definition</a>
-    <a class="cm-nav2-step" [ngClass]="{'cm-nav2-step-active':proccessStep===2, 'cm-nav2-step-disabled':proccessStep<2}" [routerLink]="proccessStep>2 ? ['/configure-profile'] : []">Matching proccess configuration</a>
+    <a class="cm-nav2-step" [ngClass]="{'cm-nav2-step-active':proccessStep===2, 'cm-nav2-step-disabled':proccessStep<2}" [routerLink]="proccessStep>2 ? ['configure-profile'] : []">Matching proccess configuration</a>
-    <a class="cm-nav2-step" [ngClass]="{'cm-nav2-step-active':proccessStep===3, 'cm-nav2-step-disabled':proccessStep<3}" [routerLink]="proccessStep>3 ? ['/save-profile'] : []">Save your matching profile</a>
+    <a class="cm-nav2-step" [ngClass]="{'cm-nav2-step-active':proccessStep===3, 'cm-nav2-step-disabled':proccessStep<3}" [routerLink]="proccessStep>3 ? ['save-profile'] : []">Save your matching profile</a>
   </div>
   <a class="uk-width-auto uk-float-right uk-link-muted" (click)="cancelHandle()" style="line-height: 52px;">
     <span class="uk-icon uk-margin-small-right" uk-icon="icon: close"></span>

interactive-mining-angular-frontend/src/app/stepsnvabar/stepsnvabar.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import {NavigationEnd, Router} from '@angular/router';
+import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
 
 @Component({
   selector: 'app-stepsnvabar',
@@ -10,7 +10,7 @@ export class StepsnvabarComponent implements OnInit {
 
   private proccessStep = 0;
 
-  constructor(private router: Router) {
+  constructor(private route: ActivatedRoute, private router: Router) {
     router.events.subscribe((val) => {
       // see also
       if (val instanceof NavigationEnd) {
@@ -22,11 +22,12 @@ export class StepsnvabarComponent implements OnInit {
   ngOnInit() {}
 
   changeStep(url: string): void {
-    if (url === '/upload-content') {
+    console.log(url);
+    if (url.endsWith('upload-content')) {
       this.proccessStep = 1;
-    } else if (url === '/configure-profile') {
+    } else if (url.endsWith('configure-profile')) {
       this.proccessStep = 2;
-    } else if (url === '/save-profile') {
+    } else if (url.endsWith('save-profile')) {
       this.proccessStep = 3;
     } else {
       this.proccessStep = 0;
@@ -34,7 +35,7 @@ export class StepsnvabarComponent implements OnInit {
   }
 
   cancelHandle(): void {
-    this.router.navigate(['/manage-profiles']);
+    this.router.navigate(['../manage-profiles'], {relativeTo: this.route});
   }
 
 }

interactive-mining-angular-frontend/src/app/util.ts

@@ -28,7 +28,7 @@ export class Util {
   }
 
   public getBackendServerAddress(): string {
-    return localStorage.getItem('backendaddress');
+    return localStorage.getItem('mining_backend_address');
   }
 }
 

interactive-mining-angular-frontend/src/assets/README

@@ -0,0 +1,15 @@
+HOW TO INSTALL
+
+Put these in .angular-cli.json
+
+      "styles": [
+        "../node_modules/interactiveminingv3/assets/css/interactive-mining.css",
+        "../node_modules/interactiveminingv3/assets/css/animations.css"
+      ]
+      "scripts": [
+        "../node_modules/jquery/dist/jquery.min.js",
+        "../node_modules/uikit/dist/js/uikit.min.js",
+        "../node_modules/uikit/dist/js/uikit-icons.min.js",
+        "../node_modules/interactiveminingv3/assets/js/ResizeSensor.js",
+        "../node_modules/interactiveminingv3/assets/js/jquery.sticky-sidebar.js"
+      ]