From 2cab0e91f0c5854448d1b823ca3c5b7a2faae447 Mon Sep 17 00:00:00 2001 From: sagIoTPower Date: Tue, 1 Aug 2023 17:08:45 +0200 Subject: [PATCH] redesign page with outbound mappings --- .../src/mqtt-mapping/core/mapping.service.ts | 18 ++- .../mqtt-mapping/grid/mapping.component.html | 134 ++++++++---------- .../mqtt-mapping/grid/mapping.component.ts | 59 ++++++-- .../mapping-subscription.component.html | 1 + 4 files changed, 123 insertions(+), 89 deletions(-) diff --git a/mqtt-mapping-ui/mqtt-mapping/src/mqtt-mapping/core/mapping.service.ts b/mqtt-mapping-ui/mqtt-mapping/src/mqtt-mapping/core/mapping.service.ts index 97cdbc44..558a965c 100644 --- a/mqtt-mapping-ui/mqtt-mapping/src/mqtt-mapping/core/mapping.service.ts +++ b/mqtt-mapping-ui/mqtt-mapping/src/mqtt-mapping/core/mapping.service.ts @@ -19,7 +19,7 @@ * @authors Christof Strack */ import { Injectable } from "@angular/core"; -import { FetchClient, IFetchResponse, InventoryService, QueriesUtil } from "@c8y/client"; +import { FetchClient, IFetchResponse, IIdentified, InventoryService, QueriesUtil } from "@c8y/client"; import * as _ from "lodash"; import { BehaviorSubject } from "rxjs"; import { BrokerConfigurationService } from "../../mqtt-configuration/broker-configuration.service"; @@ -129,6 +129,22 @@ export class MappingService { return m; } + async deleteSubscriptions(device: IIdentified): Promise { + let response = this.client.fetch( + `${BASE_URL}/${PATH_SUBSCRIPTION_ENDPOINT}/${device.id}`, + { + headers: { + "content-type": "application/json", + }, + method: "DELETE", + } + ); + let data = await response; + if (!data.ok) throw new Error(data.statusText)!; + let m = await data.text(); + return m; + } + async getSubscriptions(): Promise { if (!this._feature) { this._feature = await this.configurationService.getFeatures(); diff --git a/mqtt-mapping-ui/mqtt-mapping/src/mqtt-mapping/grid/mapping.component.html b/mqtt-mapping-ui/mqtt-mapping/src/mqtt-mapping/grid/mapping.component.html index e4394192..e2076e5a 100644 --- a/mqtt-mapping-ui/mqtt-mapping/src/mqtt-mapping/grid/mapping.component.html +++ b/mqtt-mapping-ui/mqtt-mapping/src/mqtt-mapping/grid/mapping.component.html @@ -58,96 +58,80 @@ {{ "Manage subscriptions" | translate }} -
-
+
+
-
- - - -
-
- - - - - - Device: {{ sub.id }} - {{ sub.name }} - - +
+
+

+

+ No mappings available.
+ Add a new mapping by clicking below.
+ +

+
+
-
-
-

-

- No mappings available.
- Add a new mapping by clicking below.
- -

+
+
+
+ +
+
-
-
- - -
+
+
+ +
+
-
-
- - -
+
+
+ +
diff --git a/mqtt-mapping-ui/mqtt-mapping/src/mqtt-mapping/grid/mapping.component.ts b/mqtt-mapping-ui/mqtt-mapping/src/mqtt-mapping/grid/mapping.component.ts index a2d7e68b..ff87fd00 100644 --- a/mqtt-mapping-ui/mqtt-mapping/src/mqtt-mapping/grid/mapping.component.ts +++ b/mqtt-mapping-ui/mqtt-mapping/src/mqtt-mapping/grid/mapping.component.ts @@ -100,7 +100,8 @@ export class MappingComponent implements OnInit { editorMode: EditorMode.UPDATE, direction: Direction.INBOUND, }; - title: string = `Mapping List ${this.stepperConfiguration.direction}`; + titleMapping: string; + titleSubsription: string = `Subscription on devices for mapping OUTBOUND`; displayOptions: DisplayOptions = { bordered: true, @@ -109,10 +110,10 @@ export class MappingComponent implements OnInit { gridHeader: true, }; - columns: Column[] = [ + columnsMappings: Column[] = [ { name: "id", - header: "#", + header: "System ID", path: "id", filterable: false, dataType: ColumnDataType.TextShort, @@ -188,6 +189,23 @@ export class MappingComponent implements OnInit { }, ]; + columnsSubscriptions: Column[] = [ + { + name: "id", + header: "System ID", + path: "id", + filterable: false, + dataType: ColumnDataType.TextShort, + visible: true, + }, + { + header: "Name", + name: "name", + path: "name", + filterable: true, + }, + ]; + value: string; mappingType: MappingType; destroy$: Subject = new Subject(); @@ -197,7 +215,8 @@ export class MappingComponent implements OnInit { pageSize: 3, currentPage: 1, }; - actionControls: ActionControl[] = []; + actionControlMapping: ActionControl[] = []; + actionControlSubscription: ActionControl[] = []; constructor( public mappingService: MappingService, @@ -214,33 +233,32 @@ export class MappingComponent implements OnInit { : Direction.OUTBOUND; if (this.stepperConfiguration.direction == Direction.OUTBOUND) { - this.columns[1] = { + this.columnsMappings[1] = { header: "Publish Topic", name: "publishTopic", path: "publishTopic", filterable: true, gridTrackSize: "12.5%", - } - this.columns[2] = { + }; + this.columnsMappings[2] = { header: "Template Topic Sample", name: "templateTopicSample", path: "templateTopicSample", filterable: true, gridTrackSize: "12.5%", - } + }; } + this.titleMapping = `Mapping ${this.stepperConfiguration.direction}`; this.loadSubscriptions(); } - - async loadSubscriptions () { + + async loadSubscriptions() { this.subscription = await this.mappingService.getSubscriptions(); } ngOnInit() { - this.title = `Mapping List ${this.stepperConfiguration.direction}`; - this.loadMappings(); - this.actionControls.push( + this.actionControlMapping.push( { type: BuiltInActionType.Edit, callback: this.updateMapping.bind(this), @@ -256,6 +274,10 @@ export class MappingComponent implements OnInit { callback: this.deleteMapping.bind(this), } ); + this.actionControlSubscription.push({ + type: BuiltInActionType.Delete, + callback: this.deleteSubscription.bind(this), + }); this.mappingService.listToReload().subscribe(() => { this.loadMappings(); @@ -354,6 +376,17 @@ export class MappingComponent implements OnInit { this.showConfigMapping = true; } + async deleteSubscription(device: IIdentified) { + console.log("Delete device", device); + try { + await this.mappingService.deleteSubscriptions(device); + this.alertService.success(gettext("Subscription for this device deleted successfully")); + this.loadSubscriptions(); + } catch (error) { + this.alertService.danger(gettext("Failed to delete subscription:") + error); + } + } + updateMapping(mapping: Mapping) { if (!mapping.direction) this.stepperConfiguration.direction = Direction.INBOUND; diff --git a/mqtt-mapping-ui/mqtt-mapping/src/mqtt-mapping/subscription/mapping-subscription.component.html b/mqtt-mapping-ui/mqtt-mapping/src/mqtt-mapping/subscription/mapping-subscription.component.html index af78b6e6..74b55900 100644 --- a/mqtt-mapping-ui/mqtt-mapping/src/mqtt-mapping/subscription/mapping-subscription.component.html +++ b/mqtt-mapping-ui/mqtt-mapping/src/mqtt-mapping/subscription/mapping-subscription.component.html @@ -34,6 +34,7 @@

(onSelected)="selectionChanged($event)" [config]="{ groupsSelectable: false, + showUnassignedDevices:true, multi: true, search: true }"