Add more almanac display

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>
-                    {{ sun.sunrise | amLocal | amDateFormat: 'hh:mm:ss A' }}
+                <td colspan="2">
+                    {{ sunTimes.sunrise | amLocal | amDateFormat: 'hh:mm:ss A' }}
                 </td>
             </tr>
             <tr>
                 <td class="almanac-table-header">
                     Sunset
                 </td>
-                <td>
-                    {{ sun.sunset | amLocal | amDateFormat: 'hh:mm:ss A' }}
+                <td colspan="2">
+                    {{ 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");
+}