ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-01-13 17:22:54 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add more almanac display

Browse Source
This commit is contained in:
Chris Kaczor
2019-10-08 18:50:46 -04:00
parent aeb191f66d
commit 166576ab4d
9 changed files with 99 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
Display/package-lock.json generated
View File

@@ -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",

2
Display/package.json
View File

@@ -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",

2
Display/src/app/components/laundry/laundry.component.scss
View File

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

41
Display/src/app/components/weather/almanac/almanac.component.html
View File

@@ -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>

11
Display/src/app/components/weather/almanac/almanac.component.scss
View File

@@ -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;
}

33
Display/src/app/components/weather/almanac/almanac.component.ts
View File

@@ -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]');
}
}

2
Display/src/app/components/weather/current/weather-current.component.scss
View File

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

BIN
Display/src/assets/moon_phases.ttf Normal file
View File

Binary file not shown.

5
Display/src/styles.scss
View File

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