Changes has been added for the checklist and removed console.log

README.md

@@ -1,33 +1,67 @@
-# Cumulocity device details widget plugin
+# Cumulocity Device Details Widget Plugin [<img width="35" src="https://user-images.githubusercontent.com/67993842/97668428-f360cc80-1aa7-11eb-8801-da578bda4334.png"/>](https://github.com/SoftwareAG/cumulocity-device-details-widget-plugin/releases/download/1.0.0-beta/device-details-runtime-widget-1.0.0-beta.zip)
 
-This Device Details Widget is the Cumulocity module federation plugin created using c8ycli. This plugin can be used in Application Builder or Cockpit. It shows current device details properties in widget.
+This Device Details Widget Plugin is the Cumulocity module federation plugin created using c8ycli. This plugin can be used in Application Builder or Cockpit. This Plugin is designed to display the Device Details can fetch the details from the Api call and can display data according to the fields provided. The angular widget has the ability to summarize information relating to the names from the Api call.
 
-```
-"exports": [
- {
- "name": "Cumulocity Device Details Widget Plugin",
- "module": "GpDeviceDetailsWidgetModule",
- "path": "./widget/gp-device-details-widget.module.ts",
- "description": "Adds a custom widget to the shell application"
- }
-]
-```
+### Please note that this plugin is in currently under BETA mode.
 
-**How to start**
-Run the command below to scaffold a `widget` plugin.
+### Please choose Demo Widget release based on Cumulocity/Application builder version:
 
-```
-c8ycli new <yourPluginName> widget-plugin
-```
+|APPLICATION BUILDER | CUMULOCITY | DEVICE DETAILS WIDGET PLUGIN |
+|--------------------|-------------|-------------------------------|
+| 2.0.x(coming soon) | >= 1016.x.x | 1.x.x | 
+
+
+![Device_Details_1](https://user-images.githubusercontent.com/99970126/181510210-2e16463e-0c57-4048-b458-4253a1c913ec.PNG)
+
+![Device-Details-Config](https://user-images.githubusercontent.com/99970126/188394087-58a3da72-1ae3-4812-8aef-a6afe3a64c9a.png)
+
+
+## Features
+
+## Installation
+
+### Runtime Widget Deployment?
+
+ - This plugin support runtime deployment. Download [Runtime Binary](https://github.com/SoftwareAG/cumulocity-device-details-widget-plugin/releases/download/1.0.0-beta/device-details-runtime-widget-1.0.0-beta.zip) and follow runtime deployment instructions from [here](https://github.com/SoftwareAG/cumulocity-runtime-widget-loader).
 
-As the app.module is a typical Cumuloctiy application, any new plugin can be tested via the CLI:
+## Supported Product Versions
 
+- **App Builder:** Tested with Cumulocity App Builder version 1.3.0
+**Requirements:**
+* Git
+* NodeJS (release builds are currently built with `v14.18.0`)
+* NPM (Included with NodeJS)
+
+**Instructions**
+1. Clone the repository: 
+```
+git clone https://github.com/SoftwareAG/cumulocity-device-details-widget-plugin.git
+```
+2. Change directory: 
+```
+cd cumulocity-device-details-widget-plugin
+```
+3. Install the dependencies: 
+```
+npm install
+```
+4. (Optional) Local development server: 
 ```
 npm start -- --shell cockpit
 ```
+5. Build the app: 
+```
+npm run build
+```
+6. Deploy the app: 
+```
+npm run deploy
+```
+
 
-In the Module Federation terminology, `widget` plugin is called `remote` and the `cokpit` is called `shell`. Modules provided by this `widget` will be loaded by the `cockpit` application at the runtime. This plugin provides a basic custom widget that can be accessed through the `Add widget` menu.
+------------------------------
 
-> Note that the `--shell` flag creates a proxy to the cockpit application and provides` GpDeviceDetailsWidgetModule` as an `remote` via URL options.
+These tools are provided as-is and without warranty or support. They do not constitute part of the Software AG product suite. Users are free to use, fork and modify them, subject to the license agreement. While Software AG welcomes contributions, we cannot guarantee to include every contribution in the master project.
+_____________________
+For more information you can Ask a Question in the [TECH Community Forums](https://tech.forums.softwareag.com/tag/Cumulocity-IoT).
 
-Also deploying needs no special handling and can be simply done via `npm run deploy`. As soon as the application has exports it will be uploaded as a plugin.

package.json

@@ -1,7 +1,7 @@
 {
  "name": "cumulocity-device-details-widget-plugin",
  "version": "1.0.0-beta",
- "description": "This is the Cumulocity module federation plugin. Plugins can be developed like any Cumulocity application, but can be used at runtime by other applications. Therefore, they export an Angular module which can then be imported by any other application. The exports are defined in `package.json`:",
+ "description": "This is the Cumulocity module federation plugin. This Plugins is designed to display the Device Details can fetch the details from the Api call and can display data according to the fields provided. The angular widget has the ability to summarize information relating to the names from the Api call.",
  "scripts": {
  "start": "c8ycli server --env.beta=true",
  "build": "c8ycli build --env.mode=production",
@@ -78,7 +78,7 @@
  "name": "Cumulocity Device Details Widget Plugin",
  "module": "GpDeviceDetailsWidgetModule",
  "path": "./widget/gp-device-details-widget.module.ts",
- "description": "Adds a custom widget to the shell application"
+ "description": "This Plugins is designed to display the Device Details can fetch the details from the Api call and can display data according to the fields provided. The angular widget has the ability to summarize information relating to the names from the Api call."
  }
  ],
  "remotes": {

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

@@ -29,20 +29,6 @@
  <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>
 
@@ -53,13 +39,4 @@
  </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.ts

@@ -18,7 +18,6 @@
 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',
@@ -27,11 +26,6 @@ import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 
 export class GpDeviceDetailsWidgetConfigComponent implements OnInit {
  @Input() config: any = {};
-
- // stateCtrl = new UntypedFormControl();
- // myForm = new UntypedFormGroup({
- // state: this.stateCtrl
- // });
  propertiesToDisplay: any[] = [];
 
  constructor(private deviceDetailsService: GpDeviceDetailsWidgetService) { }
@@ -75,10 +69,9 @@ export class GpDeviceDetailsWidgetConfigComponent implements OnInit {
  "uomTypeId": "UOM-003",
  "uomTypeDes": "Each"
  }
+ configDevice = null;
 
  ngOnInit() {
- // this.toDotNotation(this.deviceDetail);
- // this.extractKeysFromObject(this.deviceDetail);
  if (!this.config.propList) {
  this.config.propList = [{ label: '', value: '' }];
  }
@@ -87,14 +80,20 @@ export class GpDeviceDetailsWidgetConfigComponent implements OnInit {
  }
  }
 
+ ngDoCheck(): void {
+ if(this.config.device && this.config.device.id !== this.configDevice){
+ this.configDevice = this.config.device.id;
+ this.getDeviceData();
+ }
+ }
+
  async getDeviceData() {
  if (this.config.deviceDetailsUrl && this.config.mainListName) {
  this.deviceDetailsService.getDeviceDataByID(this.config)
  .then((response) => response.json())
  .then((data) => {
  this.extractKeysFromObject(data[this.config.mainListName]);
  });
- //this.propertiesToDisplay = [];
  }
  }
 

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

@@ -69,10 +69,6 @@ export class GpDeviceDetailsWidgetComponent implements OnInit {
  });
  if (this.config) {
  this.mainList = this.config.mainListName;
- /* this.deviceDataColumnName = this.config.tableColumnNames.split(',');
- // tslint:disable-next-line: no-unused-expression
- (this.deviceDataColumnName);
- this.deviceDataColumnvalues = this.config.tableColumnValues.split(',');*/
  }
  }
  getDeviceDetails() {

widget/gp-device-details-widget.service.ts

@@ -17,7 +17,6 @@
 */
 import { Injectable } from '@angular/core';
 import { InventoryService, IdentityService, IResultList, IManagedObject } from '@c8y/client';
-import { HttpClient } from '@angular/common/http';
 
 @Injectable({providedIn: "root"})
 export class GpDeviceDetailsWidgetService {
@@ -63,7 +62,6 @@ export class GpDeviceDetailsWidgetService {
  }
  async getDeviceData(config) {
  const inventory = await this.inventory.detail(config.device.id);
- //const inventory = await this.inventory.detail('00010238');
  this.response = inventory.data;
  if ((this.response.hasOwnProperty('c8y_IsDevice')) || (this.response.hasOwnProperty('c8y_IsAsset'))) {
  this.deviceExternalId = await this.getExternalId(config.device.id);
@@ -92,9 +90,8 @@ export class GpDeviceDetailsWidgetService {
  }
 
  async getDeviceDataByID(config) {
- // let deviceExternalID = await this.getExternalIdForDevice(config);
- let deviceDetailsURL = config.deviceDetailsUrl + '00001246';
- // return this.http.get(deviceDetailsURL);
+ let deviceExternalID = await this.getExternalIdForDevice(config);
+ let deviceDetailsURL = config.deviceDetailsUrl + deviceExternalID;
  return fetch(deviceDetailsURL);
  }
 }