?AlkantarClanX12
Your IP : 216.73.216.177
window.addEventListener("load", () => {
const sglbWeatherApi = document.querySelector("#sglbWeatherApi")
if(sglbWeatherApi){
const api_key = sglbWeatherApi.getAttribute("api-key")
const api_url = sglbWeatherApi.getAttribute("api-url")
// const api_query = "?key="+api_key+"&q=-21.0719246,55.2222648&lang=fr"
const api_query = "?key="+api_key+"&q=Saint-Gilles%20Les%20Bains&lang=fr"
const weather_api_infos = sessionStorage.getItem("weather_api_infos")
const weather_api_infos_expires = sessionStorage.getItem("weather_api_infos_expires")
// Vérifier si un token valide existe déjà
if (weather_api_infos && weather_api_infos_expires && Date.now() < weather_api_infos_expires) {
console.log("Using stored weather_api_infos")
render_weather_template()
} else {
fetch(api_url + api_query)
.then(json => json.json())
.then(data => {
if(data != ""){
// let current = JSON.parse(data)
const expires_in = 10 * 60 * 1000
sessionStorage.setItem("weather_api_infos", JSON.stringify(data))
sessionStorage.setItem("weather_api_infos_expires", Date.now() + expires_in)
render_weather_template()
}
})
.catch(e => console.error(e))
}
function render_weather_template(){
const data = sessionStorage.getItem("weather_api_infos")
console.log(data)
if(data != ""){
const {current, location} = JSON.parse(data)
const html = `
<style>
.weather-container {
max-width: 400px;
margin: auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.weather-icon {
width: 64px;
}
.temp {
font-size: 2em;
font-weight: bold;
}
.details {
text-align: left;
margin-top: 10px;
}
.details p {
margin: 5px 0;
}
</style>
<div class="weather-container">
<h2>Météo à ${location.name}</h2>
<img class="weather-icon" src="${current.condition.icon}" alt="${current.condition.text}">
<p class="temp">${current.temp_c}°C</p>
<p>${current.condition.text}</p>
<div class="details">
<p><strong>Ressenti :</strong> ${current.feelslike_c}°C</p>
<p><strong>Humidité :</strong> ${current.humidity}%</p>
<p><strong>Vent :</strong> ${current.wind_kph} km/h (${current.wind_dir})</p>
<p><strong>Pression :</strong> ${current.pressure_mb} mb</p>
<p><strong>Précipitations :</strong> ${current.precip_mm} mm</p>
<p><strong>Visibilité :</strong> ${current.vis_km} km</p>
<p><strong>Indice UV :</strong> ${current.uv}</p>
<p><strong>Mise à jour :</strong> ${current.last_updated}</p>
</div>
</div>
`
sglbWeatherApi.innerHTML = html
}
}
}
})