Sites-Camelia/p/camelianimes/scripts/calendar.js
Melaine Gérard 5010b2f78a
All checks were successful
camelia / deploy (push) Successful in 24s
Ajout du calendrier des évènements
2024-10-04 16:03:37 +02:00

94 lines
3.2 KiB
JavaScript

const CAMELIANIME_CHANNEL_ID = "865314473668771850";
const DISCORD_BASE_INVITE = "https://discord.gg/nBuZ9vJ";
function createCard(evt, parent) {
const cardElement = document.createElement('div');
cardElement.classList.add('card');
const gridElement = document.createElement('div');
gridElement.classList.add('grid');
/**
* Data Part
*/
const dataElement = document.createElement('div');
dataElement.classList.add('column');
const svgElement = document.createElement('img');
svgElement.classList.add('icon');
svgElement.src = '../images/calendar.svg';
const colElement = document.createElement('div');
colElement.classList.add('column');
const dateElement = document.createElement('div');
dateElement.classList.add('flex');
dateElement.appendChild(svgElement);
const dateTextElement = document.createElement('div');
dateTextElement.innerHTML = new Date(evt.scheduled_start_time).toLocaleDateString('fr-FR', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});
dateElement.appendChild(dateTextElement);
colElement.appendChild(dateElement);
const titleElement = document.createElement('div');
titleElement.classList.add('anime-name');
titleElement.innerText = evt.name;
colElement.appendChild(titleElement);
dataElement.appendChild(colElement);
/**
* Bouton s'inscrire à la séance
*/
const flexButtonElement = document.createElement('div');
flexButtonElement.classList.add('flex');
const linkElement = document.createElement('a');
linkElement.classList.add('discordButton');
linkElement.href = `${DISCORD_BASE_INVITE}?event=${evt.id}`;
linkElement.target = "_blank";
linkElement.innerText = "S'inscrire à la séance";
flexButtonElement.appendChild(linkElement);
dataElement.appendChild(flexButtonElement);
gridElement.appendChild(dataElement);
/**
* Image Part
*/
const imageParentElement = document.createElement('div');
const imageElement = document.createElement('img');
imageElement.src = `https://cdn.discordapp.com/guild-events/${evt.id}/${evt.image}.png?size=256`;
imageElement.alt = evt.name;
imageElement.classList.add('image');
imageParentElement.appendChild(imageElement);
gridElement.appendChild(imageParentElement);
cardElement.appendChild(gridElement);
parent.appendChild(cardElement);
}
document.addEventListener('readystatechange', async function() {
if (document.readyState === "complete") {
const events = await fetch('https://corsproxy.io/?https://git.crystalyx.net/camelia-studio/Camelianimes-Datas/raw/branch/datas/events.json')
.then(res => res.json())
.catch((err) => {
console.error(err);
return [];
});
const cardParent = document.querySelector('.cards');
// On sort les éléments par date
events.sort((a, b) => new Date(a.scheduled_start_time) - new Date(b.scheduled_start_time));
events.filter(event => event.channel_id === CAMELIANIME_CHANNEL_ID).forEach(evt => {
createCard(evt, cardParent);
});
}
});