various code improvements + simplifications (#1754)

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -34,7 +34,7 @@ body:
       description: |
         Please provide the relevant logs showing the error that occurred.
 
-        * Keep this short. Do not paste in hundereds of lines repeating the same error.
+        * Keep this short. Do not paste in hundreds of lines repeating the same error.
         * Show the logs from the service being restarted until the error occurs.
     validations:
       required: false
@@ -91,7 +91,7 @@ body:
     validations:
       required: true
   - type: checkboxes
-    id: 
+    id:
     attributes:
       label: Environment Info
       options:

.github/ISSUE_TEMPLATE/support-request.yml

@@ -8,7 +8,7 @@ body:
         Please read the following before you start filling out this form:
         
         * If your issue is specific to a certain plugin, create the issue on that plugin's GitHub project page instead.
-        * Support via GitHub issues is limited. You may find it more benefitial ask questions on the [Homebridge Discord](https://discord.gg/kqNCe2D) or [Reddit](https://www.reddit.com/r/homebridge/) communities instead.
+        * Support via GitHub issues is limited. You may find it more beneficial ask questions on the [Homebridge Discord](https://discord.gg/kqNCe2D) or [Reddit](https://www.reddit.com/r/homebridge/) communities instead.
         * Search through existing issues (resolved or open) which might provide a solution to your problem already.
         * Aim to find a descriptive and precise title for your support request.
   - type: textarea
@@ -33,7 +33,7 @@ body:
       description: |
         Please provide the relevant logs showing the error that occurred.
 
-        * Keep this short. Do not paste in hundereds of lines repeating the same error.
+        * Keep this short. Do not paste in hundreds of lines repeating the same error.
         * Show the logs from the service being restarted until the error occurs.
     validations:
       required: false
@@ -90,7 +90,7 @@ body:
     validations:
       required: true
   - type: checkboxes
-    id: 
+    id:
     attributes:
       label: Environment Info
       options:
@@ -119,4 +119,4 @@ body:
       description: |
         If you are running on a Raspberry Pi, please tell us which model Raspberry Pi you are using.
     validations:
-      required: false
+      required: false

CHANGELOG.md

@@ -16,6 +16,7 @@ All notable changes to homebridge-config-ui-x will be documented in this file.
 - update github release workflow (#1746)
 - ui lint sort imports and exports (#1750)
 - update lang sync - remove old translations (#1751)
+- various code improvements + simplifications (#1754)
 
 ## 4.52.3 (2023-11-14)
 

test/e2e/backup.e2e-spec.ts

@@ -148,7 +148,7 @@ describe('BackupController (e2e)', () => {
       await fs.writeFile(path.resolve(configService.instanceBackupPath, backupFileName), 'xyz');
     }
 
-    // do a sanity check before hand
+    // do a sanity check beforehand
     const backupsBeforeCleanup = await fs.readdir(configService.instanceBackupPath);
     expect(backupsBeforeCleanup).toHaveLength(10);
 
@@ -223,7 +223,7 @@ describe('BackupController (e2e)', () => {
     // save the backup to disk
     await fs.writeFile(tempBackupPath, downloadBackup.rawPayload);
 
-    // create multi-part form
+    // create multipart form
     const payload = new FormData();
     payload.append('backup.tar.gz', await fs.readFile(tempBackupPath));
 
@@ -249,7 +249,7 @@ describe('BackupController (e2e)', () => {
     expect(await fs.pathExists(pluginsJson)).toBe(true);
     expect(await fs.pathExists(infoJson)).toBe(true);
 
-    // mark the "homebridge-mock-plugin" dummy plugin as public so we can test the mock install
+    // mark the "homebridge-mock-plugin" dummy plugin as public, so we can test the mock install
     const installedPlugins = (await fs.readJson(pluginsJson)).map(x => {
       x.publicPackage = true;
       return x;

test/e2e/config-editor.e2e-spec.ts

@@ -115,7 +115,7 @@ describe('ConfigEditorController (e2e)', () => {
       await fs.writeFile(path.resolve(backupFilePath, backupFileName), 'xyz');
     }
 
-    // do a sanity check before hand
+    // do a sanity check beforehand
     const backupsBeforeCleanup = await fs.readdir(backupFilePath);
     expect(backupsBeforeCleanup).toHaveLength(11);
 
@@ -867,7 +867,7 @@ describe('ConfigEditorController (e2e)', () => {
 
     // there is a race condition here whereby we might read the backup file
     // path before the deletion has actually happened, causing the test to fail,
-    // so I have added a 1 second delay.
+    // so I have added a 1-second delay.
     await new Promise((resolve) => setTimeout(resolve, 1000));
 
     const backups = await fs.readdir(backupFilePath);

test/e2e/server.e2e-spec.ts

@@ -157,7 +157,7 @@ describe('ServerController (e2e)', () => {
     expect(res.statusCode).toBe(200);
   });
 
-  it('PUT /server/reset-cached-accessories (service mode disabed)', async () => {
+  it('PUT /server/reset-cached-accessories (service mode disabled)', async () => {
     // enable service mode
     configService.serviceMode = false;
 

ui/src/app/app.component.ts

@@ -8,8 +8,6 @@ import { SettingsService } from '@/app/core/settings.service';
   templateUrl: './app.component.html',
 })
 export class AppComponent {
-  public langdir = 'ltr';
-
   constructor(
     router: Router,
     translate: TranslateService,
@@ -49,18 +47,14 @@ export class AppComponent {
       'he',
     ];
 
-    // which langs should use RTL
+    // which longs should use RTL
     const rtlLanguages = [
       'he',
     ];
 
     // watch for lang changes
     translate.onLangChange.subscribe(() => {
-      if (rtlLanguages.includes(translate.currentLang)) {
-        $settings.rtl = true;
-      } else {
-        $settings.rtl = false;
-      }
+      $settings.rtl = rtlLanguages.includes(translate.currentLang);
     });
 
     const browserLang = languages.find(x => x === translate.getBrowserLang() || x === translate.getBrowserCultureLang());

ui/src/app/core/accessories/accessories.service.ts

@@ -3,7 +3,6 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { ServiceType } from '@oznu/hap-client';
 import { ToastrService } from 'ngx-toastr';
 import { Subject } from 'rxjs';
-import { ApiService } from '../api.service';
 import { AuthService } from '../auth/auth.service';
 import { IoNamespace, WsService } from '../ws.service';
 import { ServiceTypeX } from './accessories.interfaces';
@@ -45,7 +44,6 @@ export class AccessoriesService {
     public $toastr: ToastrService,
     private $ws: WsService,
     public $auth: AuthService,
-    private $api: ApiService,
   ) { }
 
   /**

ui/src/app/core/auth/auth.service.ts

@@ -100,7 +100,7 @@ export class AuthService {
     if (!this.$jwtHelper.isTokenExpired(this.token, this.$settings.serverTimeOffset)) {
       const expires = dayjs(this.$jwtHelper.getTokenExpirationDate(this.token));
       const timeout = expires.diff(dayjs().add(this.$settings.serverTimeOffset, 's'), 'millisecond');
-      // setTimeout only accepts a 32bit integer, if the number is larger than this, do not timeout
+      // setTimeout only accepts a 32bit integer, if the number is larger than this, do not time out
       if (timeout <= 2147483647) {
         this.logoutTimer = setTimeout(async () => {
           if (this.$settings.formAuth === false) {

ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts

@@ -385,7 +385,7 @@ export class CustomPluginsComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * Called when a other-form type is updated
+   * Called when an other-form type is updated
    */
   formUpdated(data) {
     this.iframe.contentWindow.postMessage({
@@ -408,7 +408,7 @@ export class CustomPluginsComponent implements OnInit, OnDestroy {
   /**
    * Fired when a custom form is cancelled or submitted
    *
-   * @param action
+   * @param formEvent
    */
   formActionEvent(formEvent: 'cancel' | 'submit') {
     this.iframe.contentWindow.postMessage({

ui/src/app/core/manage-plugins/manual-plugin-config-modal/manual-plugin-config-modal.component.scss

@@ -1,7 +1,7 @@
 ::ng-deep {
   .no-padding-card-body {
     .card-body {
-      padding: 0px 0px 0px 0px !important;
+      padding: 0 0 0 0 !important;
     }
   }
 }

ui/src/app/core/terminal.service.ts

@@ -1,5 +1,5 @@
 import { ElementRef, Injectable } from '@angular/core';
-import { Subject, Subscription } from 'rxjs';
+import { Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { ITerminalOptions, Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';

ui/src/app/core/ws.service.ts

@@ -33,7 +33,7 @@ export class WsService {
       const io: IoNamespace = this.namespaceConnectionCache[namespace];
       io.connected = new Subject();
 
-      // broadcast to sbuscribers that the connection is ready
+      // broadcast to subscribers that the connection is ready
       setTimeout(() => {
         if (io.socket.connected) {
           io.connected.next(undefined);
@@ -58,7 +58,7 @@ export class WsService {
       const io = this.establishConnectionToNamespace(namespace);
       io.connected = new Subject();
 
-      // wait for the connection and broadcase when ready
+      // wait for the connection and broadcast when ready
       io.socket.on('connect', () => {
         io.connected.next(undefined);
       });

ui/src/app/modules/config-editor/config-editor.component.ts

@@ -30,7 +30,7 @@ export class ConfigEditorComponent implements OnInit, OnDestroy {
     automaticLayout: true,
   };
 
-  private editorDecoractions = [];
+  private editorDecorations = [];
   public monacoEditorModel: NgxEditorModel;
 
   private lastHeight: number;
@@ -72,7 +72,7 @@ export class ConfigEditorComponent implements OnInit, OnDestroy {
       uri: window['monaco'] ? window['monaco'].Uri.parse('a://homebridge/config.json') : undefined,
     };
 
-    //  if monaco is not loaded yet, wait for it, otherwise setup the editor now
+    //  if monaco is not loaded yet, wait for it, otherwise set up the editor now
     if (!window['monaco']) {
       this.$monacoEditor.readyEvent.subscribe({
         next: () => {
@@ -109,7 +109,7 @@ export class ConfigEditorComponent implements OnInit, OnDestroy {
 
     // hide decorations
     if (this.monacoEditor) {
-      this.editorDecoractions = this.monacoEditor.deltaDecorations(this.editorDecoractions, []);
+      this.editorDecorations = this.monacoEditor.deltaDecorations(this.editorDecorations, []);
     }
 
     this.saveInProgress = true;
@@ -239,7 +239,7 @@ export class ConfigEditorComponent implements OnInit, OnDestroy {
             // update the editor
             if (this.monacoEditor && window['editor'].modifiedEditor) {
               // remove all decorations
-              this.editorDecoractions = this.monacoEditor.deltaDecorations(this.editorDecoractions, []);
+              this.editorDecorations = this.monacoEditor.deltaDecorations(this.editorDecorations, []);
 
               // remove existing config
               this.monacoEditor.executeEdits('beautifier', [
@@ -344,15 +344,15 @@ export class ConfigEditorComponent implements OnInit, OnDestroy {
           matchRange.endColumn,
         );
 
-        this.editorDecoractions = this.monacoEditor.deltaDecorations(this.editorDecoractions, [
+        this.editorDecorations = this.monacoEditor.deltaDecorations(this.editorDecorations, [
           { range, options: { isWholeLine: true, linesDecorationsClassName: 'hb-monaco-editor-line-error' } },
         ]);
       }
     }, 200);
   }
 
   /**
-   * Setup a json schema object used to check the config against
+   * Set up a json schema object used to check the config against
    */
   setMonacoEditorModel() {
     if (window['monaco'].languages.json.jsonDefaults.diagnosticsOptions.schemas.some(x => x.uri === 'http://homebridge/config.json')) {
@@ -483,7 +483,7 @@ export class ConfigEditorComponent implements OnInit, OnDestroy {
               platforms: {
                 type: 'array',
                 description: 'Plugins that expose a "Platform" should have there config entered in this array.' +
-                  '\nSeperate each plugin config block using a comma.',
+                  '\nSeparate each plugin config block using a comma.',
                 items: {
                   type: 'object',
                   required: ['platform'],
@@ -525,7 +525,7 @@ export class ConfigEditorComponent implements OnInit, OnDestroy {
               accessories: {
                 type: 'array',
                 description: 'Plugins that expose a "Accessory" should have there config entered in this array.' +
-                  '\nSeperate each plugin config block using a comma.',
+                  '\nSeparate each plugin config block using a comma.',
                 items: {
                   type: 'object',
                   required: ['accessory', 'name'],

ui/src/app/modules/login/login.guard.ts

@@ -27,7 +27,7 @@ export class LoginGuard implements CanActivate {
     }
 
     if (this.$settings.env.setupWizardComplete === false) {
-      // redirect to setup wizard page
+      // redirect to set up wizard page
       this.$router.navigate(['/setup']);
       return false;
     }

ui/src/app/modules/platform-tools/docker/startup-script/startup-script.component.ts

@@ -5,7 +5,6 @@ import { NgxEditorModel } from 'ngx-monaco-editor';
 import { ToastrService } from 'ngx-toastr';
 import { ApiService } from '@/app/core/api.service';
 import { MobileDetectService } from '@/app/core/mobile-detect.service';
-import { MonacoEditorService } from '@/app/core/monaco-editor.service';
 import { SettingsService } from '@/app/core/settings.service';
 
 @Component({
@@ -35,7 +34,6 @@ export class StartupScriptComponent implements OnInit, OnDestroy {
     private $settings: SettingsService,
     private $api: ApiService,
     private $md: MobileDetectService,
-    private $monacoEditor: MonacoEditorService,
     public $toastr: ToastrService,
     private translate: TranslateService,
     private $route: ActivatedRoute,

ui/src/app/modules/platform-tools/linux/linux-routing.module.ts

@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { LinuxComponent } from './linux.component';
 import { RestartLinuxComponent } from './restart-linux/restart-linux.component';
 import { ShutdownLinuxComponent } from './shutdown-linux/shutdown-linux.component';
 

ui/src/app/modules/platform-tools/linux/linux.module.ts

@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { CoreModule } from '../../../../app/core/core.module';
 import { LinuxRoutingModule } from './linux-routing.module';
 import { LinuxComponent } from './linux.component';
 import { RestartLinuxComponent } from './restart-linux/restart-linux.component';
 import { ShutdownLinuxComponent } from './shutdown-linux/shutdown-linux.component';
+import { CoreModule } from '@/app/core/core.module';
 
 @NgModule({
   declarations: [

ui/src/app/modules/plugins/plugins.component.scss

@@ -1,15 +1,14 @@
 .hb-npm-search {
   outline: none;
   box-sizing: inherit !important;
-  border: 1px solid #d0d0d0;
   background-color: inherit;
   height: 50px !important;
   width: 100%;
   border-width: 0.5px;
   padding: 10px;
   margin-bottom: 15px;
 
-  
+
   @media (hover: hover) {
     &:hover {
       border: 1px solid #000000;

ui/src/app/modules/plugins/plugins.component.ts

@@ -26,7 +26,6 @@ export class PluginsComponent implements OnInit, OnDestroy {
   });
 
   public loading = true;
-  public searchQuery: string;
   private navigationSubscription;
 
   constructor(

ui/src/app/modules/restart/restart.component.ts

@@ -24,7 +24,6 @@ export class RestartComponent implements OnInit, OnDestroy {
   error: any = false;
 
   public uiOnline = false;
-  public homebridgeOnline = false;
 
   constructor(
     private $api: ApiService,