-
Notifications
You must be signed in to change notification settings - Fork 0
/
crud_input_grades.js
107 lines (91 loc) · 2.89 KB
/
crud_input_grades.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
const addEndpoint = "/capstone/add_student_grade.php";
const editEndpoint = "/capstone/edit_student_grade.php";
/**
* @typedef {Object} Grades
* @property {HTMLInputElement} prelim
* @property {HTMLInputElement} midterm
* @property {HTMLInputElement} finals
*/
/**
* @typedef {Object} Modal
* @property {HTMLDialogElement} element
* @property {function(): void} open
* @property {function(): void} close
*/
/** @type {Grades} */
const grades = {
prelim: document.getElementById("editPrelim"),
midterm: document.getElementById("editMidterm"),
finals: document.getElementById("editFinals")
};
/** @type {Modal} */
const editModal = {
element: document.getElementById("editModal"),
open: function () {
this.element.show();
// Focus on the first input element inside the modal
const prelimInput = document.getElementById("editPrelim");
prelimInput.focus();
prelimInput.dispatchEvent(new Event("input")); // Trigger input event to validate immediately
},
close: function () {
this.element.close();
}
};
/**
* Edits the details of a row from the table based on the button clicked.
* @param {HTMLButtonElement} button - The button element clicked.
*/
function editGradesInfo(button) {
/** @type {HTMLTableRowElement} */
const row = button.parentElement.parentElement;
/**@type {string} */
const gradesId = row.getAttribute('data-grades-id');
/**@type {string} */
const schoolId = row.getAttribute('data-school-id');
/** @type {boolean} */
let isGradesEmpty = (gradesId === "0") ? true : false;
grades.prelim.value = row.children[7].textContent;
grades.midterm.value = row.children[8].textContent;
grades.finals.value = row.children[9].textContent;
editModal.open();
document.getElementById('editForm').onsubmit = function (event) {
event.preventDefault();
const editForm = document.getElementById('editForm');
const formData = new FormData(editForm);
const addRequest = new Request(addEndpoint, {
method: "POST",
body: editForm
});
if (isGradesEmpty) {
fetch(addRequest)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text();
})
.then(text => {
alert(text);
updateTableRow(row);
})
.catch(error => {
console.error('There was a problem with your fetch operation:', error);
});
editModal.close();
} else {
alert("TODO: Update grades!");
updateTableRow(row);
editModal.close();
}
};
}
/**
* Updates the table row after editing with the new data.
* @param {HTMLTableRowElement} row - The table row to be updated.
*/
function updateTableRow(row) {
row.children[7].textContent = grades.prelim.value;
row.children[8].textContent = grades.midterm.value;
row.children[9].textContent = grades.finals.value;
}