From 98699cececa1e69762feb44ed4e9ef48bae9d983 Mon Sep 17 00:00:00 2001 From: AsmaAljabri Date: Tue, 24 Jun 2025 12:38:47 +0400 Subject: [PATCH 1/8] updating and solving task --- examples_src/from_asma/VoiceVault/index.html | 38 +++++++++++ .../from_asma/VoiceVault/js/complaintsView.js | 68 +++++++++++++++++++ .../from_asma/VoiceVault/js/getCoplaints.js | 17 +++++ .../from_asma/VoiceVault/js/getusersdata.js | 22 ++++++ examples_src/from_asma/VoiceVault/style.css | 30 ++++++++ examples_src/from_asma/VoiceVault/styles.css | 0 .../VoiceVaultUI/js/populateComplainView.js | 10 +-- 7 files changed, 180 insertions(+), 5 deletions(-) create mode 100644 examples_src/from_asma/VoiceVault/index.html create mode 100644 examples_src/from_asma/VoiceVault/js/complaintsView.js create mode 100644 examples_src/from_asma/VoiceVault/js/getCoplaints.js create mode 100644 examples_src/from_asma/VoiceVault/js/getusersdata.js create mode 100644 examples_src/from_asma/VoiceVault/style.css create mode 100644 examples_src/from_asma/VoiceVault/styles.css diff --git a/examples_src/from_asma/VoiceVault/index.html b/examples_src/from_asma/VoiceVault/index.html new file mode 100644 index 0000000..492278d --- /dev/null +++ b/examples_src/from_asma/VoiceVault/index.html @@ -0,0 +1,38 @@ + + + + + + + VoiceVault + + + + +
+

select names from the list

+ +
+
+

select complaints from the list

+ +
+ + +
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/examples_src/from_asma/VoiceVault/js/complaintsView.js b/examples_src/from_asma/VoiceVault/js/complaintsView.js new file mode 100644 index 0000000..c41f6ed --- /dev/null +++ b/examples_src/from_asma/VoiceVault/js/complaintsView.js @@ -0,0 +1,68 @@ +/* +function viewcomplaints(title, ComplainID) { + + const heading1 = document.createElement("h1"); + heading1.innerHTML = "Complaints View Information"; + + + const heading2 = document.createElement("h2"); + heading2.innerHTML = selectedOption.text; + + + const compID = document.createElement("h3"); + compID.innerHTML = SelectedValue; + + + const compcontent = document.createElement("p"); + + fetch(`http://localhost:9999/complaints/${ComplainID}`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json' + } + }) + .then(response => response.json()) + .then((JSONresult) => { + + compcontent.innerHTML = JSONresult.content; + console.log(JSONresult); + + + + }) + .catch(error => console.log('error', error)); + + +}*/ + + +const complViewDive = document.getElementById("CompaintViewDiv"); +document.getElementById("complaintList").addEventListener("change", (event) => { + + console.log(event); + const SelectedValue = event.target.value; + const selectedOption = event.target.options[event.target.selectedIndex]; + console.log("Selected value:", { + value: SelectedValue, + text: selectedOption.text + }); + + const heading1 = document.createElement("h1"); + heading1.innerHTML = "Complaints View Information"; + + const heading2 = document.createElement("h2"); + heading2.innerHTML = selectedOption.text; + + + const compID = document.createElement("h3"); + compID.innerHTML = SelectedValue; + const compcontent = document.createElement("p"); + + + complViewDive.innerHTML = ""; + complViewDive.appendChild(heading1); + complViewDive.appendChild(heading2); + complViewDive.appendChild(compID); + complViewDive.appendChild(compcontent); + +}); \ No newline at end of file diff --git a/examples_src/from_asma/VoiceVault/js/getCoplaints.js b/examples_src/from_asma/VoiceVault/js/getCoplaints.js new file mode 100644 index 0000000..625911e --- /dev/null +++ b/examples_src/from_asma/VoiceVault/js/getCoplaints.js @@ -0,0 +1,17 @@ +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); + }); + }) + .catch((error) => console.error(error)); diff --git a/examples_src/from_asma/VoiceVault/js/getusersdata.js b/examples_src/from_asma/VoiceVault/js/getusersdata.js new file mode 100644 index 0000000..4702b55 --- /dev/null +++ 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)); \ No newline at end of file diff --git a/examples_src/from_asma/VoiceVault/style.css b/examples_src/from_asma/VoiceVault/style.css new file mode 100644 index 0000000..28efef2 --- /dev/null +++ b/examples_src/from_asma/VoiceVault/style.css @@ -0,0 +1,30 @@ +body { + font-family: Arial, sans-serif; + background: #f5f7fa; + min-height: 100vh; + margin: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +h1 { + color: #333; + margin-bottom: 20px; +} + +select { + padding: 8px 16px; + font-size: 1rem; + border-radius: 4px; + border: 1px solid #bbb; + background: #fff; + margin-bottom: 20px; + outline: none; + transition: border-color 0.2s; +} + +select:focus { + border-color: #0078d7; +} diff --git a/examples_src/from_asma/VoiceVault/styles.css b/examples_src/from_asma/VoiceVault/styles.css new file mode 100644 index 0000000..e69de29 diff --git a/examples_src/from_atyab/VoiceVaultUI/js/populateComplainView.js b/examples_src/from_atyab/VoiceVaultUI/js/populateComplainView.js index 2b69e25..ce45577 100644 --- a/examples_src/from_atyab/VoiceVaultUI/js/populateComplainView.js +++ b/examples_src/from_atyab/VoiceVaultUI/js/populateComplainView.js @@ -15,11 +15,11 @@ function updateComplainView(title, complainId) { // Get complains from the API and populate the complain drop down fetch(`http://localhost:9999/complaints/${complainId}`) - .then((response) => response.json()) - .then((jsonComplainObject) => { - newPara.innerHTML = jsonComplainObject.content; - }) - .catch((error) => console.error(error)); + .then((response) => response.json()) + .then((jsonComplainObject) => { + newPara.innerHTML = jsonComplainObject.content; + }) + .catch((error) => console.error(error)); // Before we append, we should clear the div complainViewDivObj.innerHTML = ""; From 73a9fa6e32711de929b88c75ea9d120606d7a909 Mon Sep 17 00:00:00 2001 From: AsmaAljabri Date: Wed, 25 Jun 2025 09:24:08 +0400 Subject: [PATCH 2/8] updated --- examples_src/from_asma/VoiceVault/index.html | 5 +- .../from_asma/VoiceVault/js/complaintsView.js | 49 +++---------------- .../VoiceVault/js/filterUserComplains.js | 36 ++++++++++++++ .../from_asma/VoiceVault/js/getCoplaints.js | 16 +++++- .../from_asma/VoiceVault/js/getusersdata.js | 4 +- 5 files changed, 63 insertions(+), 47 deletions(-) create mode 100644 examples_src/from_asma/VoiceVault/js/filterUserComplains.js diff --git a/examples_src/from_asma/VoiceVault/index.html b/examples_src/from_asma/VoiceVault/index.html index 492278d..a434047 100644 --- a/examples_src/from_asma/VoiceVault/index.html +++ b/examples_src/from_asma/VoiceVault/index.html @@ -12,14 +12,14 @@

select names from the list

select complaints from the list

@@ -32,6 +32,7 @@

select complaints from the list

+ diff --git a/examples_src/from_asma/VoiceVault/js/complaintsView.js b/examples_src/from_asma/VoiceVault/js/complaintsView.js index c41f6ed..9403cf8 100644 --- a/examples_src/from_asma/VoiceVault/js/complaintsView.js +++ b/examples_src/from_asma/VoiceVault/js/complaintsView.js @@ -1,44 +1,5 @@ -/* -function viewcomplaints(title, ComplainID) { - - const heading1 = document.createElement("h1"); - heading1.innerHTML = "Complaints View Information"; - - - const heading2 = document.createElement("h2"); - heading2.innerHTML = selectedOption.text; - - - const compID = document.createElement("h3"); - compID.innerHTML = SelectedValue; - - - const compcontent = document.createElement("p"); - - fetch(`http://localhost:9999/complaints/${ComplainID}`, { - method: 'GET', - headers: { - 'Content-Type': 'application/json' - } - }) - .then(response => response.json()) - .then((JSONresult) => { - - compcontent.innerHTML = JSONresult.content; - console.log(JSONresult); - - - - }) - .catch(error => console.log('error', error)); - - -}*/ - - const complViewDive = document.getElementById("CompaintViewDiv"); document.getElementById("complaintList").addEventListener("change", (event) => { - console.log(event); const SelectedValue = event.target.value; const selectedOption = event.target.options[event.target.selectedIndex]; @@ -53,16 +14,20 @@ document.getElementById("complaintList").addEventListener("change", (event) => { const heading2 = document.createElement("h2"); heading2.innerHTML = selectedOption.text; - const compID = document.createElement("h3"); compID.innerHTML = SelectedValue; const compcontent = document.createElement("p"); + fetch(`http://localhost:9999/complaints/${SelectedValue}`) + .then((response) => response.json()) + .then((jsonComplainObject) => { + compcontent.innerHTML = jsonComplainObject.content; + }) + .catch((error) => console.error(error)); // <-- moved inside the event listener complViewDive.innerHTML = ""; complViewDive.appendChild(heading1); complViewDive.appendChild(heading2); complViewDive.appendChild(compID); complViewDive.appendChild(compcontent); - -}); \ No newline at end of file +}); diff --git a/examples_src/from_asma/VoiceVault/js/filterUserComplains.js b/examples_src/from_asma/VoiceVault/js/filterUserComplains.js new file mode 100644 index 0000000..e633246 --- /dev/null +++ b/examples_src/from_asma/VoiceVault/js/filterUserComplains.js @@ -0,0 +1,36 @@ +//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); + + complList.for + // console.log("Selected value:", { + // value: SelectedValue, + // text: selectedOption.text + + + // const heading1 = document.createElement("h1"); + // heading1.innerHTML = "Complaints View Information"; + + // const heading2 = document.createElement("h2"); + // heading2.innerHTML = selectedOption.text; + + // const compID = document.createElement("h3"); + // compID.innerHTML = SelectedValue; + // const compcontent = document.createElement("p"); + + // fetch(`http://localhost:9999/complaints/${SelectedValue}`) + // .then((response) => response.json()) + // .then((jsonComplainObject) => { + // compcontent.innerHTML = jsonComplainObject.content; + // }) + // .catch((error) => console.error(error)); // <-- moved inside the event listener + + // complViewDive.innerHTML = ""; + // complViewDive.appendChild(heading1); + // complViewDive.appendChild(heading2); + // complViewDive.appendChild(compID); + // complViewDive.appendChild(compcontent); +}); diff --git a/examples_src/from_asma/VoiceVault/js/getCoplaints.js b/examples_src/from_asma/VoiceVault/js/getCoplaints.js index 625911e..7fab088 100644 --- a/examples_src/from_asma/VoiceVault/js/getCoplaints.js +++ b/examples_src/from_asma/VoiceVault/js/getCoplaints.js @@ -1,10 +1,11 @@ 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); + // console.log(currComplaintObj); const newOption = document.createElement("option"); newOption.textContent = currComplaintObj.title; newOption.value = currComplaintObj.uuid; @@ -13,5 +14,18 @@ fetch("http://localhost:9999/complaints") // 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)); + diff --git a/examples_src/from_asma/VoiceVault/js/getusersdata.js b/examples_src/from_asma/VoiceVault/js/getusersdata.js index 4702b55..6417286 100644 --- a/examples_src/from_asma/VoiceVault/js/getusersdata.js +++ b/examples_src/from_asma/VoiceVault/js/getusersdata.js @@ -8,10 +8,10 @@ var requestOptions = { fetch("http://localhost:9999/users", requestOptions) .then(response => response.json()) .then((JSONList) => { - console.log(JSONList); + // console.log(JSONList); //convert the list of the json to list of strings the user name JSONList.forEach((CurrUserObj) => { - console.log(CurrUserObj); + // console.log(CurrUserObj); const newOption = document.createElement('option'); newOption.textContent = CurrUserObj.username; newOption.value = CurrUserObj.email; From e784fd328744cbc57a7eaa9efa8cd48f7f15744b Mon Sep 17 00:00:00 2001 From: AsmaAljabri Date: Thu, 26 Jun 2025 11:49:11 +0400 Subject: [PATCH 3/8] updating the user page --- .../from_asma/VoiceVault/js/complaintsView.js | 7 ++++++- .../VoiceVault/js/filterUserComplains.js | 17 +++++++++++++++-- 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/examples_src/from_asma/VoiceVault/js/complaintsView.js b/examples_src/from_asma/VoiceVault/js/complaintsView.js index 9403cf8..82f0b87 100644 --- a/examples_src/from_asma/VoiceVault/js/complaintsView.js +++ b/examples_src/from_asma/VoiceVault/js/complaintsView.js @@ -1,5 +1,6 @@ const complViewDive = document.getElementById("CompaintViewDiv"); document.getElementById("complaintList").addEventListener("change", (event) => { + console.log(event); const SelectedValue = event.target.value; const selectedOption = event.target.options[event.target.selectedIndex]; @@ -14,6 +15,7 @@ document.getElementById("complaintList").addEventListener("change", (event) => { const heading2 = document.createElement("h2"); heading2.innerHTML = selectedOption.text; + const compID = document.createElement("h3"); compID.innerHTML = SelectedValue; const compcontent = document.createElement("p"); @@ -23,11 +25,14 @@ document.getElementById("complaintList").addEventListener("change", (event) => { .then((jsonComplainObject) => { compcontent.innerHTML = jsonComplainObject.content; }) - .catch((error) => console.error(error)); // <-- moved inside the event listener + .catch((error) => console.error(error)); complViewDive.innerHTML = ""; complViewDive.appendChild(heading1); complViewDive.appendChild(heading2); complViewDive.appendChild(compID); complViewDive.appendChild(compcontent); + }); + + diff --git a/examples_src/from_asma/VoiceVault/js/filterUserComplains.js b/examples_src/from_asma/VoiceVault/js/filterUserComplains.js index e633246..cf0ffb9 100644 --- a/examples_src/from_asma/VoiceVault/js/filterUserComplains.js +++ b/examples_src/from_asma/VoiceVault/js/filterUserComplains.js @@ -5,10 +5,23 @@ document.getElementById("userList").addEventListener("change", (event) => { const selectedOption = event.target.options[event.target.selectedIndex]; console.log(SelectedValue); - complList.for + const filteredcomplains = Array.from(complList).filter((OptionObj) => { + //console.log(OptionObj.originalObj.by_user, SelectedValue); + + if (OptionObj.originalObj.by_user === SelectedValue) { + return true; + } + }); + console.log(filteredcomplains); + + + Array.from(complList).forEach((currComplainOp)=>{ + complList.appendChild(currComplainOp); + });// Clear the existing options + // console.log("Selected value:", { // value: SelectedValue, - // text: selectedOption.text + // text: selectedOption.text // const heading1 = document.createElement("h1"); From 1ef966615c550731396c608a59c899d5352aefb9 Mon Sep 17 00:00:00 2001 From: AsmaAljabri Date: Fri, 4 Jul 2025 11:04:44 +0400 Subject: [PATCH 4/8] Added new feature --- examples_src/from_asma/VoiceVault/index.html | 4 +- .../from_asma/VoiceVault/js/complaintsView.js | 53 ++++++++++++++----- .../VoiceVault/js/filterUserComplains.js | 26 ++++++--- 3 files changed, 62 insertions(+), 21 deletions(-) diff --git a/examples_src/from_asma/VoiceVault/index.html b/examples_src/from_asma/VoiceVault/index.html index a434047..017e911 100644 --- a/examples_src/from_asma/VoiceVault/index.html +++ b/examples_src/from_asma/VoiceVault/index.html @@ -19,7 +19,9 @@

select names from the list

select complaints from the list

diff --git a/examples_src/from_asma/VoiceVault/js/complaintsView.js b/examples_src/from_asma/VoiceVault/js/complaintsView.js index 82f0b87..f63759c 100644 --- a/examples_src/from_asma/VoiceVault/js/complaintsView.js +++ b/examples_src/from_asma/VoiceVault/js/complaintsView.js @@ -1,26 +1,18 @@ const complViewDive = document.getElementById("CompaintViewDiv"); -document.getElementById("complaintList").addEventListener("change", (event) => { - - console.log(event); - const SelectedValue = event.target.value; - const selectedOption = event.target.options[event.target.selectedIndex]; - console.log("Selected value:", { - value: SelectedValue, - text: selectedOption.text - }); +function populateComplaintView(title, ComplainID, complainContent) { const heading1 = document.createElement("h1"); heading1.innerHTML = "Complaints View Information"; const heading2 = document.createElement("h2"); - heading2.innerHTML = selectedOption.text; + heading2.innerHTML = title; const compID = document.createElement("h3"); - compID.innerHTML = SelectedValue; + compID.innerHTML = ComplainID; const compcontent = document.createElement("p"); - fetch(`http://localhost:9999/complaints/${SelectedValue}`) + fetch(`http://localhost:9999/complaints/${ComplainID}`) .then((response) => response.json()) .then((jsonComplainObject) => { compcontent.innerHTML = jsonComplainObject.content; @@ -32,6 +24,43 @@ document.getElementById("complaintList").addEventListener("change", (event) => { complViewDive.appendChild(heading2); complViewDive.appendChild(compID); complViewDive.appendChild(compcontent); +}; + +document.getElementById("complaintList").addEventListener("change", (event) => { + + //console.log(event); + const SelectedValue = event.target.value; + const selectedOption = event.target.options[event.target.selectedIndex]; + + populateComplaintView(selectedOption.text, SelectedValue); + // console.log("Selected value:", { + // value: SelectedValue, + // text: selectedOption.text + // }); + + // const heading1 = document.createElement("h1"); + // heading1.innerHTML = "Complaints View Information"; + + // const heading2 = document.createElement("h2"); + // heading2.innerHTML = selectedOption.text; + + + // const compID = document.createElement("h3"); + // compID.innerHTML = SelectedValue; + // const compcontent = document.createElement("p"); + + // 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); }); diff --git a/examples_src/from_asma/VoiceVault/js/filterUserComplains.js b/examples_src/from_asma/VoiceVault/js/filterUserComplains.js index cf0ffb9..2879516 100644 --- a/examples_src/from_asma/VoiceVault/js/filterUserComplains.js +++ b/examples_src/from_asma/VoiceVault/js/filterUserComplains.js @@ -1,6 +1,6 @@ //onst complViewDive = document.getElementById("CompaintViewDiv"); document.getElementById("userList").addEventListener("change", (event) => { - // console.log(event); + // console.log(event); const SelectedValue = event.target.value; const selectedOption = event.target.options[event.target.selectedIndex]; console.log(SelectedValue); @@ -8,21 +8,31 @@ document.getElementById("userList").addEventListener("change", (event) => { const filteredcomplains = Array.from(complList).filter((OptionObj) => { //console.log(OptionObj.originalObj.by_user, SelectedValue); - if (OptionObj.originalObj.by_user === SelectedValue) { - return true; + if (OptionObj.originalObj && OptionObj.originalObj.by_user == SelectedValue) { + return true; } }); - console.log(filteredcomplains); + // console.log(filteredcomplains); - - Array.from(complList).forEach((currComplainOp)=>{ - complList.appendChild(currComplainOp); + Array.from(complList).forEach((currComplainOp) => { + currComplainOp.hidden = true; });// Clear the existing options + + Array.from(filteredcomplains).forEach((currComplainOp) => { + currComplainOp.hidden = false; + + }); + if (filteredcomplains[0].hasAttribute("selected")) { + filteredcomplains[0].selected = true; + populateComplaintView(filteredcomplains[0].originalObj.title, filteredcomplains[0].originalObj.uuid); + } + + // console.log("Selected value:", { // value: SelectedValue, // text: selectedOption.text - + // const heading1 = document.createElement("h1"); // heading1.innerHTML = "Complaints View Information"; From d064cdabed00dd68b2128e07d25bb6c0049a761e Mon Sep 17 00:00:00 2001 From: AsmaAljabri Date: Fri, 4 Jul 2025 12:16:56 +0400 Subject: [PATCH 5/8] add stylying using bootstrap --- examples_src/from_asma/VoiceVault/index.html | 118 +++++++++++++++--- .../from_asma/VoiceVault/js/complaintsView.js | 52 ++++---- .../VoiceVault/js/filterUserComplains.js | 45 ++----- .../from_asma/VoiceVault/js/getCoplaints.js | 15 +++ 4 files changed, 150 insertions(+), 80 deletions(-) diff --git a/examples_src/from_asma/VoiceVault/index.html b/examples_src/from_asma/VoiceVault/index.html index 017e911..fd20445 100644 --- a/examples_src/from_asma/VoiceVault/index.html +++ b/examples_src/from_asma/VoiceVault/index.html @@ -6,36 +6,118 @@ VoiceVault + + + -
-

select names from the list

- -
-
-

select complaints from the list

- -
+ + + + -
+ +
+
+
+ +
+
+
+ + +
+
+ + +
+
+
+ +
+ +
+
+
- + + - \ No newline at end of file diff --git a/examples_src/from_asma/VoiceVault/js/complaintsView.js b/examples_src/from_asma/VoiceVault/js/complaintsView.js index f63759c..7193597 100644 --- a/examples_src/from_asma/VoiceVault/js/complaintsView.js +++ b/examples_src/from_asma/VoiceVault/js/complaintsView.js @@ -1,53 +1,53 @@ const complViewDive = document.getElementById("CompaintViewDiv"); function populateComplaintView(title, ComplainID, complainContent) { - const heading1 = document.createElement("h1"); - heading1.innerHTML = "Complaints View Information"; + // Create Bootstrap card + const card = document.createElement("div"); + card.className = "card shadow-sm"; - const heading2 = document.createElement("h2"); + const cardBody = document.createElement("div"); + cardBody.className = "card-body"; + + const heading1 = document.createElement("h5"); + heading1.className = "card-title text-primary 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 = `ID: ${ComplainID}`; - const compID = document.createElement("h3"); - compID.innerHTML = ComplainID; const compcontent = document.createElement("p"); + compcontent.className = "card-text"; fetch(`http://localhost:9999/complaints/${ComplainID}`) .then((response) => response.json()) .then((jsonComplainObject) => { - compcontent.innerHTML = jsonComplainObject.content; + compcontent.innerHTML = `Comment: ${jsonComplainObject.content}`; }) .catch((error) => console.error(error)); + // Clear and append complViewDive.innerHTML = ""; - complViewDive.appendChild(heading1); - complViewDive.appendChild(heading2); - complViewDive.appendChild(compID); - complViewDive.appendChild(compcontent); + cardBody.appendChild(heading1); + cardBody.appendChild(heading2); + cardBody.appendChild(compID); + cardBody.appendChild(compcontent); + card.appendChild(cardBody); + complViewDive.appendChild(card); }; document.getElementById("complaintList").addEventListener("change", (event) => { - //console.log(event); const SelectedValue = event.target.value; const selectedOption = event.target.options[event.target.selectedIndex]; populateComplaintView(selectedOption.text, SelectedValue); - // console.log("Selected value:", { - // value: SelectedValue, - // text: selectedOption.text - // }); - - // const heading1 = document.createElement("h1"); - // heading1.innerHTML = "Complaints View Information"; - - // const heading2 = document.createElement("h2"); - // heading2.innerHTML = selectedOption.text; - - // const compID = document.createElement("h3"); - // compID.innerHTML = SelectedValue; - // const compcontent = document.createElement("p"); +}); // fetch(`http://localhost:9999/complaints/${SelectedValue}`) // .then((response) => response.json()) @@ -62,6 +62,6 @@ document.getElementById("complaintList").addEventListener("change", (event) => { // complViewDive.appendChild(compID); // complViewDive.appendChild(compcontent); -}); + diff --git a/examples_src/from_asma/VoiceVault/js/filterUserComplains.js b/examples_src/from_asma/VoiceVault/js/filterUserComplains.js index 2879516..5a602c0 100644 --- a/examples_src/from_asma/VoiceVault/js/filterUserComplains.js +++ b/examples_src/from_asma/VoiceVault/js/filterUserComplains.js @@ -12,48 +12,21 @@ document.getElementById("userList").addEventListener("change", (event) => { return true; } }); - // console.log(filteredcomplains); + console.log(filteredcomplains); + // const filteredcomplains = populateComplaintView(SelectedValue); - Array.from(complList).forEach((currComplainOp) => { - currComplainOp.hidden = true; - });// Clear the existing options + hideComplainsOps(); - Array.from(filteredcomplains).forEach((currComplainOp) => { - currComplainOp.hidden = false; - - }); - if (filteredcomplains[0].hasAttribute("selected")) { - filteredcomplains[0].selected = true; - populateComplaintView(filteredcomplains[0].originalObj.title, filteredcomplains[0].originalObj.uuid); - } - + showSpecificComplainOptions(filteredcomplains); - // console.log("Selected value:", { - // value: SelectedValue, - // text: selectedOption.text - - - // const heading1 = document.createElement("h1"); - // heading1.innerHTML = "Complaints View Information"; + 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; - // const heading2 = document.createElement("h2"); - // heading2.innerHTML = selectedOption.text; + } - // const compID = document.createElement("h3"); - // compID.innerHTML = SelectedValue; - // const compcontent = document.createElement("p"); - // fetch(`http://localhost:9999/complaints/${SelectedValue}`) - // .then((response) => response.json()) - // .then((jsonComplainObject) => { - // compcontent.innerHTML = jsonComplainObject.content; - // }) - // .catch((error) => console.error(error)); // <-- moved inside the event listener - // complViewDive.innerHTML = ""; - // complViewDive.appendChild(heading1); - // complViewDive.appendChild(heading2); - // complViewDive.appendChild(compID); - // complViewDive.appendChild(compcontent); }); diff --git a/examples_src/from_asma/VoiceVault/js/getCoplaints.js b/examples_src/from_asma/VoiceVault/js/getCoplaints.js index 7fab088..93ef0be 100644 --- a/examples_src/from_asma/VoiceVault/js/getCoplaints.js +++ b/examples_src/from_asma/VoiceVault/js/getCoplaints.js @@ -29,3 +29,18 @@ fetch("http://localhost:9999/complaints") }) .catch((error) => console.error(error)); + + + +function hideComplainsOps(){ + Array.from(complList).forEach((currComplainOp) => { + currComplainOp.hidden = true; + });// Clear the existing options + +} +function showSpecificComplainOptions(filteredcomplains) { + Array.from(filteredcomplains).forEach((currComplainOp) => { + currComplainOp.hidden = false; + + }); +} \ No newline at end of file From c3b1d3ca859e344f03b2b6879d59476df4994a5a Mon Sep 17 00:00:00 2001 From: AsmaAljabri Date: Fri, 4 Jul 2025 15:30:45 +0400 Subject: [PATCH 6/8] add new users using Post --- examples_src/from_asma/VoiceVault/index.html | 39 +------- .../from_asma/VoiceVault/js/addUser.js | 36 +++++++ .../from_asma/VoiceVault/js/complaintsView.js | 2 +- examples_src/from_asma/VoiceVault/style.css | 32 +++++++ .../from_asma/VoiceVault/userPortal.html | 94 +++++++++++++++++++ 5 files changed, 166 insertions(+), 37 deletions(-) create mode 100644 examples_src/from_asma/VoiceVault/js/addUser.js create mode 100644 examples_src/from_asma/VoiceVault/userPortal.html diff --git a/examples_src/from_asma/VoiceVault/index.html b/examples_src/from_asma/VoiceVault/index.html index fd20445..906ec85 100644 --- a/examples_src/from_asma/VoiceVault/index.html +++ b/examples_src/from_asma/VoiceVault/index.html @@ -8,40 +8,7 @@ - @@ -60,10 +27,10 @@
@@ -75,7 +42,7 @@
  1. Home
    2. -
  2. Complaints
    3. +
  3. Complaints Page
diff --git a/examples_src/from_asma/VoiceVault/js/addUser.js b/examples_src/from_asma/VoiceVault/js/addUser.js new file mode 100644 index 0000000..b7f9efe --- /dev/null +++ b/examples_src/from_asma/VoiceVault/js/addUser.js @@ -0,0 +1,36 @@ +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)); +} \ No newline at end of file diff --git a/examples_src/from_asma/VoiceVault/js/complaintsView.js b/examples_src/from_asma/VoiceVault/js/complaintsView.js index 7193597..e73703b 100644 --- a/examples_src/from_asma/VoiceVault/js/complaintsView.js +++ b/examples_src/from_asma/VoiceVault/js/complaintsView.js @@ -9,7 +9,7 @@ function populateComplaintView(title, ComplainID, complainContent) { cardBody.className = "card-body"; const heading1 = document.createElement("h5"); - heading1.className = "card-title text-primary fw-bold mb-3"; + heading1.className = "card-title fw-bold mb-3"; heading1.innerHTML = "Complaint Information"; const heading2 = document.createElement("h6"); diff --git a/examples_src/from_asma/VoiceVault/style.css b/examples_src/from_asma/VoiceVault/style.css index 28efef2..9419131 100644 --- a/examples_src/from_asma/VoiceVault/style.css +++ b/examples_src/from_asma/VoiceVault/style.css @@ -1,3 +1,35 @@ + body { + background: linear-gradient(135deg, #ffe0f0 0%, #f8e1ff 100%) !important; + } + + .navbar-feminine { + background: linear-gradient(90deg, #ff69b4 0%, #ffb6c1 100%) !important; + } + + .breadcrumb-feminine { + background-color: #fff0f6 !important; + } + + .card-feminine { + border: 1px solid #ffb6c1 !important; + background: #fffafd !important; + } + + .card-title, + .navbar-brand, + .nav-link.active { + color: #d63384 !important; + } + + .btn-feminine { + background-color: #ff69b4 !important; + color: white !important ; + } + + .form-select:focus { + border-color: #ff69b4 !important; + box-shadow: 0 0 0 0.2rem rgba(255, 105, 180, .25) !important; + } body { font-family: Arial, sans-serif; background: #f5f7fa; diff --git a/examples_src/from_asma/VoiceVault/userPortal.html b/examples_src/from_asma/VoiceVault/userPortal.html new file mode 100644 index 0000000..47d8833 --- /dev/null +++ b/examples_src/from_asma/VoiceVault/userPortal.html @@ -0,0 +1,94 @@ + + + + + + + VoiceVault + + + + + + + + + + + + + + +
+
+
+
+
+

Submit a New Complaint

+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+
+
+
+
+ + + + + + + + + \ No newline at end of file From 20644e3d559e09ccd8e6ae2cee8c3a026780cdba Mon Sep 17 00:00:00 2001 From: AsmaAljabri Date: Fri, 4 Jul 2025 16:05:12 +0400 Subject: [PATCH 7/8] using delet to delete complain --- examples_src/from_asma/VoiceVault/index.html | 4 +++ .../from_asma/VoiceVault/js/addUser.js | 7 ++-- .../from_asma/VoiceVault/js/deleteComplain.js | 35 +++++++++++++++++++ .../from_asma/VoiceVault/userPortal.html | 8 +++-- 4 files changed, 49 insertions(+), 5 deletions(-) create mode 100644 examples_src/from_asma/VoiceVault/js/deleteComplain.js diff --git a/examples_src/from_asma/VoiceVault/index.html b/examples_src/from_asma/VoiceVault/index.html index 906ec85..07ff53d 100644 --- a/examples_src/from_asma/VoiceVault/index.html +++ b/examples_src/from_asma/VoiceVault/index.html @@ -78,6 +78,9 @@
+
+ +
@@ -85,6 +88,7 @@ + \ No newline at end of file diff --git a/examples_src/from_asma/VoiceVault/js/addUser.js b/examples_src/from_asma/VoiceVault/js/addUser.js index b7f9efe..feb49b6 100644 --- a/examples_src/from_asma/VoiceVault/js/addUser.js +++ b/examples_src/from_asma/VoiceVault/js/addUser.js @@ -1,4 +1,4 @@ -let selectedUserEmailId = "Anonymous"; + let selectedUserEmailId = "Anonymous"; document.getElementById("userList").addEventListener("change", (event) => { // console.log(event); selectedUserEmailId = event.target.value; @@ -33,4 +33,7 @@ function submitComplaint() { .then((response) => response.json()) .then((result) => console.log(result)) .catch((error) => console.error(error)); -} \ No newline at end of file +} +document.addEventListener("DOMContentLoaded", () => { + document.getElementById("submitComplaint").addEventListener("click", submitComplaint); +}); \ No newline at end of file diff --git a/examples_src/from_asma/VoiceVault/js/deleteComplain.js b/examples_src/from_asma/VoiceVault/js/deleteComplain.js new file mode 100644 index 0000000..60091e9 --- /dev/null +++ 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/userPortal.html b/examples_src/from_asma/VoiceVault/userPortal.html index 47d8833..f9e2f45 100644 --- a/examples_src/from_asma/VoiceVault/userPortal.html +++ b/examples_src/from_asma/VoiceVault/userPortal.html @@ -73,9 +73,11 @@

Submit a New Comp -
- +
+ +
From 11b16fb13b685425baf6524e16b0b28d31a67027 Mon Sep 17 00:00:00 2001 From: AsmaAljabri Date: Fri, 4 Jul 2025 16:20:06 +0400 Subject: [PATCH 8/8] coplete the show name task --- examples_src/from_asma/index.html | 6 ++++-- examples_src/from_asma/js/ShowYourName.js | 16 ++++++++++++++++ 2 files changed, 20 insertions(+), 2 deletions(-) create mode 100644 examples_src/from_asma/js/ShowYourName.js diff --git a/examples_src/from_asma/index.html b/examples_src/from_asma/index.html index 6fc1c26..e6cbbf6 100644 --- a/examples_src/from_asma/index.html +++ b/examples_src/from_asma/index.html @@ -15,8 +15,10 @@

--> - + +

+ + diff --git a/examples_src/from_asma/js/ShowYourName.js b/examples_src/from_asma/js/ShowYourName.js new file mode 100644 index 0000000..d7b6782 --- /dev/null +++ b/examples_src/from_asma/js/ShowYourName.js @@ -0,0 +1,16 @@ +document.addEventListener("DOMContentLoaded", function() { + const fullName = "My Name Is Asma "; + const nameParts = fullName.split(" "); + const displayElement = document.getElementById("displyfullName"); + let index = 0; + + function showNext() { + if (index < nameParts.length) { + displayElement.textContent = nameParts[index]; + index++; + setTimeout(showNext, 1000); + } + } + + showNext(); +});