plug progression system to camp-api

css/home.css

@@ -25,6 +25,7 @@ width:auto;
 background-color: white;
 display: inline-block;
 padding: 0.7em 0.5em 0.5em 0.5em;
+text-wrap: nowrap;
 }
 
 @keyframes loadbar {

index.html

@@ -8,6 +8,7 @@
 		<link rel="stylesheet" href="css/home.css">
 		<link rel="stylesheet" href="css/drag.css">
 		<script src="js/drag.js" defer></script>
+		<script src="js/progress.js" defer></script>
 		<link rel="icon" type="image/x-icon" href="assets/stickers/ecran.png">
 		<title>Camp Interhack</title>
 	</head>
@@ -83,13 +84,13 @@
 			<h3>
 				<span>Où en est-on ?</span>
 			</h3>
-			<section>
+			<section id="progress">
 				<p>Il y a</p>
-				<div class="places"><span class="bar"><span style="width:25%" class="progression lessthanhalf"><span>50/200</span></span></span></div>
-				<p>places déjà réservées</p>
+				<div class="places"><span class="bar"><span id="gauge-bar" style="width:0" class="progression lessthanhalf"><span id="gauge-text">?/200</span></span></span></div>
+				<p>places déjà réservées. Ouverture prochaine des inscriptions !</p>
 				<br>
 				<p>Et nous avons reçu</p>
-				<div class="places"><span class="bar"><span style="width:52.45%" class="progression morethanhalf"><span>52,45%</span></span></span></div>
+				<div class="places"><span class="bar"><span id="fundraising-bar" style="width:0" class="progression lessthanhalf"><span id="fundraising-text">? %</span></span></span></div>
 				<p>des dons dont nous avons besoin (voir le détail des comptes)</p>
 			</section>
 			<h3>

js/progress.js

@@ -0,0 +1,91 @@
+const gauge_url = "https://api.camp.interhacker.space/api/gauge"
+const fundraising_url = "https://api.camp.interhacker.space/api/fundraising"
+const gaugeMax = 250;
+const fundraisingTotalMax = 20000;
+
+async function getGauge() {
+    // REMOVE WHEN SIGNUP FORM IS OPEN
+    return 0;
+
+    try {
+        const response = await fetch(gauge_url);
+        if (!response.ok) {
+            throw new Error(`Response status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        return result.gauge
+    } catch (error) {
+        console.error(error.message);
+
+        return null;
+    }
+}
+
+async function getFundraisingTotal() {
+    try {
+        const response = await fetch(fundraising_url);
+        if (!response.ok) {
+            throw new Error(`Response status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        return result.total
+    } catch (error) {
+        console.error(error.message);
+
+        return null;
+    }
+}
+
+function percentRatio(ratio) {
+    return Math.floor(ratio * 100);
+}
+
+function setAboveHalf(ratio, element) {
+    if (ratio > 0.5) {
+        element.classList.remove("lessthanhalf");
+        element.classList.add("morethanhalf");
+    }
+}
+
+async function setGauge() {
+    const gauge = await getGauge();
+
+    if (gauge !== null) {
+        const gaugeBar = document.getElementById("gauge-bar");
+        const gaugeText = document.getElementById("gauge-text");
+
+        const gaugeRatio = gauge / gaugeMax;
+
+        gaugeBar.style.setProperty("width", percentRatio(gaugeRatio) + "%");
+        gaugeText.innerText = gauge + "/" + gaugeMax;
+
+        setAboveHalf(gaugeRatio, gaugeBar);
+    }
+}
+
+async function setFundraisingTotal() {
+    const fundraising_total = await getFundraisingTotal();
+
+    if (fundraising_total !== null) {
+        const fundraisingBar = document.getElementById("fundraising-bar");
+        const fundraisingText = document.getElementById("fundraising-text");
+
+        const fundraisingRatio = fundraising_total / fundraisingTotalMax;
+
+        fundraisingBar.style.setProperty("width", percentRatio(fundraisingRatio) + "%");
+        fundraisingText.innerText = percentRatio(fundraisingRatio) + " %";
+
+        setAboveHalf(fundraisingRatio, fundraisingBar);
+    }
+}
+
+async function setProgress() {
+    setGauge();
+    setFundraisingTotal();
+}
+
+document.addEventListener("DOMContentLoaded", setProgress);