Merge pull request #7 from appen-isen/alertes_but

Alertes but

DOC.md

@@ -20,7 +20,16 @@ This website is <TODO>
 ### Features
 Creation of cards template using bootstrap card template and adapting to our needs
 
-Creation of a cookie system to store the icons used in the navbar and the logo to avoid loading them each time the page is refreshed
+### Icons
+We use icons from [Google Material Icons](https://fonts.google.com/icons)
+How to put an icon left to a text with a gool alignment using Bootstrap and Flex :
+`<p class="d-inline-flex align-items-center">
+    <span class="material-symbols-outlined">sports_basketball<span>
+    Basket
+</p>`
+Works with p, a, and all h HTML tags
+
+The icons used in the navbar and the logo are cached in a cookies system to avoid loading them each time the page is refreshed
 
 ### Graphic specifications
 Creation of a custom margin top (mt-6) to fit to our needs

Front/alerts.js

@@ -0,0 +1,61 @@
+function getSportIconHTML(sportName){
+    switch(sportName.toLowerCase()){
+        case "football":
+            return `<span class="material-symbols-outlined">
+                sports_soccer
+            </span>`
+        case "handball":
+            return `<span class="material-symbols-outlined">
+                sports_handball
+            </span>`
+        case "volleyball":
+            return `<span class="material-symbols-outlined">
+                sports_volleyball
+            </span>`
+        case "basketball":
+            return `<span class="material-symbols-outlined">
+                sports_basketball
+            </span>`
+        case "badminton":
+            return ``
+    }
+}
+
+function deleteAlert(alertId){
+    const alert = bootstrap.Alert.getOrCreateInstance(`body #alertsContainer #${alertId}`)
+    alert.close()
+}
+
+function newGoalAlert(){
+    //CHANGE THIS PART WITH REAL VALUE WHEN LINKING TO DATABASE
+    let sportName = "Football"
+    let teamA = "FCFOUCHE"
+    let teamB = "A3 Grammes"
+    let scoreTeamA = 1
+    let scoreTeamB = 2
+    let goalTeamName = "FCFOUCHE"
+    let noGoalTeamName = "A3 Grammes"
+    let alertId = "testId"
+    let alertsContainer = document.querySelector('body #alertsContainer');
+    let alert = `
+    <div id="${alertId}" class="alert alert-success alert-dismissible fade show" role="alert">
+        <div class="d-flex align-items-center justify-content-between">
+          <h4 class="alert-heading d-inline-flex align-items-center"><span class="material-symbols-outlined">
+            scoreboard
+          </span>BUT !</h4>
+          <h4>${scoreTeamA} - ${scoreTeamB}</h4>
+          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
+        <p>${goalTeamName} vient de marquer un but en ${sportName} face à ${noGoalTeamName} !</p>
+        <hr>
+        <div class="d-flex align-items-center justify-content-between">
+          <p class="mb-0 d-inline-flex align-items-center">${getSportIconHTML(sportName)}${sportName}</p>
+          <p class="mb-0">${teamA}</p>
+          <b><p class="mb-0">${scoreTeamA} - ${scoreTeamB}</p></b>
+          <p class="mb-0">${teamB}</p>
+        </div>
+    </div>
+    `
+    alertsContainer.insertAdjacentHTML("beforeend", alert)
+    setTimeout(deleteAlert, 5000, alertId)
+}

Front/index.html

@@ -9,6 +9,7 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <!--- Ajout d'un fichier css pour les classes personalisé  --->
     <link rel="stylesheet" href="style.css" />
+    <script src="alerts.js"></script>
     <script src="js/cookie.js" defer></script>
     <link rel="icon" href="assets/appen.png">
   </head>
@@ -58,6 +59,9 @@
       </nav>
     </header>
 
+    <div id="alertsContainer" class="position-fixed container z-3">
+      <!-- ALERTS HTML WILL APPEAR HERE -->
+    </div>
 
     <div class="container">
       <div class="col-8 offset-2 mt-6">