refactored Gauge class to inherit from NumericValue

WebApp/src/components/widgets/gauge.tsx

@@ -1,18 +1,11 @@
 import m from 'mithril';
-import { Widget } from 'components/widgets/widget';
+import { NumericValue } from 'components/widgets/numeric-value';
 import { Pipe } from 'utilities/pipe';
 
 require('./gauge.css');
 
-export class Gauge extends Widget {
-	private gaugeValue: Pipe<number>;
-	private gaugeMaxValue: number;
-	private unit: string;
-	private decimals: number;
-	
+export class Gauge extends NumericValue {
 	protected bars: SVGGeometryElement[] = [];
-	private integralValueElement: HTMLElement;
-	private decimalValueElement: HTMLElement;
 	
 	private displayedValue = 0.0;
 	private targetValue = 0.0;
@@ -27,13 +20,6 @@ export class Gauge extends Widget {
 	
 	constructor(vnode: any) {
 		super(vnode);
-		
-		this.gaugeValue = vnode.attrs.gaugeValue || new Pipe(0.0);
-		this.gaugeMaxValue = vnode.attrs.gaugeMaxValue || 1.0;
-		this.unit = vnode.attrs.unit || '';
-		this.decimals = vnode.attrs.decimals || 0;
-		
-		this.gaugeValue.onChange(() => this.updateGauge());
 	}
 	
 	onbeforeremove(vnode: m.Vnode<{}, {}>) {
@@ -41,26 +27,15 @@ export class Gauge extends Widget {
 		super.onbeforeremove(vnode);
 	}
 	
-	view(vnode: m.Vnode<{}, {}>): m.Children {
-		return <div class="widget gauge" style={'flex: ' + this.widgetWidth}>
-			<p><span class="integral-value"></span><span class="decimal-value"></span><span class="unit">{this.unit}</span></p>
-			<svg>
-			</svg>
-		</div>;
+	
+	protected graphicalRepresentation(vnode: m.Vnode<{}, {}>): m.Children {
+		return <svg></svg>;
 	}
 	
-	updateGauge() {
+	protected onValueChange(value: number) {
 		let now = Date.now() / 1000.0;
 		
-		let value = Math.max(0.0, Math.min(this.gaugeMaxValue, this.gaugeValue.get()));
-		
-		let valueStr = value.toFixed(this.decimals);
-		let parts = valueStr.split('.');
-		
-		this.integralValueElement.innerText = parts[0];
-		this.decimalValueElement.innerText = this.decimals > 0 ? '.' + parts[1] : '';
-		
-		let ratio = value / this.gaugeMaxValue;
+		let ratio = value / (this.maxValue || 1.0);
 		let numBars = this.bars.length;
 		let threshold = 0.33 / numBars;
 		
@@ -124,11 +99,4 @@ export class Gauge extends Widget {
 				bar.classList.toggle('lit', isLit);
 		}
 	}
-	
-	oncreate(vnode: any) {
-		this.integralValueElement = vnode.dom.querySelector('span.integral-value');
-		this.decimalValueElement = vnode.dom.querySelector('span.decimal-value');
-		
-		this.updateGauge();
-	}
 }

WebApp/src/components/widgets/numeric-value.tsx

@@ -5,9 +5,11 @@ import { Pipe } from 'utilities/pipe';
 require('./numeric-value.css');
 
 export class NumericValue extends Widget {
-	private value: Pipe<number>;
-	private unit: string;
-	private decimals: number;
+	protected value: Pipe<number>;
+	protected minValue?: number;
+	protected maxValue?: number;
+	protected unit: string;
+	protected decimals: number;
 	
 	private integralValueElement: HTMLElement;
 	private decimalValueElement: HTMLElement;
@@ -16,32 +18,46 @@ export class NumericValue extends Widget {
 		super(vnode);
 		
 		this.value = vnode.attrs.value || new Pipe(0.0);
+		this.minValue = vnode.attrs.minValue || null;
+		this.maxValue = vnode.attrs.maxValue || null;
 		this.unit = vnode.attrs.unit || '';
 		this.decimals = vnode.attrs.decimals || 0;
 		
-		this.value.onChange(() => this.onValueChange());
+		this.value.onChange(() => this.onValueChange_());
 	}
 	
 	view(vnode: m.Vnode<{}, {}>): m.Children {
 		return <div class="widget gauge" style={'flex: ' + this.widgetWidth}>
 			<p><span class="integral-value"></span><span class="decimal-value"></span><span class="unit">{this.unit}</span></p>
+			{this.graphicalRepresentation(vnode)}
 		</div>;
 	}
 	
-	onValueChange() {
+	protected graphicalRepresentation(vnode: m.Vnode<{}, {}>): m.Children {
+		return [];
+	}
+	
+	protected onValueChange(newValue: number) {
+	}
+	
+	private onValueChange_() {
 		let value = this.value.get();
+		if(this.minValue !== null) value = Math.max(value, this.minValue);
+		if(this.maxValue !== null) value = Math.min(value, this.maxValue);
 		
 		let valueStr = value.toFixed(this.decimals);
 		let parts = valueStr.split('.');
 		
 		this.integralValueElement.innerText = parts[0];
 		this.decimalValueElement.innerText = this.decimals > 0 ? '.' + parts[1] : '';
+		
+		this.onValueChange(value);
 	}
 	
 	oncreate(vnode: any) {
 		this.integralValueElement = vnode.dom.querySelector('span.integral-value');
 		this.decimalValueElement = vnode.dom.querySelector('span.decimal-value');
 		
-		this.onValueChange();
+		this.onValueChange_();
 	}
 }

WebApp/src/pages/dashboard/dashboard-page.tsx

@@ -45,7 +45,7 @@ export class DashboardPage extends Page {
 			m.redraw();
 		this.status = newStatus;
 		
-		let power = this.status.batteryVoltage * this.status.motorCurrent;
+		let power = Math.max(0.0, this.status.batteryVoltage * this.status.motorCurrent);
 		this.power.set(power);
 		
 		const minVoltage = 36.0;
@@ -92,9 +92,9 @@ export class DashboardPage extends Page {
 				</div>
 				
 				<div class="widgets-row" style="height: 40%">
-					<GaugeLinear widgetWidth={0.2} gaugeValue={this.power} gaugeMaxValue={999.0} bottomWidth={0.4} unit="W" />
-					<GaugeCircular widgetWidth={0.6} gaugeValue={this.speed} gaugeMaxValue={50.0} decimals={1} unit="km/h" />
-					<GaugeBattery widgetWidth={0.2} gaugeValue={this.battery} gaugeMaxValue={100.0} unit="%" />
+					<GaugeLinear widgetWidth={0.2} value={this.power} minValue={0} maxValue={999.0} bottomWidth={0.4} unit="W" />
+					<GaugeCircular widgetWidth={0.6} value={this.speed} minValue={0} maxValue={50.0} decimals={1} unit="km/h" />
+					<GaugeBattery widgetWidth={0.2} value={this.battery} minValue={0} maxValue={100.0} unit="%" />
 				</div>
 				
 				<div class="widgets-row">