Merge pull request #343 from trinetra110/approve-topic

[FEAT]: added 'approve topic' page for stakeholder
Harshdev098 · Oct 30, 2024 · 3455da1 · 3455da1
2 parents 6c3d902 + bbdde94
commit 3455da1
Show file tree

Hide file tree

Showing 4 changed files with 223 additions and 1 deletion.
diff --git a/public/approve_topic.html b/public/approve_topic.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <title>Research Topic Approval</title>
+    <link rel="stylesheet" href="css/approve_topic.css">
+</head>
+
+<body>
+    <div style="position: absolute; bottom: 30px; left: 30px;" class="gtranslate_wrapper"></div>
+    <script>
+        window.gtranslateSettings = {
+            default_language: "en",
+            detect_browser_language: true,
+            wrapper_selector: ".gtranslate_wrapper",
+            font_size: 100,
+        };
+    </script>
+    <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>
+
+    <h2 class="section-title">New Topics</h2>
+    <div id="newTopics" class="topic-section">
+        <!-- Cards will be dynamically generated here -->
+    </div>
+
+    <h2 class="section-title">Approved Topics</h2>
+    <div id="approvedTopics" class="topic-section">
+        <!-- Approved topic cards will appear here -->
+    </div>
+
+    <!-- Modal for viewing topic details -->
+    <div id="modal" class="modal">
+        <div class="modal-content">
+            <span id="closeModal" class="close">&times;</span>
+            <h3>Topic Details</h3>
+            <p><strong>Student Name:</strong> <span id="studentName"></span></p>
+            <p><strong>Topic:</strong> <span id="topicTitle"></span></p>
+            <p><strong>Description:</strong> <span id="topicDescription"></span></p>
+            <button id="approveBtn" class="action-btn">Approve</button>
+            <button id="cancelBtn" class="action-btn cancel">Cancel</button>
+        </div>
+    </div>
+
+    <script src="script/approve_topic.js"></script>
+</body>
+
+</html>
diff --git a/public/css/approve_topic.css b/public/css/approve_topic.css
@@ -0,0 +1,90 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Arial, sans-serif;
+  background-color: #f5f5f5;
+}
+
+.section-title {
+  text-align: center;
+  font-size: 28px;
+  color: #333;
+  margin-top: 20px;
+}
+
+.topic-section {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 16px;
+  padding: 20px;
+}
+
+.topic-card {
+  background-color: #fff;
+  border-radius: 12px;
+  padding: 16px;
+  text-align: center;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.topic-card h4 {
+  font-size: 20px;
+  color: #444;
+}
+
+.view-btn {
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  padding: 8px 16px;
+  margin-top: 10px;
+  cursor: pointer;
+  border-radius: 6px;
+}
+
+.view-btn:hover {
+  background-color: #0056b3;
+}
+
+.modal {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  align-items: center;
+  justify-content: center;
+}
+
+.modal-content {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 12px;
+  width: 90%;
+  max-width: 400px;
+}
+
+.close {
+  float: right;
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.action-btn {
+  background-color: #28a745;
+  color: #fff;
+  padding: 10px 16px;
+  border: none;
+  cursor: pointer;
+  margin: 5px;
+  border-radius: 6px;
+}
+
+.action-btn.cancel {
+  background-color: #dc3545;
+}
diff --git a/public/script/approve_topic.js b/public/script/approve_topic.js
@@ -0,0 +1,82 @@
+const newTopics = [
+  {
+    id: 1,
+    name: "John Doe",
+    topic: "AI in Healthcare",
+    description: "Exploring AI applications in modern healthcare.",
+  },
+  {
+    id: 2,
+    name: "Jane Smith",
+    topic: "Quantum Computing",
+    description: "Introduction to the basics of quantum computing.",
+  },
+  {
+    id: 3,
+    name: "Samuel Lee",
+    topic: "Blockchain for Finance",
+    description: "An analysis of blockchain technology in finance.",
+  },
+];
+
+const approvedTopics = [];
+
+document.addEventListener("DOMContentLoaded", () => {
+  const newTopicsContainer = document.getElementById("newTopics");
+  const approvedTopicsContainer = document.getElementById("approvedTopics");
+  const modal = document.getElementById("modal");
+  const closeModal = document.getElementById("closeModal");
+  const approveBtn = document.getElementById("approveBtn");
+  const cancelBtn = document.getElementById("cancelBtn");
+
+  // Display initial topic cards
+  displayTopics();
+
+  function displayTopics() {
+    newTopicsContainer.innerHTML = newTopics
+      .map(
+        (topic) => `
+          <div class="topic-card">
+             <h4>${topic.topic}</h4>
+             <button class="view-btn" onclick="openModal(${topic.id})">View</button>
+          </div>
+       `
+      )
+      .join("");
+
+    approvedTopicsContainer.innerHTML = approvedTopics
+      .map(
+        (topic) => `
+          <div class="topic-card">
+             <h4>${topic.topic}</h4>
+          </div>
+       `
+      )
+      .join("");
+  }
+
+  function approveTopic() {
+    const topicId = +approveBtn.dataset.topicId;
+    const topicIndex = newTopics.findIndex((t) => t.id === topicId);
+    if (topicIndex !== -1) {
+      approvedTopics.push(newTopics[topicIndex]);
+      newTopics.splice(topicIndex, 1);
+      displayTopics();
+    }
+    modal.style.display = "none";
+  }
+
+  closeModal.addEventListener("click", () => (modal.style.display = "none"));
+  cancelBtn.addEventListener("click", () => (modal.style.display = "none"));
+  approveBtn.addEventListener("click", approveTopic);
+});
+
+// Move openModal function outside to make it global
+function openModal(topicId) {
+  const topic = newTopics.find((t) => t.id === topicId);
+  document.getElementById("studentName").innerText = topic.name;
+  document.getElementById("topicTitle").innerText = topic.topic;
+  document.getElementById("topicDescription").innerText = topic.description;
+  document.getElementById("approveBtn").dataset.topicId = topicId;
+  document.getElementById("modal").style.display = "flex";
+}
diff --git a/public/stk_mainpage.html b/public/stk_mainpage.html
@@ -66,7 +66,7 @@ <h2 style="margin: 4px;padding: 8px;">Allot Papers</h2>
             <div>
                 <h2 style="margin: 4px;padding: 8px;">Approve Topics</h2>
                 <p>Approve topics choosen by the students</p>
-                <a href="#">Go ahead <i class="fa-solid fa-arrow-right"
+                <a href="/approve_topic.html">Go ahead <i class="fa-solid fa-arrow-right"
                         style="font-size: 18px;padding: 0px 4px 0px 10px;"></i></a>
             </div>
         </div>