renamed: database.php -> api/database.php

renamed: getTeachers.php -> api/getTeachers.php renamed: newRating.php -> api/newRating.php new file: images/close.svg new file: images/favicon.ico new file: images/plus.png new file: images/search.png new file: images/upload.png new file: index.html deleted: index.php new file: scripts/loadTeachers.js new file: scripts/popup.js deleted: scripts/script.js new file: scripts/utils/getTeachers.js deleted: style/style.css new file: styles/header.css new file: styles/standard-assets/button.css new file: styles/standard-assets/card.css new file: styles/standard-assets/input.css new file: styles/standard-assets/popup.css new file: styles/styles.css
asterjdm · May 15, 2024 · bbbe506 · bbbe506
1 parent e39a2a6
commit bbbe506
Show file tree

Hide file tree

Showing 21 changed files with 879 additions and 303 deletions.
diff --git a/database.php → api/database.php b/database.php → api/database.php
@@ -4,7 +4,7 @@ class Database {
 
     private $conn;
     public function __construct() {
-        include_once(dirname(__FILE__) . "/../secrets.php");
+        include_once(dirname(__FILE__) . "/secrets.php");
         $this->conn = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);
 
         if ($this->conn->connect_error) {

diff --git a/getTeachers.php → api/getTeachers.php b/getTeachers.php → api/getTeachers.php
@@ -1,4 +1,8 @@
 <?php
+ini_set('display_errors', '1');
+ini_set('display_startup_errors', '1');
+error_reporting(E_ALL);
+
 header('Content-type: application/json');
 
 include_once(dirname(__FILE__) . "/database.php");

diff --git a/newRating.php → api/newRating.php b/newRating.php → api/newRating.php
diff --git a/images/close.svg b/images/close.svg
diff --git a/images/favicon.ico b/images/favicon.ico
diff --git a/images/plus.png b/images/plus.png
diff --git a/images/search.png b/images/search.png
diff --git a/images/upload.png b/images/upload.png
diff --git a/index.html b/index.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/x-icon" href="./images/favicon.ico">
+
+    <!-- Styles -->
+    <link rel="stylesheet" href="./styles/styles.css">
+    <link rel="stylesheet" href="./styles/header.css">
+
+    <!-- Standard assets -->
+    <link rel="stylesheet" href="./styles/standard-assets/button.css">
+    <link rel="stylesheet" href="./styles/standard-assets/input.css">
+    <link rel="stylesheet" href="./styles/standard-assets/popup.css">
+    <link rel="stylesheet" href="./styles/standard-assets/card.css">
+
+    <!-- Scripts -->
+    <script src="./scripts/loadTeachers.js" defer></script>
+    <script src="./scripts/utils/getTeachers.js"></script>
+    <script src="./scripts/popup.js" defer></script>
+
+    <title>CESCO LEAK</title>
+</head>
+
+<body>
+    <!-- Main header -->
+    <header class="main-header">
+        <div class="main-header-title">
+            <h1 class="main-header-title-text1">Cesco-leak</p>
+                <h1 class="main-header-title-text2">cl</p>
+        </div>
+        <div class="main-header-search">
+            <input class="main-header-search-input" type="text" placeholder="Chercher un prof">
+            <img class="main-header-search-img" src="./images/search.png" alt="search icon">
+        </div>
+
+        <button class="standard-button main-header-button" onclick="openPopup('addPopup')">
+            <p class="main-header-button-text">Ajouter un prof</p>
+            <img class="main-header-button-img" src="./images/plus.png" alt="plus icon">
+        </button>
+    </header>
+    <main id="profCards">
+        <!-- Professors cards -->
+    </main>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <!----------------------------- Popups ----------------------------->
+    <div id="addPopup" class="standard-popup">
+        <div class="whole-section">
+            <button class="standard-button standard-popup-close" onclick="closePopup('addPopup')">
+                <img class="standard-popup-close-img" draggable="false" src="./images/close.svg" alt="close icon">
+            </button>
+            <div class="standard-popup-content add-popup">
+                <div class="select-image">
+                    <input id="uploadPhoto" class="upload-photo" type="file">
+                    <img id="previewImage" class="preview-image" src="./images/upload.png">
+                </div>
+                <input class="standard-input insert-name" type="text" placeholder="Entrer un nom">
+                <button class="standard-button send-request">Envoyer</button>
+            </div>
+        </div>
+    </div>
+
+    <div id="commentPopup" class="standard-popup">
+        <div class="whole-section comment-popup">
+            <button class="standard-button standard-popup-close comment-popup" onclick="closePopup('commentPopup')">
+                <img class="standard-popup-close-img" draggable="false" src="./images/close.svg" alt="close icon">
+            </button>
+            <div class="standard-popup-content comment-popup">
+                <div id="standardPopupContentMessages" class="standard-popup-content-messages">
+
+                </div>
+                <div class="standard-popup-content-send-messages">
+                    <input type="text" class="standard-input send-message">
+                    <button class="standard-button send-message">Envoyer</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="ratingPopup" class="standard-popup">
+        <div class="whole-section rating-popup">
+            <button class="standard-button standard-popup-close comment-popup other"
+                onclick="closePopup('ratingPopup')">
+                <img class="standard-popup-close-img comment-popup other" draggable="false" src="./images/close.svg"
+                    alt="close icon">
+            </button>
+            <div class="standard-popup-content rating-popup">
+                <div class="score">
+                    <p class="score-title">Autorité</p>
+                    <div class="score-value">
+                        <input id="ratingValue1" class="value" type="range" min="0" max="5" value="3">
+                        <p id="ratingText1">3</p>
+                    </div>
+                </div>
+                <div class="score">
+                    <p class="score-title">Humour</p>
+                    <div class="score-value">
+                        <input id="ratingValue2" class="value" type="range" min="0" max="5" value="3">
+                        <p id="ratingText2">3</p>
+                    </div>
+                </div>
+                <div class="score">
+                    <p class="score-title">Qualité d'enseignement</p>
+                    <div class="score-value">
+                        <input id="ratingValue3" class="value" type="range" min="0" max="5" value="3">
+                        <p id="ratingText3">3</p>
+                    </div>
+                </div>
+                <div class="score">
+                    <p class="score-title">Gentilesse</p>
+                    <div class="score-value">
+                        <input id="ratingValue4" class="value" type="range" min="0" max="5" value="3">
+                        <p id="ratingText4">3</p>
+                    </div>
+                </div>
+                <div class="standard-button save-ratings">Enregistrer</div>
+            </div>
+        </div>
+    </div>
+
+
+
+</body>
+
+</html>
diff --git a/index.php b/index.php
diff --git a/scripts/loadTeachers.js b/scripts/loadTeachers.js
@@ -0,0 +1,78 @@
+const profCardsEmp = document.getElementById("profCards");
+var htmlResult = "";
+
+function getStarsHtml(n) {
+  let starsHtml = "";
+  for (let i = 0; i < n; i++) {
+    starsHtml += "<label></label>";
+  }
+  return starsHtml;
+}
+
+getTeachers().then(function (teachers) {
+  console.log(teachers);
+  teachers.forEach((teacher) => {
+    console.log(teacher);
+    htmlResult += `
+    <div class='standard-card'>
+      <div class="standard-card-top">
+        <img
+          class="standard-card-image"
+          src="${teacher.image_url}"
+          alt="undefined"
+        />
+        <div class="standard-card-top-right">
+          <h1 class="standard-card-name">${teacher.name}</h1>
+          <button
+            class="standard-button standard-card-top-right-button"
+            onclick="openPopup('ratingPopup')"
+          >
+            Voter
+          </button>
+        </div>
+      </div>
+
+      <div class="standard-card-stars-container">
+        <p class="standart-card-stars-text">Moyenne</p>
+
+        <div class="standard-card-stars">
+          ${getStarsHtml(
+            Math.round(
+              (teacher.teaching_quality +
+                teacher.kindness +
+                teacher.authority +
+                teacher.humor) /
+                4
+            )
+          )}
+        </div>
+
+        <p class="standart-card-stars-text">Autorité</p>
+        <div class="standard-card-stars">
+          ${getStarsHtml(teacher.authority)}
+        </div>
+
+        <p class="standart-card-stars-text">Humour</p>
+        <div class="standard-card-stars">${getStarsHtml(teacher.humor)}</div>
+
+        <p class="standart-card-stars-text">Qualité d'enseignement</p>
+        <div class="standard-card-stars">
+          ${getStarsHtml(teacher.teaching_quality)}
+        </div>
+
+        <p class="standart-card-stars-text">Gentilesse</p>
+        <div class="standard-card-stars">${getStarsHtml(teacher.kindness)}</div>
+      </div>
+      <!-- Open comments popup -->
+      <div
+        class="standard-button standard-card-button"
+        onclick="openPopup('commentPopup')"
+      >
+        Lire les avis
+      </div>
+    </div>
+    `;
+  });
+
+  profCardsEmp.innerHTML = htmlResult;
+});
diff --git a/scripts/popup.js b/scripts/popup.js
@@ -0,0 +1,30 @@
+function openPopup(id) {
+    const popup = document.getElementById(id);
+    popup.classList.add("show");
+    localStorage.setItem("openPopupId", id);
+}
+
+function closePopup(id) {
+    const popup = document.getElementById(id);
+    popup.classList.add("closing");
+    setTimeout(() => {
+        popup.classList.remove("show", "closing");
+    }, 250);
+    localStorage.removeItem("openPopupId");
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+    const openPopupId = localStorage.getItem("openPopupId");
+    if (openPopupId) {
+        openPopup(openPopupId);
+    }
+});
+
+document.addEventListener("keydown", function (event) {
+    if (event.key === "Escape") {
+        const popups = document.querySelectorAll(".show");
+        popups.forEach(function (popup) {
+            closePopup(popup.id);
+        });
+    }
+});