UI: apply standard formatting & cleanup (#2742)

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>