完成簡易的vote

static/js/api_calls.js

@@ -58,19 +58,14 @@ async function getVotesFromBackend() {
 
 
 
-
-async function setMyVote(day, vote) {
-  // this is a placeholder.  rewrite it completely.  (you can ignore this for Pass tier)
-  if (!fake_local_session) return false;
-  let me = fake_local_session.username;
-  let dayofvotes = fake_local_votesdata.filter(vd => vd.date === day)[0];
-  if (!me || !dayofvotes) return false;
-  if (vote === 'maybe') {
-    delete dayofvotes.votes[me];
-  } else {
-    dayofvotes.votes[me] = vote;
+async function setMyVote(username, date, vote) {
+  try {
+    const response = await axios.post('/api/v1/votes/set', { username, date, vote });
+    return response.data;
+  } catch (error) {
+    console.error('Error setting vote:', error.response ? error.response.data.error : error);
+    return { success: false, error: error.response ? error.response.data.error : 'Unknown error' };
   }
-  return { success: true };
 }
 
 
@@ -78,6 +73,7 @@ async function setMyVote(day, vote) {
 
 
 
+
 async function ajaxSignup(username, password) {
   try {
     const response = await axios.post('/api/v1/signup', { username, password });
@@ -94,8 +90,8 @@ async function ajaxLogin(username, password) {
     const response = await axios.post('/api/v1/login', { username, password });
     return response.data;
   } catch (error) {
-    console.error('Error logging in:', error);
-    return { success: false, error: error.toString() };
+    console.log('Error logging in:', error.response.data.error);
+    return { success: false, error: error.response.data.error };
   }
 }
 
@@ -105,7 +101,7 @@ async function ajaxLogout() {
     return response.data;
   } catch (error) {
     console.error('Error logging out:', error);
-    return { success: false, error: error.toString() };
+    return { success: false, error:error.response.data.error };
   }
 }
 

static/js/frontend.js

@@ -137,7 +137,7 @@ class FrontendState {
       this.daysWithVotes = data;
     } else {
       // ha ha I'm being lazy.  can you do better?
-      alert(error)
+      updateErrorMessage(error)
     }
     if (updateView) {
       this.updateView();
@@ -154,7 +154,7 @@ class FrontendState {
       this.weatherForecasts = data;
     } else {
       // ha ha I'm being lazy.  can you do better?
-      alert(error)
+      updateErrorMessage(error)
     }
     if (updateView) {
       this.updateView();
@@ -171,7 +171,7 @@ class FrontendState {
       this.currentSession = data;
     } else {
       // 處理錯誤情況
-      alert('Unable to refresh session state. Please try again later.');
+      updateErrorMessage('Unable to refresh session state. Please try again later.');
     }
     if (updateView) {
       this.updateView();
@@ -223,21 +223,14 @@ async function handleAuthEvent(event) {
     if (authActionFunction) {
       let authResult = await authActionFunction(usernameValue, passwordValue);
       if (authResult && authResult.success) {
-        if (authActionName === 'logout') {
-          // 登出成功，清除用戶名顯示
-          updateHeader('');
-        } else {
-          // 登入或註冊成功，更新用戶名顯示
-          updateHeader(authResult.data.username);
-        }
         await fes.refreshSessionState();
         usernameInput.value = passwordInput.value = '';
       } else if (authResult) {
         // 處理登入、註冊或登出失敗的情況
-        alert(authResult.error);
+        updateErrorMessage(authResult.error);
       } else {
         // 處理未知網絡錯誤
-        alert("unknown network error");
+        updateErrorMessage("unknown network error");
       }
 
     }
@@ -248,6 +241,11 @@ function updateHeader(username) {
   usernameSpan.textContent = username ?  username : 'nobody';
 }
 
+function updateErrorMessage(message) {
+  const errorMessageDiv = document.querySelector('.error-message');
+  errorMessageDiv.textContent = message;
+}
+
 
 const authform = document.querySelector('form.authform')
 authform.addEventListener("click", handleAuthEvent);
@@ -259,33 +257,23 @@ authform.addEventListener("click", handleAuthEvent);
 async function handleVoteEvent(event) {
   event.preventDefault();
   let button = event.target.closest('button.vote');
-  // console.log(button)
-
   if (button) {
-    let voteVal;
-    if (button.classList.contains('yes')) {
-      voteVal = 'yes';
-    }
-    if (button.classList.contains('no')) {
-      voteVal = 'no';
-    }
-    if (button.classList.contains('maybe')) {
-      voteVal = 'maybe';
-    }
+    let voteVal = button.dataset.vote; // 從按鈕的 data-vote 屬性中獲取投票選項
     let cardDiv = button.closest("div.card");
-    if (!voteVal || !cardDiv) {
-      // console.log({ voteVal, cardDiv })
-      return;
-    }
-    let cardDate = cardDiv.dataset.date
-    let voteActionResult = await setMyVote(cardDate, voteVal)
-
-    if (voteActionResult) {
-      await fes.refreshVotesState();
+    let date = cardDiv.dataset.date; // 從卡片的 data-date 屬性中獲取日期
+    if (fes.currentSession && fes.currentSession.username && voteVal && date) {
+      // 假設用戶已登入，並且 fes.currentSession 中包含 username
+      let voteActionResult = await setMyVote(fes.currentSession.username, date, voteVal);
+      if (voteActionResult.success) {
+        await fes.refreshVotesState(); // 重新獲取並顯示最新的投票資訊
+      } else {
+        // 顯示錯誤訊息
+        updateErrorMessage(voteActionResult.error);
+      }
     }
-
   }
 }
 
+
 const daysViewDiv = document.querySelector('section.days-view');
 daysViewDiv.addEventListener("click", handleVoteEvent);