Add more almanac display

Display/package-lock.json

@@ -1943,6 +1943,14 @@
       "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==",
       "dev": true
     },
+    "@types/moment-duration-format": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@types/moment-duration-format/-/moment-duration-format-2.2.2.tgz",
+      "integrity": "sha512-CuYswsMI3y5uR5sD9i/VUqIbZrsYN2eaCs7nH3qpDl2CZlNI48mjMf4ve2RpQ/65irprtnQVetfnea9my+jqcg==",
+      "requires": {
+        "moment": ">=2.14.0"
+      }
+    },
     "@types/node": {
       "version": "8.9.5",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-8.9.5.tgz",
@@ -7816,6 +7824,11 @@
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
       "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
     },
+    "moment-duration-format": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/moment-duration-format/-/moment-duration-format-2.3.2.tgz",
+      "integrity": "sha512-cBMXjSW+fjOb4tyaVHuaVE/A5TqkukDWiOfxxAjY+PEqmmBQlLwn+8OzwPiG3brouXKY5Un4pBjAeB6UToXHaQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

Display/package.json

@@ -23,6 +23,7 @@
     "@angular/platform-browser-dynamic": "~8.2.4",
     "@angular/router": "~8.2.4",
     "@aspnet/signalr": "^1.1.4",
+    "@types/moment-duration-format": "^2.2.2",
     "@types/regression": "^2.0.0",
     "@types/suncalc": "^1.8.0",
     "angular-gridster2": "^8.2.0",
@@ -30,6 +31,7 @@
     "hammerjs": "^2.0.8",
     "highcharts": "^7.2.0",
     "moment": "^2.24.0",
+    "moment-duration-format": "^2.3.2",
     "ngx-moment": "^3.4.0",
     "ngx-socket-io": "^3.0.1",
     "regression": "^2.0.1",

Display/src/app/components/laundry/laundry.component.scss

@@ -1,6 +1,6 @@
 .laundry-current {
   font-size: 14px;
-  padding: 20px;
+  padding: 10px;
 }
 
 .laundry-current-header {

Display/src/app/components/weather/almanac/almanac.component.html

@@ -8,16 +8,40 @@
                 <td class="almanac-table-header">
                     Sunrise
                 </td>
-                <td>
+                <td colspan="2">
-                    {{ sun.sunrise | amLocal | amDateFormat: 'hh:mm:ss A' }}
+                    {{ sunTimes.sunrise | amLocal | amDateFormat: 'hh:mm:ss A' }}
                 </td>
             </tr>
             <tr>
                 <td class="almanac-table-header">
                     Sunset
                 </td>
-                <td>
+                <td colspan="2">
-                    {{ sun.sunset | amLocal | amDateFormat: 'hh:mm:ss A' }}
+                    {{ sunTimes.sunset | amLocal | amDateFormat: 'hh:mm:ss A' }}
+                </td>
+            </tr>
+            <tr>
+                <td class="almanac-table-header">
+                    Day length
+                </td>
+                <td colspan="2">
+                    {{ dayLength() }}
+                </td>
+            </tr>
+            <tr>
+                <td class="almanac-table-header">
+                    Moonrise
+                </td>
+                <td colspan="2">
+                    {{ moonTimes.rise | amLocal | amDateFormat: 'hh:mm:ss A' }}
+                </td>
+            </tr>
+            <tr>
+                <td class="almanac-table-header">
+                    Moonset
+                </td>
+                <td colspan="2">
+                    {{ moonTimes.set | amLocal | amDateFormat: 'hh:mm:ss A' }}
                 </td>
             </tr>
             <tr>
@@ -25,7 +49,14 @@
                     Moon
                 </td>
                 <td>
-                    {{ moonPhaseName(moon.phase) }} - {{ (moon.fraction * 100).toFixed(0) }}% illuminated
+                    {{ moonPhaseName(moon.phase) }}
+                    <br>
+                    {{ (moon.fraction * 100).toFixed(1) }}% illuminated
+                </td>
+                <td>
+                    <div class="moon-phase">
+                        {{ moonPhaseLetter(moon.phase) }}
+                    </div>
                 </td>
             </tr>
         </table>

Display/src/app/components/weather/almanac/almanac.component.scss

@@ -1,10 +1,19 @@
 .almanac-content {
   font-size: 14px;
-  padding: 20px;
+  padding: 10px;
 }
 
 .almanac-table-header {
   font-weight: 500;
   text-align: right;
   padding-right: 10px;
+  white-space: nowrap;
+}
+
+.moon-phase {
+  font-family: moon;
+  font-size: 28px;
+  margin-left: 10px;
+  display: block;
+  margin-top: 1px;
 }

Display/src/app/components/weather/almanac/almanac.component.ts

@@ -4,6 +4,8 @@ import { WeatherService } from 'src/app/services/weather/weather.service';
 import { first } from 'rxjs/operators';
 
 import * as SunCalc from 'suncalc';
+import * as moment from 'moment';
+import 'moment-duration-format';
 
 @Component({
     selector: 'app-almanac',
@@ -13,7 +15,8 @@ import * as SunCalc from 'suncalc';
 export class AlmanacComponent implements OnInit {
     public loaded = false;
     public latestReading: WeatherReading;
-    public sun: SunCalc.GetTimesResult;
+    public sunTimes: SunCalc.GetTimesResult;
+    public moonTimes: SunCalc.GetMoonTimes;
     public moon: SunCalc.GetMoonIlluminationResult;
 
     constructor(private weatherService: WeatherService) { }
@@ -30,7 +33,8 @@ export class AlmanacComponent implements OnInit {
 
             const date = new Date();
 
-            this.sun = SunCalc.getTimes(date, this.latestReading.Latitude, this.latestReading.Longitude);
+            this.sunTimes = SunCalc.getTimes(date, this.latestReading.Latitude, this.latestReading.Longitude);
+            this.moonTimes = SunCalc.getMoonTimes(date, this.latestReading.Latitude, this.latestReading.Longitude);
             this.moon = SunCalc.getMoonIllumination(date);
 
             this.loaded = true;
@@ -56,4 +60,29 @@ export class AlmanacComponent implements OnInit {
             return 'Waning Crescent';
         }
     }
+
+    moonPhaseLetter(phase: number): string {
+        if (phase === 0) {
+            return '0';
+        } else if (phase < 0.25) {
+            return 'D';
+        } else if (phase === 0.25) {
+            return 'G';
+        } else if (phase < 0.5) {
+            return 'I';
+        } else if (phase === 0.5) {
+            return '1';
+        } else if (phase < 0.75) {
+            return 'Q';
+        } else if (phase === 0.75) {
+            return 'T';
+        } else if (phase < 1.0) {
+            return 'W';
+        }
+    }
+
+    dayLength(): string {
+        const duration = moment.duration((this.sunTimes.sunset.valueOf() - this.sunTimes.sunrise.valueOf()));
+        return duration.format('hh [hours] mm [minutes]');
+    }
 }

Display/src/app/components/weather/current/weather-current.component.scss

@@ -1,6 +1,6 @@
 .weather-current {
   font-size: 14px;
-  padding: 20px;
+  padding: 10px;
 }
 
 .weather-current-header {

Display/src/styles.scss

@@ -13,3 +13,8 @@ body {
   top: 150px;
   left: calc(50% - 50px);
 }
+
+@font-face {
+  font-family: moon;
+  src: url(assets/moon_phases.ttf) format("opentype");
+}