diff --git a/webapp/frontend/src/app/core/config/app.config.ts b/webapp/frontend/src/app/core/config/app.config.ts
index 6dedd42..39ba1ca 100644
--- a/webapp/frontend/src/app/core/config/app.config.ts
+++ b/webapp/frontend/src/app/core/config/app.config.ts
@@ -16,6 +16,7 @@ export interface AppConfig
dashboardDisplay: string;
dashboardSort: string;
+ temperatureUnit: string;
}
/**
@@ -32,5 +33,7 @@ export const appConfig: AppConfig = {
dashboardDisplay: "name",
dashboardSort: "status",
+
+ temperatureUnit: "celsius",
};
diff --git a/webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.html b/webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.html
index 5e21f3c..d54a64c 100644
--- a/webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.html
+++ b/webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.html
@@ -51,7 +51,7 @@
Temperature
-
{{ deviceSummary.smart?.temp }}°C
+
{{ deviceSummary.smart?.temp | temperature:config.temperatureUnit:true }}
--
diff --git a/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html b/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html
index 9d4e905..37099bb 100644
--- a/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html
+++ b/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html
@@ -23,6 +23,17 @@
+
+
+ Temperature Display Unit
+
+ Celsius
+ Fahrenheit
+
+
+
+
+
diff --git a/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.ts b/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.ts
index dc259fe..1ec2f69 100644
--- a/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.ts
+++ b/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.ts
@@ -13,6 +13,7 @@ export class DashboardSettingsComponent implements OnInit {
dashboardDisplay: string;
dashboardSort: string;
+ temperatureUnit: string
// Private
private _unsubscribeAll: Subject;
@@ -33,20 +34,21 @@ export class DashboardSettingsComponent implements OnInit {
// Store the config
this.dashboardDisplay = config.dashboardDisplay;
this.dashboardSort = config.dashboardSort;
-
+ this.temperatureUnit = config.temperatureUnit;
});
}
saveSettings(): void {
- var newSettings = {
+ const newSettings = {
dashboardDisplay: this.dashboardDisplay,
- dashboardSort: this.dashboardSort
+ dashboardSort: this.dashboardSort,
+ temperatureUnit: this.temperatureUnit,
}
this._configService.config = newSettings
console.log(`Saved Settings: ${JSON.stringify(newSettings)}`)
}
- formatLabel(value: number) {
+ formatLabel(value: number): number {
return value;
}
}
diff --git a/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts b/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
index b3ba874..5ff4203 100644
--- a/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
+++ b/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
@@ -11,6 +11,7 @@ import {deviceDisplayTitle} from "app/layout/common/dashboard-device/dashboard-d
import {AppConfig} from "app/core/config/app.config";
import {TreoConfigService} from "@treo/services/config";
import {Router} from "@angular/router";
+import {TemperaturePipe} from "../../shared/temperature.pipe";
@Component({
selector : 'example',
@@ -150,7 +151,7 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
let newDate = new Date(tempHistory.date);
deviceSeriesMetadata.data.push({
x: newDate,
- y: tempHistory.temp
+ y: TemperaturePipe.formatTemperature(tempHistory.temp, this.config.temperatureUnit, false)
})
}
deviceTemperatureSeries.push(deviceSeriesMetadata)
@@ -200,7 +201,7 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
},
y : {
formatter: (value) => {
- return value + '°C';
+ return TemperaturePipe.formatTemperature(value, this.config.temperatureUnit, true);
}
}
},
diff --git a/webapp/frontend/src/app/modules/detail/detail.component.html b/webapp/frontend/src/app/modules/detail/detail.component.html
index f7c2066..72da181 100644
--- a/webapp/frontend/src/app/modules/detail/detail.component.html
+++ b/webapp/frontend/src/app/modules/detail/detail.component.html
@@ -119,7 +119,7 @@
Powered On
-
{{smart_results[0]?.temp}}°C
+
{{smart_results[0]?.temp | temperature:config.temperatureUnit:true}}
Temperature
diff --git a/webapp/frontend/src/app/modules/detail/detail.component.ts b/webapp/frontend/src/app/modules/detail/detail.component.ts
index b50ad9b..8a50ee5 100644
--- a/webapp/frontend/src/app/modules/detail/detail.component.ts
+++ b/webapp/frontend/src/app/modules/detail/detail.component.ts
@@ -9,6 +9,8 @@ import {fadeOut} from "../../../@treo/animations/fade";
import {DetailSettingsComponent} from "app/layout/common/detail-settings/detail-settings.component";
import {MatDialog} from "@angular/material/dialog";
import humanizeDuration from 'humanize-duration';
+import {TreoConfigService} from "../../../@treo/services/config";
+import {AppConfig} from "../../core/config/app.config";
@Component({
selector: 'detail',
@@ -18,6 +20,8 @@ import humanizeDuration from 'humanize-duration';
export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
+ config: AppConfig;
+
onlyCritical: boolean = true;
// data: any;
@@ -43,7 +47,9 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
*/
constructor(
private _detailService: DetailService,
- public dialog: MatDialog
+ public dialog: MatDialog,
+ private _configService: TreoConfigService,
+
)
{
@@ -65,6 +71,14 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
*/
ngOnInit(): void
{
+ // Subscribe to config changes
+ this._configService.config$
+ .pipe(takeUntil(this._unsubscribeAll))
+ .subscribe((config: AppConfig) => {
+
+ this.config = config;
+ });
+
// Get the data
this._detailService.data$
.pipe(takeUntil(this._unsubscribeAll))
diff --git a/webapp/frontend/src/app/shared/shared.module.ts b/webapp/frontend/src/app/shared/shared.module.ts
index 64ef282..a5357f1 100644
--- a/webapp/frontend/src/app/shared/shared.module.ts
+++ b/webapp/frontend/src/app/shared/shared.module.ts
@@ -1,13 +1,15 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import {FileSizePipe} from "./file-size.pipe";
+import {FileSizePipe} from './file-size.pipe';
import { DeviceSortPipe } from './device-sort.pipe';
+import { TemperaturePipe } from './temperature.pipe';
@NgModule({
declarations: [
FileSizePipe,
- DeviceSortPipe
+ DeviceSortPipe,
+ TemperaturePipe
],
imports: [
CommonModule,
@@ -19,7 +21,8 @@ import { DeviceSortPipe } from './device-sort.pipe';
FormsModule,
ReactiveFormsModule,
FileSizePipe,
- DeviceSortPipe
+ DeviceSortPipe,
+ TemperaturePipe
]
})
export class SharedModule
diff --git a/webapp/frontend/src/app/shared/temperature.pipe.spec.ts b/webapp/frontend/src/app/shared/temperature.pipe.spec.ts
new file mode 100644
index 0000000..fc30978
--- /dev/null
+++ b/webapp/frontend/src/app/shared/temperature.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { TemperaturePipe } from './temperature.pipe';
+
+describe('TemperaturePipe', () => {
+ it('create an instance', () => {
+ const pipe = new TemperaturePipe();
+ expect(pipe).toBeTruthy();
+ });
+});
diff --git a/webapp/frontend/src/app/shared/temperature.pipe.ts b/webapp/frontend/src/app/shared/temperature.pipe.ts
new file mode 100644
index 0000000..1c6cebc
--- /dev/null
+++ b/webapp/frontend/src/app/shared/temperature.pipe.ts
@@ -0,0 +1,34 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+ name: 'temperature'
+})
+export class TemperaturePipe implements PipeTransform {
+ static celsiusToFahrenheit(celsiusTemp: number): number {
+ return celsiusTemp * 9.0 / 5.0 + 32;
+ }
+ static formatTemperature(celsiusTemp: number, unit: string, includeUnits: boolean): unknown {
+ let convertedTemp
+ let convertedUnitSuffix
+ switch (unit) {
+ case 'celsius':
+ convertedTemp = celsiusTemp
+ convertedUnitSuffix = '°C'
+ break
+ case 'fahrenheit':
+ convertedTemp = TemperaturePipe.celsiusToFahrenheit(celsiusTemp)
+ convertedUnitSuffix = '°F'
+ break
+ }
+ if(includeUnits){
+ return convertedTemp + convertedUnitSuffix
+ } else {
+ return convertedTemp
+ }
+ }
+
+ transform(celsiusTemp: number, unit = 'celsius', includeUnits = false): unknown {
+ return TemperaturePipe.formatTemperature(celsiusTemp, unit, includeUnits)
+ }
+
+}