UI: set and apply ESLint rule comma-dangle = always-multiline (OpenEMS#2430)

eslint src/ --fix

Author: miettal

ui/.eslintrc.json

@@ -59,7 +59,7 @@
         "curly": "error",
         "comma-dangle": [
           "error",
-          "never"
+          "always-multiline"
         ],
         "eol-last": [
           "error",

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

@@ -68,13 +68,13 @@ const routes: Routes = [
       {
         path: 'live', data: { navbarTitle: environment.uiTitle }, providers: [{
           useClass: LiveDataService,
-          provide: DataService
-        }], component: EdgeLiveComponent
+          provide: DataService,
+        }], component: EdgeLiveComponent,
       },
       {
         path: 'history', providers: [{
           useClass: HistoryDataService,
-          provide: DataService
+          provide: DataService,
         }], component: HistoryParentComponent, children: [
           { path: '', component: EdgeHistoryComponent },
           // History Chart Pages
@@ -94,8 +94,8 @@ const routes: Routes = [
           { path: 'gridchart', component: GridChartOverviewComponent },
           { path: 'productionchart', component: ProductionChartOverviewComponent },
           { path: 'selfconsumptionchart', component: SelfconsumptionChartOverviewComponent },
-          { path: 'storagechart', component: StorageChartOverviewComponent }
-        ]
+          { path: 'storagechart', component: StorageChartOverviewComponent },
+        ],
       },
 
       { path: 'settings', data: { navbarTitleToBeTranslated: 'Menu.edgeSettings' }, component: EdgeSettingsComponent },
@@ -114,21 +114,21 @@ const routes: Routes = [
       { path: 'settings/app/install/:appId', component: EdgeSettingsAppInstall },
       { path: 'settings/app/update/:appId', component: EdgeSettingsAppUpdate },
       { path: 'settings/app/single/:appId', component: EdgeSettingsAppSingle },
-      { path: 'settings/alerting', component: EdgeSettingsAlerting }
-    ]
+      { path: 'settings/alerting', component: EdgeSettingsAlerting },
+    ],
   },
 
   { path: 'demo', component: LoginComponent },
   // Fallback
-  { path: '**', pathMatch: 'full', redirectTo: 'login' }
+  { path: '**', pathMatch: 'full', redirectTo: 'login' },
 ];
 
 export const appRoutingProviders: any[] = [];
 
 @NgModule({
   imports: [
-    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
   ],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
 export class AppRoutingModule { }

ui/src/app/app.component.ts

@@ -13,7 +13,7 @@ import { Language } from './shared/type/language';
 
 @Component({
   selector: 'app-root',
-  templateUrl: 'app.component.html'
+  templateUrl: 'app.component.html',
 })
 export class AppComponent implements OnInit, OnDestroy {
 
@@ -35,7 +35,7 @@ export class AppComponent implements OnInit, OnDestroy {
     public websocket: Websocket,
     private globalRouteChangeHandler: GlobalRouteChangeHandler,
     private titleService: Title,
-    private meta: Meta
+    private meta: Meta,
   ) {
     service.setLang(Language.getByKey(localStorage.LANGUAGE) ?? Language.getByBrowserLang(navigator.language));
 
@@ -60,9 +60,9 @@ export class AppComponent implements OnInit, OnDestroy {
         buttons: [
           {
             text: 'Ok',
-            role: 'cancel'
-          }
-        ]
+            role: 'cancel',
+          },
+        ],
       });
       toast.present();
     });
@@ -72,7 +72,7 @@ export class AppComponent implements OnInit, OnDestroy {
       // OEM colors exist only after ionic is initialized, so the notch color has to be set here
       const notchColor = getComputedStyle(document.documentElement).getPropertyValue('--ion-color-background');
       this.meta.updateTag(
-        { name: 'theme-color', content: notchColor }
+        { name: 'theme-color', content: notchColor },
       );
       this.service.deviceHeight = this.platform.height();
       this.service.deviceWidth = this.platform.width();

ui/src/app/app.module.ts

@@ -36,11 +36,11 @@ import { UserModule } from './user/user.module';
     ChartOptionsPopoverComponent,
     PickDatePopoverComponent,
     StatusSingleComponent,
-    SystemLogComponent
+    SystemLogComponent,
   ],
   entryComponents: [
     ChartOptionsPopoverComponent,
-    PickDatePopoverComponent
+    PickDatePopoverComponent,
   ],
   imports: [
     AngularMyDatePickerModule,
@@ -56,7 +56,7 @@ import { UserModule } from './user/user.module';
     SharedModule,
     TranslateModule.forRoot({ loader: { provide: TranslateLoader, useClass: MyTranslateLoader } }),
     UserModule,
-    RegistrationModule
+    RegistrationModule,
   ],
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
@@ -66,9 +66,9 @@ import { UserModule } from './user/user.module';
     // Use factory for formly. This allows us to use translations in validationMessages.
     { provide: FORMLY_CONFIG, multi: true, useFactory: registerTranslateExtension, deps: [TranslateService] },
     Pagination,
-    CheckForUpdateService
+    CheckForUpdateService,
   ],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
 export class AppModule {
   constructor() {

ui/src/app/appupdateservice.ts

@@ -4,12 +4,12 @@ import { SwUpdate } from "@angular/service-worker";
 import { Service } from "./shared/shared";
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class CheckForUpdateService {
 
   constructor(private update: SwUpdate,
-    private service: Service
+    private service: Service,
   ) { }
 
   init() {

ui/src/app/changelog/changelog.module.ts

@@ -5,15 +5,15 @@ import { ChangelogViewComponent } from './view/view';
 
 @NgModule({
   imports: [
-    SharedModule
+    SharedModule,
   ],
   declarations: [
     ChangelogComponent,
-    ChangelogViewComponent
+    ChangelogViewComponent,
   ],
   exports: [
     ChangelogComponent,
-    ChangelogViewComponent
-  ]
+    ChangelogViewComponent,
+  ],
 })
 export class ChangelogModule { }

ui/src/app/changelog/view/component/changelog.component.ts

@@ -8,7 +8,7 @@ import { Changelog } from './changelog.constants';
 
 @Component({
   selector: 'changelog',
-  templateUrl: './changelog.component.html'
+  templateUrl: './changelog.component.html',
 })
 export class ChangelogComponent implements OnInit {
 
@@ -19,7 +19,7 @@ export class ChangelogComponent implements OnInit {
   constructor(
     public translate: TranslateService,
     public service: Service,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
   ) { }
 
   ngOnInit() {
@@ -39,9 +39,9 @@ export class ChangelogComponent implements OnInit {
       {
         version: 'x.y.z',
         changes: [
-          Changelog.link("OpenEMS Releases", 'https://github.com/OpenEMS/openems/releases')
-        ]
-      }
+          Changelog.link("OpenEMS Releases", 'https://github.com/OpenEMS/openems/releases'),
+        ],
+      },
     ];
 
 }

ui/src/app/changelog/view/view.ts

@@ -2,6 +2,6 @@ import { Component } from "@angular/core";
 
 @Component({
   selector: 'changelogViewComponent',
-  templateUrl: './view.html'
+  templateUrl: './view.html',
 })
 export class ChangelogViewComponent { }

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

@@ -9,7 +9,7 @@ import { ChannelAddress, Edge, Service, Websocket } from "src/app/shared/shared"
     template: `
     <ion-content></ion-content>
          <ion-router-outlet id="content"></ion-router-outlet>
-    `
+    `,
 })
 export class EdgeComponent implements OnInit, OnDestroy {
 
@@ -19,7 +19,7 @@ export class EdgeComponent implements OnInit, OnDestroy {
         private router: Router,
         private activatedRoute: ActivatedRoute,
         private service: Service,
-        private websocket: Websocket
+        private websocket: Websocket,
     ) { }
 
     public ngOnInit(): void {
@@ -34,7 +34,7 @@ export class EdgeComponent implements OnInit, OnDestroy {
 
                         // Subscribe on these channels for the state in HeaderComponent
                         edge.subscribeChannels(this.websocket, '', [
-                            new ChannelAddress('_sum', 'State')
+                            new ChannelAddress('_sum', 'State'),
                         ]);
                     });
             }).catch(() => {

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

@@ -6,15 +6,15 @@ import { EdgeComponent } from './edge.component';
 
 @NgModule({
   declarations: [
-    EdgeComponent
+    EdgeComponent,
   ],
   imports: [
     HistoryModule,
     LiveModule,
-    SharedModule
+    SharedModule,
   ],
   exports: [
-    EdgeComponent
-  ]
+    EdgeComponent,
+  ],
 })
 export class EdgeModule { }

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

@@ -38,21 +38,21 @@ export abstract class AbstractHistoryChart {
     // Colors for Phase 1-3
     protected phase1Color = {
         backgroundColor: 'rgba(255,127,80,0.05)',
-        borderColor: 'rgba(255,127,80,1)'
+        borderColor: 'rgba(255,127,80,1)',
     };
     protected phase2Color = {
         backgroundColor: 'rgba(0,0,255,0.1)',
-        borderColor: 'rgba(0,0,255,1)'
+        borderColor: 'rgba(0,0,255,1)',
     };
     protected phase3Color = {
         backgroundColor: 'rgba(128,128,0,0.1)',
-        borderColor: 'rgba(128,128,0,1)'
+        borderColor: 'rgba(128,128,0,1)',
     };
 
     constructor(
         public readonly spinnerId: string,
         protected service: Service,
-        protected translate: TranslateService
+        protected translate: TranslateService,
     ) {
     }
 
@@ -92,7 +92,7 @@ export abstract class AbstractHistoryChart {
                         }).catch(error => {
                             this.errorResponse = error;
                             resolve(new QueryHistoricTimeseriesDataResponse(error.id, {
-                                timestamps: [null], data: { null: null }
+                                timestamps: [null], data: { null: null },
                             }));
                         });
                     });
@@ -129,12 +129,12 @@ export abstract class AbstractHistoryChart {
                 this.service.getConfig().then(config => {
                     edge.sendRequest(this.service.websocket, new QueryHistoricTimeseriesEnergyPerPeriodRequest(DateUtils.maxDate(fromDate, this.edge?.firstSetupProtocol), toDate, channelAddresses, resolution)).then(response => {
                         resolve(response as QueryHistoricTimeseriesEnergyPerPeriodResponse ?? new QueryHistoricTimeseriesEnergyPerPeriodResponse(response.id, {
-                            timestamps: [null], data: { null: null }
+                            timestamps: [null], data: { null: null },
                         }));
                     }).catch((response) => {
                         this.errorResponse = response;
                         resolve(new QueryHistoricTimeseriesDataResponse("0", {
-                            timestamps: [null], data: { null: null }
+                            timestamps: [null], data: { null: null },
                         }));
                     });
                 });

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

@@ -14,7 +14,7 @@ export abstract class AbstractHistoryWidget {
     // private ngUnsubscribe: Subject<void> = new Subject<void>();
 
     constructor(
-        protected service: Service
+        protected service: Service,
     ) { }
 
     /**

ui/src/app/edge/history/channelthreshold/channelthresholdchartoverview/channelthresholdchartoverview.component.ts

@@ -4,7 +4,7 @@ import { Edge, EdgeConfig, Service, Utils } from '../../../../shared/shared';
 
 @Component({
     selector: ChannelthresholdChartOverviewComponent.SELECTOR,
-    templateUrl: './channelthresholdchartoverview.component.html'
+    templateUrl: './channelthresholdchartoverview.component.html',
 })
 export class ChannelthresholdChartOverviewComponent implements OnInit {
 
@@ -23,7 +23,7 @@ export class ChannelthresholdChartOverviewComponent implements OnInit {
 
     constructor(
         public service: Service,
-        private route: ActivatedRoute
+        private route: ActivatedRoute,
     ) { }
 
     ngOnInit() {

ui/src/app/edge/history/channelthreshold/singlechart.component.ts

@@ -11,7 +11,7 @@ import { Data, TooltipItem } from '../shared';
 
 @Component({
   selector: 'channelthresholdSingleChart',
-  templateUrl: '../abstracthistorychart.html'
+  templateUrl: '../abstracthistorychart.html',
 })
 export class ChannelthresholdSingleChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
@@ -25,7 +25,7 @@ export class ChannelthresholdSingleChartComponent extends AbstractHistoryChart i
   constructor(
     protected override service: Service,
     protected override translate: TranslateService,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
   ) {
     super("channelthreshold-single-chart", service, translate);
   }
@@ -66,11 +66,11 @@ export class ChannelthresholdSingleChartComponent extends AbstractHistoryChart i
         });
         datasets.push({
           label: address.channelId,
-          data: data
+          data: data,
         });
         this.colors.push({
           backgroundColor: 'rgba(0,191,255,0.05)',
-          borderColor: 'rgba(0,191,255,1)'
+          borderColor: 'rgba(0,191,255,1)',
         });
       }
       this.datasets = datasets;