diff --git a/Display/package-lock.json b/Display/package-lock.json
index 16d717f..62d57be 100644
--- 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",
diff --git a/Display/package.json b/Display/package.json
index 1cef08a..77762bc 100644
--- 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",
diff --git a/Display/src/app/components/laundry/laundry.component.scss b/Display/src/app/components/laundry/laundry.component.scss
index 344b5d1..e8d5a3e 100644
--- 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 {
diff --git a/Display/src/app/components/weather/almanac/almanac.component.html b/Display/src/app/components/weather/almanac/almanac.component.html
index 89820bf..1dc51f6 100644
--- a/Display/src/app/components/weather/almanac/almanac.component.html
+++ b/Display/src/app/components/weather/almanac/almanac.component.html
@@ -8,16 +8,40 @@
- |
- {{ sun.sunrise | amLocal | amDateFormat: 'hh:mm:ss A' }}
+ |
+ {{ sunTimes.sunrise | amLocal | amDateFormat: 'hh:mm:ss A' }}
|
- |
- {{ sun.sunset | amLocal | amDateFormat: 'hh:mm:ss A' }}
+ |
+ {{ sunTimes.sunset | amLocal | amDateFormat: 'hh:mm:ss A' }}
+ |
+
+
+
+ |
+ {{ dayLength() }}
+ |
+
+
+
+ |
+ {{ moonTimes.rise | amLocal | amDateFormat: 'hh:mm:ss A' }}
+ |
+
+
+
+ |
+ {{ moonTimes.set | amLocal | amDateFormat: 'hh:mm:ss A' }}
|
@@ -25,7 +49,14 @@
Moon
- {{ moonPhaseName(moon.phase) }} - {{ (moon.fraction * 100).toFixed(0) }}% illuminated
+ {{ moonPhaseName(moon.phase) }}
+
+ {{ (moon.fraction * 100).toFixed(1) }}% illuminated
+ |
+
+
+ {{ moonPhaseLetter(moon.phase) }}
+
|
diff --git a/Display/src/app/components/weather/almanac/almanac.component.scss b/Display/src/app/components/weather/almanac/almanac.component.scss
index f84143d..25be179 100644
--- 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;
}
diff --git a/Display/src/app/components/weather/almanac/almanac.component.ts b/Display/src/app/components/weather/almanac/almanac.component.ts
index b9f6adc..251028d 100644
--- 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]');
+ }
}
diff --git a/Display/src/app/components/weather/current/weather-current.component.scss b/Display/src/app/components/weather/current/weather-current.component.scss
index 969a580..479bfe1 100644
--- 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 {
diff --git a/Display/src/assets/moon_phases.ttf b/Display/src/assets/moon_phases.ttf
new file mode 100644
index 0000000..d0661f3
Binary files /dev/null and b/Display/src/assets/moon_phases.ttf differ
diff --git a/Display/src/styles.scss b/Display/src/styles.scss
index 6d344d6..9c1a392 100644
--- 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");
+}