Add files via upload

widget/gp-devices-at-risk-widget-config/gp-devices-at-risk-widget-config.component.css

@@ -0,0 +1,7 @@
+.cdk-overlay-conatiner
+{
+ z-index: 1100 !important;
+}
+.cdk-overlay-container, .cdk-overlay-pane {
+ z-index: 9999 !important;
+}

widget/gp-devices-at-risk-widget-config/gp-devices-at-risk-widget-config.component.html

@@ -0,0 +1,66 @@
+
+<div class="form-group">
+
+ <label>Table settings
+ <span title="Properties selected are displayed."><i class="fa fa-question-circle"></i></span>
+ </label>
+ <ng-container>
+ <label>Table Inputs </label>
+ <ng-container>
+ <ng-select [items]="propertiesToDisplay" [multiple]="true" bindLabel="name" bindValue="id" [closeOnSelect]="false"
+ [(ngModel)]="config.selectedInputs" (ngModelChange)="onColChange()" placeHolder='select Table Fields'>
+ <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
+ <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected" /> {{item.name}}
+ </ng-template>
+ </ng-select>
+ </ng-container>
+ <div class="form-group">
+ <label translate>Default PageSize</label>
+ <input class="form-control" type="number" min="1" name="config.pageSize" style="width:50%"
+ [(ngModel)]="config.pageSize">
+ </div>
+ <div class="config-accordion" *ngIf="appId">
+ <button class="btn btn-default input-width" (click)="isExpandedDBS = !isExpandedDBS" type="button">
+ <div class="pull-left float-left">Dashboard Navigation Settings
+ </div>
+ <span class="float-right pull-right"><i *ngIf="isExpandedDBS" class="fa fa-caret-up"></i>
+ <i *ngIf="!isExpandedDBS" class="fa fa-caret-down"></i></span>
+ </button>
+ <div class="config-accordion" id="isExpandedDBS" *ngIf="isExpandedDBS">
+ <div class="row" *ngFor="let dashboard of config.dashboardList;let i = index">
+ <div class="col-sm-12" *ngIf="dashboard.type">
+ <div class="col-sm-3">
+ <ng-select [items]="deviceTypes" bindLabel="type" [closeOnSelect]="false" [searchable]="true"
+ placeholder="Select Device Type" appendTo="body" (change)="addNewRecord(i)" bindValue="type"
+ [(ngModel)]="dashboard.type">
+ </ng-select>
+ </div>
+ <div class="col-sm-3">
+ <input type="text" id="dashboarId{{i}}" class="form-control input-width" placeholder="Dashbaord ID"
+ [(ngModel)]="dashboard.dashboarId">
+ </div>
+ <div class="col-sm-3">
+ <div class="btn-group device-list-switch-toggle ">
+ <label class="c8y-switch ">
+ <input type="checkbox" id="withTabGroup{{i}}" [checked]="dashboard.withTabGroup"
+ [(ngModel)]="dashboard.withTabGroup">
+ <span></span> DeviceId as TabGroup
+ </label>
+ </div>
+ </div>
+ <div class="col-sm-3" *ngIf="!dashboard.withTabGroup">
+ <input type="text" id="tabGroupID{{i}}" class="form-control input-width"
+ placeholder="TabGroup ID(Optional)" [(ngModel)]="dashboard.tabGroupID">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- <div class="form-group">
+ <label title="DarkMode" class="c8y-checkbox" style="height: 60px;">
+ <input type="checkbox" value="false" [(ngModel)]="config.darkMode">
+ <span></span>
+ <span>Dark Mode</span>
+ </label>
+ </div> -->

widget/gp-devices-at-risk-widget-config/gp-devices-at-risk-widget-config.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GpDevicesAtRiskWidgetConfigComponent } from './gp-devices-at-risk-widget-config.component';
+
+describe('GpDevicesAtRiskWidgetConfigComponent', () => {
+ let component: GpDevicesAtRiskWidgetConfigComponent;
+ let fixture: ComponentFixture<GpDevicesAtRiskWidgetConfigComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ GpDevicesAtRiskWidgetConfigComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(GpDevicesAtRiskWidgetConfigComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

widget/gp-devices-at-risk-widget-config/gp-devices-at-risk-widget-config.component.ts

@@ -0,0 +1,105 @@
+/*
+* Copyright (c) 2020 Software AG, Darmstadt, Germany and/or its licensors
+*
+* SPDX-License-Identifier: Apache-2.0
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+import { Component, OnInit, Input, ViewEncapsulation, isDevMode, DoCheck} from '@angular/core';
+import { GpDevicesAtRiskWidgetService } from '../gp-devices-at-risk-widget.service';
+export interface DashboardConfig {
+ type?: any;
+ dashboarId?: string;
+ tabGroupID?: string;
+ tabGroup?: boolean;
+}
+@Component({
+ selector: 'lib-gp-devices-at-risk-widget-config',
+ templateUrl: './gp-devices-at-risk-widget-config.component.html',
+ styleUrls: ['./gp-devices-at-risk-widget-config.component.css'],
+ encapsulation: ViewEncapsulation.None
+})
+
+export class GpDevicesAtRiskWidgetConfigComponent implements OnInit, DoCheck {
+ propertiesToDisplay: any[];
+ selected: any[] = [];
+ dashboardList: DashboardConfig[] = [];
+ isExpandedDBS = false;
+ deviceTypes = null;
+ appId = null;
+ configDevice = null;
+ constructor(private deviceListService: GpDevicesAtRiskWidgetService) { }
+ @Input() config: any = {};
+ ngOnInit() {
+ // this.propertiesToDisplay = ['id', 'name', 'alarms', 'externalid', 'firmware', 'availability'];
+
+ this.propertiesToDisplay = [
+ { id: 'id', name: 'ID' },
+ { id: 'name', name: 'Device Name' },
+ { id: 'alarms', name: 'Alarms' },
+ { id: 'externalid', name: 'External Id'},
+ {id: 'firmware', name: 'Firmware'},
+ {id: 'availability', name: 'Availability' }
+ ];
+ this.appId = this.deviceListService.getAppId();
+ if (!this.config.dashboardList && this.appId) {
+ const dashboardObj: DashboardConfig = {};
+ dashboardObj.type = 'All';
+ this.dashboardList.push(dashboardObj);
+ this.config.dashboardList = this.dashboardList;
+ }
+ // this.getAllDevices();
+ // if (!this.config.device) {
+ // this.config.device = {};
+ // }
+ if (!this.config.device) {
+ this.config.device = {};
+ } else {
+ this.configDevice = this.config.device.id;
+ if (this.appId) {
+ this.getAllDevices(this.configDevice);
+ }
+ }
+ if (this.config.withTabGroup === undefined) {
+ this.config.withTabGroup = false;
+ }
+ }
+ ngDoCheck(): void {
+ if (this.config.device && this.config.device.id && this.config.device.id !== this.configDevice) {
+ this.configDevice = this.config.device.id;
+ this.getAllDevices(this.configDevice);
+ }
+ }
+
+ onColChange() {
+ this.selected = this.config.selectedInputs;
+ }
+ private getAllDevices(deviceId: string) {
+ const deviceList: any = null;
+ this.deviceListService.getAllDevices(deviceId,1, deviceList)
+ .then((deviceFound) => {
+ this.deviceTypes = Array.from(new Set(deviceFound.data.map(item => item.type)));
+ this.deviceTypes = this.deviceTypes.filter(n => n);
+ })
+ .catch((err) => {
+ if (isDevMode()) { console.log('+-+- ERROR while getting ALL devices ', err); }
+ });
+ }
+ addNewRecord(currentIndex) {
+ if ((currentIndex + 1) === this.config.dashboardList.length) {
+ const dashboardObj: DashboardConfig = {};
+ dashboardObj.type = 'All';
+ this.config.dashboardList.push(dashboardObj);
+ }
+ }
+}