Added menu with two pages (RawDataPage and DashboardPage)

Added temperature and altitude display in RawDataPage
2 years ago · f5ea6054da
10 changed files with 104 additions and 16 deletions
--- a/WebApp/package.json
+++ b/WebApp/package.json
@ -10,7 +10,6 @@
  "author": "Youen Toupin",
  "license": "AGPL-3.0",
  "dependencies": {
-    "mithril": "^2.0.4"
  },
  "devDependencies": {
    "@types/mithril": "^2.0.9",
@ -20,6 +19,8 @@
    "ts-loader": "^9.2.8",
    "typescript": "^4.6.2",
    "webpack": "^5.70.0",
-    "webpack-cli": "^4.9.2"
+    "webpack-cli": "^4.9.2",
+    "bulma": "^0.9.3",
+    "mithril": "^2.0.4"
  }
 }
--- a/WebApp/src/app.ts
+++ b/WebApp/src/app.ts
@ -1,4 +1,12 @@
 import m from 'mithril';
-import MainPage from './main-page';

-m.mount(document.body, MainPage);
+import Layout from './layout';
+import RawDataPage from './raw-data-page';
+import DashboardPage from './dashboard-page';
+
+require('../node_modules/bulma/css/bulma.css');
+
+m.route(document.body, "/raw", {
+	"/dashboard": { render: () => m(Layout, m(DashboardPage)) },
+    "/raw": { render: () => m(Layout, m(RawDataPage)) },
+});
--- a/WebApp/src/dashboard-page.tsx
+++ b/WebApp/src/dashboard-page.tsx
@ -0,0 +1,29 @@
+import m from 'mithril';
+import { MonitorApi, Status } from './monitor-api';
+
+export default class DashboardPage {
+	api = new MonitorApi();
+	status?: Status;
+	autoRefresh = true;
+	
+	oninit() {
+		this.refresh();
+	}
+	
+	onbeforeremove() {
+		this.autoRefresh = false;
+	}
+	
+	async refresh() {
+		this.status = await this.api.getStatus();
+		if(this.autoRefresh)
+			setTimeout(() => { if(this.autoRefresh) this.refresh(); }, 500);
+	}
+	
+	view() {
+		return this.status
+			? <div class="dashboard-page">
+			</div>
+			: <p>Chargement...</p>;
+	}
+}
--- a/WebApp/src/index.html
+++ b/WebApp/src/index.html
@ -1,6 +1,7 @@
 <!DOCTYPE HTML>
 <head>
 	<meta charset="UTF-8"/>
+	<meta name="viewport" content="width=device-width, initial-scale=1"/>
 	<title>Ordinateur de bord</title>
 </head>
 <body>
--- a/WebApp/src/layout.css
+++ b/WebApp/src/layout.css
@ -0,0 +1,3 @@
+/*html body {
+	font-size: 3rem;
+}*/
--- a/WebApp/src/layout.tsx
+++ b/WebApp/src/layout.tsx
@ -0,0 +1,33 @@
+import m from 'mithril';
+
+require("./layout.css");
+
+export default class Layout {
+	private menuActive = false;
+	
+	view(vnode: m.Vnode) {
+		return [
+			<nav class="navbar" role="navigation" aria-label="main navigation">
+				<div class="navbar-brand">
+					<a class="navbar-item" href='#!/dashboard'>Tableau de bord</a>
+					
+					<a role="button" class={'navbar-burger ' + (this.menuActive ? 'is-active' : '')} onclick={() => this.menuActive = !this.menuActive} aria-label="menu" aria-expanded="false" data-target="mainMenu">
+						<span aria-hidden="true"></span>
+						<span aria-hidden="true"></span>
+						<span aria-hidden="true"></span>
+					</a>
+				</div>
+			
+				<div id="mainMenu" class={'navbar-menu ' + (this.menuActive ? 'is-active' : '')}>
+					<div class="navbar-start" onclick={() => { this.menuActive = false; return true; }}>
+						<a class="navbar-item" href='#!/raw'>Données brutes</a>
+					</div>
+				</div>
+			</nav>,
+			
+			<section>
+				{vnode.children}
+			</section>
+		];
+	}
+}
--- a/WebApp/src/main-page.css
+++ b/WebApp/src/main-page.css
@ -1,3 +0,0 @@
-.main-page p {
-	font-size: 4rem;
-}
--- a/WebApp/src/monitor-api.ts
+++ b/WebApp/src/monitor-api.ts
@ -1,19 +1,26 @@
 import m from 'mithril';

 export interface Status {
-	batteryVoltage: number;
-	motorCurrent: number;
+	batteryVoltage: number; // in Volts
+	motorCurrent: number; // in Amperes
 	speed: number; // in meters per second
+	temperature: number; // in Celcius degrees
+	altitude: number; // in meters above sea level
 };

 interface ApiStatus {
 	v: number;
 	c: number;
 	s: number;
+	t: number;
+	alt: number;
 }

 export class MonitorApi {
-	constructor(private mockServer: boolean) {
+	private mockServer: boolean;
+	
+	constructor() {
+		this.mockServer = window.location.protocol == "file:";
 	}
 	
 	async getStatus(): Promise<Status> {
@ -24,7 +31,9 @@ export class MonitorApi {
 			apiStatus = {
 				v: Math.random() * 20000 + 20000,
 				c: Math.random() * 30000,
-				s: Math.random() * 14000
+				s: Math.random() * 14000,
+				t: Math.random() * 400 - 100,
+				alt: Math.random() * 4500000 - 200000
 			}
 			setTimeout(() => m.redraw(), 0);
 		} else {
@ -37,7 +46,9 @@ export class MonitorApi {
 		return {
 			batteryVoltage: apiStatus.v / 1000,
 			motorCurrent: apiStatus.c / 1000,
-			speed: apiStatus.s / 1000
+			speed: apiStatus.s / 1000,
+			temperature: apiStatus.t / 10,
+			altitude: apiStatus.alt / 1000
 		};
 	}
 }
--- a/WebApp/src/raw-data-page.css
+++ b/WebApp/src/raw-data-page.css
@ -0,0 +1,3 @@
+.raw-data-page p {
+	font-size: 2rem;
+}
--- a/WebApp/src/raw-data-page.tsx
+++ b/WebApp/src/raw-data-page.tsx
@ -1,10 +1,10 @@
 import m from 'mithril';
 import { MonitorApi, Status } from './monitor-api';

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

-export default class MainPage {
-	api = new MonitorApi(false);
+export default class RawDataPage {
+	api = new MonitorApi();
 	status?: Status;
 	autoRefresh = true;
 	
@ -24,11 +24,13 @@ export default class MainPage {
 	
 	view() {
 		return this.status
-			? <div class="main-page">
+			? <div class="raw-data-page">
 				<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>
 			</div>
 			: <p>Chargement...</p>;
 	}