vehicle-monitor/WebApp/src/pages/raw-data/raw-data-page.tsx

import m from 'mithril';
import { Page } from 'components/page';
import { MonitorApi, Status } from 'monitor-api';

require("./raw-data-page.css");

export class RawDataPage extends Page {
	status: Status = null;
	autoRefresh = true;
	
	oninit() {
		this.status = MonitorApi.get().getStatus();
		this.refresh();
	}
	
	onbeforeremove() {
		this.autoRefresh = false;
	}
	
	async refresh() {
		await MonitorApi.get().autoUpdateInfo();
		this.status = await MonitorApi.get().fetchStatus();
		m.redraw();
		if(this.autoRefresh)
			setTimeout(() => { if(this.autoRefresh) this.refresh(); }, 500);
	}
	
	view() {
		return this.status
			? <div class="raw-data-page">
				<p>{window.screen.availWidth}x{window.screen.availHeight}, DPR={window.devicePixelRatio}</p>
				
				<p>Tension batterie : {this.status.batteryVoltage.toFixed(3)}V</p>
				<p>Courant : {this.status.motorCurrent.toFixed(3)}A</p>
				<p>Puissance : {(this.status.batteryVoltage * this.status.motorCurrent).toFixed(1)}W</p>
				<p>Vitesse : {(this.status.speed * 3.6).toFixed(1)}km/h</p>
				<p>Temperature : {this.status.temperature.toFixed(1)}°C</p>
				<p>Altitude : {this.status.altitude.toFixed(1)}m</p>
				{this.status.latitude ?
					<p>Lat {this.status.latitude.toFixed(5)}° Lng {this.status.latitude.toFixed(5)}°</p>
					: null}
				{this.status.dateTime ?
					<p>Time : {this.status.dateTime.toString()}</p>
					: null}
			</div>
			: <p>Chargement...</p>;
	}
}