108 lines
3.1 KiB
TypeScript
108 lines
3.1 KiB
TypeScript
import { md, mdi } from '../filters.ts';
|
|
|
|
const days = {
|
|
'friday': 0,
|
|
'saturday': 1,
|
|
'sunday': 2,
|
|
};
|
|
|
|
const day = 24 * 60 * 60 * 1000;
|
|
const week = 7 * day;
|
|
const endOfWeekend = 2 * day;
|
|
|
|
const getStartAndEnd = (date) => {
|
|
const [ version, year ] = date.name.split(' ');
|
|
const startingMonth = {
|
|
Winter: 1,
|
|
Spring: 4,
|
|
Summer: 7,
|
|
Autumn: 10,
|
|
}[version];
|
|
|
|
// We start searching on the 20th of that specific month
|
|
const d = new Date();
|
|
d.setFullYear(parseInt(year, 10));
|
|
d.setMonth(startingMonth - 1);
|
|
d.setDate(20);
|
|
|
|
for (let i = 0; i < 14; i++) {
|
|
const dateToTry = new Date(d.valueOf() + (i * day));
|
|
if (dateToTry.getDay() !== 5) {
|
|
continue;
|
|
}
|
|
|
|
const oneWeekLater = new Date(dateToTry.valueOf() + week);
|
|
if (dateToTry.getMonth() === oneWeekLater.getMonth()) {
|
|
continue;
|
|
}
|
|
|
|
return {
|
|
start: dateToTry,
|
|
end: new Date(dateToTry.valueOf() + endOfWeekend),
|
|
};
|
|
}
|
|
};
|
|
|
|
export default ({ data, lang, className }) => {
|
|
const strings = data.strings;
|
|
const dates = data.dates;
|
|
const t = (o) => o?.[lang] || '';
|
|
|
|
console.log(dates);
|
|
|
|
return <div
|
|
id={`dates-list-${lang}`}
|
|
className={`ps-hakken-dates ${className}`}
|
|
>
|
|
<p>{t(strings.comingDates)}</p>
|
|
<ul className="ps-hakken-dates--list">
|
|
{dates.map(date => {
|
|
const { start, end } = getStartAndEnd(date);
|
|
const showStartMonth = start.getMonth() !== end.getMonth();
|
|
const untilString = [
|
|
t(strings.friday),
|
|
start.getDate() + '.',
|
|
showStartMonth ? t(strings.months[start.getMonth()]) : null,
|
|
t(strings.until),
|
|
t(strings.sunday),
|
|
end.getDate() + '.',
|
|
t(strings.months[end.getMonth()]),
|
|
].filter(n => n !== null).join(' ');
|
|
|
|
const extraSchedule = date.extraSchedule || [];
|
|
const schedule = [
|
|
...data.baseSchedule.filter(bs => !extraSchedule.find(es => bs.id === es.id)),
|
|
...extraSchedule,
|
|
].sort((a, b) => {
|
|
const dayDiff = days[a.day] - days[b.day];
|
|
if (dayDiff !== 0) {
|
|
return dayDiff;
|
|
};
|
|
|
|
return a.time.localeCompare(b.time);
|
|
});
|
|
|
|
return <li className="ps-hakken-dates--item">
|
|
<h3>{date.name} [{date.theme}]</h3>
|
|
<div dangerouslySetInnerHTML={{ __html: md(t(date.description)) }}></div>
|
|
<p class="ps-hakken-dates--meta">
|
|
<span className="ps-hakken-dates--times">{t(strings.when)}: {untilString}.</span>
|
|
<span className="ps-hakken-dates--location">
|
|
{t(strings.where)}:{' '}
|
|
<span dangerouslySetInnerHTML={{ __html: mdi(t(date.location))}}></span>
|
|
</span>
|
|
</p>
|
|
<details className="ps-hakken-dates--schedule">
|
|
<summary>{t(strings.schedule)}</summary>
|
|
|
|
{schedule.map(entry => <div className="ps-hakken-dates--schedule-entry">
|
|
<h5>{t(strings[entry.day])}{' '}{entry.time}</h5>
|
|
<div dangerouslySetInnerHTML={{ __html: md(t(entry.title)) }}></div>
|
|
</div>)}
|
|
</details>
|
|
</li>;
|
|
})}
|
|
</ul>
|
|
</div>;
|
|
};
|