|
|
|
@ -1,73 +1,129 @@
|
|
|
|
|
window.onload=function(){
|
|
|
|
|
addForm=document.getElementById("add");
|
|
|
|
|
addForm.style.display="none";
|
|
|
|
|
table=document.getElementById("studentInfo");
|
|
|
|
|
table.style.display="none"
|
|
|
|
|
window.onload = function () {
|
|
|
|
|
addForm = document.getElementById("add");
|
|
|
|
|
addForm.style.display = "none";
|
|
|
|
|
table = document.getElementById("studentInfo");
|
|
|
|
|
table.style.display = "none"
|
|
|
|
|
edit = document.getElementById("editForm");
|
|
|
|
|
edit.style.display = "none";
|
|
|
|
|
document.getElementById('editStudent').addEventListener("click", async (event) => {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
var response = await fetch('/student');
|
|
|
|
|
var students = await response.json();
|
|
|
|
|
var sName = document.getElementById("findName").value;
|
|
|
|
|
for (s of students) {
|
|
|
|
|
if (sName == s.name) {
|
|
|
|
|
edit.style.display = "inline-block"
|
|
|
|
|
document.getElementById("editName").innerHTML = s.name;
|
|
|
|
|
document.getElementById("editWeight").value = s.weight;
|
|
|
|
|
document.getElementById("editHeight").value = s.height;
|
|
|
|
|
document.getElementById("editHairColour").value = s.hairColour;
|
|
|
|
|
document.getElementById("editGpa").value = s.gpa;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
displayStudents();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function addStudent(){
|
|
|
|
|
function addStudent() {
|
|
|
|
|
console.log("add student");
|
|
|
|
|
form=document.getElementById("add");
|
|
|
|
|
form.style.display="block";
|
|
|
|
|
form = document.getElementById("add");
|
|
|
|
|
form.style.display = "block";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function addData(){
|
|
|
|
|
var name=document.getElementById("addName").value;
|
|
|
|
|
var weight=document.getElementById("addWeight").value;
|
|
|
|
|
var height=document.getElementById("addHeight").value;
|
|
|
|
|
var hairColour=document.getElementById("addHairColour").value;
|
|
|
|
|
var gpa=document.getElementById("addGpa").value;
|
|
|
|
|
var data={name, weight, height, hairColour, gpa};
|
|
|
|
|
var option={method:"POST", body: JSON.stringify(data), headers:{'Content-Type':'application/json'}};
|
|
|
|
|
function addData() {
|
|
|
|
|
var name = document.getElementById("addName").value;
|
|
|
|
|
var weight = document.getElementById("addWeight").value;
|
|
|
|
|
var height = document.getElementById("addHeight").value;
|
|
|
|
|
var hairColour = document.getElementById("addHairColour").value;
|
|
|
|
|
var gpa = document.getElementById("addGpa").value;
|
|
|
|
|
var data = { name, weight, height, hairColour, gpa };
|
|
|
|
|
var option = { method: "POST", body: JSON.stringify(data), headers: { 'Content-Type': 'application/json' } };
|
|
|
|
|
console.log(option);
|
|
|
|
|
fetch('/student', option);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function displayStudents(){
|
|
|
|
|
var response=await fetch('/student');
|
|
|
|
|
var students=await response.json();
|
|
|
|
|
for (s of students){
|
|
|
|
|
var student=document.createElement('div');
|
|
|
|
|
student.className="displayDiv";
|
|
|
|
|
student.style.display="inline-block";
|
|
|
|
|
student.style.textAlign="center";
|
|
|
|
|
student.style.margin="20px";
|
|
|
|
|
student.innerText=s.name+"\n"+s.gpa;
|
|
|
|
|
student.style.height=parseInt(s.height)+"px";
|
|
|
|
|
student.style.width=parseInt(s.weight)+"px";
|
|
|
|
|
student.style.overflow="auto";
|
|
|
|
|
student.style.padding="20px";
|
|
|
|
|
student.style.color=s.hairColour;
|
|
|
|
|
student.style.border="1px solid black";
|
|
|
|
|
async function displayStudents() {
|
|
|
|
|
var response = await fetch('/student');
|
|
|
|
|
var students = await response.json();
|
|
|
|
|
for (s of students) {
|
|
|
|
|
var student = document.createElement('div');
|
|
|
|
|
student.className = "displayDiv";
|
|
|
|
|
student.style.display = "inline-block";
|
|
|
|
|
student.style.textAlign = "center";
|
|
|
|
|
student.style.margin = "20px";
|
|
|
|
|
student.innerText = s.name + "\n" + s.gpa;
|
|
|
|
|
student.style.height = parseInt(s.height) + "px";
|
|
|
|
|
student.style.width = parseInt(s.weight) + "px";
|
|
|
|
|
student.style.overflow = "auto";
|
|
|
|
|
student.style.padding = "20px";
|
|
|
|
|
student.style.color = s.hairColour;
|
|
|
|
|
student.style.border = "1px solid black";
|
|
|
|
|
|
|
|
|
|
student.addEventListener("mouseenter", function(event){
|
|
|
|
|
table.style.display="table";
|
|
|
|
|
var info=event.target.innerText;
|
|
|
|
|
list=info.split("\n");
|
|
|
|
|
document.getElementById("sName").innerHTML=list[0];
|
|
|
|
|
document.getElementById("sWeight").innerHTML=event.target.offsetWidth;
|
|
|
|
|
document.getElementById("sHeight").innerHTML=event.target.offsetHeight;
|
|
|
|
|
document.getElementById("sHairColour").innerHTML=event.target.style.color;
|
|
|
|
|
document.getElementById("sGpa").innerHTML=list[1];
|
|
|
|
|
student.addEventListener("mouseenter", function (event) {
|
|
|
|
|
table.style.display = "table";
|
|
|
|
|
var info = event.target.innerText;
|
|
|
|
|
list = info.split("\n");
|
|
|
|
|
var weight = event.target.style.width;
|
|
|
|
|
var height = event.target.style.height;
|
|
|
|
|
document.getElementById("sName").innerHTML = list[0];
|
|
|
|
|
document.getElementById("sWeight").innerHTML = weight.substring(0, weight.length - 2);
|
|
|
|
|
document.getElementById("sHeight").innerHTML = height.substring(0, height.length - 2);
|
|
|
|
|
document.getElementById("sHairColour").innerHTML = event.target.style.color;
|
|
|
|
|
document.getElementById("sGpa").innerHTML = list[1];
|
|
|
|
|
})
|
|
|
|
|
document.body.appendChild(student);
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function deleteData() {
|
|
|
|
|
function deleteData() {
|
|
|
|
|
console.log("in delete")
|
|
|
|
|
var name=document.getElementById("findName").value;
|
|
|
|
|
var data={name};
|
|
|
|
|
var option={
|
|
|
|
|
method:'DELETE',
|
|
|
|
|
body: JSON.stringify(data),
|
|
|
|
|
headers:{
|
|
|
|
|
'Content-Type':'application/json'
|
|
|
|
|
}
|
|
|
|
|
var name = document.getElementById("findName").value;
|
|
|
|
|
var data = { name };
|
|
|
|
|
var option = {
|
|
|
|
|
method: 'DELETE',
|
|
|
|
|
body: JSON.stringify(data),
|
|
|
|
|
headers: {
|
|
|
|
|
'Content-Type': 'application/json'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
console.log(option)
|
|
|
|
|
fetch('/student', option);
|
|
|
|
|
window.location.reload();
|
|
|
|
|
}
|
|
|
|
|
console.log(option)
|
|
|
|
|
fetch('/student', option);
|
|
|
|
|
//window.location.reload();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function editData() {
|
|
|
|
|
var response = fetch('/student');
|
|
|
|
|
var students = response.json();
|
|
|
|
|
var sName = document.getElementById("findName").value;
|
|
|
|
|
for (s of students) {
|
|
|
|
|
if (sName == s.name) {
|
|
|
|
|
edit.style.display = "inline-block"
|
|
|
|
|
document.getElementById("editName").innerHTML = s.name;
|
|
|
|
|
document.getElementById("editWeight").value = s.weight;
|
|
|
|
|
document.getElementById("editHeight").value = s.height;
|
|
|
|
|
document.getElementById("editHairColour").value = s.hairColour;
|
|
|
|
|
document.getElementById("editGpa").value = s.gpa;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updateData() {
|
|
|
|
|
console.log("update data")
|
|
|
|
|
var name = document.getElementById("editName").innerHTML;
|
|
|
|
|
var weight = document.getElementById("editWeight").value;
|
|
|
|
|
var height = document.getElementById("editHeight").value;
|
|
|
|
|
var hairColour = document.getElementById("editHairColour").value;
|
|
|
|
|
var gpa = document.getElementById("editGpa").value;
|
|
|
|
|
var data = { name, weight, height, hairColour, gpa };
|
|
|
|
|
var options = {
|
|
|
|
|
method: 'PUT',
|
|
|
|
|
body: JSON.stringify(data),
|
|
|
|
|
headers: {
|
|
|
|
|
'Content-Type': 'application/json'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
console.log(options)
|
|
|
|
|
fetch('/student', options)
|
|
|
|
|
window.location.reload();
|
|
|
|
|
}
|