Skip to content

Commit

Permalink
fix: play/stop enabling updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@ralfaron
ralfaron committed Feb 8, 2024
1 parent c839ce5 commit 5bcb091
Show file tree
Hide file tree
Showing 6 changed files with 66 additions and 49 deletions.
19 changes: 12 additions & 7 deletions projects/aas-portal/src/app/aas/aas.actions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,30 @@ export enum AASActionType {
APPLY_DOCUMENT = '[AAS] Apply document',
RESET_MODIFIED = '[AAS] Reset modified',
SET_DASHBOARD = '[AAS] Set dashboard',
SET_SEARCH = '[AAS] Set search'
SET_SEARCH = '[AAS] Set search',
SET_STATE = '[AAS] Set State',
}

export const setDocument = createAction(
AASActionType.SET_DOCUMENT,
AASActionType.SET_DOCUMENT,
props<{ document: AASDocument | null }>());

export const applyDocument = createAction(
AASActionType.APPLY_DOCUMENT,
AASActionType.APPLY_DOCUMENT,
props<{ document: AASDocument }>());

export const setTemplateStorage = createAction(
AASActionType.SET_TEMPLATE_STORAGE,
AASActionType.SET_TEMPLATE_STORAGE,
props<{ templates: TemplateDescriptor[] }>());

export const resetModified = createAction(
AASActionType.RESET_MODIFIED,
props<{ document: AASDocument }>());
props<{ document: AASDocument }>());

export const setSearch = createAction(
AASActionType.SET_SEARCH,
props<{ search: string }>());
AASActionType.SET_SEARCH,
props<{ search: string }>());

export const setState = createAction(
AASActionType.SET_STATE,
props<{ value: 'offline' | 'online' }>());
14 changes: 7 additions & 7 deletions projects/aas-portal/src/app/aas/aas.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,10 @@

<ng-template #aasToolbar>
<div class="btn-group me-2">
<button type="button" class="btn btn-primary" (click)="play()" [disabled]="(state | async) === 'offline'">
<button type="button" class="btn btn-primary" (click)="play()" [disabled]="(canPlay | async) === false">
<i class="bi bi-play-fill"></i>
</button>
<button type="button" class="btn btn-primary" (click)="stop()" [disabled]="(state | async) === 'online'">
<button type="button" class="btn btn-primary" (click)="stop()" [disabled]="(canStop | async) === false">
<i class="bi bi-stop-fill"></i>
</button>
</div>
Expand All @@ -58,7 +58,7 @@
<i class="bi bi-bar-chart-line-fill"></i>
</button>
</div>
<div class="btn-group me-2" [hidden]="(editable | async) === false">
<div class="btn-group me-2" [hidden]="(readOnly | async) === true">
<button type="button" class="btn btn-primary" (click)="synchronize()" [disabled]="!canSynchronize()">
<i class="bi bi-arrow-repeat"></i>
</button>
Expand All @@ -68,15 +68,15 @@
<i class="bi bi-download"></i>
</button>
</div>
<div class="btn-group me-2" [hidden]="(editable | async) === false">
<button type="button" class="btn btn-primary" (click)="undo()" [disabled]="!canUndo()">
<div class="btn-group me-2" [hidden]="(readOnly | async) === true">
<button type="button" class="btn btn-primary" (click)="undo()" [disabled]="canUndo === false">
<i class="bi bi-arrow-90deg-left"></i>
</button>
<button type="button" class="btn btn-primary" (click)="redo()" [disabled]="!canRedo()">
<button type="button" class="btn btn-primary" (click)="redo()" [disabled]="canRedo === false">
<i class="bi bi-arrow-90deg-right"></i>
</button>
</div>
<div class="btn-group me-2" [hidden]="(editable | async) === false">
<div class="btn-group me-2" [hidden]="(readOnly | async) === true">
<button type="button" class="btn btn-primary" (click)="newElement()" [disabled]="!canNewElement()">
<i class="bi bi-plus-lg"></i>
</button>
Expand Down
53 changes: 22 additions & 31 deletions projects/aas-portal/src/app/aas/aas.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
import { head } from 'lodash-es';
import { AfterViewInit, Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { BehaviorSubject, EMPTY, map, mergeMap, Observable, Subscription, first, from } from 'rxjs';
import { EMPTY, map, mergeMap, Observable, Subscription, first, from } from 'rxjs';
import * as lib from 'projects/aas-lib/src/public-api';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Store } from '@ngrx/store';
Expand Down Expand Up @@ -47,7 +47,6 @@ import {
})
export class AASComponent implements OnInit, OnDestroy, AfterViewInit {
private readonly store: Store<State>;
private readonly $state = new BehaviorSubject<lib.OnlineState>('offline');
private readonly subscription = new Subscription();
private _dashboardPage = '';
private templates: TemplateDescriptor[] = [];
Expand All @@ -69,11 +68,13 @@ export class AASComponent implements OnInit, OnDestroy, AfterViewInit {
private readonly clipboard: lib.ClipboardService
) {
this.store = store as Store<State>;
this.state = this.$state.asObservable();
this.state = this.store.select(AASSelectors.selectState);
this.search = this.store.select(AASSelectors.selectSearch);
this.canPlay = this.store.select(AASSelectors.selectCanPlay);
this.canStop = this.store.select(AASSelectors.selectCanStop);

this.dashboardPages = this.dashboard.pages.pipe((map(pages => pages.map(page => page.name))));
this.editable = this.store.select(AASSelectors.selectEditable);
this.readOnly = this.store.select(AASSelectors.selectReadOnly);
}

@ViewChild('aasTree')
Expand Down Expand Up @@ -118,14 +119,6 @@ export class AASComponent implements OnInit, OnDestroy, AfterViewInit {
return this.versionToString(head(this.document?.content?.assetAdministrationShells)?.administration);
}

public get onlineReady(): boolean {
return this.document?.onlineReady ?? false;
}

public get readonly(): boolean {
return this.document?.readonly ?? true;
}

public readonly dashboardPages: Observable<string[]>;

public get dashboardPage(): string {
Expand All @@ -136,7 +129,19 @@ export class AASComponent implements OnInit, OnDestroy, AfterViewInit {
this.dashboard.setPageName(value);
}

public readonly editable: Observable<boolean>;
public readonly readOnly: Observable<boolean>;

public get canUndo(): boolean {
return this.commandHandler.canUndo;
}

public get canRedo(): boolean {
return this.commandHandler.canRedo;
}

public readonly canPlay: Observable<boolean>;

public readonly canStop: Observable<boolean>;

public ngOnInit(): void {
const params = this.route.snapshot.queryParams as lib.AASQueryParams;
Expand Down Expand Up @@ -213,13 +218,11 @@ export class AASComponent implements OnInit, OnDestroy, AfterViewInit {
}

public play(): void {
if (this.onlineReady && this.$state.value === 'offline') {
this.$state.next('online');
}
this.store.dispatch(AASActions.setState({ value: 'online' }));
}

public stop(): void {
this.$state.next('offline');
this.store.dispatch(AASActions.setState({ value: 'offline' }));
}

public canAddToDashboard(): boolean {
Expand Down Expand Up @@ -268,24 +271,12 @@ export class AASComponent implements OnInit, OnDestroy, AfterViewInit {

}

public canUndo(): boolean {
return !this.readonly && this.commandHandler.canUndo;
}

public undo(): void {
if (this.canUndo()) {
this.commandHandler.undo();
}
}

public canRedo(): boolean {
return !this.readonly && this.commandHandler.canRedo;
this.commandHandler.undo();
}

public redo(): void {
if (this.canRedo()) {
this.commandHandler.redo();
}
this.commandHandler.redo();
}

public canNewElement(): boolean {
Expand Down
10 changes: 9 additions & 1 deletion projects/aas-portal/src/app/aas/aas.reducer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,11 @@ export const aasReducer = createReducer(initialState,
on(
AASActions.setTemplateStorage,
(state, { templates }) => setTemplateStorage(state, templates)
)
),
on(
AASActions.setState,
(state, { value }) => setState(state, value),
),
);

function setTemplateStorage(state: AASState, templates: TemplateDescriptor[]): AASState {
Expand All @@ -52,4 +56,8 @@ function resetModified(state: AASState, document: AASDocument): AASState {

function setSearch(state: AASState, search: string): AASState {
return { ...state, search };
}

function setState(state: AASState, value: 'offline' | 'online'): AASState {
return { ...state, state: value };
}
17 changes: 14 additions & 3 deletions projects/aas-portal/src/app/aas/aas.selectors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,12 @@ const getSearch = (state: State) => state.aas.search;
const getDocument = (state: State) => state.aas.document;
const getTemplateStorage = (state: State) => state.aas.templateStorage;
const getTemplates = (state: State) => state.aas.templateStorage.templates;
const getState = (state: State) => state.aas;

export const selectOnlineReady = createSelector(getOnlineReady, onlineReady => onlineReady);

export const selectReadOnly = createSelector(getReadOnly, readOnly => readOnly);

export const selectEditable = createSelector(getReadOnly, readonly => !readonly);

export const selectSearch = createSelector(getSearch, search => search);

export const selectDocument = createSelector(getDocument, document => document);
Expand All @@ -30,4 +29,16 @@ export const selectHasDocument = createSelector(getDocument, document => documen

export const selectTemplateStorage = createSelector(getTemplateStorage, templateStorage => templateStorage);

export const selectTemplates = createSelector(getTemplates, templates => templates);
export const selectTemplates = createSelector(getTemplates, templates => templates);

export const selectState = createSelector(getState, state => state.state);

export const selectCanPlay = createSelector(
getState,
state => ((state.document?.onlineReady ?? false) && state.state === 'offline'),
);

export const selectCanStop = createSelector(
getState,
state => ((state.document?.onlineReady ?? false) && state.state === 'online'),
);
2 changes: 2 additions & 0 deletions projects/aas-portal/src/app/aas/aas.state.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export interface TemplateStorage {

export interface AASState {
document: AASDocument | null;
state: 'online' | 'offline';
search: string;
templateStorage: TemplateStorage;
error: Error | null;
Expand All @@ -23,6 +24,7 @@ export interface AASState {
export const initialState: AASState = {
document: null,
search: '',
state: 'offline',
templateStorage: {
timestamp: 0,
templates: []
Expand Down

0 comments on commit 5bcb091

Please sign in to comment.