109 lines
3.4 KiB
JavaScript
109 lines
3.4 KiB
JavaScript
$(document).ready(function() {
|
||
showAllTopics()
|
||
});
|
||
|
||
|
||
// step 7.2
|
||
function showAllTopics() {
|
||
var table_content = `
|
||
<tr>
|
||
<th>Topic Name</th>
|
||
<th>Study Hour</th>
|
||
<th>Chosen Status</th>
|
||
<th>Operation</th>
|
||
</tr>
|
||
`;
|
||
|
||
$.getJSON("/users/get_table", function (data) {
|
||
$.each(data, function () {
|
||
// 1. for each row tag, add the attribute class=“highlight” if the status field of the topic is “yes”
|
||
|
||
// 2. the last <td> element contains an <a> element with text “add” or “remove”
|
||
// (if status field equals to “yes”, text should be “remove”; otherwise, text should be “add”)
|
||
|
||
// 3. The table row representations should be all concatenated into the string table_content.
|
||
table_content += `
|
||
<tr ${this.status == "yes" ? 'class="highlight"' : ""}>
|
||
<td>${this.name}</td>
|
||
<td>${this.hour}</td>
|
||
<td>${this.status}</td>
|
||
<td>
|
||
${
|
||
this.status == "yes"
|
||
? `<a href="#" class="operation" rel="${this._id}" >remove</a>`
|
||
: `<a href="#" class="operation" rel="${this._id}" >add</a>`
|
||
}
|
||
</td>
|
||
</tr>`;
|
||
});
|
||
|
||
// Finally, use $(‘#plan_table’).html() to set HTML content of the table element of id “plan_table” to table_content.
|
||
$("#plan_table").html(table_content);
|
||
});
|
||
}
|
||
|
||
// step 8.2
|
||
function operateTopic(event) {
|
||
// event.preventDefault() to prevent opening the link “#” when the hyperlink is clicked
|
||
event.preventDefault();
|
||
|
||
// retrieve _id of the topic that you are going to add/remove from the ‘rel’ attribute using $(this).attr(‘rel’)
|
||
var _id = $(this).attr("rel");
|
||
|
||
// use $.ajax() to send a HTTP PUT request for “/users/update_status” with JSON data
|
||
// {_id: _id field retrieved, op: operation retrieved};
|
||
$.ajax({
|
||
type: "PUT",
|
||
url: `/users/update_status`,
|
||
data: {
|
||
_id: _id,
|
||
// retrieve the operation that your are going to perform using $(this).html().
|
||
op: $(this).html(),
|
||
},
|
||
dataType: "JSON",
|
||
}).done(function (response) {
|
||
if (response.msg === "Successfully updated!") {
|
||
// alert the response message and call showAllTopics() to refresh the topic table.
|
||
alert("Successfully updated!");
|
||
|
||
// call showAllTopics() to refresh the topic table.
|
||
showAllTopics();
|
||
} else {
|
||
alert(response.msg);
|
||
}
|
||
});
|
||
}
|
||
|
||
$("#plan_table").on("click", ".operation", operateTopic);
|
||
|
||
|
||
// step 9.2
|
||
function deleteTopic(event) {
|
||
event.preventDefault();
|
||
|
||
var topic_name = $("#input_name").val();
|
||
|
||
// check if the topic_name is valid
|
||
if ($(`td:contains("${topic_name}")`).length > 0) {
|
||
// If the length of the list is not 0, use $.ajax() to send a HTTP DELETE request for “/users/delete_topic/:topic_name”;
|
||
$.ajax({
|
||
type: "DELETE",
|
||
url: `/users/delete_topic/${topic_name}`,
|
||
}).done(function (res) {
|
||
if (res.msg == "Successfully deleted!") {
|
||
// success delete,
|
||
// 1. call showAllTopics() to refresh the topic table.
|
||
// 2. alert response message
|
||
showAllTopics();
|
||
alert(res.msg);
|
||
}
|
||
// clear after delete operation
|
||
$("#input_name").val("");
|
||
});
|
||
} else {
|
||
// alert the message “No such topic in the table!”
|
||
alert("No such topic in the table!");
|
||
}
|
||
}
|
||
|
||
$("#submit_delete").on('click', deleteTopic) |