Peakshaving Symmetric Refactored.

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

@@ -6,6 +6,7 @@ import { ChangelogViewComponent } from './changelog/view/view';
 import { EdgeComponent } from './edge/edge.component';
 import { ChannelthresholdChartOverviewComponent } from './edge/history/channelthreshold/channelthresholdchartoverview/channelthresholdchartoverview.component';
 import { OverviewComponent as AutarchyChartOverviewComponent } from './edge/history/common/autarchy/overview/overview';
+import { OverviewComponent as SymmetricOverviewComponent } from './edge/history/peakshaving/symmetric/overview/overview';
 import { OverviewComponent as ProductionChartOverviewComponent } from './edge/history/common/production/overview/overview';
 import { OverviewComponent as SelfconsumptionChartOverviewComponent } from './edge/history/common/selfconsumption/overview/overview';
 import { ConsumptionChartOverviewComponent } from './edge/history/consumption/consumptionchartoverview/consumptionchartoverview.component';
@@ -19,7 +20,6 @@ import { HistoryComponent as EdgeHistoryComponent } from './edge/history/history
 import { HistoryDataService } from './edge/history/historydataservice';
 import { HistoryParentComponent } from './edge/history/historyparent.component';
 import { AsymmetricPeakshavingChartOverviewComponent } from './edge/history/peakshaving/asymmetric/asymmetricpeakshavingchartoverview/asymmetricpeakshavingchartoverview.component';
-import { SymmetricPeakshavingChartOverviewComponent } from './edge/history/peakshaving/symmetric/symmetricpeakshavingchartoverview/symmetricpeakshavingchartoverview.component';
 import { TimeslotPeakshavingChartOverviewComponent } from './edge/history/peakshaving/timeslot/timeslotpeakshavingchartoverview/timeslotpeakshavingchartoverview.component';
 import { SinglethresholdChartOverviewComponent } from './edge/history/singlethreshold/singlethresholdchartoverview/singlethresholdchartoverview.component';
 import { StorageChartOverviewComponent } from './edge/history/storage/storagechartoverview/storagechartoverview.component';
@@ -79,15 +79,15 @@ const routes: Routes = [
           { path: ':componentId/heatingelementchart', component: HeatingelementChartOverviewComponent },
           { path: ':componentId/heatpumpchart', component: HeatPumpChartOverviewComponent },
           { path: ':componentId/singlethresholdchart', component: SinglethresholdChartOverviewComponent },
-          { path: ':componentId/symmetricpeakshavingchart', component: SymmetricPeakshavingChartOverviewComponent },
+          { path: ':componentId/symmetricpeakshavingchart', component: SymmetricOverviewComponent },
           { path: ':componentId/timeslotpeakshavingchart', component: TimeslotPeakshavingChartOverviewComponent },
           { path: ':componentId/timeOfUseTariffDischargeChart', component: TimeOfUseTariffDischargeChartOverviewComponent },
           { path: 'autarchychart', component: AutarchyChartOverviewComponent },
           { path: 'consumptionchart', component: ConsumptionChartOverviewComponent },
           { path: 'gridchart', component: GridChartOverviewComponent },
           { path: 'productionchart', component: ProductionChartOverviewComponent },
           { path: 'selfconsumptionchart', component: SelfconsumptionChartOverviewComponent },
-          { path: 'storagechart', component: StorageChartOverviewComponent }
+          { path: 'storagechart', component: StorageChartOverviewComponent },
         ]
       },
 

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

@@ -39,9 +39,8 @@
           <fixDigitalOutputWidget [componentId]="widget.componentId" [period]="service.historyPeriod.value">
           </fixDigitalOutputWidget>
         </ion-col>
-        <ion-col size="12" size-md="6" size-lg="4" size-xl="3" *ngSwitchCase="'Controller.Symmetric.PeakShaving'">
-          <symmetricPeakshavingWidget [componentId]="widget.componentId" [period]="service.historyPeriod.value">
-          </symmetricPeakshavingWidget>
+        <ion-col *ngSwitchCase="'Controller.Symmetric.PeakShaving'" size="12" size-md="6" size-lg="4" size-xl="3">
+          <symmetricWidget [componentId]="widget.componentId"></symmetricWidget>
         </ion-col>
         <ion-col size="12" size-md="6" size-lg="4" size-xl="3" *ngSwitchCase="'Controller.Asymmetric.PeakShaving'">
           <asymmetricPeakshavingWidget [componentId]="widget.componentId" [period]="service.historyPeriod.value">

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

@@ -43,9 +43,6 @@ import { HistoryParentComponent } from './historyparent.component';
 import { AsymmetricPeakshavingChartOverviewComponent } from './peakshaving/asymmetric/asymmetricpeakshavingchartoverview/asymmetricpeakshavingchartoverview.component';
 import { AsymmetricPeakshavingChartComponent } from './peakshaving/asymmetric/chart.component';
 import { AsymmetricPeakshavingWidgetComponent } from './peakshaving/asymmetric/widget.component';
-import { SymmetricPeakshavingChartComponent } from './peakshaving/symmetric/chart.component';
-import { SymmetricPeakshavingChartOverviewComponent } from './peakshaving/symmetric/symmetricpeakshavingchartoverview/symmetricpeakshavingchartoverview.component';
-import { SymmetricPeakshavingWidgetComponent } from './peakshaving/symmetric/widget.component';
 import { TimeslotPeakshavingChartComponent } from './peakshaving/timeslot/chart.component';
 import { TimeslotPeakshavingChartOverviewComponent } from './peakshaving/timeslot/timeslotpeakshavingchartoverview/timeslotpeakshavingchartoverview.component';
 import { TimeslotPeakshavingWidgetComponent } from './peakshaving/timeslot/widget.component';
@@ -62,14 +59,16 @@ import { StorageComponent } from './storage/widget.component';
 import { TimeOfUseTariffDischargeChartComponent } from './timeofusetariffdischarge/chart.component';
 import { TimeOfUseTariffDischargeChartOverviewComponent } from './timeofusetariffdischarge/timeofusetariffdischargeoverview/timeofusetariffdischargechartoverview.component';
 import { TimeOfUseTariffDischargeWidgetComponent } from './timeofusetariffdischarge/widget.component';
+import { Common_SymmetricPeakShaving } from './peakshaving/symmetric/Symmetric'
 
 @NgModule({
   imports: [
     SharedModule,
     Common_Autarchy,
     Common_Production,
     Common_Selfconsumption,
-    CommonEnergyMonitor
+    CommonEnergyMonitor,
+    Common_SymmetricPeakShaving
   ],
   declarations: [
     AsymmetricPeakshavingChartComponent,
@@ -119,9 +118,6 @@ import { TimeOfUseTariffDischargeWidgetComponent } from './timeofusetariffdischa
     StorageESSChartComponent,
     StorageSingleChartComponent,
     StorageTotalChartComponent,
-    SymmetricPeakshavingChartComponent,
-    SymmetricPeakshavingChartOverviewComponent,
-    SymmetricPeakshavingWidgetComponent,
     TimeOfUseTariffDischargeChartComponent,
     TimeOfUseTariffDischargeChartOverviewComponent,
     TimeOfUseTariffDischargeWidgetComponent,

ui/src/app/edge/history/peakshaving/symmetric/Symmetric.ts

@@ -0,0 +1,30 @@
+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';
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        SharedModule
+    ],
+    entryComponents: [
+        FlatComponent,
+        OverviewComponent,
+        ChartComponent
+    ],
+    declarations: [
+        FlatComponent,
+        OverviewComponent,
+        ChartComponent
+    ],
+    exports: [
+        FlatComponent,
+        OverviewComponent,
+        ChartComponent
+    ]
+})
+export class Common_SymmetricPeakShaving { }