NOISSUE - Remove and-jsoneditor and use custom one (absmach#16)

* NOISSUE - Remove and-jsoneditor and use custom one Signed-off-by: Manuel Imperiale <manuel.imperiale@gmail.com> * NOISSUE - Remove error message if message reader is not running Signed-off-by: Manuel Imperiale <manuel.imperiale@gmail.com>
mteodor · Dec 13, 2019 · a90ca60 · a90ca60
1 parent 2c63288
commit a90ca60
Show file tree

Hide file tree

Showing 12 changed files with 60 additions and 65 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,7 +47,6 @@
     "@nebular/eva-icons": "4.1.0",
     "@nebular/security": "4.1.0",
     "@nebular/theme": "^4.5.0",
-    "ang-jsoneditor": "^1.8.4",
     "angular-tree-component": "7.2.0",
     "angular2-chartjs": "0.4.1",
     "angular2-toaster": "^7.0.0",

diff --git a/src/app/auth/auth.token.interceptor.service.ts b/src/app/auth/auth.token.interceptor.service.ts
@@ -49,6 +49,7 @@ export class TokenInterceptor implements HttpInterceptor {
             if (err instanceof HttpErrorResponse &&
               !request.url.startsWith(environment.writerChannelsUrl) &&
               !request.url.startsWith(environment.readerChannelsUrl) &&
+              !request.url.startsWith(environment.readerVersionUrl) &&
               !request.url.startsWith(environment.bootstrapUrl) &&
               (err.status === 403 || err.status === 504)) {
               localStorage.removeItem('auth_app_token');

diff --git a/src/app/pages/things/channels/details/channels.details.component.html b/src/app/pages/things/channels/details/channels.details.component.html
@@ -12,6 +12,23 @@
       </nb-card-body>
     </nb-card>
 
+    <nb-card status="primary" size="small">
+      <nb-card-header>
+        Metadata
+        <button (click)="onEdit()" nbButton status="success" size="tiny">
+          Edit
+        </button>
+      </nb-card-header>
+      <nb-card-body style="padding: 0px;">
+        <textarea class="form-control"
+                  [ngModel]="channel.metadata | json"
+                  (ngModelChange)="editorMetadata=$event">
+        </textarea>
+      </nb-card-body>
+    </nb-card>
+  </div>
+
+  <div class="col-md-6">
     <nb-card size="small" status="info">
       <nb-card-header>
         Connection
@@ -32,7 +49,6 @@
           </div>
         </div>
       </nb-card-body>
-
       <nb-card-body>
         <div class="row">
           <div class="col-3">Connect to: </div>
@@ -56,20 +72,4 @@
       </nb-card-body>
     </nb-card>
   </div>
-
-  <div class="col-md-6">
-    <nb-card status="primary" size="large">
-      <nb-card-header>
-        Metadata
-        <button (click)="onEdit()" nbButton status="success" size="tiny">
-          Edit
-        </button>
-      </nb-card-header>
-      <nb-card-body style="padding: 0;">
-        <json-editor [options]="editorOptions"
-                     [data]="channel.metadata">
-        </json-editor>
-      </nb-card-body>
-    </nb-card>
-  </div>
 </div>
diff --git a/src/app/pages/things/channels/details/channels.details.component.scss b/src/app/pages/things/channels/details/channels.details.component.scss
@@ -17,6 +17,7 @@ button {
   margin-left: 10px;
 }
 
-json-editor {
-   padding: 0;
+textarea {
+  width: 100%;
+  height: 100%;
 }
diff --git a/src/app/pages/things/channels/details/channels.details.component.ts b/src/app/pages/things/channels/details/channels.details.component.ts
@@ -1,42 +1,36 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { ThingsService } from 'app/common/services/things/things.service';
 import { ChannelsService } from 'app/common/services/channels/channels.service';
 import { NotificationsService } from 'app/common/services/notifications/notifications.service';
 import { Channel } from 'app/common/interfaces/mainflux.interface';
 
-import { JsonEditorComponent, JsonEditorOptions } from 'ang-jsoneditor';
 
 @Component({
   selector: 'ngx-channels-details-component',
   templateUrl: './channels.details.component.html',
   styleUrls: ['./channels.details.component.scss'],
 })
 export class ChannelsDetailsComponent implements OnInit {
-  channel: Channel = {
-    name: '',
-    metadata: {},
-  };
+  offset = 0;
+  limit = 20;
+
+  channel: Channel = {};
 
   connections: Array<{name: string, id: string}> = [];
 
   things = [];
   selectedThings = [];
 
-  offset = 0;
-  limit = 20;
+  editorMetadata = '';
 
-  editorOptions: JsonEditorOptions;
-  @ViewChild(JsonEditorComponent, { static: true }) editor: JsonEditorComponent;
   constructor(
     private route: ActivatedRoute,
     private thingsService: ThingsService,
     private channelsService: ChannelsService,
     private notificationsService: NotificationsService,
-  ) {
-    this.editorOptions = new JsonEditorOptions();
-  }
+  ) {}
 
   ngOnInit() {
     const id = this.route.snapshot.paramMap.get('id');
@@ -67,7 +61,13 @@ export class ChannelsDetailsComponent implements OnInit {
   }
 
   onEdit() {
-    this.channel.metadata = this.editor.get();
+    try {
+      this.channel.metadata = JSON.parse(this.editorMetadata);
+    } catch (e) {
+      this.notificationsService.error('Wrong metadata format', '');
+      return;
+    }
+
     this.channelsService.editChannel(this.channel).subscribe(
       resp => {
         this.notificationsService.success('Channel metadata successfully edited', '');

diff --git a/src/app/pages/things/devices/details/devices.details.component.html b/src/app/pages/things/devices/details/devices.details.component.html
@@ -20,10 +20,11 @@
           Edit
         </button>
       </nb-card-header>
-      <nb-card-body style="padding: 0;">
-        <json-editor [options]="editorOptions"
-                     [data]="thing.metadata">
-        </json-editor>
+      <nb-card-body style="padding: 0px;">
+        <textarea class="form-control"
+                  [ngModel]="thing.metadata | json"
+                  (ngModelChange)="editorMetadata=$event">
+        </textarea>
       </nb-card-body>
     </nb-card>
 

diff --git a/src/app/pages/things/devices/details/devices.details.component.scss b/src/app/pages/things/devices/details/devices.details.component.scss
@@ -17,6 +17,7 @@ button {
   margin-left: 10px;
 }
 
-json-editor {
-   padding: 0;
+textarea {
+  width: 100%;
+  height: 100%;
 }
diff --git a/src/app/pages/things/devices/details/devices.details.component.ts b/src/app/pages/things/devices/details/devices.details.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { ThingsService } from 'app/common/services/things/things.service';
@@ -7,7 +7,6 @@ import { MessagesService } from 'app/common/services/messages/messages.service';
 import { NotificationsService } from 'app/common/services/notifications/notifications.service';
 import { Thing } from 'app/common/interfaces/mainflux.interface';
 
-import { JsonEditorComponent, JsonEditorOptions } from 'ang-jsoneditor';
 
 @Component({
   selector: 'ngx-devices-details-component',
@@ -26,17 +25,16 @@ export class DevicesDetailsComponent implements OnInit {
   messages = [];
   selectedChannels = [];
 
-  editorOptions: JsonEditorOptions;
-  @ViewChild(JsonEditorComponent, { static: true }) editor: JsonEditorComponent;
+  editorMetadata = '';
+
+
   constructor(
     private route: ActivatedRoute,
     private thingsService: ThingsService,
     private channelsService: ChannelsService,
     private messagesService: MessagesService,
     private notificationsService: NotificationsService,
-  ) {
-    this.editorOptions = new JsonEditorOptions();
-  }
+  ) {}
 
   ngOnInit() {
     const id = this.route.snapshot.paramMap.get('id');
@@ -75,7 +73,13 @@ export class DevicesDetailsComponent implements OnInit {
   }
 
   onEdit() {
-    this.thing.metadata = this.editor.get();
+    try {
+      this.thing.metadata = JSON.parse(this.editorMetadata);
+    } catch (e) {
+      this.notificationsService.error('Wrong metadata format', '');
+      return;
+    }
+
     this.thingsService.editThing(this.thing).subscribe(
       resp => {
         this.notificationsService.success('Device metadata successfully edited', '');

diff --git a/src/app/pages/things/opcua/opcua.component.ts b/src/app/pages/things/opcua/opcua.component.ts
@@ -42,14 +42,12 @@ export class OpcuaComponent implements OnInit {
         },
       },
       serverURI: {
-        width: '20%',
         title: 'Server URI',
         editable: true,
         addable: true,
         filter: true,
       },
       nodeID: {
-        width: '20%',
         title: 'Node ID',
         editable: true,
         addable: true,

diff --git a/src/app/pages/things/things.module.ts b/src/app/pages/things/things.module.ts
@@ -25,15 +25,13 @@ import { GatewaysInfoComponent } from 'app/pages/things/gateways/details/info/ga
 import { GatewaysConfigComponent } from 'app/pages/things/gateways/details/config/gateways.config.component';
 import { GatewaysXtermComponent } from 'app/pages/things/gateways/details/xterm/gateways.xterm.component';
 
-import { NgJsonEditorModule } from 'ang-jsoneditor';
 
 @NgModule({
   imports: [
     ThingsRoutingModule,
     PagesModule,
     NbCardModule,
     NbButtonModule,
-    NgJsonEditorModule,
     NbSelectModule,
     FormsModule,
   ],

diff --git a/src/app/shared/map/leaflet/map.leaflet.component.ts b/src/app/shared/map/leaflet/map.leaflet.component.ts
@@ -54,13 +54,13 @@ export class MapComponent implements OnChanges {
     private mqttService: MqttService,
   ) {
     this.versionService.getReaderVersion().subscribe(
-      () => {
+      resp => {
         this.msgServiceON = true;
-      }, err => {
+      },
+      err => {
         this.msgServiceON = false;
-        this.notificationsService.error('Gateways configuration not available',
-          `Error: ${err.status} - ${err.statusTexts}`);
-      });
+      },
+    );
   }
 
   addMarker(lon, lat, gw: Gateway) {