@flexem/fc-gui 3.0.0-alpha.90 → 3.0.0-alpha.91

package/src/elements/weather/weater-element.ts

@@ -0,0 +1,281 @@
+import { ConditionalDisplayElement } from '../base/conditional-display-element';
+import { WeatherModel } from '../../model/weather/weather.model';
+import { Injector } from '@angular/core';
+import { PermissionChecker } from '../../service';
+import { VariableCommunicator } from '../../communication/variable';
+import { VariableStore } from '../../config/variable';
+import { WeatherService } from '../../service';
+import { LOGGER_SERVICE_TOKEN, LoggerService } from '../../logger';
+import { WeatherInfo } from '../../model/weather/weather-info';
+import * as d3 from 'd3-selection';
+import { LOCALIZATION, Localization } from '../../localization';
+
+export class WeatherElement extends ConditionalDisplayElement {
+
+    model: WeatherModel;
+    id: number;
+    private readonly localization: Localization;
+    protected readonly logger: LoggerService;
+    timer: any;
+
+    constructor(element: HTMLElement,
+        injector: Injector,
+        permissionChecker: PermissionChecker,
+        variableCommunicator: VariableCommunicator,
+        variableStore: VariableStore,
+        private readonly weatherService: WeatherService,
+        signalRAppId: string) {
+        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
+        this.localization = injector.get(LOCALIZATION);
+        this.logger = injector.get(LOGGER_SERVICE_TOKEN);
+        this.initWeatherInfo();
+        this.id = Math.abs(+this.model.id);
+        this.timer = setInterval(() => this.initWeatherInfo(), 1000 * 60 * 60);
+    }
+
+    dispose() {
+        clearInterval(this.timer);
+    }
+
+    private initWeatherInfo() {
+        this.clear();
+        this.weatherService.getWeatherInfo().then(weatherInfo => {
+            const weatherInfoDto = <WeatherInfo>weatherInfo;
+            if (!weatherInfoDto.supported) {
+                this.handleNotSupported();
+                return;
+            }
+            if (weatherInfoDto.gettingAddress) {
+                this.handleGettingAddress();
+                return;
+            }
+            if (!weatherInfoDto.hasAddress) {
+                this.handleNoAddress();
+                return;
+            }
+            const location = weatherInfoDto.location.length > 4 ? `${weatherInfoDto.location.substr(0, 3)}...` : weatherInfoDto.location;
+            this.handleNormal(weatherInfoDto.temperature, weatherInfoDto.humidity, location, weatherInfoDto.wind, weatherInfoDto.weatherIcon, weatherInfoDto.weatherPhenomenon);
+        }).catch(() => {
+            this.handleNotSupported();
+        });
+    }
+
+    private clear() {
+        this.rootElement.selectAll('*').remove();
+    }
+
+    private handleNotSupported() {
+        this.handleUnusualCommon(this.localization.weatherNotSupport);
+    }
+
+    private handleGettingAddress() {
+        this.handleUnusualCommon(this.localization.weatherNotAvailable);
+    }
+
+    private handleNoAddress() {
+        this.handleUnusualCommon(this.localization.weatherNotAddress);
+    }
+
+    private handleUnusualCommon(text: string) {
+        const weatherSvg = d3.create('svg');
+        this.buildBackgroudRect(weatherSvg, '#081625', '0.5');
+        this.buildUnusualTipIcon(weatherSvg, text.length);
+        this.buildUnusualTipText(weatherSvg, text);
+        this.appendWeatherSvg(weatherSvg);
+    }
+
+    private handleNormal(temperature: string, humidity: string, location: string, wind: string, weatherIcon: string, weatherPhenomenon: string) {
+        const fontColor = this.model.stroke ? this.model.stroke : '#FFFFFF';
+        const backgroundColor = this.model.fill && this.model.fill || '#86A7C5';
+        const weatherSvg = d3.create('svg');
+        this.buildBackgroudRect(weatherSvg, backgroundColor);
+        this.buildTemperatureGroup(weatherSvg, temperature, humidity, fontColor);
+        this.buildWeather(weatherSvg, weatherIcon);
+        this.buildLocGroup(weatherSvg, location, fontColor);
+        this.buildWindGroup(weatherSvg, wind, fontColor, location.length);
+        this.buildWeatherText(weatherSvg, weatherPhenomenon, fontColor);
+        this.appendWeatherSvg(weatherSvg);
+    }
+
+    getRainPath(): string {
+        return `M78,200c-43,0-78-33.3-78-74.3C0,74.9,55.5,20.4,72.5,4.9L77.8,0l5.4,4.8c0.7,0.6,72.5,64.6,72.8,120.9
+C156,166.7,121,200,78,200z M77.9,21.7C60.2,38.8,16,85.4,16,125.7c0,32.2,27.8,58.3,62,58.3s62-26.2,62-58.3
+C139.7,88.4,99.2,41.9,77.9,21.7z M87.7,163.9c-4.2,0-7.6-3.3-7.7-7.5c0-4.2,3.3-7.7,7.6-7.7c14.3-0.2,25.7-11.3,25.5-24.7
+c0-4.2,3.3-7.7,7.6-7.7c0,0,0.1,0,0.1,0c4.2,0,7.6,3.3,7.7,7.5C128.7,145.6,110.5,163.6,87.7,163.9
+C87.7,163.9,87.7,163.9,87.7,163.9z`;
+    }
+    getLocPath(): string {
+        return `M78,0C35,0,0,33.3,0,74.3c0,50.8,55.5,105.4,72.6,120.9l5.3,4.8l5.3-4.7c0.7-0.6,72.5-64.6,72.8-121v0
+C156,33.3,121,0,78,0z M78,178.6c-17.8-17.1-62.1-63.9-62.1-104.4C15.8,42,43.7,15.7,78,15.7c34.3,0,62.2,26.3,62.2,58.5
+C140,111.8,99.2,158.4,78,178.6z M78,40.4c-17.8,0-32.4,14.4-32.4,32.2s14.5,32.2,32.4,32.2s32.4-14.4,32.4-32.2S95.8,
+40.4,78,40.4z M78,89.1c-9.1,0-16.5-7.4-16.5-16.5S68.9,56.2,78,56.2s16.5,7.4,16.5,16.5S87.1,89.1,78,89.1z`;
+    }
+
+    getWindPath(): string {
+        return `M7.1,56.7h85.7c15.8,0,28.6-12.7,28.6-28.4S108.6,0,92.9,0C77.1,0,64.3,12.7,64.3,28.4h14.3
+c0-7.8,6.4-14.2,14.3-14.2c7.9,0,14.3,6.3,14.3,14.2c0,7.8-6.4,14.2-14.3,14.2H7.1c-3.9,0-7.1,3.2-7.1,7.1
+C0,53.6,3.2,56.7,7.1,56.7L7.1,56.7z
+M164.3,99.3H7.1c-3.9,0-7.1,3.2-7.1,7.1c0,3.9,3.2,7.1,7.1,7.1h157.1c7.9,0,14.3,6.4,14.3,14.2
+c0,7.8-6.4,14.2-14.3,14.2c-7.9,0-14.3-6.3-14.3-14.2h-14.3c0,15.7,12.8,28.4,28.6,28.4c15.8,0,28.6-12.7,28.6-28.4
+S180.1,99.3,164.3,99.3L164.3,99.3z
+M7.1,85.1h157.1c19.7,0,35.7-15.9,35.7-35.5c0-19.6-16-35.5-35.7-35.5c-19.7,0-35.7,15.9-35.7,35.5
+c0,2.4,0.3,4.8,0.8,7.1h14.8c-0.8-2.2-1.3-4.6-1.3-7.1c0-11.7,9.6-21.3,21.4-21.3c11.8,0,21.4,9.5,21.4,21.3
+c0,11.1-8.6,20.2-19.6,21.1c-0.3,0-0.6,0.2-0.9,0.2H7.1C3.2,70.9,0,74.1,0,78C0,81.9,3.2,85.1,7.1,85.1L7.1,85.1z`;
+    }
+
+    getUnusualIconPath(): string {
+        return `<g>
+<ellipse class="st2" cx="74.6" cy="72.3" rx="36.4" ry="36.3" fill="#EFCA30"/>
+<path class="st2" fill="#EFCA30" d="M74.5,24.5C74.6,24.5,74.6,24.5,74.5,24.5c3.7,0,5.7-2,5.7-5.5V5.5C80.2,2,78,0,74.6,0C71,0,69,2.1,69,5.5V19
+C69,22.3,71,24.4,74.5,24.5L74.5,24.5z"/>
+<path class="st2" fill="#EFCA30" d="M37.2,28.5l-6.9-6.7c-1.3-1.3-2.7-1.9-4.1-1.9s-2.8,0.6-4.1,1.9c-1.3,1.3-1.9,2.6-1.9,4s0.6,2.7,1.9,4
+l6.4,6.1c0.5,0.5,1.2,1.1,1.9,1.4c1.2,0.5,2,0.7,2.8,0.7c0.6,0,1.3-0.2,2-0.4c1.4-0.5,2.7-1.5,3.3-2.8c0.3-0.7,0.5-1.5,0.5-2.2
+C39.1,31.2,38.5,29.8,37.2,28.5L37.2,28.5z"/>
+<path class="st2" fill="#EFCA30" d="M112.5,36.9c1.6,0.7,2.7,1.2,3.7,1.2s2-0.4,3.6-1.2c0.2-0.1,0.4-0.2,0.5-0.4l6.9-6.7c1.3-1.3,1.9-2.6,1.9-4
+s-0.6-2.7-1.9-4c-1.3-1.3-2.7-1.9-4.1-1.9s-2.8,0.6-4.1,1.9l-6.9,6.7c-1.3,1.3-1.9,2.6-1.9,4c0,1.4,0.6,2.7,1.9,4
+C112.1,36.6,112.3,36.8,112.5,36.9L112.5,36.9z"/>
+<path class="st2" fill="#EFCA30" d="M25.1,73.2C25.1,73.1,25.1,73.1,25.1,73.2c0-3.6-2-5.6-5.6-5.6H5.6C2,67.6,0,69.7,0,73.1
+c0,3.4,2.2,5.5,5.6,5.5h13.8C22.7,78.6,24.9,76.6,25.1,73.2L25.1,73.2z"/>
+<path class="st2" fill="#EFCA30" d="M33.2,107.6c-1.4,0-2.8,0.6-4.1,1.9l-6.9,6.7c-1.3,1.3-1.9,2.6-1.9,4s0.6,2.7,1.9,4c0.2,0.2,0.3,0.3,0.5,0.4
+c1.6,0.7,2.7,1.2,3.7,1.2c0.5,0,1.5-0.1,3.6-1.2c0.2-0.1,0.4-0.2,0.5-0.4l6.9-6.7c2.6-2.5,2.6-5.6,0-8.1
+C36,108.3,34.6,107.6,33.2,107.6L33.2,107.6z"/>
+</g>
+<path class="st3" fill="#FFFFFF" d="M68.8,160h99.3c17.9-2,31.9-17.1,31.9-35.5c0-18.3-13.8-33.3-31.5-35.4c-8-17-25.2-28.9-45.3-28.9
+c-22.4,0-41.4,14.7-47.7,35c-1.1-0.1-2.2-0.2-3.4-0.2c-18,0-32.6,14.6-32.6,32.6C39.5,144.5,52.3,158.3,68.8,160z"/>`;
+    }
+
+    private buildBackgroudRect(weatherSvg: d3.Selection<any, {}, null, undefined>, backgroundColor: string, opacity = '1') {
+        weatherSvg.append('rect')
+            .attr('x', '0')
+            .attr('y', '0')
+            .attr('rx', '2')
+            .attr('width', '268')
+            .attr('height', '92')
+            .attr('fill', backgroundColor)
+            .attr('fill-opacity', opacity);
+    }
+
+    private buildTemperatureGroup(weatherSvg: d3.Selection<any, {}, null, undefined>, temperature: string, humidity: string, fontColor: string) {
+        const $temperature = weatherSvg.append('text')
+            .attr('x', '14')
+            .attr('y', '57')
+            .attr('font-family', 'sans-serif')
+            .attr('font-weight', 'lighter')
+            .attr('font-size', '50')
+            .attr('fill', fontColor)
+            .text(temperature);
+        $temperature.append('tspan')
+            .attr('dy', '-27')
+            .attr('font-size', '20')
+            .attr('fill', fontColor)
+            .text('°C');
+        $temperature.append('tspan')
+            .attr('dx', '-8')
+            .attr('dy', '25')
+            .attr('font-size', '22')
+            .attr('fill', fontColor)
+            .text('/');
+
+        weatherSvg.append('svg')
+            .attr('x', `${16 + 50 * temperature.length * 0.75}`)
+            .attr('y', '46')
+            .attr('width', '11')
+            .attr('height', '11')
+            .attr('viewBox', '0 0 156 200')
+            .append('path')
+            .attr('fill', fontColor)
+            .attr('d', this.getRainPath());
+
+        weatherSvg.append('text')
+            .attr('x', `${16 + 14 + 50 * temperature.length * 0.75}`)
+            .attr('y', '57')
+            .attr('font-size', '12')
+            .attr('fill', fontColor)
+            .text(humidity);
+    }
+
+    private buildWeather(weatherSvg: d3.Selection<any, {}, null, undefined>, weatherIcon: string) {
+        weatherSvg.append('image')
+            .attr('x', '151')
+            .attr('y', '2')
+            .attr('width', '110')
+            .attr('height', '66')
+            .attr('xlink:href', `assets/img/weather/${weatherIcon}.png`)
+            .attr('preserveAspectRatio', 'none')
+            .attr('crossorigin', 'anonymous');
+    }
+
+    private buildLocGroup(weatherSvg: d3.Selection<any, {}, null, undefined>, location: string, fontColor: string) {
+        weatherSvg.append('svg')
+            .attr('x', '14')
+            .attr('y', '70')
+            .attr('width', '11')
+            .attr('height', '11')
+            .attr('viewBox', '0 0 156 200')
+            .append('path')
+            .attr('fill', fontColor)
+            .attr('d', this.getLocPath);
+
+        weatherSvg.append('text')
+            .attr('x', '28')
+            .attr('y', '80')
+            .attr('font-size', '12')
+            .attr('fill', fontColor)
+            .text(location);
+    }
+
+    private buildWindGroup(weatherSvg: d3.Selection<any, {}, null, undefined>, wind: string, fontColor: string, locationLength: number) {
+        weatherSvg.append('svg')
+            .attr('x', `${28 + locationLength * 12 + 10}`)
+            .attr('y', '69')
+            .attr('width', '13')
+            .attr('height', '13')
+            .attr('viewBox', '0 0 200 156')
+            .append('path')
+            .attr('fill', fontColor)
+            .attr('d', this.getWindPath);
+
+        weatherSvg.append('text')
+            .attr('x', `${28 + locationLength * 12 + 10 + 14 + 2}`)
+            .attr('y', '80')
+            .attr('font-size', '12')
+            .attr('fill', fontColor)
+            .text(wind);
+    }
+
+    private buildWeatherText(weatherSvg: d3.Selection<any, {}, null, undefined>, weatherPhenomenon: string, fontColor: string) {
+        weatherSvg.append('text')
+            .attr('x', '201')
+            .attr('y', '80')
+            .attr('font-size', 12)
+            .attr('font-anchor', 'middle')
+            .attr('fill', fontColor)
+            .text(weatherPhenomenon);
+    }
+
+    private buildUnusualTipIcon(weatherSvg: d3.Selection<any, {}, null, undefined>, length: number) {
+        weatherSvg.append('svg')
+            .attr('x', length > 9 ? (268 - 7 * length - 8 - 42) / 2 : '44')
+            .attr('y', '23')
+            .attr('width', '42')
+            .attr('height', '34')
+            .attr('viewBox', '0 0 200 160')
+            .html(this.getUnusualIconPath);
+    }
+
+    private buildUnusualTipText(weatherSvg: d3.Selection<any, {}, null, undefined>, text: string) {
+        const length = text.length;
+        weatherSvg.append('text')
+            .attr('x', length > 9 ? (268 - 7 * length - 8 - 42) / 2 + 42 + 8 : '94')
+            .attr('y', '46')
+            .attr('font-size', 14)
+            .attr('font-anchor', 'middle')
+            .attr('fill', '#FFFFFF')
+            .attr('dominant-baseline', 'central')
+            .text(text);
+    }
+
+    private appendWeatherSvg(weatherSvg: d3.Selection<any, {}, null, undefined>) {
+        this.rootElement.append(() => weatherSvg.node());
+    }
+}

package/src/gui/gui-context.ts

@@ -0,0 +1,18 @@
+import { ConfigStore } from '../config';
+import { VariableCommunicator } from '../communication';
+import { SecurityChecker } from '../security';
+import { VideoService, WeatherService, PermissionChecker, OperationRecordService, ReleasedVariableService } from '../service';
+
+export interface GuiContext {
+    readonly configStore: ConfigStore;
+    readonly variableCommunicator: VariableCommunicator;
+    readonly permissionChecker: PermissionChecker;
+    readonly operationRecordService: OperationRecordService;
+    readonly releasedVariableService: ReleasedVariableService;
+    readonly securityChecker: SecurityChecker;
+    readonly videoService: VideoService;
+    readonly weatherService: WeatherService;
+    readonly configureViewId?: number;
+    readonly configureViewCode?: string;
+    dispose();
+}

package/src/gui/gui-host.ts

@@ -0,0 +1,187 @@
+import { Injector, ElementRef } from '@angular/core';
+import { LoggerService, LOGGER_SERVICE_TOKEN } from '../logger';
+import { Size } from '../model';
+import { ConfigIsEmptyError, Disposable } from '../shared';
+import { ViewResizeMode } from '../settings';
+import { ViewService } from '../view/view.service';
+import { GuiContext } from './gui-context';
+import { GuiView } from './gui-view';
+import { map } from 'rxjs/operators';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { GuiOptions } from './interfaces/gui-options';
+import { ViewModel } from '../config';
+
+export class GuiHost implements Disposable {
+
+    private isLoaded: Boolean;
+    private currentView: GuiView;
+    currentViewIndex: number;
+    private containerEl: JQuery;
+    private currentViewSize: Size;
+    private currentViewReiszeMode: ViewResizeMode;
+    private readonly logger: LoggerService;
+
+    constructor(private readonly injector: Injector, private readonly bsModalService: BsModalService, readonly context: GuiContext,
+        private readonly guiOptions: GuiOptions, readonly el: ElementRef) {
+        this.logger = injector.get(LOGGER_SERVICE_TOKEN);
+        const toggleViewFunc = (viewIndex, parentContainerId, baseEl) => {
+            this.currentViewIndex = viewIndex;
+            return this.context.configStore.viewStore.getViewConfig(viewIndex).pipe(map(config => {
+                if (this.currentViewIndex !== viewIndex) { return; }
+                if (!config || !config.config || !config.config.length) {
+                    throw new ConfigIsEmptyError();
+                }
+                if (this.currentView) { this.currentView.dispose(); }
+                this.currentView = new GuiView(this.injector, this.bsModalService, this.context);
+                const hostGuiOptions: GuiOptions = {
+                    svgRootClass: this.guiOptions.svgRootClass,
+                    hostContainerId: parentContainerId,
+                    el: baseEl
+                };
+                this.currentView.load(config, hostGuiOptions);
+                this.currentView.resize(this.currentViewSize, this.currentViewReiszeMode, this.guiOptions.svgRootClass);
+                this.containerEl = $(baseEl.nativeElement).find(`div#${parentContainerId}`).first();
+                this.containerEl.empty();
+                this.containerEl.append(this.currentView.element);
+                this.logger.debug(`[GUI] Toggle View(${viewIndex}) successed.`);
+            }));
+        };
+        injector.get(ViewService).toggleViews.set(el, toggleViewFunc);
+    }
+
+    get element(): HTMLElement {
+        if (this.containerEl) {
+            return this.containerEl[0];
+        } else {
+            throw new Error('Gui Host not loaded yet.');
+        }
+    }
+
+    /**
+     * Load gui host and main view.
+     */
+    load(configureViewId?: number | undefined): Promise<GuiHost> {
+        if (this.isLoaded) { throw new Error('The GuiHost already loaded.'); }
+        this.isLoaded = true;
+        this.containerEl = $(`<div class="svg-content" id= "${this.guiOptions.hostContainerId}" style="display:flex;position:relative;"></div>`);
+        const result = new Promise<GuiHost>((resolve, reject) => {
+            if (configureViewId && configureViewId !== 0) {
+                this.loadViewConfigByConfigureViewId(resolve, reject, configureViewId);
+            } else {
+                this.loadMainViewConfig(resolve, reject);
+            }
+
+        });
+        return result;
+    }
+
+    loadByConfigureViewCode(configureViewCode?: string): Promise<GuiHost> {
+        if (this.isLoaded) { throw new Error('The GuiHost already loaded.'); }
+        this.isLoaded = true;
+        this.containerEl = $(`<div class="svg-content" id= "${this.guiOptions.hostContainerId}" style="display: inline-block;position: relative;"></div>`);
+        const result = new Promise<GuiHost>((resolve, reject) => {
+            if (configureViewCode) {
+                this.loadViewConfigByConfigureViewCode(resolve, reject, configureViewCode);
+            } else {
+                this.loadMainViewConfig(resolve, reject);
+            }
+
+        });
+        return result;
+    }
+
+    private loadMainViewConfig(resolve, reject) {
+        this.context.configStore.viewStore.getMainViewConfig().subscribe(
+            config => {
+                if (config.config && config.config.length) {
+                    this.currentView = new GuiView(this.injector, this.bsModalService, this.context);
+                    this.currentView.load(config, this.guiOptions);
+                    this.containerEl.empty();
+                    this.containerEl.append(this.currentView.element);
+                    resolve(this);
+                    this.logger.debug('[GUI] Host loaded.');
+                } else {
+                    reject(new ConfigIsEmptyError());
+                }
+            }, error => {
+                this.logger.error('[GUI] Load failed: ' + error.stack);
+                reject(error);
+            }
+        );
+    }
+
+    private loadViewConfigByConfigureViewId(resolve, reject, configureViewId: number) {
+        this.context.configStore.viewStore.getViewConfigByConfigureViewId(configureViewId).subscribe(
+            config => {
+                this.handleViewConfigCallback(resolve, reject, config);
+            }, error => {
+                this.logger.error('[GUI] Load failed: ' + error.stack);
+                reject(error);
+            }
+        );
+    }
+
+    private loadViewConfigByConfigureViewCode(resolve, reject, configureViewCode: string) {
+        this.context.configStore.viewStore.getViewConfigByConfigureViewCode(configureViewCode).subscribe(
+            config => {
+                this.handleViewConfigCallback(resolve, reject, config);
+            }, error => {
+                this.logger.error('[GUI] Load failed: ' + error.stack);
+                reject(error);
+            }
+        );
+    }
+
+    private handleViewConfigCallback(resolve, reject, config: ViewModel) {
+        if (!config.config || !config.config.length) {
+            reject(new ConfigIsEmptyError());
+        }
+        this.currentView = new GuiView(this.injector, this.bsModalService, this.context);
+        this.currentView.load(config, this.guiOptions);
+        this.containerEl.empty();
+        this.containerEl.append(this.currentView.element);
+        resolve(this);
+        this.logger.debug('[GUI] Host loaded.');
+    }
+
+    /**
+     * Resize current view
+     * @param size : target view size
+     * @param resizeMode : target resize mode
+     */
+    resizeView(size: Size, resizeMode: ViewResizeMode) {
+        if (this.currentView) {
+            this.currentView.resize(size, resizeMode, this.guiOptions.svgRootClass);
+            this.currentViewSize = size;
+            this.currentViewReiszeMode = resizeMode;
+        }
+    }
+
+    /**
+     * Update current view size;
+     * @param size : target view size
+     */
+    updateViewSize(size: Size) {
+        if (!this.currentView) { return; }
+        this.currentView.resize(size, this.currentViewReiszeMode, this.guiOptions.svgRootClass);
+        this.currentViewSize = size;
+    }
+
+    /**
+     * Resize current view
+     * @param size : target view size
+     * @param resizeMode : target resize mode
+     */
+    updateViewResizeMode(resizeMode: ViewResizeMode) {
+        if (this.currentView) {
+            this.currentView.resize(this.currentViewSize, resizeMode, this.guiOptions.svgRootClass);
+            this.currentViewReiszeMode = resizeMode;
+        }
+    }
+
+    dispose() {
+        if (this.currentView) { this.currentView.dispose(); }
+        if (this.context) { this.context.dispose(); }
+        this.logger.debug('[GUI] GuiHost disposed.');
+    }
+}