almanac complete

server/scripts/modules/almanac.js

@@ -1,22 +1,20 @@
 // display sun and moon data
 
-/* globals WeatherDisplay, utils, STATUS, draw, SunCalc, luxon */
+/* globals WeatherDisplay, utils, STATUS, SunCalc, luxon */
 
 // eslint-disable-next-line no-unused-vars
 class Almanac extends WeatherDisplay {
 	constructor(navId, elemId) {
-		super(navId, elemId, 'Almanac');
+		super(navId, elemId, 'Almanac', true, true);
 
 		// pre-load background images (returns promises)
 		this.backgroundImage0 = utils.image.load('images/BackGround3_1.png');
 
-		// load all images in parallel (returns promises)
+		// preload the moon images
-		this.moonImages = [
+		utils.image.preload('images/2/Full-Moon.gif');
-			utils.image.load('images/2/Full-Moon.gif'),
+		utils.image.preload('images/2/Last-Quarter.gif');
-			utils.image.load('images/2/Last-Quarter.gif'),
+		utils.image.preload('images/2/New-Moon.gif');
-			utils.image.load('images/2/New-Moon.gif'),
+		utils.image.preload('images/2/First-Quarter.gif');
-			utils.image.load('images/2/First-Quarter.gif'),
-		];
 
 		this.timing.totalScreens = 1;
 	}
@@ -121,55 +119,47 @@ class Almanac extends WeatherDisplay {
 		const Today = DateTime.local();
 		const Tomorrow = Today.plus({ days: 1 });
 
-		// extract moon images
-		const [FullMoonImage, LastMoonImage, NewMoonImage, FirstMoonImage] = await Promise.all(this.moonImages);
-
 		// sun and moon data
-		this.context.drawImage(await this.backgroundImage0, 0, 0);
+		this.elem.querySelector('.day-1').innerHTML = Today.toLocaleString({ weekday: 'long' });
-		draw.horizontalGradientSingle(this.context, 0, 30, 500, 90, draw.topColor1, draw.topColor2);
+		this.elem.querySelector('.day-2').innerHTML = Tomorrow.toLocaleString({ weekday: 'long' });
-		draw.triangle(this.context, 'rgb(28, 10, 87)', 500, 30, 450, 90, 500, 90);
+		this.elem.querySelector('.rise-1').innerHTML = DateTime.fromJSDate(info.sun[0].sunrise).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase();
-		draw.horizontalGradientSingle(this.context, 0, 90, 640, 190, draw.sideColor1, draw.sideColor2);
+		this.elem.querySelector('.rise-2').innerHTML = DateTime.fromJSDate(info.sun[1].sunrise).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase();
+		this.elem.querySelector('.set-1').innerHTML = DateTime.fromJSDate(info.sun[0].sunset).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase();
+		this.elem.querySelector('.set-2').innerHTML = DateTime.fromJSDate(info.sun[1].sunset).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase();
 
-		draw.titleText(this.context, 'Almanac', 'Astronomical');
+		const days = info.moon.map((MoonPhase) => {
+			const fill = {};
 
-		draw.text(this.context, 'Star4000', '24pt', '#FFFF00', 320, 120, Today.toLocaleString({ weekday: 'long' }), 2, 'center');
-		draw.text(this.context, 'Star4000', '24pt', '#FFFF00', 500, 120, Tomorrow.toLocaleString({ weekday: 'long' }), 2, 'center');
-
-		draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 70, 150, 'Sunrise:', 2);
-		draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 270, 150, DateTime.fromJSDate(info.sun[0].sunrise).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase(), 2);
-		draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 450, 150, DateTime.fromJSDate(info.sun[1].sunrise).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase(), 2);
-
-		draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 70, 180, ' Sunset:', 2);
-		draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 270, 180, DateTime.fromJSDate(info.sun[0].sunset).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase(), 2);
-		draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 450, 180, DateTime.fromJSDate(info.sun[1].sunset).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase(), 2);
-
-		draw.text(this.context, 'Star4000', '24pt', '#FFFF00', 70, 220, 'Moon Data:', 2);
-
-		info.moon.forEach((MoonPhase, Index) => {
 			const date = MoonPhase.date.toLocaleString({ month: 'short', day: 'numeric' });
 
-			draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 120 + Index * 130, 260, MoonPhase.phase, 2, 'center');
+			fill.date = date;
-			draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 120 + Index * 130, 390, date, 2, 'center');
+			fill.type = MoonPhase.phase;
+			fill.icon = { type: 'img', src: Almanac.imageName(MoonPhase.Phase) };
 
-			const image = (() => {
+			return this.fillTemplate('day', fill);
-				switch (MoonPhase.phase) {
-				case 'Full':
-					return FullMoonImage;
-				case 'Last':
-					return LastMoonImage;
-				case 'New':
-					return NewMoonImage;
-				case 'First':
-				default:
-					return FirstMoonImage;
-				}
-			})();
-			this.context.drawImage(image, 75 + Index * 130, 270);
 		});
 
+		const daysContainer = this.elem.querySelector('.moon .days');
+		daysContainer.innerHTML = '';
+		daysContainer.append(...days);
+
 		this.finishDraw();
 	}
 
+	static imageName(type) {
+		switch (type) {
+		case 'Full':
+			return 'images/2/Full-Moon.gif';
+		case 'Last':
+			return 'images/2/Last-Quarter.gif';
+		case 'New':
+			return 'images/2/New-Moon.gif';
+		case 'First':
+		default:
+			return 'images/2/First-Quarter.gif';
+		}
+	}
+
 	// make sun and moon data available outside this class
 	// promise allows for data to be requested before it is available
 	async getSun() {

server/styles/scss/_almanac.scss

@@ -0,0 +1,85 @@
+@use 'shared/_colors'as c;
+@use 'shared/_utils'as u;
+
+#almanac-html.weather-display {
+	background-image: url('../images/BackGround3_1.png');
+}
+
+.weather-display .main.almanac {
+	font-family: 'Star4000';
+	font-size: 24pt;
+	@include u.text-shadow();
+
+	.sun {
+		display: table;
+		margin-left: 50px;
+		height: 100px;
+
+
+		&>div {
+			display: table-row;
+			position: relative;
+
+			&>div {
+				display: table-cell;
+			}
+		}
+
+		.days {
+			color: c.$column-header-text;
+			text-align: right;
+			top: -5px;
+
+			.day {
+				padding-right: 10px;
+			}
+
+		}
+
+		.times {
+			text-align: right;
+
+			.sun-time {
+				width: 200px;
+			}
+
+			&.times-1 {
+				top: -10px;
+			}
+
+			&.times-2 {
+				top: -15px;
+			}
+		}
+	}
+
+	.moon {
+		position: relative;
+		top: -10px;
+
+		padding: 0px 60px;
+
+		.title {
+			color: c.$column-header-text;
+		}
+
+		.day {
+			display: inline-block;
+			text-align: center;
+			width: 130px;
+
+			.icon {
+				// shadow in image make it look off center
+				padding-left: 10px;
+			}
+
+			.date {
+				position: relative;
+				top: -10px;
+			}
+		}
+	}
+
+
+
+}

server/styles/scss/main.scss

@@ -7,4 +7,5 @@
 @import 'local-forecast';
 @import 'progress';
 @import 'radar';
-@import 'regional-forecast';
+@import 'regional-forecast';
+@import 'almanac';

views/index.ejs

@@ -104,6 +104,9 @@
       <div id="regional-forecast-html" class="weather-display">
         <%- include('partials/regional-forecast.ejs') %>
       </div>
+      <div id="almanac-html" class="weather-display">
+        <%- include('partials/almanac.ejs') %>
+      </div>
       <div id="extended-forecast-html" class="weather-display">
         <%- include('partials/extended-forecast.ejs') %>
       </div>

views/partials/almanac.ejs

@@ -0,0 +1,31 @@
+<%- include('header.ejs', {title:'Almanac', hasTime: true}) %>
+<div class="main has-scroll almanac">
+  <div class="sun">
+    <div class="days">
+      <div class="day"></div>
+      <div class="day day-1">Monday</div>
+      <div class="day day-2">Tuesday</div>
+    </div>
+    <div class="times times-1">
+      <div class="name">Sunrise:</div>
+      <div class="sun-time rise-1">6:24 am</div>
+      <div class="sun-time rise-2">6:25 am</div>
+    </div>
+    <div class="times times-2">
+      <div class="name">Sunset:</div>
+      <div class="sun-time set-1">6:24 am</div>
+      <div class="sun-time set-2">6:25 am</div>
+    </div>
+  </div>
+  <div class="moon">
+    <div class="title">Moon Data:</div>
+    <div class="days">
+      <div class="day template">
+        <div class="type"></div>
+        <div class="icon"><img /></div>
+        <div class="date"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<%- include('scroll.ejs') %>