Skip to content

Commit

Permalink
Merge branch 'main' into pr/156
Browse files Browse the repository at this point in the history
  • Loading branch information
johnarban committed Apr 8, 2024
2 parents 4eb333d + 6b10a50 commit 7e7e6ec
Show file tree
Hide file tree
Showing 7 changed files with 222 additions and 37 deletions.
1 change: 1 addition & 0 deletions .github/workflows/build-deploy.yml
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ jobs:
env:
VUE_APP_MAPBOX_ACCESS_TOKEN: ${{ secrets.MAPBOX_ACCESS_TOKEN }}
VUE_APP_CDS_API_KEY: ${{ secrets.CDS_API_KEY }}
VUE_APP_OPENMETEO_API_KEY: ${{ secrets.OPENMETEO_API_KEY }}

# - name: BrowserStack env setup
# uses: browserstack/github-actions/setup-env@master
Expand Down
7 changes: 7 additions & 0 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,13 @@
<meta name="twitter:creator" content="@CosmicDataStory">
<meta name="twitter:image" content="https://projects.cosmicds.cfa.harvard.edu/solar-eclipse-2024/preview.png">
<link rel="icon" href="https://projects.cosmicds.cfa.harvard.edu/cds-website/cosmicds-favicon.png">
<link rel="apple-touch-icon" href="https://projects.cosmicds.cfa.harvard.edu/cds-website/cosmicds-favicon-57.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://projects.cosmicds.cfa.harvard.edu/cds-website/cosmicds-favicon-72.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://projects.cosmicds.cfa.harvard.edu/cds-website/cosmicds-favicon-114.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://projects.cosmicds.cfa.harvard.edu/cds-website/cosmicds-favicon-144.png">
<link rel="shortcut icon" href="https://projects.cosmicds.cfa.harvard.edu/cds-website/cosmicds-favicon.ico">
<meta name="apple-mobile-web-app-title" content="Eclipse 2024">
<link rel="manifest" href="site.webmanifest">
<title>Cosmic Data Stories: Solar Eclipse 2024</title>
</head>

Expand Down
4 changes: 4 additions & 0 deletions public/site.webmanifest
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"name": "Cosmic Data Stories: Solar Eclipse 2024",
"short_name": "Eclipse 2024"
}
11 changes: 10 additions & 1 deletion src/AdvancedWeatherView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -1230,10 +1230,17 @@ export default defineComponent({
this.firstOpen = false;
// this.displayData = false;
}
if (value && (this.defaultLocation.latitudeDeg !== this.location.latitudeDeg || this.defaultLocation.longitudeDeg !== this.location.longitudeDeg)) {
this.location = this.defaultLocation;
}
},
defaultLocation(value: CityLocation) {
console.log('defaultLocation', value);
if (!this.modelValue) {
return;
}
// check if they are the same, if so do nothing
if (value.latitudeDeg === this.location.latitudeDeg && value.longitudeDeg === this.location.longitudeDeg) {
return;
Expand Down Expand Up @@ -1273,10 +1280,12 @@ export default defineComponent({
},
location(value: CityLocation, old: CityLocation) {
console.log('location', value);
if (value.latitudeDeg === old.latitudeDeg && value.longitudeDeg === old.longitudeDeg) {
return;
}
if (!this.modelValue) {
return;
}
if (
value.latitudeDeg !== this.defaultLocation.latitudeDeg
||
Expand Down
200 changes: 181 additions & 19 deletions src/EclipseTimer.vue
Original file line number Diff line number Diff line change
@@ -1,13 +1,36 @@
<template>
<div id="eclipse-timer-container" class="info-overlay-container">
<h1> Eclipse Timer</h1>
<h1>Eclipse Timer</h1>
<div v-if="showTimer" class="eclipse-countdown">
<div class="ec-timer">{{ timeToEclipse }}</div>
<div v-if="!noEclipse" class="ec-timer">{{ timeToShow }}</div>
<div v-if="!noEclipse">
until max eclipse {{ location !== '' ? 'at ' + location : '' }}
{{ timeText }} {{ location !== '' ? 'at ' + location : '' }}
</div>
</div>

<!--
print out the time conditions as a table
<table>
<tr>
<td>Before Max:</td>
<td>{{ beforeMax() }}</td>
</tr>
<tr>
<td>After Max:</td>
<td>{{ afterMax() }}</td>
</tr>
<tr>
<td>Before End Partial:</td>
<td>{{ beforeEndPartial() }}</td>
</tr>
<tr>
<td>Before Totality:</td>
<td>{{ beforeTotality() }}</td>
</tr>
<tr>
<td>In Totality:</td>
<td>{{ inTotality() }}</td>
</tr>
</table> -->

<div v-if="noEclipse">
<p>No eclipse is predicted for this location.</p>
Expand Down Expand Up @@ -134,12 +157,13 @@ export default defineComponent({
},
mounted() {
this.getTimeToEclipse();
setInterval(this.getTimeToEclipse, 1000);
this.updateTimeData();
setInterval(() => {
this.updateTimeData();
}, 1000);
},
data() {
return {
pred: this.prediction,
Expand All @@ -153,6 +177,11 @@ export default defineComponent({
// coverage: this.prediction.coverage[0],
// duration: this.prediction.duration,
timeToEclipse: '',
timeToEndPartial: '',
timeToEndTotality: '',
timeToStartTotality: '',
timeText: '',
timeToShow: '',
};
},
Expand All @@ -178,7 +207,7 @@ export default defineComponent({
isTotal(): boolean {
return this.prediction.type === 'T';
},
timeString(): (date: Date | null) => string {
return (date: Date | null) => {
if (date === null) return '';
Expand Down Expand Up @@ -224,11 +253,66 @@ export default defineComponent({
totalityDuration(): string {
return spaceHMS(this.prediction.duration);
}
},
},
methods: {
beforeMax(): boolean {
if (this.type === '') return false;
if (this.maxTime[0] === null) return false;
return Date.now() <= this.maxTime[0].getTime();
},
afterMax(): boolean {
if (this.type === '') return false;
if (this.maxTime[0] === null) return false;
return Date.now() > this.maxTime[0].getTime();
},
beforeEndPartial(): boolean {
if (this.type === '') return false;
if (this.partialEnd[0] === null) return false;
return Date.now() <= this.partialEnd[0].getTime();
},
afterEndPartial(): boolean {
if (this.type === '') return false;
if (this.partialEnd[0] === null) return false;
return Date.now() > this.partialEnd[0].getTime();
},
beforeTotality(): boolean {
if (this.type !== 'Total') return false;
if (this.centralStart[0] === null) return false;
return Date.now() < this.centralStart[0].getTime();
},
inTotality(): boolean {
if (this.type !== 'Total') return false;
if (this.centralStart[0] === null || this.centralEnd[0] === null) return false;
const now = Date.now();
return now >= this.centralStart[0].getTime() &&
now <= this.centralEnd[0].getTime();
},
afterTotality(): boolean {
if (this.type !== 'Total') return false;
if (this.centralEnd[0] === null) return false;
return Date.now() > this.centralEnd[0].getTime();
},
updateTimeConditions() {
this.beforeMax();
this.afterMax();
this.beforeEndPartial();
this.beforeTotality();
this.inTotality();
},
toUtcString(date: Date | null): string {
if (date === null) return '';
try {
Expand Down Expand Up @@ -258,21 +342,99 @@ export default defineComponent({
if (c === 'b') return [t, 'Below Horizon'];
return [t, ''];
},
msToTime(ms: number) {
const days = Math.floor(ms / dayInMs);
const hours = Math.floor((ms % dayInMs) / hourInMs);
const minutes = Math.floor((ms % hourInMs) / minuteInMs);
const seconds = Math.floor((ms % minuteInMs) / secondInMs);
return `${days} days ${hours}h ${minutes}m ${seconds}s`;
},
getTimeToEclipse() {
const now = new Date();
if (this.type === '') return '';
if (this.maxTime[0] === null) return '';
const timeToEclipse = this.maxTime[0].getTime() - now.getTime();
const timeToEclipse = this.maxTime[0].getTime() - Date.now();
this.timeToEclipse = this.msToTime(timeToEclipse);
},
getTimeToStartTotality() {
if (this.type !== 'Total') return '';
if (this.centralStart[0] === null) return '';
const timeToStart = this.centralStart[0].getTime() - Date.now();
this.timeToStartTotality = this.msToTime(timeToStart);
},
getTimeToEndTotality() {
if (this.type === '') return '';
if (this.centralEnd[0] === null) return '';
const timeToEnd = this.centralEnd[0].getTime() - Date.now();
const days = Math.floor(timeToEclipse / dayInMs);
const hours = Math.floor((timeToEclipse % dayInMs) / hourInMs);
const minutes = Math.floor((timeToEclipse % hourInMs) / minuteInMs);
const seconds = Math.floor((timeToEclipse % minuteInMs) / secondInMs);
const minutes = Math.floor((timeToEnd % hourInMs) / minuteInMs);
const seconds = Math.floor((timeToEnd % minuteInMs) / secondInMs);
this.timeToEndTotality = `${minutes}m ${seconds}s`;
},
// get time left until end of eclipse (end of parital)
getTimeToEndPartial() {
if (this.type === '') return '';
if (this.partialEnd[0] === null) return '';
const timeToEnd = this.partialEnd[0].getTime() - Date.now();
this.timeToEclipse = `${days} days ${hours}h ${minutes}m ${seconds}s`;
const hours = Math.floor((timeToEnd % dayInMs) / hourInMs);
const minutes = Math.floor((timeToEnd % hourInMs) / minuteInMs);
const seconds = Math.floor((timeToEnd % minuteInMs) / secondInMs);
this.timeToEndPartial = `${hours}h ${minutes}m ${seconds}s`;
},
getTimeText(): string {
if (this.type === '') return '';
if (this.type === 'Total' && this.beforeTotality()) {
return 'until totality';
} else if (this.inTotality()) {
return 'until end of totality';
} else if (!this.isTotal && this.beforeMax()) {
return 'until max eclipse';
} else if ((this.afterMax() && this.beforeEndPartial()) || (this.afterTotality() && !this.afterEndPartial())) {
return 'until end of partial eclipse';
} else {
return '';
}
},
getTimeToShow(): string {
// before totality or before max
if (this.type === 'Total' && this.beforeTotality()) {
return this.timeToStartTotality;
} else if (this.inTotality()) {
return this.timeToEndTotality;
} else if (!this.isTotal && this.beforeMax()) {
return this.timeToEclipse;
} else if ((this.afterMax() && this.beforeEndPartial()) || (this.afterTotality() && !this.afterEndPartial())) {
return this.timeToEndPartial;
} else {
return 'The Eclipse has passed';
}
},
updateTime() {
this.getTimeToEclipse();
this.getTimeToStartTotality();
this.getTimeToEndTotality();
this.getTimeToEndPartial();
},
updateTimeData() {
if (this.showTimer) {
this.updateTimeConditions();
this.updateTime();
this.timeText = this.getTimeText();
this.timeToShow = this.getTimeToShow();
}
}
}
},
});
Expand Down Expand Up @@ -383,4 +545,4 @@ label {
}
</style>
</style>
10 changes: 4 additions & 6 deletions src/OpenMeteoForecast.vue
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ export default defineComponent({
location: {
type: Object as PropType<LocationDeg>,
default: () => {return {latitudeDeg: 42, longitudeDeg: -73};},
default: () => { return { latitudeDeg: 42, longitudeDeg: -73 }; },
required: true
},
Expand Down Expand Up @@ -157,7 +157,7 @@ export default defineComponent({
computed: {
openMeteoAPI() {
return `https://api.open-meteo.com/v1/${this.openMeteoApi}`;
return `https://customer-api.open-meteo.com/v1/${this.openMeteoApi}`;
},
utcHour() {
Expand Down Expand Up @@ -262,12 +262,10 @@ export default defineComponent({
}
this.madeCall = true;
const queryParams = new URLSearchParams(this.parameters);
console.log(queryParams);
const fullURL = `${this.openMeteoAPI}?${queryParams.toString()}`;
const fullURL = `${this.openMeteoAPI}?${queryParams.toString()}&apikey=${process.env.VUE_APP_OPENMETEO_API_KEY}`;
return fetch(fullURL)
.then(response => response.json())
.then(data => {
console.log(data);
this.forecast = data as Forecast;
})
.catch(error => {
Expand Down Expand Up @@ -354,4 +352,4 @@ span.omf-hl {
color: #ccc;
}
</style>
</style>
Loading

0 comments on commit 7e7e6ec

Please sign in to comment.