diff --git a/examples_src/from_asma/VoiceVault/index.html b/examples_src/from_asma/VoiceVault/index.html new file mode 100644 index 0000000..07ff53d --- /dev/null +++ b/examples_src/from_asma/VoiceVault/index.html @@ -0,0 +1,94 @@ + + + + + + + VoiceVault + + + + + + + + + + + + + + +
+
+
+ +
+
+
+ + +
+
+ + +
+
+
+ + +
+ +
+
+
+
+
+ +
+ + + + + + + + + + + \ 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 new file mode 100644 index 0000000..feb49b6 --- /dev/null +++ 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); +}); \ 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..e73703b --- /dev/null +++ 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 = `ID: ${ComplainID}`; + + const compcontent = document.createElement("p"); + compcontent.className = "card-text"; + + fetch(`http://localhost:9999/complaints/${ComplainID}`) + .then((response) => response.json()) + .then((jsonComplainObject) => { + compcontent.innerHTML = `Comment: ${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); + + + + 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/js/filterUserComplains.js b/examples_src/from_asma/VoiceVault/js/filterUserComplains.js new file mode 100644 index 0000000..5a602c0 --- /dev/null +++ b/examples_src/from_asma/VoiceVault/js/filterUserComplains.js @@ -0,0 +1,32 @@ +//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 new file mode 100644 index 0000000..93ef0be --- /dev/null +++ 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(){ + 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 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..6417286 --- /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..9419131 --- /dev/null +++ b/examples_src/from_asma/VoiceVault/style.css @@ -0,0 +1,62 @@ + 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; + 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_asma/VoiceVault/userPortal.html b/examples_src/from_asma/VoiceVault/userPortal.html new file mode 100644 index 0000000..f9e2f45 --- /dev/null +++ b/examples_src/from_asma/VoiceVault/userPortal.html @@ -0,0 +1,96 @@ + + + + + + + VoiceVault + + + + + + + + + + + + + + +
+
+
+
+
+

Submit a New Complaint

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+
+ + + + + + + + + \ No newline at end of file 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(); +}); 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 = "";