Skip to content

Commit

Permalink
fix: refactoring aas-portal AASComponent
Browse files Browse the repository at this point in the history
  • Loading branch information
@ralfaron
ralfaron committed Feb 9, 2024
1 parent ee8d291 commit b7db762
Show file tree
Hide file tree
Showing 43 changed files with 159 additions and 152 deletions.
2 changes: 1 addition & 1 deletion projects/aas-portal/src/app/aas/aas-api.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AASDocument, TemplateDescriptor } from 'common';
import { Observable } from 'rxjs';
import { encodeBase64Url } from 'projects/aas-lib/src/public-api';
import { encodeBase64Url } from 'aas-lib';

/** The client side AAS provider service. */
@Injectable({
Expand Down
20 changes: 10 additions & 10 deletions projects/aas-portal/src/app/aas/aas.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<div class="row mt-1">
<div class="d-flex flex-row">
<div class="border border-secondary rounded p-1">
<fhg-img [height]="88" [width]="88" [src]="thumbnail" alt="assets/resources/aas.svg" />
<fhg-img [height]="88" [width]="88" [src]="(thumbnail | async)!" alt="assets/resources/aas.svg" />
</div>
<div class="d-flex flex-row ps-1">
<div class="d-flex flex-column">
Expand All @@ -21,17 +21,17 @@
<div class="fw-bold text-end small text-nowrap" translate>LABEL_ASSET_ID</div>
</div>
<div class="d-flex flex-column flex-grow-1 ps-1">
<div class="small text-nowrap">{{address}}</div>
<div class="small text-nowrap">{{idShort}}</div>
<div class="small text-nowrap">{{id}}</div>
<div class="small text-nowrap">{{version}}</div>
<div class="small text-nowrap">{{assetId}}</div>
<div class="small text-nowrap">{{address | async}}</div>
<div class="small text-nowrap">{{idShort | async}}</div>
<div class="small text-nowrap">{{id | async}}</div>
<div class="small text-nowrap">{{version | async}}</div>
<div class="small text-nowrap">{{assetId | async}}</div>
</div>
</div>
</div>
</div>
<div class="row">
<fhg-aas-tree #aasTree [state]="state | async" [search]="search" [document]="document"
<fhg-aas-tree #aasTree [state]="state | async" [search]="search" [document]="document | async"
[(selected)]="selectedElements">
</fhg-aas-tree>
</div>
Expand All @@ -53,11 +53,11 @@
}
</select>
<button type="button" class="btn btn-primary" (click)="addToDashboard('Line')"
[disabled]="!canAddToDashboard()">
[disabled]="!canAddToDashboard">
<i class="bi bi-graph-up"></i>
</button>
<button type="button" class="btn btn-primary" (click)="addToDashboard('BarVertical')"
[disabled]="!canAddToDashboard()">
[disabled]="!canAddToDashboard">
<i class="bi bi-bar-chart-line-fill"></i>
</button>
</div>
Expand All @@ -68,7 +68,7 @@
</button>
</div>
<div class="btn-group me-2">
<button type="button" class="btn btn-primary" (click)="downloadDocument()" [disabled]="!canDownloadDocument()">
<button type="button" class="btn btn-primary" (click)="downloadDocument()">
<i class="bi bi-download"></i>
</button>
</div>
Expand Down
149 changes: 56 additions & 93 deletions projects/aas-portal/src/app/aas/aas.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@
*
*****************************************************************************/

import { head } from 'lodash-es';
import { AfterViewInit, Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { EMPTY, map, mergeMap, Observable, Subscription, from, of, first } from 'rxjs';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Store } from '@ngrx/store';
import { TemplateDescriptor, aas, isProperty, isNumberType, isBlob, AASDocument } from 'common';
import {
AASQuery,
AASQueryParams,
Expand All @@ -20,8 +20,7 @@ import {
DownloadService,
NotifyService,
OnlineState,
encodeBase64Url,
} from 'projects/aas-lib/src/public-api';
} from 'aas-lib';

import { CommandHandlerService } from '../aas/command-handler.service';
import { EditElementFormComponent } from './edit-element-form/edit-element-form.component';
Expand All @@ -37,7 +36,6 @@ import { State } from './aas.state';
import { DashboardChartType } from '../dashboard/dashboard.state';
import { DashboardQuery } from '../types/dashboard-query-params';
import { ToolbarService } from '../toolbar.service';
import { AASDocument, equalDocument, TemplateDescriptor, aas, isProperty, isNumberType, isBlob } from 'common';

@Component({
selector: 'fhg-aas',
Expand Down Expand Up @@ -65,6 +63,13 @@ export class AASComponent implements OnInit, OnDestroy, AfterViewInit {
private readonly clipboard: ClipboardService,
) {
this.store = store as Store<State>;
this.document = this.store.select(AASSelectors.selectDocument);
this.address = this.store.select(AASSelectors.selectAddress);
this.idShort = this.store.select(AASSelectors.selectIdShort);
this.id = this.store.select(AASSelectors.selectId);
this.assetId = this.store.select(AASSelectors.selectAssetId);
this.version = this.store.select(AASSelectors.selectVersion);
this.thumbnail = this.store.select(AASSelectors.selectThumbnail);
this.state = this.store.select(AASSelectors.selectState);
this.search = this.store.select(AASSelectors.selectSearch);
this.canPlay = this.store.select(AASSelectors.selectCanPlay);
Expand All @@ -78,41 +83,23 @@ export class AASComponent implements OnInit, OnDestroy, AfterViewInit {
@ViewChild('aasToolbar', { read: TemplateRef })
public aasToolbar: TemplateRef<unknown> | null = null;

public document: AASDocument | null = null;
public readonly document: Observable<AASDocument | null>;

public readonly state: Observable<OnlineState>;

public readonly search: Observable<string>;

public get address(): string {
return this.document?.address ?? '';
}

public get idShort(): string {
return this.document?.idShort ?? '';
}
public readonly address: Observable<string>;

public get id(): string {
return this.document?.id ?? '-';
}
public readonly idShort: Observable<string>;

public get assetId(): string {
return head(this.document?.content?.assetAdministrationShells)?.assetInformation.globalAssetId ?? '-';
}
public readonly id: Observable<string>;

public get thumbnail(): string {
if (this.document) {
const name = encodeBase64Url(this.document.endpoint);
const id = encodeBase64Url(this.document.id);
return `/api/v1/containers/${name}/documents/${id}/thumbnail`;
}
public readonly assetId: Observable<string>;

return 'assets/resources/aas.svg';
}
public readonly thumbnail: Observable<string>;

public get version(): string {
return this.versionToString(head(this.document?.content?.assetAdministrationShells)?.administration);
}
public readonly version: Observable<string>;

public readonly dashboardPages: Observable<string[]>;

Expand Down Expand Up @@ -157,6 +144,15 @@ export class AASComponent implements OnInit, OnDestroy, AfterViewInit {
);
}

public get canAddToDashboard(): boolean {
const selectedElements = this.selectedElements;
return (
this.dashboardPage != null &&
selectedElements.length > 0 &&
selectedElements.every(element => this.isNumberProperty(element) || this.isTimeSeries(element))
);
}

public ngOnInit(): void {
const params = this.route.snapshot.queryParams as AASQueryParams;
let query: AASQuery | undefined;
Expand All @@ -176,19 +172,6 @@ export class AASComponent implements OnInit, OnDestroy, AfterViewInit {
this.store.dispatch(AASActions.getDocument({ id: query.id, name: query.name }));
}

this.subscription.add(
this.store
.select(AASSelectors.selectDocument)
.pipe()
.subscribe(value => {
if (!equalDocument(this.document, value)) {
this.commandHandler.clear();
}

this.document = value;
}),
);

this.subscription.add(
this.store
.select(AASSelectors.selectTemplateStorage)
Expand Down Expand Up @@ -245,35 +228,28 @@ export class AASComponent implements OnInit, OnDestroy, AfterViewInit {
this.store.dispatch(AASActions.setState({ value: 'offline' }));
}

public canAddToDashboard(): boolean {
const selectedElements = this.selectedElements;
return (
this.dashboardPage != null &&
this.document != null &&
selectedElements.length > 0 &&
selectedElements.every(element => this.isNumberProperty(element) || this.isTimeSeries(element))
);
}
public addToDashboard(chartType: string): void {
this.store
.select(AASSelectors.selectDocument)
.pipe(
first(),
mergeMap(document => {
if (!document) {
return EMPTY;
}

public async addToDashboard(chartType: string): Promise<boolean> {
if (!this.document) {
return false;
}
this.dashboard.add(
this.dashboardPage,
document,
this.selectedElements,
chartType as DashboardChartType,
);

try {
this.dashboard.add(
this.dashboardPage,
this.document,
this.selectedElements,
chartType as DashboardChartType,
);

this.clipboard.set('DashboardQuery', { page: this.dashboardPage } as DashboardQuery);
return await this.router.navigateByUrl('/dashboard?format=DashboardQuery');
} catch (error) {
this.notify.error(error);
return false;
}
this.clipboard.set('DashboardQuery', { page: this.dashboardPage } as DashboardQuery);
return from(this.router.navigateByUrl('/dashboard?format=DashboardQuery'));
}),
)
.subscribe({ error: error => this.notify.error(error) });
}

public synchronize(): void {
Expand Down Expand Up @@ -388,38 +364,25 @@ export class AASComponent implements OnInit, OnDestroy, AfterViewInit {
.subscribe({ error: error => this.notify.error(error) });
}

public canDownloadDocument(): boolean {
return true;
}

public downloadDocument(): void {
this.download
.downloadDocument(this.document!.endpoint, this.document!.id, this.document!.idShort + '.aasx')
this.store
.select(AASSelectors.selectDocument)
.pipe(
mergeMap(document => {
if (!document) {
return EMPTY;
}

return this.download.downloadDocument(document.endpoint, document.id, document.idShort + '.aasx');
}),
)
.subscribe({ error: error => this.notify.error(error) });
}

public applySearch(text: string): void {
this.store.dispatch(AASActions.setSearch({ search: text }));
}

private versionToString(administration?: aas.AdministrativeInformation): string {
let version: string = administration?.version ?? '';
const revision: string = administration?.revision ?? '';
if (revision.length > 0) {
if (version.length > 0) {
version += ' (' + revision + ')';
} else {
version = revision;
}
}

if (version.length === 0) {
version = '-';
}

return version;
}

private isNumberProperty(element: aas.Referable): boolean {
if (isProperty(element)) {
return isNumberType(element.valueType);
Expand Down
43 changes: 43 additions & 0 deletions projects/aas-portal/src/app/aas/aas.selectors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@
*****************************************************************************/

import { createSelector } from '@ngrx/store';
import { head } from 'lodash-es';
import { aas } from 'common';
import { State } from './aas.state';
import { encodeBase64Url } from 'projects/aas-lib/src/lib/convert';

const getReadOnly = (state: State) => state.aas.document?.readonly ?? true;
const getOnlineReady = (state: State) => state.aas.document?.onlineReady ?? false;
Expand Down Expand Up @@ -46,3 +49,43 @@ export const selectCanStop = createSelector(
export const selectCanSynchronize = createSelector(getDocument, document =>
document != null && !document.readonly && document.modified ? document.modified : false,
);

export const selectAddress = createSelector(getDocument, document => document?.address ?? '-');
export const selectIdShort = createSelector(getDocument, document => document?.idShort ?? '-');
export const selectId = createSelector(getDocument, document => document?.id ?? '-');
export const selectVersion = createSelector(getDocument, document =>
versionToString(head(document?.content?.assetAdministrationShells)?.administration),
);

export const selectAssetId = createSelector(
getDocument,
document => head(document?.content?.assetAdministrationShells)?.assetInformation.globalAssetId ?? '-',
);

export const selectThumbnail = createSelector(getDocument, document => {
if (document) {
const name = encodeBase64Url(document.endpoint);
const id = encodeBase64Url(document.id);
return `/api/v1/containers/${name}/documents/${id}/thumbnail`;
}

return 'assets/resources/aas.svg';
});

function versionToString(administration?: aas.AdministrativeInformation): string {
let version: string = administration?.version ?? '';
const revision: string = administration?.revision ?? '';
if (revision.length > 0) {
if (version.length > 0) {
version += ' (' + revision + ')';
} else {
version = revision;
}
}

if (version.length === 0) {
version = '-';
}

return version;
}
2 changes: 1 addition & 1 deletion projects/aas-portal/src/app/aas/can-activate-aas.guard.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, UrlTree } from '@angular/router';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { AASQueryParams } from 'projects/aas-lib/src/public-api';
import { AASQueryParams } from 'aas-lib';
import * as AASSelectors from './aas.selectors';
import { State } from './aas.state';

Expand Down
2 changes: 1 addition & 1 deletion projects/aas-portal/src/app/aas/command-handler.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
*****************************************************************************/

import { Injectable } from '@angular/core';
import { NotifyService } from 'projects/aas-lib/src/public-api';
import { NotifyService } from 'aas-lib';
import { Command } from '../types/command';

@Injectable({
Expand Down
2 changes: 1 addition & 1 deletion projects/aas-portal/src/app/aas/edit-element-form/edit-element-form.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
import { Component } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { TranslateService } from '@ngx-translate/core';
import { convertBlobToBase64Async, extension } from 'projects/aas-lib/src/public-api';
import { convertBlobToBase64Async, extension } from 'aas-lib';
import { aas, extensionToMimeType, toInvariant, toLocale } from 'common';

export interface LangStringRow extends aas.LangString {
Expand Down
4 changes: 2 additions & 2 deletions projects/aas-portal/src/app/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { StoreModule } from '@ngrx/store';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { AASLibModule } from 'projects/aas-lib/src/public-api';
import { AASLibModule } from 'aas-lib';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
Expand Down Expand Up @@ -84,4 +84,4 @@ import { FavoritesFormComponent } from './start/favorites-form/favorites-form.co
providers: [httpInterceptorProviders],
bootstrap: [AppComponent],
})
export class AppModule {}
export class AppModule {}
Loading

0 comments on commit b7db762

Please sign in to comment.