You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
364 lines
12 KiB
JavaScript
364 lines
12 KiB
JavaScript
|
|
// TODO:
|
|
// * check what does really mean this illumination or the other one !
|
|
// like is it really how much the moon is lit ?
|
|
|
|
// NOTE:
|
|
// 1. the date and time DO coincide with
|
|
// https://www.timeanddate.com/moon/phases/?year=2022
|
|
// to the minute !
|
|
// unlike the "self computed values"
|
|
// (which can differ of 1 day ~ 12h and thus endup in the wrong daybox, even if we don't show the time value)
|
|
// 2. iCalendar give date and time in CET/CEST
|
|
// so we have to use luxon to parse the string as CET, and convert it to a proper date object
|
|
// then we can print this object back according to where the walk happens
|
|
|
|
// test zone for other date
|
|
// first new moon of 2000 according to:
|
|
// https://www.calendar-12.com/moon_phases/2000
|
|
// let now = new Date(Date.parse('06 Jan 2000 19:14:00 GMT+1'));
|
|
// let now = new Date(Date.parse('13 Jan 2000 05:41:00 GMT+1'));
|
|
// let now = new Date(Date.parse('21 Jan 2000 05:41:00 GMT+1'));
|
|
let now = new Date();
|
|
let months_ahead = window.walk_calendar["months_ahead"];
|
|
let month_to_get = now;
|
|
let queue = [];
|
|
|
|
|
|
// UTILITIES
|
|
// ==========================================================================
|
|
|
|
function nextMonth(date, i=1){
|
|
// return the i-th next month
|
|
let nextMonth = new Date(date); // make a copy of date object
|
|
nextMonth.setMonth(nextMonth.getMonth() + i); // add i month
|
|
return nextMonth;
|
|
}
|
|
|
|
function prevMonth(date, i=1){
|
|
// return the i-th next month
|
|
let prevMonth = new Date(date); // make a copy of date object
|
|
prevMonth.setMonth(prevMonth.getMonth() - i); // add i month
|
|
return prevMonth;
|
|
}
|
|
|
|
function zeroPad(num, places) {
|
|
var zero = places - num.toString().length + 1;
|
|
return Array(+(zero > 0 && zero)).join("0") + num;
|
|
}
|
|
|
|
function translatePhaseDutch(phase_name){
|
|
if (phase_name == 'Full moon'){
|
|
return 'Volle maan';
|
|
}
|
|
else if (phase_name == 'New Moon'){
|
|
return 'Nieuwe maan';
|
|
}
|
|
}
|
|
|
|
// FILL CALENDAR WITH DATA
|
|
// ==========================================================================
|
|
|
|
function addDateToCalendar(date, moon){
|
|
// given a moon state object from the API,
|
|
// fill in the template and add it to the calendar
|
|
|
|
// --- data we need from the yaml
|
|
let lat = window.walk_calendar["latitude"];
|
|
let long = window.walk_calendar["longitude"];
|
|
let timezone = window.walk_calendar["timezone"];
|
|
let calendar = window.walk_calendar["calendar"];
|
|
let contact_mail = window.walk_calendar["reservation_mail"];
|
|
|
|
// --- converting the date to walk timezone
|
|
date = date.setZone(timezone);
|
|
// console.log(date.toString());
|
|
|
|
// --- clone template
|
|
let template = $('#cal-entry__template').html();
|
|
let $cal_entry = $($.parseHTML(template));
|
|
|
|
// --- get suncalc moon object
|
|
// for complementary info that are not in the moon API object, such as:
|
|
// earth-moon distance, and illumination
|
|
let moon_calc = getMoonStateFromDate(date, lat, long);
|
|
let distance = moon_calc["distance"];
|
|
// let illumination = (moon_calc["illumination"]*100).toFixed(2);
|
|
|
|
// --- get suncalc sun object
|
|
let walk_sunset = getSunStateFromDate(date, lat, long, timezone)[1];
|
|
|
|
// --- formating the info
|
|
let phase_name = moon.phaseName;
|
|
let phase = moon.isPhaseLimit === 1 ? 0 : 0.5;
|
|
|
|
// API is missing dutch phase name
|
|
if (window.current_local == "nl-be"){
|
|
phase_name = translatePhaseDutch(phase_name);
|
|
}
|
|
|
|
// convert those two luxon dates in 'timezone' to human readable strings
|
|
// whith 'timezone' indicated
|
|
let walk_sunset_time = format_luxon_date(walk_sunset);
|
|
let formated_date = format_luxon_date(date);
|
|
|
|
// let time_id = date.toUnixInteger();
|
|
let time_id =formated_date['date'].split(".").join("-");
|
|
|
|
// --- filling the info
|
|
$cal_entry.attr("id", time_id);
|
|
// --- PHASENAME
|
|
$cal_entry.find(".phase-name").html(phase_name);
|
|
// --- EVENT
|
|
$cal_entry.find(".day").html(formated_date['day']);
|
|
$cal_entry.find(".date").html(formated_date['date']);
|
|
|
|
// --- SECONDARY INFO ---
|
|
$cal_entry.find(".sunset-time").html(walk_sunset_time['time']);
|
|
$cal_entry.find(".moon-time").html(formated_date['time']);
|
|
// $cal_entry.find(".cal-entry__distance span").html(distance.toFixed(0));
|
|
|
|
// --- updating the font
|
|
updateAxis($cal_entry, phase);
|
|
|
|
// --- adding walk calendar info
|
|
if (calendar[time_id]){
|
|
let walk_entry = calendar[time_id];
|
|
|
|
// Event type
|
|
let event_type = walk_entry.event_type[window.current_local.substring(0,2)];
|
|
|
|
// --- add the class
|
|
$cal_entry.addClass("confirmed");
|
|
$cal_entry.find(".reservation .not-confirmed").remove();
|
|
|
|
// --- fill infos
|
|
$cal_entry.find(".event-type").html(event_type);
|
|
$cal_entry.find(".start-time").html(walk_entry.start_time);
|
|
$cal_entry.find(".start-location a").html(walk_entry.start_location);
|
|
$cal_entry.find(".start-location a").attr("href", walk_entry.start_location_link);
|
|
|
|
// --- mail subject
|
|
// only added if event has an entry in yaml AND not a past event
|
|
let mail_subject = [event_type, phase_name, formated_date['date']].join(", ");
|
|
let uri = "mailto:" + contact_mail + "?subject=";
|
|
uri += encodeURIComponent(mail_subject);
|
|
$cal_entry.find(".reservation a").attr("href", uri);
|
|
}
|
|
else{
|
|
$cal_entry.find(".cal-entry__description").remove();
|
|
$cal_entry.find(".reservation .signup").remove();
|
|
}
|
|
|
|
// --- adding classes
|
|
if(date < now){
|
|
$cal_entry.addClass("past");
|
|
$cal_entry.find(".reservation .signup").remove();
|
|
$cal_entry.find(".reservation .not-confirmed").remove();
|
|
}
|
|
else{
|
|
$cal_entry.find(".reservation .past").remove();
|
|
}
|
|
|
|
if(phase === 0){
|
|
$cal_entry.addClass("newmoon");
|
|
}
|
|
else{
|
|
$cal_entry.addClass("fullmoon");
|
|
}
|
|
|
|
|
|
// --- make it clickable
|
|
$cal_entry.on( "click", function() {
|
|
let yaml_entry = '#'+ phase_name + " walk on the " + formated_date['date']
|
|
+ '\n' + time_id + ":";
|
|
navigator.clipboard.writeText(yaml_entry);
|
|
});
|
|
|
|
// --- append to body
|
|
$('#calendar-section .calendar-content').append($cal_entry);
|
|
}
|
|
|
|
function postProcessCalendar(){
|
|
// is called when calendar is entierly finished
|
|
console.log("calendar processed");
|
|
|
|
$('.cal-entry.past').last().addClass('last-past');
|
|
$('.cal-loading').remove();
|
|
|
|
// --- add animation listener
|
|
$('.cal-entry').bind("webkitAnimationEnd mozAnimationEnd animationend", function(){
|
|
$(this).removeClass("animated")
|
|
})
|
|
|
|
$('.cal-entry').mouseenter(function(){
|
|
$(this).addClass("animated");
|
|
})
|
|
}
|
|
|
|
function writeTimezone(){
|
|
let timezone = window.walk_calendar["timezone"];
|
|
let temp_date = luxon.DateTime.now().setZone(timezone);
|
|
temp_date = temp_date.setLocale(window.current_local);
|
|
let offset = luxon.DateTime.now().setZone(timezone).offsetNameShort;
|
|
$('.date-time-info span').html(offset + " (" + timezone + ")");
|
|
}
|
|
|
|
|
|
// PROCESSING API RESPONSE
|
|
// ==========================================================================
|
|
|
|
function processMonthResponse(response){
|
|
|
|
// process the API response
|
|
// in this API the new/full moon event last exactly
|
|
// on the day in which the precise event happens
|
|
|
|
let month_config = response.config;
|
|
let month_calendar = response.calendar;
|
|
console.log("adding", month_config.month + " " + month_config.year);
|
|
|
|
// iterate through every day
|
|
for(let i = 1; i <= month_calendar.daysMonth; i++){
|
|
|
|
let moon = month_calendar.phase[i];
|
|
|
|
// if a new/full moon event happens that day
|
|
// 2 and 4 are first/last quarter,
|
|
// false are the in between waning/waxing days
|
|
if (moon.isPhaseLimit == 1 || moon.isPhaseLimit == 3){
|
|
|
|
// create back a date object from i and month
|
|
// to have easier control on it's display
|
|
// + getting back the exact time of the event from the API
|
|
|
|
// NOTE: in which UTC does icalc37 is giving us the calendar?
|
|
// it seems it's given in CET : https://en.wikipedia.org/wiki/Central_European_Time
|
|
// which oscillate between UTC+1 and UTC+2 according to winter/summer time
|
|
// Note that: "When the time zone offset is absent,
|
|
// date-only forms are interpreted as a UTC time and date-time forms are interpreted as local time."
|
|
// so here it's working because MY local time is == to CET
|
|
// but a computer in china would not parse the date correctly...
|
|
// we can not precise CET and it's non-trivial to convert from: CET -> GMT -> USER TIME
|
|
// because it has to take in account the rules of when CET = UTC+1 pr UTC+2
|
|
// https://stackoverflow.com/questions/20867562/create-a-date-object-with-cet-timezone
|
|
|
|
// old code
|
|
// let date_str = [month_config.month, i, month_config.year, moon.timeEvent].join(" ");
|
|
// let date = new Date(date_str);
|
|
|
|
// IANA for the CET date we got from the API: Europe/Brussels
|
|
// IANA for the place where the walk happens: Europe/Brussels
|
|
// those are conceptually independant !!
|
|
// see luxon documentation: https://moment.github.io/luxon/#/zones
|
|
|
|
let dateISO = [month_config.year, zeroPad(month_config.month,2), zeroPad(i,2)].join("-");
|
|
let timeISO = moon.timeEvent.split(":").map(x => zeroPad(x,2)).join(":");
|
|
let dateTimeISO = dateISO+"T"+timeISO;
|
|
let date = luxon.DateTime.fromISO(dateTimeISO, { zone: "Europe/Brussels" });
|
|
// console.log(dateTimeISO);
|
|
// console.log(date.zoneName);
|
|
|
|
addDateToCalendar(date, moon);
|
|
}
|
|
}
|
|
}
|
|
|
|
// API CALLS & QUEUE HANDLING
|
|
// ==========================================================================
|
|
|
|
//based on http://www.wdisseny.com/lluna/?lang=en
|
|
function requestMonthMoonPhases(obj, callback){
|
|
// write the request
|
|
let gets=[];
|
|
for (let i in obj){
|
|
gets.push(i + "=" +encodeURIComponent(obj[i]));
|
|
}
|
|
gets.push("LDZ=" + new Date(obj.year,obj.month-1,1) / 1000);
|
|
let xmlhttp = new XMLHttpRequest();
|
|
let url = "https://www.icalendar37.net/lunar/api/?" + gets.join("&");
|
|
|
|
xmlhttp.onreadystatechange = function() {
|
|
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
|
|
|
|
queue.push({config: obj, calendar: JSON.parse(xmlhttp.responseText)})
|
|
callback();
|
|
|
|
}
|
|
}
|
|
xmlhttp.open("GET", url, true);
|
|
xmlhttp.send();
|
|
}
|
|
|
|
function processQueue() {
|
|
|
|
// Sort the queue according to config month
|
|
queue.sort(function(a, b) {
|
|
if(a.config.year != b.config.year){
|
|
return a.config.year - b.config.year;
|
|
} else{
|
|
return a.config.month - b.config.month;
|
|
}
|
|
});
|
|
// let current_queue = queue.map(x => x.config.month + " " + x.config.year);
|
|
// console.log(current_queue);
|
|
|
|
// Test if the queue is not empty
|
|
// and if it's first element is the next one to add
|
|
if ( queue.length > 0 &&
|
|
queue[0].config.month === month_to_get.getMonth() + 1 &&
|
|
queue[0].config.year === month_to_get.getFullYear()) {
|
|
|
|
// add to calendar
|
|
processMonthResponse(queue[0]);
|
|
|
|
// Remove the first item from the queue as it's already processed
|
|
queue.splice(0, 1);
|
|
|
|
// update the next month to get
|
|
month_to_get = nextMonth(month_to_get);
|
|
months_ahead = months_ahead - 1;
|
|
|
|
// Process the queue again
|
|
processQueue();
|
|
}
|
|
else if ( months_ahead == 0 ) {
|
|
postProcessCalendar();
|
|
}
|
|
}
|
|
|
|
// MAIN
|
|
// ==========================================================================
|
|
|
|
function createCalendar(months_ahead){
|
|
|
|
let new_month = now;
|
|
|
|
for (var i = 0; i < months_ahead; i++) {
|
|
|
|
let lang = window.current_local.substring(0,2);
|
|
|
|
// config to send to the API
|
|
let config_month = {
|
|
lang : lang,
|
|
month : new_month.getMonth() + 1,
|
|
year : new_month.getFullYear()
|
|
}
|
|
|
|
console.log("doing request", config_month.month + " " + config_month.year + " in " + lang);
|
|
requestMonthMoonPhases(config_month, processQueue);
|
|
|
|
// increase the month by 1
|
|
new_month = nextMonth(new_month);
|
|
}
|
|
}
|
|
|
|
|
|
$(document).ready(function(){
|
|
|
|
createCalendar(months_ahead);
|
|
|
|
writeTimezone();
|
|
|
|
});
|