Frontend as a Package

This commit is contained in:
sosguns2002 2018-03-17 15:05:55 +02:00
parent 90e32d1e28
commit d43893528b
32 changed files with 200 additions and 104 deletions

View File

@ -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).

View File

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

View File

@ -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 = [
{ path: '', redirectTo: '/manage-profiles', pathMatch: 'full' },
{ path: 'manage-profiles', component: ManageprofilesComponent },
{ path: 'upload-content', component: ContentComponent },
{ path: 'configure-profile', component: ConfigurationComponent },
{ path: 'save-profile', component: SaveprofileComponent }
export const AppRoutes: Routes = [
{ path: '', redirectTo: '/mining', pathMatch: 'full' }
];
@NgModule({
imports: [ RouterModule.forRoot(InteractiveMiningRoutes) ],
imports: [ RouterModule.forRoot(AppRoutes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule { }

View File

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

View File

@ -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);
}
}

View File

@ -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));
}
}

View File

@ -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>

View File

@ -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

View File

@ -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}));
}
}

View File

@ -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>-->

View File

@ -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,

View File

@ -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});
});
}

View File

@ -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 { }

View File

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

View File

@ -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', () => {
let component: InteractiveminingComponent;
let fixture: ComponentFixture<InteractiveminingComponent>;
describe('InteractiveMiningComponent', () => {
let component: 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();
});

View File

@ -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});
}
}

View File

@ -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,
ManagprofilesModule,
InteractiveMiningRoutingModule,
ManageprofilesModule,
ContentModule,
ConfigurationModule,
SaveprofileModule,
HttpClientModule,
AppRoutingModule
],
exports: [
InteractiveminingComponent
AppRoutingModule,
],
declarations: [
InteractiveminingComponent,
StepsnvabarComponent
InteractiveMiningComponent
],
exports: [
InteractiveMiningComponent
]
})
export class InteractiveMiningModule {

View File

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

View File

@ -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;
}
}

View File

@ -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>

View File

@ -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});
});
}

View File

@ -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 { }

View File

@ -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);
}

View File

@ -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>

View File

@ -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}));
}
}

View File

@ -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

View File

@ -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 { }

View File

@ -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===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===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===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>

View File

@ -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});
}
}

View File

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

View File

@ -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"
]