added icons

WebApp/src/assets.d.ts

@@ -0,0 +1 @@
+declare module "*.png";

WebApp/src/components/widgets/gauge.tsx

@@ -27,6 +27,7 @@ export class Gauge extends NumericValue {
 		super.onbeforeremove(vnode);
 	}
 	
+	protected mainClassName() { return 'gauge'; }
 	
 	protected graphicalRepresentation(vnode: m.Vnode<{}, {}>): m.Children {
 		return <svg></svg>;

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

@@ -11,3 +11,27 @@ div.widget span.decimal-value {
 div.widget span.unit {
 	font-size: 1.6rem;
 }
+
+div.widget div.value-icon {
+	display: inline-block;
+	height: 2.3rem;
+	width: 4rem;
+	text-align: center;
+	margin-right: 0.2rem;
+}
+
+div.widget div.value-icon img {
+	display: inline-block;
+	height: 100%;
+	position: relative;
+	top: 0.2rem;
+}
+
+div.numeric-value {
+	padding-left: 0.5rem;
+}
+
+div.numeric-value span.unit {
+	font-size: 1.1rem;
+	margin-left: 0.2rem;
+}

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

@@ -11,6 +11,8 @@ export class NumericValue extends Widget {
 	protected unit: string;
 	protected decimals: number;
 	
+	protected icon?: string;
+	
 	private integralValueElement: HTMLElement;
 	private decimalValueElement: HTMLElement;
 	
@@ -23,16 +25,25 @@ export class NumericValue extends Widget {
 		this.unit = vnode.attrs.unit || '';
 		this.decimals = vnode.attrs.decimals || 0;
 		
+		this.icon = vnode.attrs.icon || null;
+		
 		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>
+		return <div class={'widget ' + this.mainClassName()} style={'flex: ' + this.widgetWidth}>
+			<p>
+				{this.icon ? <div class="value-icon"><img src={this.icon}></img></div> : null}
+				<span class="integral-value"></span>
+				<span class="decimal-value"></span>
+				<span class="unit">{this.unit}</span>
+			</p>
 			{this.graphicalRepresentation(vnode)}
 		</div>;
 	}
 	
+	protected mainClassName() { return 'numeric-value'; }
+	
 	protected graphicalRepresentation(vnode: m.Vnode<{}, {}>): m.Children {
 		return [];
 	}

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

@@ -9,6 +9,15 @@ import { GaugeLinear } from 'components/widgets/gauge-linear';
 import { GaugeCircular } from 'components/widgets/gauge-circular';
 import { GaugeBattery } from 'components/widgets/gauge-battery';
 
+import AltitudeIcon from 'assets/icons/altitude.png';
+import AscendingElevationIcon from 'assets/icons/ascending-elevation.png';
+import AverageIcon from 'assets/icons/average.png';
+import DistanceIcon from 'assets/icons/distance.png';
+import ElectricityIcon from 'assets/icons/electricity.png';
+import DistanceElectricityIcon from 'assets/icons/distance-electricity.png';
+import TemperatureIcon from 'assets/icons/temperature.png';
+import TimeIcon from 'assets/icons/time.png';
+
 require('./dashboard-page.css');
 
 export class DashboardPage extends Page {
@@ -67,6 +76,7 @@ export class DashboardPage extends Page {
 	}
 	
 	view() {
+		console.log(DistanceIcon);
 		return this.status
 			? <div class="dashboard-page">
 				<div class="widgets-row">
@@ -80,20 +90,20 @@ export class DashboardPage extends Page {
 				</div>
 				
 				<div class="widgets-row">
-					<NumericValue widgetWidth={0.5} value={this.tripDistance} decimals={1} unit="km" />
+					<NumericValue icon={DistanceIcon} widgetWidth={0.5} value={this.tripDistance} decimals={1} unit="km" />
 				</div>
 				<div class="widgets-row">
-					<NumericValue widgetWidth={0.5} value={this.tripAverageSpeed} decimals={1} unit="km/h" />
-					<NumericValue widgetWidth={0.5} value={this.tripAscendingElevation} decimals={1} unit="m" />
+					<NumericValue icon={AverageIcon} widgetWidth={0.5} value={this.tripAverageSpeed} decimals={1} unit="km/h" />
+					<NumericValue icon={AscendingElevationIcon} widgetWidth={0.5} value={this.tripAscendingElevation} decimals={1} unit="m" />
 				</div>
 				<div class="widgets-row">
-					<NumericValue widgetWidth={0.5} value={this.tripAverageConsumption} decimals={1} unit="Wh/km" />
-					<NumericValue widgetWidth={0.5} value={this.tripEnergy} decimals={1} unit="Wh" />
+					<NumericValue icon={ElectricityIcon} widgetWidth={0.5} value={this.tripAverageConsumption} decimals={1} unit="Wh/km" />
+					<NumericValue icon={DistanceElectricityIcon} widgetWidth={0.5} value={this.tripEnergy} decimals={1} unit="Wh" />
 				</div>
 				
 				<div class="widgets-row">
-					<NumericValue widgetWidth={0.5} value={this.temperature} decimals={1} unit="°C" />
-					<NumericValue widgetWidth={0.5} value={this.altitude} decimals={1} unit="m" />
+					<NumericValue icon={TemperatureIcon} widgetWidth={0.5} value={this.temperature} decimals={1} unit="°C" />
+					<NumericValue icon={AltitudeIcon} widgetWidth={0.5} value={this.altitude} decimals={1} unit="m" />
 				</div>
 			</div>
 			: <p>Chargement...</p>;

WebApp/webpack.config.js

@@ -20,6 +20,10 @@ module.exports = {
         test: /\.css$/i,
         use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
+      {
+        test: /\.(png|jpg|jpeg|gif)$/i,
+        type: "asset/resource",
+      },
     ],
   },
   resolve: {