CodelineAtyab · AsmaAljabri · Jun 24, 2025 · Jun 25, 2025 · Jun 26, 2025 · Jul 4, 2025
diff --git a/examples_src/from_asma/VoiceVault/index.html b/examples_src/from_asma/VoiceVault/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VoiceVault</title>
+    <link rel="stylesheet" href="style.css">
+    <!-- Bootstrap CSS CDN -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+
+</head>
+
+<body>
+    <!-- Navbar -->
+    <nav class="navbar navbar-expand-lg navbar-feminine shadow-sm">
+        <div class="container-fluid">
+            <a class="navbar-brand d-flex align-items-center" href="#">
+                <!-- SVG Logo or Text Logo -->
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#d63384" class="me-2"
+                    viewBox="0 0 16 16">
+                    <ellipse cx="8" cy="8" rx="8" ry="8" fill="#ffb6c1" />
+                    <ellipse cx="8" cy="8" rx="4" ry="4" fill="#ff69b4" />
+                </svg>
+                VoiceVault
+            </a>
+            <div class="collapse navbar-collapse">
+                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link active" href="./index.html">Admin Panel</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="./userPortal.html">Complaint Portal</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Breadcrumbs -->
+    <nav aria-label="breadcrumb" class="breadcrumb-feminine py-2 shadow-sm">
+        <div class="container">
+            <ol class="breadcrumb mb-0">
+                <li class="breadcrumb-item"><a href="#" style="color:#d63384;">Home</a></li>
+                <li class="breadcrumb-item active" aria-current="page" style="color:#d63384;"><a href="./userPortal.html" style="color:#d63384;" > Complaints Page</a></li>
+            </ol>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <div class="container my-5">
+        <div class="row justify-content-center">
+            <div class="col-lg-8">
+                <!-- User and Complaint Dropdowns -->
+                <div class="card card-feminine p-4 mb-4 shadow-sm">
+                    <div class="row g-3 align-items-center">
+                        <div class="col-md-6">
+                            <label for="userList" class="form-label fs-5 fw-semibold" style="color:#d63384;">Select User
+                            </label>
+                            <select name="User List" id="userList" class="form-select form-select-lg">
+                                <option value="all" selected>All</option>
+                            </select>
+                        </div>
+                        <div class="col-md-6">
+                            <label for="complaintList" class="form-label fs-5 fw-semibold"
+                                style="color:#d63384;">Select Complaint</label>
+                            <select name="Complaint List" id="complaintList" class="form-select form-select-lg">
+                                <option value="">Please select ...</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Complaint View -->
+                <div id="CompaintViewDiv" class="mt-4">
+                    <!-- Complaint info will be rendered here by JS -->
+                </div>
+            </div>
+        </div>
+    </div>
+    <div>
+        <button id = "deleteComplaint" type="button" class="btn btn-lg btn-danger" >Delete Complaint</button>
+    </div>
+
+    <!-- Bootstrap JS Bundle CDN (for navbar collapse, etc.) -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="./js/getusersdata.js"></script>
+    <script src="./js/getCoplaints.js"></script>
+    <script src="./js/complaintsView.js"></script>
+    <script src="./js/filterUserComplains.js"></script>
+    <script src="./js/deleteComplain.js"></script>
+</body>
+
+</html>
diff --git a/examples_src/from_asma/VoiceVault/js/addUser.js b/examples_src/from_asma/VoiceVault/js/addUser.js
@@ -0,0 +1,39 @@
+       let selectedUserEmailId = "Anonymous";
+document.getElementById("userList").addEventListener("change", (event) => {
+    // console.log(event);
+    selectedUserEmailId = event.target.value;
+    const selectedOption = event.target.options[event.target.selectedIndex];
+    // console.log(selectedUserEmailId);
+});
+function submitComplaint() {
+    // const selectedUserEmailId = SelectedValue; 
+    // const complainuser = document.getElementById('userList');
+
+    const complainTitle = document.getElementById('complainTitle').value;
+
+    const complainComment = document.getElementById('complainComment').value;
+    console.log(`${selectedUserEmailId}--${complainTitle}--${complainComment}`);
+    //send post request to API to submit the complain 
+    const myHeaders = new Headers();
+    myHeaders.append("Content-Type", "application/json");
+
+    const raw = JSON.stringify({
+        "title": complainTitle,
+        "content": complainComment,
+        "by_user": selectedUserEmailId
+    });
+
+    const requestOptions = {
+        method: "POST",
+        headers: myHeaders,
+        body: raw,
+    };
+
+    fetch("http://localhost:9999/complaints", requestOptions)
+        .then((response) => response.json())
+        .then((result) => console.log(result))
+        .catch((error) => console.error(error));
+} 
+document.addEventListener("DOMContentLoaded", () => {
+    document.getElementById("submitComplaint").addEventListener("click", submitComplaint);
+});
diff --git a/examples_src/from_asma/VoiceVault/js/complaintsView.js b/examples_src/from_asma/VoiceVault/js/complaintsView.js
@@ -0,0 +1,67 @@
+const complViewDive = document.getElementById("CompaintViewDiv");
+
+function populateComplaintView(title, ComplainID, complainContent) {
+    // Create Bootstrap card
+    const card = document.createElement("div");
+    card.className = "card shadow-sm";
+
+    const cardBody = document.createElement("div");
+    cardBody.className = "card-body";
+
+    const heading1 = document.createElement("h5");
+    heading1.className = "card-title  fw-bold mb-3";
+    heading1.innerHTML = "Complaint Information";
+
+    const heading2 = document.createElement("h6");
+    heading2.className = "card-subtitle mb-2 text-dark";
+    heading2.innerHTML = title;
+
+    const compID = document.createElement("div");
+    compID.className = "mb-2 text-muted small";
+    compID.innerHTML = `<strong>ID:</strong> ${ComplainID}`;
+
+    const compcontent = document.createElement("p");
+    compcontent.className = "card-text";
+
+    fetch(`http://localhost:9999/complaints/${ComplainID}`)
+        .then((response) => response.json())
+        .then((jsonComplainObject) => {
+            compcontent.innerHTML = `<strong>Comment:</strong> ${jsonComplainObject.content}`;
+        })
+        .catch((error) => console.error(error));
+
+    // Clear and append
+    complViewDive.innerHTML = "";
+    cardBody.appendChild(heading1);
+    cardBody.appendChild(heading2);
+    cardBody.appendChild(compID);
+    cardBody.appendChild(compcontent);
+    card.appendChild(cardBody);
+    complViewDive.appendChild(card);
+};
+
+document.getElementById("complaintList").addEventListener("change", (event) => {
+
+    const SelectedValue = event.target.value;
+    const selectedOption = event.target.options[event.target.selectedIndex];
+
+    populateComplaintView(selectedOption.text, SelectedValue);
+
+});
+
+    // fetch(`http://localhost:9999/complaints/${SelectedValue}`)
+    //     .then((response) => response.json())
+    //     .then((jsonComplainObject) => {
+    //         compcontent.innerHTML = jsonComplainObject.content;
+    //     })
+    //     .catch((error) => console.error(error));
+
+    // complViewDive.innerHTML = "";
+    // complViewDive.appendChild(heading1);
+    // complViewDive.appendChild(heading2);
+    // complViewDive.appendChild(compID);
+    // complViewDive.appendChild(compcontent);
+
+
+
+
-    // fetch(`http://localhost:9999/complaints/${SelectedValue}`)
-    //     .then((response) => response.json())
-    //     .then((jsonComplainObject) => {
-    //         compcontent.innerHTML = jsonComplainObject.content;
-    //     })
-    //     .catch((error) => console.error(error));
-
-    // complViewDive.innerHTML = "";
-    // complViewDive.appendChild(heading1);
-    // complViewDive.appendChild(heading2);
-    // complViewDive.appendChild(compID);
-    // complViewDive.appendChild(compcontent);
+// Removed redundant commented-out code block for improved code cleanliness.
-    // fetch(`http://localhost:9999/complaints/${SelectedValue}`)
-    //     .then((response) => response.json())
-    //     .then((jsonComplainObject) => {
-    //         compcontent.innerHTML = jsonComplainObject.content;
-    //     })
-    //     .catch((error) => console.error(error));
-
-    // complViewDive.innerHTML = "";
-    // complViewDive.appendChild(heading1);
-    // complViewDive.appendChild(heading2);
-    // complViewDive.appendChild(compID);
-    // complViewDive.appendChild(compcontent);
+// Removed redundant commented-out code block for improved code cleanliness.
diff --git a/examples_src/from_asma/VoiceVault/js/deleteComplain.js b/examples_src/from_asma/VoiceVault/js/deleteComplain.js
@@ -0,0 +1,35 @@
+// let selectedUserEmailId = "Anonymous";
+document.getElementById("complaintList").addEventListener("change", (event) => {
+
+    const SelectedValue = event.target.value;
+    const selectedOption = event.target.options[event.target.selectedIndex];
+
+    populateComplaintView(selectedOption.text, SelectedValue);
+
+});
+
+function deleteComplaint(){
+
+    const complaintUuid = document.getElementById("complaintList").value;
+    console.log(`Deleting complaint UUID: ${complaintUuid}`);
+
+    // const myHeaders = new Headers();
+    // myHeaders.append("Content-Type", "application/json");
+    // const raw = JSON.stringify({
+    //     "uuid": complaintUuid
+    // });
+
+    const requestOptions = {
+    method: "DELETE",
+    };
+
+    fetch(`http://localhost:9999/complaints/${complaintUuid}`, requestOptions)
+    .then((response) => response.text())
+    .then((result) => console.log(result))
+    .catch((error) => console.error(error));
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    document.getElementById("deleteComplaint").addEventListener("click", deleteComplaint);
+});
+
diff --git a/examples_src/from_asma/VoiceVault/js/filterUserComplains.js b/examples_src/from_asma/VoiceVault/js/filterUserComplains.js
@@ -0,0 +1,32 @@
+//onst complViewDive = document.getElementById("CompaintViewDiv");
-//onst complViewDive = document.getElementById("CompaintViewDiv");
-//onst complViewDive = document.getElementById("CompaintViewDiv");
+document.getElementById("userList").addEventListener("change", (event) => {
+    // console.log(event);
+    const SelectedValue = event.target.value;
+    const selectedOption = event.target.options[event.target.selectedIndex];
+    console.log(SelectedValue);
+
+    const filteredcomplains = Array.from(complList).filter((OptionObj) => {
+        //console.log(OptionObj.originalObj.by_user, SelectedValue);
+
+        if (OptionObj.originalObj && OptionObj.originalObj.by_user == SelectedValue) {
+            return true;
+        }
+    });
+    console.log(filteredcomplains);
+    // const filteredcomplains = populateComplaintView(SelectedValue);
+
+    hideComplainsOps();
+
+
+    showSpecificComplainOptions(filteredcomplains);
+
+    if (filteredcomplains.length > 0 && filteredcomplains[0] instanceof HTMLOptionElement) {
+        // filteredcomplains[0].selected = true;
+        populateComplaintView(filteredcomplains[0].originalObj.title, filteredcomplains[0].originalObj.uuid);
+        filteredcomplains[0].selected = true;
+
+    }
+
+
+
+});
diff --git a/examples_src/from_asma/VoiceVault/js/getCoplaints.js b/examples_src/from_asma/VoiceVault/js/getCoplaints.js
@@ -0,0 +1,46 @@
+const complList = document.getElementById('complaintList');
+
+// Get complains from the API and populate the complain drop down
+fetch("http://localhost:9999/complaints")
+    .then((response) => response.json())
+    .then((jsonRespoList) => {
+        jsonRespoList.forEach((currComplaintObj) => {
+            // console.log(currComplaintObj);
+            const newOption = document.createElement("option");
+            newOption.textContent = currComplaintObj.title;
+            newOption.value = currComplaintObj.uuid;
+            newOption.originalObj = currComplaintObj;
+
+            // complaintListObj.appendChild(new Option(currComplaintObj.title, currComplaintObj.uuid));
+            complList.appendChild(newOption);
+        });
+        /**
+* {
+       "uuid": "6a5b4c3d-2e1f-0g9h-8i7j-6k5l4m3n2o1p",
+       "title": "Outdated CSS Materials",
+       "time_in_epoch": 1675382400000,
+       "content": "Training materials on responsive design are outdated and don't cover modern CSS Grid techniques.",
+       "by_user": "fatima.farsi@example.com"
+   },
+*/
+
+        // console.log(complList[0].value);
+
+    })
+    .catch((error) => console.error(error));
+
+
+
+
+function hideComplainsOps(){
-function hideComplainsOps(){
+function hideComplaintOps(){
-function hideComplainsOps(){
+function hideComplaintOps(){
+ Array.from(complList).forEach((currComplainOp) => {
+        currComplainOp.hidden = true;
+    });// Clear the existing options
+
+}
+function showSpecificComplainOptions(filteredcomplains) {
+    Array.from(filteredcomplains).forEach((currComplainOp) => {
+        currComplainOp.hidden = false;
+
+    });
+}
diff --git a/examples_src/from_asma/VoiceVault/js/getusersdata.js b/examples_src/from_asma/VoiceVault/js/getusersdata.js
@@ -0,0 +1,22 @@
+const userList = document.getElementById('userList');
+
+var requestOptions = {
+    method: 'GET',
+    redirect: 'follow'
+};
+
+fetch("http://localhost:9999/users", requestOptions)
+    .then(response => response.json())
+    .then((JSONList) => {
+        // console.log(JSONList);
+        //convert the list of the json to list of strings the user name
+        JSONList.forEach((CurrUserObj) => {
+            // console.log(CurrUserObj);
+            const newOption = document.createElement('option');
+            newOption.textContent = CurrUserObj.username;
+            newOption.value = CurrUserObj.email;
+            userList.appendChild(newOption);
+
+        })
+    })
+    .catch(error => console.log('error', error));