Add more almanac display

2026-01-13 17:22:54 -05:00 · 2019-10-08 18:50:46 -04:00
parent aeb191f66d
commit 166576ab4d
9 changed files with 99 additions and 10 deletions
--- a/Display/package-lock.json
+++ b/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",
--- a/Display/package.json
+++ b/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",
--- a/Display/src/app/components/laundry/laundry.component.scss
+++ b/Display/src/app/components/laundry/laundry.component.scss
@@ -1,6 +1,6 @@
 .laundry-current {
  font-size: 14px;
-  padding: 20px;
+  padding: 10px;
 }

 .laundry-current-header {
--- a/Display/src/app/components/weather/almanac/almanac.component.html
+++ b/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>
--- a/Display/src/app/components/weather/almanac/almanac.component.scss
+++ b/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;
 }
--- a/Display/src/app/components/weather/almanac/almanac.component.ts
+++ b/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]');
+    }
 }
--- a/Display/src/app/components/weather/current/weather-current.component.scss
+++ b/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 {
--- a/Display/src/assets/moon_phases.ttf
+++ b/Display/src/assets/moon_phases.ttf
--- a/Display/src/styles.scss
+++ b/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");
+}