Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
fixed issue with filtering and some layout tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
CaribouJohn committed Jul 27, 2021
1 parent 65e5da8 commit 0d61d1e
Show file tree
Hide file tree
Showing 4 changed files with 111 additions and 79 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "device-control-widget",
"version": "1.0.9",
"version": "1.0.13",
"description": "",
"main": "index.js",
"scripts": {
Expand Down
1 change: 1 addition & 0 deletions src/device-control-widget/device-control-widget.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
.device-control-widget-container {
display: grid;
justify-content: center;
width: 90%;
}

.small-icon {
Expand Down
146 changes: 82 additions & 64 deletions src/device-control-widget/device-control-widget.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,97 @@
<div class="device-control-widget-container">

<div class="row form-inline">
<div class="col-lg-4 input-group">
<label for="assetfilter">filter </label>
<input class="form-control" id="assetfilter" />
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<label for="assetfilter">filter </label>
<input class="form-control" #assetfilter />
</div>
</div>
<div class="col-lg-4 form-check-inline">
<label class="form-check-label" for="showrisk" translate>
<input class="form-check-input" type="checkbox" name="showrisk"
[(ngModel)]="widgetHelper.getWidgetConfig().atRisk" (change)="updateDeviceStates()" /> at risk Only<span class="help-icon">
</span>
</label>
<div class="col-lg6">
<div class="form-check-inline">
<label class="form-check-label" for="showrisk" translate>
<input class="form-check-input" type="checkbox" name="showrisk"
[(ngModel)]="widgetHelper.getWidgetConfig().atRisk" (change)="updateDeviceStates()" />
at risk Only
</label>
</div>
</div>
</div>
<!-- <div class="row form-inline">
<div class="col-lg-4 input-group">
<label for="assetfilter">filter </label>
<input class="form-control" #assetfilter />
</div>
<div class="col-lg-4 form-check-inline">
<label class="form-check-label" for="showrisk" translate>
<input class="form-check-input" type="checkbox" name="showrisk"
[(ngModel)]="widgetHelper.getWidgetConfig().atRisk" (change)="updateDeviceStates()" /> at risk Only<span class="help-icon">
</span>
</label>
</div>
</div> -->





<div class="grid-container">
<div class=" grid-item" *ngFor="let mo of widgetHelper.getWidgetConfig().filteredAssets">
<a *ngIf="widgetHelper.getWidgetConfig().dashboardUrl(mo) else justimage"
href="{{widgetHelper.getWidgetConfig().dashboardUrl(mo)}}">
<img
[ngStyle]='{height:widgetHelper.getWidgetConfig().imageHeight(),width:widgetHelper.getWidgetConfig().imageWidth()}'
[src]="widgetHelper.getWidgetConfig().deviceIcon(mo.name) | SafeImage"
alt="Device"
title="{{mo.name}}">
</a>
<ng-template #justimage>
<img [ngStyle]='{height:widgetHelper.getWidgetConfig().imageHeight(),width:widgetHelper.getWidgetConfig().imageWidth()}'
[src]="widgetHelper.getWidgetConfig().deviceIcon(mo.name) | SafeImage"
alt="Device"
title="{{mo.name}}">
</ng-template>
<span class=" grid-element">
{{mo.name}}
</span>
<ng-container *ngIf="widgetHelper.getWidgetConfig().showAvailability">
<!--widgetHelper.getWidgetConfig().operationIcon('heartbeat')-->
<span
[ngClass]="['grid-element badge badge-pill',widgetHelper.getWidgetConfig().deviceStatus(mo)]">
{{widgetHelper.getWidgetConfig().deviceStatusLabel(mo)}}
</span>
</ng-container>
<ng-container *ngIf="widgetHelper.getWidgetConfig().showAlarms">
<span
[ngClass]="['grid-element grid-element badge badge-pill',widgetHelper.getWidgetConfig().alarmStatus(mo)]">
{{widgetHelper.getWidgetConfig().getAlarmCount(mo)}} alarms
<div class="row">
<div class="col-lg-12 grid-container">
<div class=" grid-item" *ngFor="let mo of widgetHelper.getWidgetConfig().filteredAssets">
<a *ngIf="widgetHelper.getWidgetConfig().dashboardUrl(mo) else justimage"
href="{{widgetHelper.getWidgetConfig().dashboardUrl(mo)}}">
<img
[ngStyle]='{height:widgetHelper.getWidgetConfig().imageHeight(),width:widgetHelper.getWidgetConfig().imageWidth()}'
[src]="widgetHelper.getWidgetConfig().deviceIcon(mo.name) | SafeImage"
alt="Device"
title="{{mo.name}}">
</a>
<ng-template #justimage>
<img [ngStyle]='{height:widgetHelper.getWidgetConfig().imageHeight(),width:widgetHelper.getWidgetConfig().imageWidth()}'
[src]="widgetHelper.getWidgetConfig().deviceIcon(mo.name) | SafeImage"
alt="Device"
title="{{mo.name}}">
</ng-template>
<span class=" grid-element">
{{mo.name}}
</span>
</ng-container>
<ng-container *ngIf="widgetHelper.getWidgetConfig().showOperations">
<div class="button-col">
<div *ngFor="let op of widgetHelper.getWidgetConfig().selectedToggles">
<label class="c8y-switch">
<input type="checkbox"
[checked]="mo[op.source]"
(change)="performOperation(mo,op)">
<span></span>{{op.name}}
</label>
<ng-container *ngIf="widgetHelper.getWidgetConfig().showAvailability">
<!--widgetHelper.getWidgetConfig().operationIcon('heartbeat')-->
<span
[ngClass]="['grid-element badge badge-pill',widgetHelper.getWidgetConfig().deviceStatus(mo)]">
{{widgetHelper.getWidgetConfig().deviceStatusLabel(mo)}}
</span>
</ng-container>
<ng-container *ngIf="widgetHelper.getWidgetConfig().showAlarms">
<span
[ngClass]="['grid-element grid-element badge badge-pill',widgetHelper.getWidgetConfig().alarmStatus(mo)]">
{{widgetHelper.getWidgetConfig().getAlarmCount(mo)}} alarms
</span>
</ng-container>
<ng-container *ngIf="widgetHelper.getWidgetConfig().showOperations">
<div class="button-col">
<div *ngFor="let op of widgetHelper.getWidgetConfig().selectedToggles">
<label class="c8y-switch">
<input type="checkbox"
[checked]="mo[op.source]"
(change)="performOperation(mo,op)">
<span></span>{{op.name}}
</label>
</div>
</div>
</div>
<div class="button-row">
<div *ngFor="let op of widgetHelper.getWidgetConfig().selectedOperations">
<button *ngIf="widgetHelper.getWidgetConfig().validOperation(mo,op)"
style="color:#1776BF;"
type="button"
class="button"
(click)="performOperation(mo,op)"
title="{{op.name}}">
<span [ngClass]="widgetHelper.getWidgetConfig().operationIcon(op)"></span>
</button>
<div class="button-row">
<div *ngFor="let op of widgetHelper.getWidgetConfig().selectedOperations">
<button *ngIf="widgetHelper.getWidgetConfig().validOperation(mo,op)"
style="color:#1776BF;"
type="button"
class="button"
(click)="performOperation(mo,op)"
title="{{op.name}}">
<span [ngClass]="widgetHelper.getWidgetConfig().operationIcon(op)"></span>
</button>
</div>
</div>
</div>
</ng-container>
</ng-container>
</div>
</div>
</div>
</div>
41 changes: 27 additions & 14 deletions src/device-control-widget/device-control-widget.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
* @format
*/

import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { OperationService, OperationStatus, IOperation, IManagedObject, InventoryService } from '@c8y/client';
import { WidgetHelper } from "./widget-helper";
import { WidgetConfig, DeviceOperation } from "./widget-config";
Expand All @@ -37,8 +37,14 @@ export class DeviceControlWidget implements OnDestroy, OnInit {

widgetHelper: WidgetHelper<WidgetConfig>;
@Input() config;

@ViewChild('assetfilter', { static: true }) filterInput: ElementRef;

private timerObs: Observable<number>;
private subs: Subscription[] = [];
public input$ = new Subject<string | null>();



constructor(private operations: OperationService, private inventoryService: InventoryService, private alertService: AlertService) {
}
Expand All @@ -48,9 +54,9 @@ export class DeviceControlWidget implements OnDestroy, OnInit {
this.updateDeviceStates(); //all devices
this.timerObs = interval(60000);
this.subs.push(this.timerObs.subscribe(t => {
this.updateDeviceStates();
this.updateDeviceStates(true);
}));
this.subs.push(fromEvent(document.getElementById('assetfilter'), 'keyup')
this.subs.push(fromEvent(this.filterInput.nativeElement, 'keyup')
.pipe(
debounceTime(200),
map((e: any) => e.target.value),
Expand Down Expand Up @@ -137,24 +143,31 @@ export class DeviceControlWidget implements OnDestroy, OnInit {
this.subs.forEach(s => s.unsubscribe());
}

async updateDeviceStates(): Promise<void> {
async updateDeviceStates(makeCall: boolean = false): Promise<void> {
//here we just update the objects to refect their current state.
let ids: string[] = this.widgetHelper.getWidgetConfig().assets.map(mo => mo.id);
this.widgetHelper.getWidgetConfig().assets = await this.widgetHelper.getDevices(this.inventoryService, ids);
if (makeCall) {
this.widgetHelper.getWidgetConfig().assets = await this.widgetHelper.getDevices(this.inventoryService, ids);
}

//console.log("UPDATE", this.widgetHelper.getWidgetConfig().assets, this.widgetHelper.getWidgetConfig().atRisk, this.widgetHelper.getWidgetConfig().deviceFilter);
//filter names and at risk


//filter at risk
this.widgetHelper.getWidgetConfig().filteredAssets = this.widgetHelper.getWidgetConfig().assets.filter(mo => {
//console.log("MO", mo);
if (!this.widgetHelper.getWidgetConfig().atRisk) {
return true; //allow all
}
return this.deviceAtRisk(mo);
});

//filter names
this.widgetHelper.getWidgetConfig().filteredAssets = this.widgetHelper.getWidgetConfig().filteredAssets.filter(mo => {
if (this.widgetHelper.getWidgetConfig().deviceFilter === '') {
//console.log("FILTER EMPTY - RISK", mo, this.deviceAtRisk(mo));
return !this.widgetHelper.getWidgetConfig().atRisk || this.deviceAtRisk(mo);
return true;
}
//console.log("NAME", mo.name.toLowerCase(), "FILTER", this.widgetHelper.getWidgetConfig().deviceFilter.toLowerCase(), "RISK", this.deviceAtRisk(mo));
let filterByName = mo.name.toLowerCase().includes(this.widgetHelper.getWidgetConfig().deviceFilter.toLowerCase());
return filterByName || (this.widgetHelper.getWidgetConfig().atRisk && this.deviceAtRisk(mo));
return mo.name.toLowerCase().includes(this.widgetHelper.getWidgetConfig().deviceFilter.toLowerCase());
});
//console.log("FILTERED UPDATE", this.widgetHelper.getWidgetConfig().filteredAssets);

this.widgetHelper.getWidgetConfig().filteredAssets = this.widgetHelper.getWidgetConfig().filteredAssets.sort((a, b) => a.name.localeCompare(b.name));
return;
Expand All @@ -176,7 +189,7 @@ export class DeviceControlWidget implements OnDestroy, OnInit {
//other elements to check - connected?
if (_.has(mo, "c8y_Connection")) {
let s = mo["c8y_Availability"].status;
r = s == "DISCONNECTED";
r = r || s == "DISCONNECTED";
}


Expand Down

0 comments on commit 0d61d1e

Please sign in to comment.