andre/olympics-calendar
1
0
Fork 0
mirror of https://github.com/fabrice404/olympics-calendar.git synced 2026-01-29 16:40:00 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add today's events page

Browse Source
This commit is contained in:
Fabrice Lamant
2024-07-26 10:48:44 +02:00
parent bace7b62cc
commit beae3d0507
11 changed files with 24336 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/index.js
View File

@ -108,6 +108,7 @@ const extractSportCalendar = async (sportKey) => {
LOCATION: unit.venueDescription,
_SPORT: sportKey,
_NOCS: [],
_UNITNAME: unit.eventUnitName,
};
if (unit.competitors) {
@ -209,18 +210,54 @@ const generateOutputPage = () => {
html.push("</tr>");
html.push("</table>");
const template = fs.readFileSync(`${__dirname}/template.html`, "utf-8");
const output = template.replace("{{calendars}}", html.join("\r\n"));
const todays = [];
NOCS.sort().forEach((noc) => {
todays.push(`<a href="./today.html?noc=${noc}" class="${linkClass}">${getNOCFlag(noc)} ${noc}</a>`);
});
const template = fs.readFileSync(`${__dirname}/index/template.html`, "utf-8");
const output = template
.replace("{{calendars}}", html.join("\r\n"))
.replace("{{todays}}", todays.join("\r\n"));
fs.writeFileSync("docs/index.html", output);
postcss([autoprefixer, tailwindcss])
.process(fs.readFileSync(`${__dirname}/template.css`, "utf-8"), { from: "template.css", to: "docs/style.css" })
.process(fs.readFileSync(`${__dirname}/index/template.css`, "utf-8"), { from: "index/template.css", to: "docs/style.css" })
.then((result) => {
fs.writeFileSync("docs/style.css", result.css);
});
;
};
const generateTodayPage = () => {
const html = [];
EVENTS.forEach((event) => {
let sport = SPORTS.find((sport) => sport.key === event._SPORT);
if (!sport) {
sport = {
name: "Ceremony",
key: "",
};
}
const summary = event.SUMMARY.match(/ceremony/gi) ? event.SUMMARY : event.SUMMARY.split(" ").slice(1).join(" ");
html.push(`<div class="event py-4" data-start="${event.DTSTART}" data-end="${event.DTEND}" data-noc="${event._NOCS.join(",")}">`);
html.push(" <div class=\"time w-1/4 text-right inline-block text-5xl text-center pr-2 border-r border-slate-900/10\">__:__</div>");
html.push(" <div class=\"inline-block text-black pl-2\">");
html.push(` <div class="text-2xl">${sport.name.toUpperCase()}</div>`);
html.push(` <div class="">${summary}</div>`);
html.push(" </div>");
html.push("</div>");
});
const template = fs.readFileSync(`${__dirname}/today/template.html`, "utf-8");
const output = template
.replace("{{events}}", html.join("\r\n"));
fs.writeFileSync("docs/today.html", output);
};
const main = async () => {
await Promise.all(
[
@ -275,6 +312,7 @@ const main = async () => {
generateCeremoniesEvents();
generateCalendars();
generateOutputPage();
generateTodayPage();
};
main();

27
src/index/template.css Normal file
View File

@ -0,0 +1,27 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
html {
font-size: 12px;
}
.blue {
color: #0081C8;
}
.yellow {
color: #FCB131;
}
.black {
color: #000000;
}
.green {
color: #00A651;
}
.red {
color: #EE334E;
}

6
src/template.html → src/index/template.html
View File

@ -41,6 +41,12 @@
<div>
{{calendars}}
</div>
<div class="text-sm my-10">
<h2 class="text-3xl pb-4 pt-8">View today's events by NOC</h2>
{{todays}}
</div>
<div class="text-sm my-10 text-center">
This webiste is not affiliated with the International Olympic Committee.
All trademarks, logos and brand names are the property of their respective owners.

7
src/template.css
View File

@ -1,7 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
html {
font-size: 12px;
}

0
src/template.js
View File

85
src/today/template.html Normal file
View File

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html>
<head>
<title>Paris 2024 Summer Olympic Games - Today's events</title>
<link href="./style.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Paris 2024 Summer Olympic Games - Today's events">
<meta name="keywords" content="Paris 2024, Summer Olympic Games - Today's events">
<meta name="author" content="Fabrice LAMANT">
<script src="https://cdn.jsdelivr.net/npm/luxon@3.4.4/build/global/luxon.min.js"></script>
<meta http-equiv="refresh" content="900">
</head>
<body>
<div class="p-4">
<div class="border-b pb-4 border-slate-900/10">
<h1 class="text-4xl text-center">Paris 2024 - Today's events</h1>
</div>
<div>
{{events}}
</div>
<div class="no-event my-10 text-center text-2xl hidden">
No event today, come back tomorrow! :)
</div>
<div class="text-sm my-10 text-center">
This webiste is not affiliated with the International Olympic Committee.
All trademarks, logos and brand names are the property of their respective owners.
</div>
</div>
<script type="text/javascript">
const DateTime = luxon.DateTime;
const now = DateTime.now();
const noc = new URLSearchParams(window.location.search).get('noc');
let color = 0;
const cycleColor = () => {
color++
color = color % 5
console.log(color);
switch (color) {
case 0: return "blue";
case 1: return "yellow";
case 2: return "black";
case 3: return "green";
case 4: return "red";
}
};
document.querySelectorAll('.event').forEach((element) => {
const start = DateTime.fromISO(element.getAttribute('data-start'));
const end = DateTime.fromISO(element.getAttribute('data-end'));
const nocs = element.getAttribute('data-noc').split(",");
if (nocs.includes(noc)) {
if (now.day === start.day) {
element.querySelector(".time").textContent = start.toLocaleString(DateTime.TIME_24_SIMPLE);
if (end < now) {
element.remove();
} else {
element.classList.add(cycleColor());
}
} else {
element.remove();
}
} else {
element.remove();
}
});
if (document.querySelectorAll('.event').length === 0) {
document.querySelector('.no-event').classList.remove('hidden');
}
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-0KQC1F1K4H"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-0KQC1F1K4H');
</script>
</body>