add setting to change temperature between C and F.

fixes #175

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",
 };
 

webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.html

@@ -51,7 +51,7 @@
         </div>
         <div class="flex flex-col mx-6 my-3 xs:w-full">
             <div class="font-semibold text-xs text-hint uppercase tracking-wider leading-none">Temperature</div>
-            <div class="mt-2 font-medium text-3xl leading-none" *ngIf="deviceSummary.smart?.collector_date; else unknownTemp">{{ deviceSummary.smart?.temp }}°C</div>
+            <div class="mt-2 font-medium text-3xl leading-none" *ngIf="deviceSummary.smart?.collector_date; else unknownTemp">{{ deviceSummary.smart?.temp | temperature:config.temperatureUnit:true }}</div>
             <ng-template #unknownTemp><div class="mt-2 font-medium text-3xl leading-none">--</div></ng-template>
         </div>
         <div class="flex flex-col mx-6 my-3 xs:w-full">

webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html

@@ -23,6 +23,17 @@
             </mat-form-field>
         </div>
 
+        <div class="flex flex-col mt-5 gt-md:flex-row">
+            <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
+                <mat-label>Temperature Display Unit</mat-label>
+                <mat-select [(ngModel)]="temperatureUnit">
+                    <mat-option value="celsius">Celsius</mat-option>
+                    <mat-option value="fahrenheit">Fahrenheit</mat-option>
+                </mat-select>
+            </mat-form-field>
+
+        </div>
+
         <div class="flex">
             <mat-tab-group mat-align-tabs="start">
                 <mat-tab label="Ata">

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<any>;
@@ -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;
     }
 }

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);
                     }
                 }
             },

webapp/frontend/src/app/modules/detail/detail.component.html

@@ -119,7 +119,7 @@
                         <div class="text-secondary text-md">Powered On</div>
                     </div>
                     <div class="my-2 col-span-2 lt-md:col-span-1">
-                        <div>{{smart_results[0]?.temp}}°C</div>
+                        <div>{{smart_results[0]?.temp | temperature:config.temperatureUnit:true}}</div>
                         <div class="text-secondary text-md">Temperature</div>
                     </div>
                 </div>

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))

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

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();
+  });
+});

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)
+  }
+
+}