Merge branch 'toast' into 'dev'

feat: add toast to edit profile See merge request bernarduswillson/if-3110-2023-01-f!59

Merge branch 'toast' into 'dev'
feat: add toast to edit profile See merge request bernarduswillson/if-3110-2023-01-f!59
16f4ab27 · Ditra Amadia · 4eb17657 · eb66ec82 · 16f4ab27 · 16f4ab27
Commit 16f4ab27 authored 1 year ago by Ditra Amadia
--- a/api/admin/editLanguage.php
+++ b/api/admin/editLanguage.php
@@ -30,6 +30,7 @@ if (isset($_POST['delete'])) {
        echo json_encode(array('status' => 'success', 'message' => 'Language deleted'));
    }
 } else if (isset($_POST['languageName']) && isset($_POST['new-language-pic'])) {
+    $language_id = $_POST['language-id'];
    $language_name = $_POST['languageName'];
    $language_image = $_POST['new-language-pic'];
    $language = $language_model->editLanguage($_POST['language-id'], $language_name, $language_image);
@@ -37,7 +38,7 @@ if (isset($_POST['delete'])) {
    if ($language == null) {
        echo json_encode(array('status' => 'error', 'message' => 'Language exists'));
    } else {
-        header('Location: ../../admin/manage');
+        header("Location: ../../admin/manage");
        echo json_encode(array('status' => 'success', 'message' => 'Language updated'));
    }
 }
\ No newline at end of file
--- a/api/auth/profile.php
+++ b/api/auth/profile.php
@@ -23,6 +23,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        $_SESSION['username'] = $username;
        $_SESSION['email'] = $email;
        $_SESSION['profile_pic'] = $profile_pic;
+        $_SESSION['changes'] = "success";
        header('Location: ../../profile');
        exit();
    }

--- a/app/controllers/Profile.php
+++ b/app/controllers/Profile.php
@@ -8,7 +8,13 @@ class Profile extends Controller {
    $this->view('header/index', $data);
    $this->view('navbar/index');
+    $this->view('toast/index');
    $this->view('profile/index');
    $this->view('footer/index');
+    if (isset($_SESSION["changes"]) && $_SESSION["changes"] == "success") {
+      echo '<script>showToast("Profile updated successfully.");</script>';
+      unset($_SESSION["changes"]);
+    }
  } 
 }
--- a/app/views/admin/edit/language/index.php
+++ b/app/views/admin/edit/language/index.php
@@ -13,20 +13,20 @@ $language_pic = $data["language"]["language_flag"];
    <form action="../../../../../api/admin/editLanguage.php" method="post">
      <!-- Modal -->
      <div class="confirm-container close-modal-trigger">
-          <div class="confirm-card">
+        <div class="confirm-card">
-              <div class="confirm-content">
+          <div class="confirm-content">
-                  <h2 class="text-md text-red font-reg">Delete "<?= $data["language"]["language_name"] ?>"?</h2>
+            <h2 class="text-md text-red font-reg">Delete "<?= $data["language"]["language_name"] ?>"?</h2>
-                  <p class="text-sm text-black font-reg">This action cannot be undone. All associated data will be permanently removed.</p>
+            <p class="text-sm text-black font-reg">This action cannot be undone. All associated data will be permanently removed.</p>
-              </div>
+          </div>
-              <div class="modal-button-container">
+          <div class="modal-button-container">
-                  <button type="button" class="secondary-btn font-reg text-sm close-modal-trigger">
+            <button type="button" class="secondary-btn font-reg text-sm close-modal-trigger">
-                      Cancel
+              Cancel
-                  </button>   
+            </button>   
-                  <button class="primary-btn font-reg text-sm" id="logout-btn" name="delete" type="submit">
+            <button class="primary-btn font-reg text-sm" id="logout-btn" name="delete" type="submit">
-                      Delete
+              Delete
-                  </button>
+            </button>
-              </div>
+          </div>
-          </div>  
+        </div>  
      </div>
      <!--  -->

--- a/app/views/header/index.php
+++ b/app/views/header/index.php
@@ -27,5 +27,6 @@
    <link rel="stylesheet" href="/public/css/create.css">
    <link rel="stylesheet" href="/public/css/modal.css">
    <link rel="stylesheet" href="/public/css/video.css">
+    <link rel="stylesheet" href="/public/css/toast.css">
  </head>
  <body>
\ No newline at end of file
--- a/app/views/profile/index.php
+++ b/app/views/profile/index.php
@@ -71,7 +71,4 @@ $profile_pic = isset($_SESSION['profile_pic']) ? $_SESSION['profile_pic'] : '/pu
    const initialEmail = "<?php echo $email; ?>";
 </script>
 <script src="../../../public/js/profile.js"></script>
 <script src="../../../public/js/modal.js"></script>
-</body>
\ No newline at end of file
-</html>
\ No newline at end of file
--- a/app/views/toast/index.php
+++ b/app/views/toast/index.php
+<!-- Toast -->
+<div id="toast-container" class="toast">
+    <img src="/public/icons/checked.svg" alt="checked-mark" width="40px" height="40px">
+    <p id="toast-message" class="text-sm font-reg text-orange toast-message"></p>
+</div>
+<!--  -->
+<script src="../../../public/js/toast.js"></script>
\ No newline at end of file
--- a/public/css/toast.css
+++ b/public/css/toast.css
+/* ===#===#===#===#===#=== Mobile ===#===#===#===#===#=== */
+.toast {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background-color: var(--white);
+  border: 2px solid var(--orange);
+  border-radius: 50px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 10px;
+  transform: translateY(100px);
+  opacity: 0;
+  transition: all 0.25s;
+}
+.toast.active {
+  transform: translateY(0);
+  opacity: 100;
+}
+.toast p {
+  margin-right: 10px;
+}
+@media (min-width: 768px) {
+  .toast {
+    left: 20px;
+    bottom: 30px;
+    gap: 15px;
+  }
+}
--- a/public/js/toast.js
+++ b/public/js/toast.js
+function showToast(message) {
+  console.log("test");
+  setTimeout(() => {
+    const toastContainer = document.querySelector("#toast-container");
+    const toastMessage = document.querySelector("#toast-message");
+    toastMessage.innerHTML = message;
+    toastContainer.classList.add("active");
+    setTimeout(() => {
+        toastContainer.classList.remove("active");
+    }, 3000);
+  }, 500);
+}
\ No newline at end of file