add daily rain and timestamp #132

server/scripts/modules/personal-weather.mjs

@@ -6,6 +6,7 @@ import { registerDisplay } from './navigation.mjs';
 import {
 	temperature, pressure, distanceMm, windSpeed,
 } from './utils/units.mjs';
+import { DateTime } from '../vendor/auto/luxon.mjs';
 
 class PersonalWeather extends WeatherDisplay {
 	constructor(navId, elemId) {
@@ -57,6 +58,8 @@ class PersonalWeather extends WeatherDisplay {
 			deviceLocation: this.data.device_location,
 			humidity: `${this.data.Humidity}%`,
 			pressure: `${this.data.Pressure} ${this.data.PressureUnit}`,
+			dailyRain: `${this.data.DailyRain} ${this.data.DailyRainUnit}`,
+			timestamp: `At ${this.data.timestamp}`,
 		};
 
 		const area = this.elem.querySelector('.main');
@@ -97,6 +100,7 @@ const parseData = (data) => {
 	data.WindUnit = windConverter.units;
 	data.DailyRain = inConverter(data.dailyrainin);
 	data.DailyRainUnit = inConverter.units;
+	data.timestamp = DateTime.fromISO(data.date).toFormat('H:mm:ss a EEE MMM d').toUpperCase();
 
 	// set wind speed of 0 as calm
 	if (data.WindSpeed === 0) data.WindSpeed = 'Calm';

server/styles/scss/_personal-weather.scss

@@ -12,6 +12,7 @@
 		font-weight: bold;
 		line-height: 24px;
 		top: 20px;
+		height: 290px;
 
 		.row {
 			margin-bottom: 12px;
@@ -53,5 +54,15 @@
 			overflow: hidden;
 			text-wrap: nowrap;
 		}
+
+		.timestamp {
+			position: absolute;
+			bottom: 15px;
+			right: 10px;
+			text-align: right;
+			font-family: "Star4000 Small";
+			font-size: 24pt;
+			font-weight: normal;
+		}
 	}
 }

views/partials/personal-weather.ejs

@@ -17,8 +17,9 @@
       <div class="pressure value"></div>
     </div>
     <div class="row">
-      <div class="heat-index-label label"></div>
-      <div class="heat-index value"></div>
-    </div>
+      <div class="label">Daily Rain:</div>
+      <div class="dailyRain value"></div>
+    </div>
+    <div class="timestamp value">At 12:34:55 PM</div>
   </div>
 </div>