You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.8 KiB
63 lines
1.8 KiB
import m from 'mithril'; |
|
import { Widget } from 'components/widgets/widget'; |
|
import { Pipe } from 'utilities/pipe'; |
|
|
|
require('./numeric-value.css'); |
|
|
|
export class NumericValue extends Widget { |
|
protected value: Pipe<number>; |
|
protected minValue?: number; |
|
protected maxValue?: number; |
|
protected unit: string; |
|
protected decimals: number; |
|
|
|
private integralValueElement: HTMLElement; |
|
private decimalValueElement: HTMLElement; |
|
|
|
constructor(vnode: any) { |
|
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_()); |
|
} |
|
|
|
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>; |
|
} |
|
|
|
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_(); |
|
} |
|
}
|
|
|