Remove unnecessary example code;
This commit is contained in:
parent
1ed0627853
commit
ac29b5d98a
@ -1,10 +0,0 @@
|
|||||||
import { NgModule } from '@angular/core';
|
|
||||||
import { Routes, RouterModule } from '@angular/router';
|
|
||||||
|
|
||||||
const routes: Routes = [];
|
|
||||||
|
|
||||||
@NgModule({
|
|
||||||
imports: [RouterModule.forRoot(routes)],
|
|
||||||
exports: [RouterModule]
|
|
||||||
})
|
|
||||||
export class AppRoutingModule { }
|
|
||||||
@ -1,43 +1,35 @@
|
|||||||
import {BrowserModule} from '@angular/platform-browser';
|
import {BrowserModule} from '@angular/platform-browser';
|
||||||
import {NgModule} from '@angular/core';
|
import {NgModule} from '@angular/core';
|
||||||
|
|
||||||
import {AppRoutingModule} from './app-routing.module';
|
|
||||||
import {LandingComponent} from './component/landing/landing.component';
|
import {LandingComponent} from './component/landing/landing.component';
|
||||||
import {RestService} from './services/rest.service';
|
import {RestService} from './services/rest.service';
|
||||||
import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
|
import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
|
||||||
import {InterceptorService} from './services/interceptor.service';
|
import {InterceptorService} from './services/interceptor.service';
|
||||||
import {WebsocketService} from './services/websocket.service';
|
|
||||||
import {LoggerModule, NgxLoggerLevel} from 'ngx-logger';
|
import {LoggerModule, NgxLoggerLevel} from 'ngx-logger';
|
||||||
import {environment} from '../environments/environment';
|
import {environment} from '../environments/environment';
|
||||||
import {TestSubCompComponent} from './component/testsubcomp/test-sub-comp.component';
|
|
||||||
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
|
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
|
||||||
import {MatFormFieldModule} from '@angular/material/form-field';
|
import {MatFormFieldModule} from '@angular/material/form-field';
|
||||||
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
|
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
|
||||||
import {MatButtonModule} from '@angular/material/button';
|
import {MatButtonModule} from '@angular/material/button';
|
||||||
import {MatInputModule} from '@angular/material/input';
|
import {MatInputModule} from '@angular/material/input';
|
||||||
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
|
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
|
||||||
import {MatSliderModule} from "@angular/material/slider";
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [LandingComponent, TestSubCompComponent],
|
declarations: [LandingComponent],
|
||||||
imports: [
|
imports: [
|
||||||
ReactiveFormsModule,
|
ReactiveFormsModule,
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
BrowserAnimationsModule,
|
BrowserAnimationsModule,
|
||||||
AppRoutingModule,
|
|
||||||
LoggerModule.forRoot({level: environment.log_level, serverLogLevel: NgxLoggerLevel.ERROR}),
|
LoggerModule.forRoot({level: environment.log_level, serverLogLevel: NgxLoggerLevel.ERROR}),
|
||||||
HttpClientModule,
|
HttpClientModule,
|
||||||
MatFormFieldModule,
|
MatFormFieldModule,
|
||||||
FormsModule,
|
FormsModule,
|
||||||
MatButtonModule,
|
MatButtonModule,
|
||||||
MatInputModule,
|
MatInputModule,
|
||||||
MatSlideToggleModule,
|
MatSlideToggleModule
|
||||||
MatSliderModule
|
|
||||||
],
|
],
|
||||||
// enables injecting
|
// enables injecting
|
||||||
providers: [
|
providers: [
|
||||||
RestService,
|
RestService,
|
||||||
WebsocketService,
|
|
||||||
{
|
{
|
||||||
provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true
|
provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,33 +1 @@
|
|||||||
<h1>landing works!</h1>
|
<h1>Federated Storage Infrastructure for IoT Sensor Data</h1>
|
||||||
|
|
||||||
<mat-slider min="1" max="5" step="0.5" [value]="myValue"></mat-slider>
|
|
||||||
|
|
||||||
|
|
||||||
<h2>Two way data binding, passing data, triggering child event...</h2>
|
|
||||||
<mat-form-field *ngIf="true">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Placeholder"
|
|
||||||
matInput
|
|
||||||
[(ngModel)]="exampleInputText"
|
|
||||||
>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<app-test-sub-comp [message]="exampleInputText" (buttonClickedEvent)="alert()"
|
|
||||||
[anotherInput]=""
|
|
||||||
></app-test-sub-comp>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<h2>Hide display with *ngIf</h2>
|
|
||||||
<mat-slide-toggle [(ngModel)]="showPar">Show paragraph</mat-slide-toggle>
|
|
||||||
<p *ngIf="showPar">Toggle me</p>
|
|
||||||
<app-test-sub-comp *ngIf="showPar"
|
|
||||||
[message]="exampleInputText" (buttonClickedEvent)="alert()"
|
|
||||||
[anotherInput]=""
|
|
||||||
></app-test-sub-comp>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<h2>Display a test list with *ngFor</h2>
|
|
||||||
<span *ngFor="let dict of testList">{{dict.value}}; </span>
|
|
||||||
|
|||||||
@ -1,8 +1,6 @@
|
|||||||
import {Component, OnInit} from '@angular/core';
|
import {Component, OnInit} from '@angular/core';
|
||||||
import {RestService} from '../../services/rest.service';
|
import {RestService} from '../../services/rest.service';
|
||||||
import {WebsocketService} from '../../services/websocket.service';
|
|
||||||
import {NGXLogger} from 'ngx-logger';
|
import {NGXLogger} from 'ngx-logger';
|
||||||
import {Subscription} from 'rxjs';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-landing',
|
selector: 'app-landing',
|
||||||
@ -11,78 +9,12 @@ import {Subscription} from 'rxjs';
|
|||||||
})
|
})
|
||||||
export class LandingComponent implements OnInit {
|
export class LandingComponent implements OnInit {
|
||||||
|
|
||||||
private wsSubscription: Subscription;
|
|
||||||
private wsMessageCounter: number;
|
|
||||||
exampleInputText: string;
|
|
||||||
showPar = false;
|
|
||||||
testList = [{'value': 1}, {'value': 2}, {'value': 3}];
|
|
||||||
myValue: any = 15;
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private logger: NGXLogger,
|
private logger: NGXLogger,
|
||||||
private restService: RestService,
|
private restService: RestService
|
||||||
private wsService: WebsocketService
|
|
||||||
) {
|
) {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
// perform test rest call as observable
|
|
||||||
this.observableCall();
|
|
||||||
|
|
||||||
// perform test rest call as promise (shorter - will only be executed exactly once)
|
|
||||||
this.promiseCall();
|
|
||||||
|
|
||||||
// perform test ws send / receive
|
|
||||||
setTimeout(() => {
|
|
||||||
this.wsCall();
|
|
||||||
},
|
|
||||||
1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
private observableCall(): void {
|
|
||||||
|
|
||||||
const subscription = this.restService.testCall(1).subscribe(
|
|
||||||
// subscribe with lambda function
|
|
||||||
response => {
|
|
||||||
this.logger.debug('Execute obs test call', response);
|
|
||||||
subscription.unsubscribe();
|
|
||||||
},
|
|
||||||
error => {
|
|
||||||
this.logger.error('Error while executing obs test call', error);
|
|
||||||
subscription.unsubscribe();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private promiseCall(): void {
|
|
||||||
this.restService.testCall(2).toPromise()
|
|
||||||
// lambda for success
|
|
||||||
.then(response => {
|
|
||||||
this.logger.debug('Execute obs test call', response);
|
|
||||||
})
|
|
||||||
// lambda for fail
|
|
||||||
.catch(error => {
|
|
||||||
this.logger.error('Error while executing obs test call', error);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
private wsCall(): void {
|
|
||||||
this.wsMessageCounter = 0;
|
|
||||||
this.wsSubscription = this.wsService.wsTestCall('Test message').message.subscribe(
|
|
||||||
result => {
|
|
||||||
this.logger.debug('ws call result', result);
|
|
||||||
if (this.wsMessageCounter >= 2) {
|
|
||||||
this.wsSubscription.unsubscribe();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
error => {
|
|
||||||
this.logger.error('ws call error', error);
|
|
||||||
this.wsSubscription.unsubscribe();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
alert() {
|
|
||||||
alert(this.exampleInputText);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1 +0,0 @@
|
|||||||
<p>{{message}} <button mat-raised-button (click)="buttonClickedEvent.emit()">Click me</button></p>
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-test-sub-comp',
|
|
||||||
templateUrl: './test-sub-comp.component.html',
|
|
||||||
styleUrls: ['./test-sub-comp.component.css']
|
|
||||||
})
|
|
||||||
export class TestSubCompComponent implements OnInit {
|
|
||||||
@Input()
|
|
||||||
message: string;
|
|
||||||
@Input()
|
|
||||||
anotherInput: string;
|
|
||||||
|
|
||||||
@Output()
|
|
||||||
buttonClickedEvent: EventEmitter<void> = new EventEmitter<void>();
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
|
||||||
this.message;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
import {Injectable} from '@angular/core';
|
|
||||||
import {NGXLogger} from 'ngx-logger';
|
|
||||||
import {fromEvent, interval, Observable} from 'rxjs';
|
|
||||||
|
|
||||||
import {environment} from '../../environments/environment';
|
|
||||||
import {WSEvents} from '../interfaces/interface';
|
|
||||||
|
|
||||||
@Injectable({
|
|
||||||
providedIn: 'root'
|
|
||||||
})
|
|
||||||
export class WebsocketService {
|
|
||||||
private wsEndpoint = environment.ws_location + ':' + environment.ws_port + '/test-ws-endpoint/';
|
|
||||||
private readonly ws: WebSocket;
|
|
||||||
private wsEvents: WSEvents;
|
|
||||||
|
|
||||||
constructor(private logger: NGXLogger) {
|
|
||||||
this.logger.debug('Initiating ws connection on', this.wsEndpoint);
|
|
||||||
this.ws = new WebSocket(this.wsEndpoint);
|
|
||||||
|
|
||||||
interval(5000).subscribe(() => {
|
|
||||||
// continuously check if the connection is still open
|
|
||||||
if (this.ws.readyState !== WebSocket.OPEN) {
|
|
||||||
this.logger.error('Lost websocket connection ...', this.ws);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
wsTestCall(msg: string): WSEvents {
|
|
||||||
this.logger.debug(
|
|
||||||
'Performing ws test call',
|
|
||||||
'current ws ready state ==', this.ws.readyState + ',',
|
|
||||||
'expected == 1 == open');
|
|
||||||
|
|
||||||
if (this.ws.readyState === WebSocket.OPEN) {
|
|
||||||
this.ws.send(msg);
|
|
||||||
} else {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.wsEvents) {
|
|
||||||
this.wsEvents = {
|
|
||||||
message: fromEvent(this.ws, 'message'),
|
|
||||||
error: fromEvent(this.ws, 'error'),
|
|
||||||
close: fromEvent(this.ws, 'close')
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.wsEvents;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user