Upload All

public/js/vote_theme_page.js

@@ -0,0 +1,67 @@
+let selections = [];
+
+$("input.btn-selection").on("click", btnTheme_Click);
+$("#btnSubmit").on("click", btnSubmit_Click);
+
+function setAlert(message) {
+    if ($("#divAlert").children().length > 0)
+        $("#divAlert").children().remove();
+    if (message) {
+        $("#divAlert").append($("<div class='alert alert-danger mt-20'>" + message + "</div>"));
+    }
+}
+
+function btnTheme_Click(event) {
+    event.stopPropagation();
+    let target = event.target;
+    let index = selections.indexOf(target.dataset.index);
+    if ( index == -1 ) {
+        if ( selections.length < maxSel ) {
+            selections.push(target.dataset.index);
+            $(target).addClass("btn-selected");
+        }
+    }
+    else {
+        $(target).removeClass("btn-selected");
+        selections.splice(index, 1);
+    }
+}
+
+function btnSubmit_Click() {
+    if (selections.length != maxSel) {
+        setAlert("請選擇" + maxSel + "個主題!");
+        return;
+    }
+    let data = { selections: selections };
+    $.ajax({
+        url: "/votetheme",
+        method: "POST",
+        contentType: "application/json",
+        data: JSON.stringify(data),
+        success: VoteTheme_ServerResponse,
+        error: VoteTheme_OnError
+    });
+}
+
+/**
+ * 將票選資料成功傳送至伺服器後，伺服器所回應的訊息。
+ * @param {Object} response 伺服端傳來的訊息。
+ */
+function VoteTheme_ServerResponse(response) {
+    if (response.isOK) {
+        window.location.replace(response.url);
+    }
+    else {
+        setAlert("錯誤: " + response.message);
+    }
+}
+
+/**
+ * 當票選資料無法傳送至伺服器時的處理。
+ * @param {jqXHR} jqXHR XMLHttpRequest物件。
+ * @param {string} statusText 錯誤名稱。
+ * @param {string} error 錯誤敘述。
+ */
+function VoteTheme_OnError(jsXHR, statusText, error) {
+    setAlert("無法將資料傳送至伺服端，請稍後再嘗試。");
+}