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

package/src/config/view/view-store.ts

@@ -0,0 +1,25 @@
+import { Observable } from 'rxjs';
+import { ViewModel } from './view.model';
+
+export interface ViewStore {
+
+    /**
+     * Get config of main view.
+     */
+    getMainViewConfig(): Observable<ViewModel>;
+
+    /**
+     * Get config of view by view index.
+     */
+    getViewConfig(viewIndex: number): Observable<ViewModel>;
+
+    /**
+     * Get config of view by configureViewId.
+     */
+    getViewConfigByConfigureViewId(configureViewId: number): Observable<ViewModel>;
+
+    /**
+     * Get View config by ConfigureViewCode
+     */
+    getViewConfigByConfigureViewCode(configureViewCode: string): Observable<ViewModel>;
+}

package/src/config/view/view.model.ts

@@ -0,0 +1,4 @@
+export class ViewModel {
+    constructor(public readonly config: string) {
+    }
+}

package/src/core/stringifying-map.ts

@@ -0,0 +1,30 @@
+export class StringifyingMap<K, V> {
+
+    private internalMap = new Map<string, V>();
+
+    constructor(private readonly catToString: (k: K) => string) { }
+
+    set(k: K, v: V) {
+        return this.internalMap.set(this.catToString(k), v);
+    }
+
+    get(k: K): V {
+        return this.internalMap.get(this.catToString(k));
+    }
+
+    has(k: K): boolean {
+        return this.internalMap.has(this.catToString(k));
+    }
+
+    delete(k: K) {
+        return this.internalMap.delete(this.catToString(k));
+    }
+
+    get size() {
+        return this.internalMap.size;
+    }
+
+    forEach(callback: (value: V, key: string, map: Map<string, V>) => void, thisArg?: any) {
+        this.internalMap.forEach(callback, thisArg);
+    }
+}

package/src/core/stringifying-set.ts

@@ -0,0 +1,26 @@
+export class StringifyingSet<V> {
+
+    private internalSet = new Set<string>();
+
+    constructor(private readonly catToString: (v: V) => string) { }
+
+    add(v: V) {
+        return this.internalSet.add(this.catToString(v));
+    }
+
+    has(v: V): boolean {
+        return this.internalSet.has(this.catToString(v));
+    }
+
+    delete(v: V) {
+        return this.internalSet.delete(this.catToString(v));
+    }
+
+    get size() {
+        return this.internalSet.size;
+    }
+
+    forEach(callback: (value1: string, value2: string, map: Set<string>) => void, thisArg?: any) {
+        this.internalSet.forEach(callback, thisArg);
+    }
+}

package/src/elements/air-quality/air-quality-element.ts

@@ -0,0 +1,239 @@
+import { Injector } from '@angular/core';
+import { AirQualityModel } from '../../model/air-quality/air-quality.model';
+import { ConditionalDisplayElement } from '../base/conditional-display-element';
+import { PermissionChecker } from '../../service';
+import { VariableCommunicator } from '../../communication/variable';
+import { VariableStore } from '../../config/variable';
+import { WeatherService } from '../../service';
+import * as d3 from 'd3-selection';
+import { AirQualityInfo, AirQuality } from '../../model/air-quality/air-quality-info';
+import { LOCALIZATION, Localization } from '../../localization';
+
+export class AirQualityElement extends ConditionalDisplayElement {
+
+    model: AirQualityModel;
+    timer: any;
+
+    private readonly localization: Localization;
+
+    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.initAirQualityInfo();
+        this.timer = setInterval(() => this.initAirQualityInfo(), 1000 * 60 * 60);
+    }
+
+    dispose() {
+        clearInterval(this.timer);
+    }
+
+    initAirQualityInfo() {
+        this.clear();
+        this.weatherService.getAirQualityInfo().then(airQuality => {
+            const airQualityDto = <AirQualityInfo>airQuality;
+            if (!airQualityDto.supported) {
+                this.handleNotSupported();
+                return;
+            }
+            if (airQualityDto.gettingAddress) {
+                this.handleGettingAddress();
+                return;
+            }
+            if (!airQualityDto.hasAddress) {
+                this.handleNoAddress();
+                return;
+            }
+
+            this.handleData(airQualityDto.airQuality);
+        }).catch(() => {
+            this.handleNotSupported();
+        });
+    }
+
+    private handleData(airQuality: AirQuality) {
+        const fontColor = this.model.stroke ? this.model.stroke : '#FFFFFF';
+        const backgroundColor = this.model.fill && this.model.fill || '#86A7C5';
+        const airQualitySvg = d3.create('svg');
+
+        this.buildBackgroudRect(airQualitySvg, backgroundColor);
+        this.buildLocGroup(airQualitySvg, airQuality.city, fontColor);
+        this.buildAirQualityText(airQualitySvg, 130, 55, airQuality.aqi, fontColor, 53);
+        this.buildAirQualityText(airQualitySvg, 220, 28, '空气质量', fontColor);
+        this.buildRectBackgroundForAqi(airQualitySvg, airQuality.level);
+        this.buildAirQualityText(airQualitySvg, 220, 49, airQuality.category, fontColor);
+
+        this.buildAirQualityText(airQualitySvg, 30, 75, 'PM2.5', fontColor, 12, 0.8);
+        this.buildAirQualityText(airQualitySvg, 30, 95,  airQuality.pm25, fontColor, 15);
+
+        this.buildAirQualityText(airQualitySvg, 80, 75, 'PM10', fontColor, 12, 0.8);
+        this.buildAirQualityText(airQualitySvg, 80, 95,  airQuality.pm10, fontColor, 15);
+
+        this.buildAirQualityText(airQualitySvg, 130, 75, 'NO2', fontColor, 12, 0.8);
+        this.buildAirQualityText(airQualitySvg, 130, 95,  airQuality.no2, fontColor, 15);
+
+        this.buildAirQualityText(airQualitySvg, 175, 75, 'SO2', fontColor, 12, 0.8);
+        this.buildAirQualityText(airQualitySvg, 175, 95,  airQuality.so2, fontColor, 15);
+
+        this.buildAirQualityText(airQualitySvg, 215, 75, 'CO', fontColor, 12, 0.8);
+        this.buildAirQualityText(airQualitySvg, 215, 95,  airQuality.co, fontColor, 15);
+
+        this.buildAirQualityText(airQualitySvg, 250, 75, 'O3', fontColor, 12, 0.8);
+        this.buildAirQualityText(airQualitySvg, 250, 95,  airQuality.o3, fontColor, 15);
+
+        this.appendAirQualitySvg(airQualitySvg);
+    }
+
+    private handleNotSupported() {
+        this.handleUnusualCommon(this.localization.airQualityNotSupport);
+    }
+
+    private handleGettingAddress() {
+        this.handleUnusualCommon(this.localization.airQualityNotAvailable);
+    }
+
+    private handleNoAddress() {
+        this.handleUnusualCommon(this.localization.airQualityNotAddress);
+    }
+
+    private handleUnusualCommon(text: string) {
+        const airQualitySvg = d3.create('svg');
+        this.buildBackgroudRect(airQualitySvg, '#081625', '0.5');
+        this.buildUnusualTipIcon(airQualitySvg, text.length);
+        this.buildUnusualTipText(airQualitySvg, text);
+        this.appendAirQualitySvg(airQualitySvg);
+    }
+
+    private buildBackgroudRect(airQualitySvg: d3.Selection<any, {}, null, undefined>, backgroundColor: string, opacity = '1') {
+        airQualitySvg.append('rect')
+            .attr('x', '0')
+            .attr('y', '0')
+            .attr('rx', '2')
+            .attr('width', '280')
+            .attr('height', '105')
+            .attr('fill', backgroundColor)
+            .attr('fill-opacity', opacity);
+    }
+
+    private buildRectBackgroundForAqi(airQualitySvg: d3.Selection<any, {}, null, undefined>, level: number, opacity = '1') {
+        let backgroundColor;
+        if (level >= 0 && level <= 50) {
+            backgroundColor = '#50DF56';
+        } else if (level >= 51 && level <= 100) {
+            backgroundColor = '#FBCD1C';
+        } else if (level >= 101 && level <= 150) {
+            backgroundColor = '#FF9900';
+        } else if (level >= 151 && level <= 200) {
+            backgroundColor = '#FF3232';
+        } else if (level >= 201 && level <= 300) {
+            backgroundColor = '#F403B5';
+        } else if (level > 300) {
+            backgroundColor = '#A10E0E';
+        }
+
+        airQualitySvg.append('rect')
+            .attr('x', '195')
+            .attr('y', '35')
+            .attr('rx', '5')
+            .attr('width', '50')
+            .attr('height', '20')
+            .attr('fill', backgroundColor)
+            .attr('fill-opacity', opacity);
+    }
+
+    private buildUnusualTipIcon(airQualitySvg: d3.Selection<any, {}, null, undefined>, length: number) {
+        airQualitySvg.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);
+    }
+
+    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 buildUnusualTipText(airQualitySvg: d3.Selection<any, {}, null, undefined>, text: string) {
+        const length = text.length;
+        airQualitySvg.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 buildAirQualityText(airQualitySvg:  d3.Selection<any, {}, null, undefined>, x: number, y: number,
+            text: string, fontColor: string, size = 12, opacity = 1) {
+        airQualitySvg.append('text')
+            .attr('x', x)
+            .attr('y', y)
+            .attr('font-size', size)
+            .attr('text-anchor', 'middle')
+            .attr('fill', fontColor)
+            .attr('opacity', opacity)
+            .text(text);
+    }
+
+    private buildLocGroup(airQualitySvg: d3.Selection<any, {}, null, undefined>, location: string, fontColor: string) {
+        airQualitySvg.append('svg')
+            .attr('x', '14')
+            .attr('y', '10')
+            .attr('width', '11')
+            .attr('height', '15')
+            .attr('viewBox', '0 0 156 200')
+            .append('path')
+            .attr('fill', fontColor)
+            .attr('d', this.getLocPath);
+
+        airQualitySvg.append('text')
+            .attr('x', '30')
+            .attr('y', '22')
+            .attr('font-size', '12')
+            .attr('fill', fontColor)
+            .text(location);
+    }
+
+    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`;
+    }
+
+    private appendAirQualitySvg(airQualitySvg: d3.Selection<any, {}, null, undefined>) {
+        this.rootElement.append(() => airQualitySvg.node());
+    }
+
+    clear() {
+        this.rootElement.selectAll('*').remove();
+    }
+
+}