132 lines
4.6 KiB
JavaScript
132 lines
4.6 KiB
JavaScript
const affichageNb = document.getElementById("nb_vehicules");
|
|
const affichageGéo = document.getElementById("géolocalisation");
|
|
const affichageConso = document.getElementById("consommation");
|
|
const boutonPlus = document.getElementById("plus");
|
|
const boutonMoins = document.getElementById("moins");
|
|
const mot_vehicules = document.getElementById("mot_vehic");
|
|
const PRIX_GPS = 30;
|
|
const PRIX_CONSOMMATION = 15;
|
|
const zoneMsg = document.getElementById("msg");
|
|
const txt_restant = document.getElementById("txt_restant");
|
|
const MAX = 500;
|
|
const formulaire = document.querySelector("form");
|
|
console.log("dans le local : ", localStorage.getItem("nbVehicules"));
|
|
const services = [
|
|
{
|
|
nom: "Géolocalisation",
|
|
description: "Suivi en temps réel",
|
|
prix: "30€/véhicule/mois",
|
|
},
|
|
{ nom: "Odomètre", description: "Kilométrage précis", prix: "200€" },
|
|
{
|
|
nom: "Consommation",
|
|
description: "Carburant consommé",
|
|
prix: "15€/véhicule/mois",
|
|
},
|
|
{
|
|
nom: "Impact carbone",
|
|
description: "CO₂ rejeté",
|
|
prix: "30€/véhicule/mois",
|
|
},
|
|
];
|
|
const corps = document.getElementById("services");
|
|
const horloge = document.getElementById("horloge");
|
|
let lignes = "";
|
|
let nbVehicules;
|
|
if (localStorage.getItem("nbVehicules") !== null) {
|
|
nbVehicules = parseInt(localStorage.getItem("nbVehicules"));
|
|
mettreAJourTOTAL();
|
|
} else {
|
|
nbVehicules = 1;
|
|
}
|
|
function mettreAJourTOTAL() {
|
|
affichageNb.textContent = nbVehicules;
|
|
affichageGéo.textContent = nbVehicules * PRIX_GPS;
|
|
affichageConso.textContent = nbVehicules * PRIX_CONSOMMATION;
|
|
mot_vehicules.textContent = nbVehicules === 1 ? "véhicule" : "véhicules";
|
|
}
|
|
boutonPlus.addEventListener("click", function () {
|
|
nbVehicules = nbVehicules + 1;
|
|
if (nbVehicules > 99) {
|
|
nbVehicules = nbVehicules - 1;
|
|
}
|
|
console.log("rajout en cours :", nbVehicules);
|
|
localStorage.setItem("nbVehicules", nbVehicules);
|
|
mettreAJourTOTAL();
|
|
});
|
|
boutonMoins.addEventListener("click", function () {
|
|
if (nbVehicules > 1) {
|
|
nbVehicules = nbVehicules - 1;
|
|
}
|
|
localStorage.setItem("nbVehicules", nbVehicules);
|
|
mettreAJourTOTAL();
|
|
});
|
|
zoneMsg.addEventListener("input", function () {
|
|
const reste = MAX - zoneMsg.value.length;
|
|
txt_restant.textContent = reste;
|
|
txt_restant.style.color = reste < 50 ? "red" : "black";
|
|
});
|
|
formulaire.addEventListener("submit", function (evenement) {
|
|
if (zoneMsg.value.trim() === "") {
|
|
evenement.preventDefault();
|
|
alert("Merci d'écrire un message");
|
|
}
|
|
});
|
|
for (const service of services) {
|
|
console.log(service.nom + " _ " + service.description + " _ " + service.prix);
|
|
}
|
|
for (const service of services) {
|
|
lignes =
|
|
lignes +
|
|
`
|
|
<tr>
|
|
<td>${service.nom}</td>
|
|
<td>${service.description}</td>
|
|
<td>${service.prix}</td>
|
|
</tr>`;
|
|
}
|
|
corps.innerHTML = lignes;
|
|
document.getElementById("color").addEventListener("click", function () {
|
|
document.body.classList.toggle("sombre");
|
|
});
|
|
function heure() {
|
|
horloge.textContent = new Date().toLocaleTimeString();
|
|
}
|
|
{
|
|
heure();
|
|
setInterval(heure, 1000);
|
|
}
|
|
{
|
|
async function Flotte() {
|
|
const message = document.getElementById("message_flotte");
|
|
const corps = document.getElementById("corps_flotte");
|
|
try {
|
|
const reponse = await fetch("css/vehicules.json");
|
|
let toto = reponse.map((x) => parseInt(x.km) + 2);
|
|
const vehicules = await toto.json();
|
|
for (const v of vehicules) {
|
|
const tr = document.createElement("tr");
|
|
tr.textContent = `${v.modele} — ${v.immatriculation} — ${v.km} km`;
|
|
corps.append(tr);
|
|
}
|
|
} catch (erreur) {
|
|
message.textContent =
|
|
"Impossible de charger la flotte (bahahaha mimimimimi)";
|
|
console.error(erreur);
|
|
}
|
|
}
|
|
Flotte();
|
|
}
|
|
function creerNavbar(pageActive) {
|
|
return `
|
|
<div id="nav_barre" class="shadow">
|
|
<h1>FleetZen</h1>
|
|
<div id="buttons">
|
|
<a href="contact.html"><button class="${pageActive === "contact" ? "x_to_x" : "styled"}">contact</button></a>
|
|
<a href="services.html"><button class="${pageActive === "services" ? "x_to_x" : "styled"}">services</button></a>
|
|
<a href="../index.html"><button class="retour btn_icone"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-undo2-icon lucide-undo-2"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"/></svg>retour</button></a>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
document.body.insertAdjacentHTML("afterbegin", creerNavbar("services"));
|