Add files via upload

widget/gp-device-details-widget-config/gp-device-details-widget-config.component.css

@@ -0,0 +1,13 @@
+.btn-danger-custom {
+ color: #e0000e;
+ background-color: #fff;
+ border-color: #e0000e;
+}
+
+::ng-deep .dropdown-menu {
+ min-width: 62% !important;
+ }
+
+ ::ng-deep typeahead-container {
+ width: 100% !important;
+ }

widget/gp-device-details-widget-config/gp-device-details-widget-config.component.html

@@ -0,0 +1,65 @@
+<div class="row">
+ <div class="col-sm-12">
+ <label translate>Device Details URL</label>
+ <input type="text" name="config.deviceDetailsUrl" class="form-control" style="width:100%" [(ngModel)]="config.deviceDetailsUrl"
+ (ngModelChange)="getDeviceData()">
+ </div>
+ <div class="col-sm-12">
+ <label translate>Name of the Main document List from API</label>
+ <input type="text" name="config.mainListName" class="form-control" style="width:100%" [(ngModel)]="config.mainListName" (ngModelChange)="getDeviceData()">
+ </div>
+ <div class="col-sm-12" style="margin-top: 15px;margin-bottom: 10px;">
+ <label>Properties : </label>
+ <a class="btn btn-default btn-xs" (click)="addProperty()" style="margin-left: 10px; height: 18px;">
+ <i c8y-icon="plus" class="dlt-c8y-icon-plus" style="margin: 1px;"></i>
+ Add property
+ </a>
+ </div>
+ <div class="col-sm-12" style="display: flex;padding: 0px;"
+ *ngFor="let property of config.propList; let i = index">
+ <div class="col-sm-5 form-group" style="display: flex;align-items: center;">
+ <label>Label</label>
+ <input type="text" [(ngModel)]="property.label" class="form-control"
+ style="margin-left:10px; width:75%;border-radius: 4px;">
+ </div>
+
+ <div class="col-sm-6 form-group" style="display:flex;align-items: center;">
+ <label>Property</label>
+
+ <select [(ngModel)]="property.value" style="margin-left:10px; width: 75%; height: auto;">
+ <option *ngFor="let key of propertiesToDisplay" [ngValue]="key">{{key}}</option>
+ </select> 
+
+ <!-- <ng-select placeholder="Select Property"
+ [(ngModel)]="property.value" style="margin-left:10px; width: 75%; height: auto;">
+ <ng-option *ngFor="let key of propertiesToDisplay" [value]="key">{{key}}</ng-option>
+ </ng-select> -->
+
+ <!-- <form [formGroup]="myForm" style="margin-left:10px; height: 33px;">
+ <input 
+ formControlName="property.value" style="width: 100%;"
+ [typeahead]="propertiesToDisplay"
+ [typeaheadMinLength]="0"
+ class="form-control">
+ </form> -->
+
+
+ </div>
+
+ <div class="col-sm-1">
+ <button type="button" class="btn btn-danger-custom btn-xs pull-right" title="Delete property"
+ (click)="removeProperty(i)" style="margin-top: 8px;">
+ <i c8y-icon="times" class="dlt-c8y-icon-times"></i>
+ </button>
+ </div>
+ </div>
+ <!-- <div class="form-group">
+ <label translate>Enter the Row values (comma separated e.g: ID,)</label>
+ <input type="text" name="config.tableColumnNames" style="width:100%" [(ngModel)]="config.tableColumnNames">
+ </div>
+
+ <div class="form-froup">
+ <label translate>Enter the Row Names from API (comma separated e.g: id,)</label>
+ <input type="text" name="config.tableColumnValues" style="width:100%" [(ngModel)]="config.tableColumnValues">
+ </div> -->
+</div>

widget/gp-device-details-widget-config/gp-device-details-widget-config.component.spec.ts

@@ -0,0 +1,41 @@
+/*
+* 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GpDeviceDetailsWidgetConfigComponent } from './gp-device-details-widget-config.component';
+
+describe('GpDeviceDetailsWidgetConfigComponent', () => {
+ let component: GpDeviceDetailsWidgetConfigComponent;
+ let fixture: ComponentFixture<GpDeviceDetailsWidgetConfigComponent>;
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ GpDeviceDetailsWidgetConfigComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(GpDeviceDetailsWidgetConfigComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

widget/gp-device-details-widget-config/gp-device-details-widget-config.component.ts

@@ -0,0 +1,128 @@
+/*
+* 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 } from '@angular/core';
+import { Observable } from 'rxjs';
+import { GpDeviceDetailsWidgetService } from '../gp-device-details-widget.service';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+@Component({
+ selector: 'lib-gp-device-details-widget-config',
+ templateUrl: './gp-device-details-widget-config.component.html',
+ styleUrls: ['./gp-device-details-widget-config.component.css']
+})
+
+export class GpDeviceDetailsWidgetConfigComponent implements OnInit {
+ @Input() config: any = {};
+
+ // stateCtrl = new UntypedFormControl();
+ // myForm = new UntypedFormGroup({
+ // state: this.stateCtrl
+ // });
+ propertiesToDisplay: any[] = [];
+
+ constructor(private deviceDetailsService: GpDeviceDetailsWidgetService) { }
+ deviceDetail = {
+ "id": "00010238",
+ "parentDeviceId": "",
+ "deviceCategoryId": "DEV-CAT-004",
+ "deviceCategoryDescription": "Vending Machine",
+ "modelId": "00001",
+ "modelDescription": "MD76782",
+ "serialNumber": "SRN-66378949",
+ "customerId": "CUST01001",
+ "customerName": "Alexander Tucker",
+ "personnelId": "Personnel-1001",
+ "personnelName": "REFPER-001. Patrick Jones",
+ "monitoring": {
+ "repairCount": 9,
+ "failureCount": 9
+ },
+ "deviceStatusId": "DEV-STAT-111",
+ "deviceStatusDes": "Status OK, Inventory OK",
+ "productId": "PROD01041",
+ "productName": "Coil Vending Machine",
+ "locationId": "LOC01001",
+ "location": "London",
+ "manufactureDate": "2015-05-01T01:00:00+0200",
+ "manufacturerId": "MNFR_011",
+ "manufacturerName": "Terra Manufacturers",
+ "runTime": 2160.0,
+ "plannedDowntime": 600.0,
+ "netTime": 2000.0,
+ "oeePercent": 86.9,
+ "runningPercent": 95.2,
+ "failurePrediction": 95.43,
+ "unplannedDowntime": 172.2,
+ "unitsProduced": 2573.0,
+ "maxCapacity": 3200.2,
+ "numberOfStops": 2,
+ "predictedDowntime": 570.0,
+ "nextScheduledMaintenance": "2022-10-21T07:42:27+0200",
+ "uomTypeId": "UOM-003",
+ "uomTypeDes": "Each"
+ }
+
+ ngOnInit() {
+ // this.toDotNotation(this.deviceDetail);
+ // this.extractKeysFromObject(this.deviceDetail);
+ if (!this.config.propList) {
+ this.config.propList = [{ label: '', value: '' }];
+ }
+ if (this.config.device && this.config.deviceDetailsUrl && this.config.mainListName) {
+ this.getDeviceData();
+ }
+ }
+
+ async getDeviceData() {
+ if (this.config.deviceDetailsUrl && this.config.mainListName) {
+ (await this.deviceDetailsService.getDeviceDataByID(this.config)).subscribe((data) => {
+ this.extractKeysFromObject(data[this.config.mainListName]);
+ });
+ //this.propertiesToDisplay = [];
+ }
+ }
+
+ async extractKeysFromObject(jsonObject) {
+ let dottedJSON = await this.toDotNotation(jsonObject);
+ for (let key in dottedJSON) {
+ this.propertiesToDisplay.push(key);
+ }
+ }
+
+ toDotNotation(obj, res = {}, current = '') {
+ for (const key in obj) {
+ let value = obj[key];
+ let newKey = (current ? current + "." + key : key); // joined key with dot
+ if (value && typeof value === "object") {
+ this.toDotNotation(value, res, newKey); // it's a nested object, so do it again
+ } else {
+ res[newKey] = value; // it's not an object, so set the property
+ }
+ }
+ return res;
+ }
+
+ removeProperty(i) {
+ if (this.config.propList.length > 1) {
+ this.config.propList.splice(i, 1);
+ }
+ }
+
+ addProperty() {
+ this.config.propList.push({ label: '', value: '' });
+ }
+}