UI: apply formatting

ui/.vscode/settings.json

@@ -5,16 +5,6 @@
     "i18n-ally.localesPaths": "src/assets/i18n",
     "i18n-ally.dirStructure": "file",
     "i18n-ally.keystyle": "nested",
-    "formatFiles.excludedFolders": [
-        "node_modules",
-        ".vscode",
-        ".git",
-        "dist",
-        ".chrome",
-        ".angular",
-        "target"
-    ],
-    "formatFiles.excludePattern": "**/{*.svg,*.png,*.ico,package-lock.json}",
     "files.watcherExclude": {
         "**/.git/objects/**": true,
         "**/node_modules/**": true
@@ -24,12 +14,37 @@
     "editor.defaultFormatter": "dbaeumer.vscode-eslint",
     "eslint.format.enable": true,
     "[typescript]": {
-        "editor.defaultFormatter": "vscode.typescript-language-features"
+        "editor.defaultFormatter": "vscode.typescript-language-features",
+        "editor.codeActionsOnSave": {
+            "source.organizeImports": "explicit",
+            "source.removeUnusedImports": "explicit"
+        }
     },
     "[jsonc]": {
         "editor.defaultFormatter": "vscode.json-language-features"
     },
     "[json]": {
         "editor.defaultFormatter": "vscode.json-language-features"
-    }
+    },
+    "[javascript]": {
+        "editor.defaultFormatter": "vscode.typescript-language-features"
+    },
+    "[html]": {
+        "editor.defaultFormatter": "vscode.html-language-features"
+    },
+    "[scss]": {
+        "editor.defaultFormatter": "vscode.css-language-features"
+    },
+    "Workspace_Formatter.excludePattern": [
+        "**/build",
+        "**/.*",
+        "**/.vscode",
+        "**/target",
+        "*.js",
+        "*.xml",
+        "*.js.map",
+        "**/node_modules",
+        "*.svg",
+        "*.scss"
+    ]
 }

ui/README.md

@@ -114,4 +114,4 @@ ngOnDestroy() {
 ```
 
 #### Debugging Angular PWA Via USB-Connection
-Please follow this: https://medium.com/nerd-for-tech/google-chrome-how-to-inspect-websites-on-mobile-devices-804677f863ce
+Please follow this: https://medium.com/nerd-for-tech/google-chrome-how-to-inspect-websites-on-mobile-devices-804677f863ce

ui/android/app/build.gradle

@@ -9,7 +9,7 @@ android {
     defaultConfig {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 20240900
+        versionCode 2024090000
         versionName "2024.9.0-SNAPSHOT"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
@@ -85,4 +85,4 @@ try {
     }
 } catch(Exception e) {
     logger.info("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
-}
+}

ui/android/keystore.properties

@@ -1,4 +1,4 @@
 storePassword=Halelilu4
 keyPassword=Halelilu4
 keyAlias=key1
-storeFile=./../../key.jks
+storeFile=./../../key.jks

ui/android/settings.gradle

@@ -2,4 +2,4 @@ include ':app'
 include ':capacitor-cordova-android-plugins'
 project(':capacitor-cordova-android-plugins').projectDir = new File('./capacitor-cordova-android-plugins/')
 
-apply from: 'capacitor.settings.gradle'
+apply from: 'capacitor.settings.gradle'

ui/android/variables.gradle

@@ -13,4 +13,4 @@ ext {
     androidxJunitVersion = '1.1.5'
     androidxEspressoCoreVersion = '3.5.1'
     cordovaAndroidVersion = '10.1.1'
-}
+}

ui/angular.json

@@ -220,4 +220,4 @@
       "styleext": "scss"
     }
   }
-}
+}

ui/e2e/tsconfig.json

@@ -9,4 +9,4 @@
       "node"
     ]
   }
-}
+}

ui/karma.conf.js

@@ -31,7 +31,7 @@ module.exports = function (config) {
       dir: require('path').join(__dirname, './coverage/ngv'),
       subdir: '.',
       reporters: [
-        {type: 'lcov'},
+        { type: 'lcov' },
         { type: 'html' },
         { type: 'text-summary' }
       ],

ui/ngsw-config.json

@@ -24,4 +24,4 @@
       }
     }
   ]
-}
+}

ui/src/app/app-routing.module.ts

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 import { environment } from 'src/environments';
-
 import { ChangelogViewComponent } from './changelog/view/view';
 import { EdgeComponent } from './edge/edge.component';
 import { OverviewComponent as AutarchyChartOverviewComponent } from './edge/history/common/autarchy/overview/overview';

ui/src/app/app.component.ts

@@ -2,16 +2,15 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Meta, Title } from '@angular/platform-browser';
 import { NavigationEnd, Router } from '@angular/router';
+import { SplashScreen } from '@capacitor/splash-screen';
 import { MenuController, ModalController, Platform, ToastController } from '@ionic/angular';
 import { Subject, Subscription } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
-
 import { environment } from '../environments';
+import { AppService } from './app.service';
 import { GlobalRouteChangeHandler } from './shared/service/globalRouteChangeHandler';
 import { Service, UserPermission, Websocket } from './shared/shared';
 import { Language } from './shared/type/language';
-import { SplashScreen } from '@capacitor/splash-screen';
-import { AppService } from './app.service';
 
 @Component({
   selector: 'app-root',

ui/src/app/app.module.ts

@@ -10,7 +10,7 @@ import { FORMLY_CONFIG } from '@ngx-formly/core';
 import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
 import { AngularMyDatePickerModule } from '@nodro7/angular-mydatepicker';
 import { CookieService } from 'ngx-cookie-service';
-
+import { DeviceDetectorService } from 'ngx-device-detector';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { AppService } from './app.service';
@@ -29,7 +29,6 @@ import { SharedModule } from './shared/shared.module';
 import { registerTranslateExtension } from './shared/translate.extension';
 import { Language, MyTranslateLoader } from './shared/type/language';
 import { UserModule } from './user/user.module';
-import { DeviceDetectorService } from 'ngx-device-detector';
 
 @NgModule({
   declarations: [

ui/src/app/appupdateservice.ts

@@ -11,16 +11,6 @@ export class CheckForUpdateService {
   constructor(private update: SwUpdate,
     private service: Service,
   ) { }
-
-  init() {
-    setInterval(async () => {
-      const updateFound = await this.update.checkForUpdate();
-      console.log(updateFound ? 'A new version is available.' : 'Already on the latest version.');
-      if (updateFound) {
-        window.location.reload();
-      }
-    }, 10000);
-  }
 }
 // Will be used in Future
 @Injectable()

ui/src/app/changelog/view/view.html

@@ -1,4 +1,4 @@
 <header></header>
 <ion-content>
   <changelog></changelog>
-</ion-content>
+</ion-content>

ui/src/app/edge/edge.component.ts

@@ -4,7 +4,6 @@ import { ActivatedRoute, Router } from "@angular/router";
 import { SubscribeEdgesRequest } from "src/app/shared/jsonrpc/request/subscribeEdgesRequest";
 import { ChannelAddress, Edge, Service, Websocket } from "src/app/shared/shared";
 
-
 /*** This component is needed as a routing parent and acts as a transit station without being displayed.*/
 @Component({
     selector: "edge",

ui/src/app/edge/edge.module.ts

@@ -1,8 +1,8 @@
-import { HistoryModule } from './history/history.module';
-import { LiveModule } from './live/live.module';
 import { NgModule } from '@angular/core';
 import { SharedModule } from './../shared/shared.module';
 import { EdgeComponent } from './edge.component';
+import { HistoryModule } from './history/history.module';
+import { LiveModule } from './live/live.module';
 
 @NgModule({
   declarations: [

ui/src/app/edge/history/Controller/ChannelThreshold/flat/flat.html

@@ -5,4 +5,4 @@
   <oe-flat-widget-line *ngFor="let controller of controllers" [name]="displayName.get(controller.id)"
     [channelAddress]="controller.id + '/CumulatedActiveTime'"
     [converter]="FORMAT_SECONDS_TO_DURATION"></oe-flat-widget-line>
-</oe-flat-widget>
+</oe-flat-widget>

ui/src/app/edge/history/Controller/ChannelThreshold/overview/overview.html

@@ -1,4 +1,4 @@
 <oe-chart [showTotal]="showTotal" (setShowTotal)="setShowTotal($event)" *ngIf="isInitialized"
   [period]="service.historyPeriod" [title]="'Edge.Index.Widgets.Channeltreshold.TITLE'| translate">
   <totalChart [isOnlyChart]="true"></totalChart>
-</oe-chart>
+</oe-chart>

ui/src/app/edge/history/Controller/Ess/GridoptimizedCharge/overview/overview.html

@@ -1,5 +1,4 @@
-<oe-chart *ngIf="isInitialized"
-    [period]="service.historyPeriod" [title]="component.alias">
+<oe-chart *ngIf="isInitialized" [period]="service.historyPeriod" [title]="component.alias">
 
     <gridOptimizedChargeChart [chartTitle]="'General.chargePower'| translate" [component]="component">
     </gridOptimizedChargeChart>

ui/src/app/edge/history/Controller/Ess/TimeOfUseTariff/timeOfUseTariff.module.ts

@@ -1,9 +1,9 @@
 import { NgModule } from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
 import { SharedModule } from "src/app/shared/shared.module";
+import { ChartComponent } from "./chart/chart";
 import { FlatComponent } from "./flat/flat";
 import { OverviewComponent } from "./overview/overview";
-import { ChartComponent } from "./chart/chart";
 
 @NgModule({
     imports: [

ui/src/app/edge/history/abstracthistorychart.html

@@ -5,4 +5,4 @@
     <ng-container *ngIf="!loading">
         <canvas baseChart [datasets]="datasets" [labels]="labels" [options]="options" type="line"></canvas>
     </ng-container>
-</div>
+</div>

ui/src/app/edge/history/abstracthistorychart.ts

@@ -2,6 +2,7 @@
 import { TranslateService } from '@ngx-translate/core';
 import * as Chart from 'chart.js';
 import { AbstractHistoryChart as NewAbstractHistoryChart } from 'src/app/shared/components/chart/abstracthistorychart';
+import { ChartConstants, XAxisType } from 'src/app/shared/components/chart/chart.constants';
 import { JsonrpcResponseError } from 'src/app/shared/jsonrpc/base';
 import { QueryHistoricTimeseriesDataRequest } from "src/app/shared/jsonrpc/request/queryHistoricTimeseriesDataRequest";
 import { QueryHistoricTimeseriesEnergyPerPeriodRequest } from 'src/app/shared/jsonrpc/request/queryHistoricTimeseriesEnergyPerPeriodRequest';
@@ -11,9 +12,7 @@ import { ChartAxis, HistoryUtils, Utils, YAxisTitle } from 'src/app/shared/servi
 import { ChannelAddress, Edge, EdgeConfig, Service } from 'src/app/shared/shared';
 import { DateUtils } from 'src/app/shared/utils/date/dateutils';
 import { DateTimeUtils } from 'src/app/shared/utils/datetime/datetime-utils';
-
 import { calculateResolution, ChronoUnit, DEFAULT_TIME_CHART_OPTIONS, EMPTY_DATASET, Resolution, setLabelVisible } from './shared';
-import { ChartConstants, XAxisType } from 'src/app/shared/components/chart/chart.constants';
 
 // NOTE: Auto-refresh of widgets is currently disabled to reduce server load
 export abstract class AbstractHistoryChart {

ui/src/app/edge/history/abstracthistorywidget.ts

@@ -3,8 +3,8 @@ import { JsonrpcResponseError } from 'src/app/shared/jsonrpc/base';
 import { QueryHistoricTimeseriesDataRequest } from 'src/app/shared/jsonrpc/request/queryHistoricTimeseriesDataRequest';
 import { QueryHistoricTimeseriesDataResponse } from 'src/app/shared/jsonrpc/response/queryHistoricTimeseriesDataResponse';
 import { ChannelAddress, Edge, EdgeConfig, Service } from 'src/app/shared/shared';
-import { calculateResolution } from './shared';
 import { DateUtils } from 'src/app/shared/utils/date/dateutils';
+import { calculateResolution } from './shared';
 
 // NOTE: Auto-refresh of widgets is currently disabled to reduce server load
 export abstract class AbstractHistoryWidget {

ui/src/app/edge/history/chpsoc/chart.component.ts

@@ -3,10 +3,9 @@ import { Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { DefaultTypes } from 'src/app/shared/service/defaulttypes';
-
+import { YAxisTitle } from 'src/app/shared/service/utils';
 import { ChannelAddress, Edge, EdgeConfig, Service } from '../../../shared/shared';
 import { AbstractHistoryChart } from '../abstracthistorychart';
-import { YAxisTitle } from 'src/app/shared/service/utils';
 
 @Component({
     selector: 'chpsocchart',

ui/src/app/edge/history/chpsoc/chpsocchartoverview/chpsocchartoverview.component.html

@@ -20,4 +20,4 @@
             </chpsocchart>
         </ion-card-content>
     </ion-content>
-</ng-container>
+</ng-container>

ui/src/app/edge/history/common/autarchy/Autarchy.ts

@@ -1,8 +1,8 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { SharedModule } from 'src/app/shared/shared.module';
-import { FlatComponent } from './flat/flat';
 import { ChartComponent } from './chart/chart';
+import { FlatComponent } from './flat/flat';
 import { OverviewComponent } from './overview/overview';
 
 @NgModule({

ui/src/app/edge/history/common/autarchy/flat/flat.html

@@ -2,4 +2,4 @@
   routerLink="/device/{{edge.id}}/history/autarchychart" *ngIf="isInitialized">
   <oe-flat-widget-percentagebar [value]="autarchyValue">
   </oe-flat-widget-percentagebar>
-</oe-flat-widget>
+</oe-flat-widget>

ui/src/app/edge/history/common/autarchy/overview/overview.html

@@ -1,4 +1,4 @@
 <oe-chart [title]="'General.autarchy' | translate">
     <autarchychart [isOnlyChart]="true">
     </autarchychart>
-</oe-chart>
+</oe-chart>

ui/src/app/edge/history/common/common.ts

@@ -1,11 +1,10 @@
 import { NgModule } from '@angular/core';
-
 import { Common_Autarchy } from './autarchy/Autarchy';
+import { Common_Consumption } from './consumption/Consumption';
 import { CommonEnergyMonitor } from './energy/energy';
 import { Common_Grid } from './grid/grid';
 import { Common_Production } from './production/production';
 import { Common_Selfconsumption } from './selfconsumption/SelfConsumption';
-import { Common_Consumption } from './consumption/Consumption';
 
 @NgModule({
   imports: [

ui/src/app/edge/history/common/consumption/chart/chart.constants.spec.ts

@@ -1,9 +1,8 @@
 import { DummyConfig } from "src/app/shared/components/edge/edgeconfig.spec";
 import { OeTester } from "src/app/shared/components/shared/testing/common";
 import { OeChartTester } from "src/app/shared/components/shared/testing/tester";
-import { EdgeConfig } from "src/app/shared/shared";
 import { removeFunctions, TestContext } from "src/app/shared/components/shared/testing/utils.spec";
-
+import { EdgeConfig } from "src/app/shared/shared";
 import { ChartComponent } from "./chart";
 
 export function expectView(config: EdgeConfig, testContext: TestContext, chartType: 'line' | 'bar', channels: OeTester.Types.Channels, view: OeChartTester.View): void {

ui/src/app/edge/history/common/consumption/details/details.overview.html

@@ -1,8 +1,9 @@
 <oe-chart [title]="component.alias" *ngIf="isInitialized && component" [period]="service.historyPeriod.value">
-<ng-container [ngSwitch]="componentType.type">
+  <ng-container [ngSwitch]="componentType.type">
     <sumChart *ngSwitchCase="'sum'" [isOnlyChart]="true"></sumChart>
-    <consumptionMeterChart  *ngSwitchCase="'consumptionMeter'" [isOnlyChart]="true"></consumptionMeterChart>
-    <evcsChart  *ngSwitchCase="'evcs'" [isOnlyChart]="true"></evcsChart>
+    <consumptionMeterChart *ngSwitchCase="'consumptionMeter'" [isOnlyChart]="true"></consumptionMeterChart>
+    <evcsChart *ngSwitchCase="'evcs'" [isOnlyChart]="true"></evcsChart>
   </ng-container>
 </oe-chart>
-<oe-footer-subnavigation *ngIf="isInitialized" [backButton]="true" [navigationOptions]="navigationButtons"></oe-footer-subnavigation>
+<oe-footer-subnavigation *ngIf="isInitialized" [backButton]="true"
+  [navigationOptions]="navigationButtons"></oe-footer-subnavigation>

ui/src/app/edge/history/common/consumption/details/details.overview.ts

@@ -28,7 +28,7 @@ export class DetailsOverviewComponent extends AbstractHistoryChartOverview {
     this.componentType = this.getComponentType();
     this.service.getCurrentEdge().then(edge => {
 
-      if(!this.component) {
+      if (!this.component) {
         return;
       }
 
@@ -47,7 +47,7 @@ export class DetailsOverviewComponent extends AbstractHistoryChartOverview {
   }
 
   private getComponentType(): typeof this.componentType {
-    if(!this.component) {
+    if (!this.component) {
       return null;
     }
 

ui/src/app/edge/history/common/consumption/flat/flat.html

@@ -25,4 +25,4 @@
         </oe-flat-widget-line>
 
     </ng-container>
-</oe-flat-widget>
+</oe-flat-widget>

ui/src/app/edge/history/common/consumption/overview/overview.html

@@ -3,4 +3,4 @@
     <consumptionchart [isOnlyChart]="true">
     </consumptionchart>
 </oe-chart>
-<oe-footer-subnavigation *ngIf="isInitialized" [navigationOptions]="navigationButtons"></oe-footer-subnavigation>
+<oe-footer-subnavigation *ngIf="isInitialized" [navigationOptions]="navigationButtons"></oe-footer-subnavigation>