UI: DeviceConnectivitySettings refactored to ts Record, added responsivness for exstrasmall screens

ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html

@@ -89,7 +89,7 @@
           <mat-slide-toggle class="mat-slide" formControlName="enabled">
             {{ 'admin.device-connectivity.' + protocol | translate }}
           </mat-slide-toggle>
-          <div class="tb-form-row no-border no-padding tb-standard-fields">
+          <div class="tb-form-row column-xs no-border no-padding tb-standard-fields">
             <mat-form-field fxFlex>
               <mat-label translate>admin.device-connectivity.host</mat-label>
               <input matInput formControlName="host"/>

ui-ngx/src/app/modules/home/pages/admin/general-settings.component.ts

@@ -20,7 +20,12 @@ import { AppState } from '@core/core.state';
 import { PageComponent } from '@shared/components/page.component';
 import { Router } from '@angular/router';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { AdminSettings, DeviceConnectivitySettings, GeneralSettings } from '@shared/models/settings.models';
+import {
+  AdminSettings,
+  DeviceConnectivityProtocol,
+  DeviceConnectivitySettings,
+  GeneralSettings
+} from '@shared/models/settings.models';
 import { AdminService } from '@core/http/admin.service';
 import { HasConfirmForm } from '@core/guards/confirm-on-exit.guard';
 
@@ -37,7 +42,7 @@ export class GeneralSettingsComponent extends PageComponent implements HasConfir
   deviceConnectivitySettingsForm: UntypedFormGroup;
   private deviceConnectivitySettings: AdminSettings<DeviceConnectivitySettings>;
 
-  protocol = 'http';
+  protocol: DeviceConnectivityProtocol = 'http';
 
   constructor(protected store: Store<AppState>,
               private router: Router,

ui-ngx/src/app/shared/models/settings.models.ts

@@ -87,39 +87,16 @@ export interface GeneralSettings {
   baseUrl: string;
 }
 
-export interface DeviceConnectivitySettings {
-  http: {
-    enabled: boolean;
-    host: string;
-    port: number;
-  },
-  https: {
-    enabled: boolean;
-    host: string;
-    port: number;
-  },
-  mqtt: {
-    enabled: boolean;
-    host: string;
-    port: number;
-  },
-  mqtts: {
-    enabled: boolean;
-    host: string;
-    port: number;
-  },
-  coap: {
-    enabled: boolean;
-    host: string;
-    port: number;
-  },
-  coaps: {
-    enabled: boolean;
-    host: string;
-    port: number;
-  }
+export type DeviceConnectivityProtocol = 'http' | 'https' | 'mqtt' | 'mqtts' | 'coap' | 'coaps';
+
+export interface DeviceConnectivityInfo {
+  enabled: boolean;
+  host: string;
+  port: number;
 }
 
+export type DeviceConnectivitySettings = Record<DeviceConnectivityProtocol, DeviceConnectivityInfo>;
+
 export interface UserPasswordPolicy {
   minimumLength: number;
   minimumUppercaseLetters: number;