diff --git a/WebApp/package.json b/WebApp/package.json index 2644ec4..0ed9246 100644 --- 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" } } diff --git a/WebApp/src/app.ts b/WebApp/src/app.ts index fbe8319..7ec4b0f 100644 --- 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)) }, +}); diff --git a/WebApp/src/dashboard-page.tsx b/WebApp/src/dashboard-page.tsx new file mode 100644 index 0000000..307b602 --- /dev/null +++ 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 + ?
+
+ :

Chargement...

; + } +} diff --git a/WebApp/src/index.html b/WebApp/src/index.html index 408ddef..9f252d1 100644 --- a/WebApp/src/index.html +++ b/WebApp/src/index.html @@ -1,6 +1,7 @@ + Ordinateur de bord diff --git a/WebApp/src/layout.css b/WebApp/src/layout.css new file mode 100644 index 0000000..7cb6790 --- /dev/null +++ b/WebApp/src/layout.css @@ -0,0 +1,3 @@ +/*html body { + font-size: 3rem; +}*/ diff --git a/WebApp/src/layout.tsx b/WebApp/src/layout.tsx new file mode 100644 index 0000000..17a1945 --- /dev/null +++ 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 [ + , + +
+ {vnode.children} +
+ ]; + } +} diff --git a/WebApp/src/main-page.css b/WebApp/src/main-page.css deleted file mode 100644 index 535d5e5..0000000 --- a/WebApp/src/main-page.css +++ /dev/null @@ -1,3 +0,0 @@ -.main-page p { - font-size: 4rem; -} \ No newline at end of file diff --git a/WebApp/src/monitor-api.ts b/WebApp/src/monitor-api.ts index ca2d908..4e11226 100644 --- 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 { @@ -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 }; } } diff --git a/WebApp/src/raw-data-page.css b/WebApp/src/raw-data-page.css new file mode 100644 index 0000000..6221601 --- /dev/null +++ b/WebApp/src/raw-data-page.css @@ -0,0 +1,3 @@ +.raw-data-page p { + font-size: 2rem; +} \ No newline at end of file diff --git a/WebApp/src/main-page.tsx b/WebApp/src/raw-data-page.tsx similarity index 74% rename from WebApp/src/main-page.tsx rename to WebApp/src/raw-data-page.tsx index d419f07..ed4b273 100644 --- a/WebApp/src/main-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 - ?
+ ?

Tension batterie : {this.status.batteryVoltage.toFixed(3)}V

Courant : {this.status.motorCurrent.toFixed(3)}A

Puissance : {(this.status.batteryVoltage * this.status.motorCurrent).toFixed(1)}W

Vitesse : {(this.status.speed * 3.6).toFixed(1)}km/h

+

Temperature : {this.status.temperature.toFixed(1)}°C

+

Altitude : {this.status.altitude.toFixed(1)}m

:

Chargement...

; }