fix: fix redirection

tassiluca · Jan 31, 2024 · 811d93f · 811d93f
1 parent 80fbb2c
commit 811d93f
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 18 deletions.
diff --git a/frontend/src/components/vote/CodeInsertion.vue b/frontend/src/components/vote/CodeInsertion.vue
@@ -45,7 +45,7 @@ function submitCode(code: string) {
     if (response.data.data) {
       useVotingStore().setOtpInUse(code);
       useVotingStore().setOtpInUseElectionId(route.params.id as string)
-      router.push(`/vote/${route.params.id}`);
+      window.location.href = `/vote/${route.params.id}`;
     } else {
       error.value = true;
     }
@@ -104,7 +104,7 @@ onMounted(async () => {
 <template>
     <div class="card bg-white mb-5 mt-5 border-0" style="box-shadow: 0 12px 15px rgba(0, 0, 0, 0.02);">
       <div class="card-body p-5 text-center">
-        <h4>Insert the eleciton's OTC </h4>
+        <h4>Insert the election's OTC </h4>
         <div class="otp-field mb-4">
           <input type="text" v-for="(_, index) in inputRefs" v-model="inputRefs[index].value" :disabled="index !== 0"/>
         </div>

diff --git a/frontend/src/stores/voting.ts b/frontend/src/stores/voting.ts
@@ -38,6 +38,24 @@ export const useVotingStore = defineStore('voting', () => {
   const otpInUse = ref(sessionStorage.getItem("otpInUse"));
   const otpInUseElectionId = ref(sessionStorage.getItem("otpInUseElectionId"));
 
+  async function castVote(choice: string) {
+    const urlRequest = `${apiEndpoints.API_SERVER}/election/vote/${otpInUseElectionId.value}`;
+    const response = await axios.put(urlRequest, {
+        code: otpInUse.value,
+        choice: choice
+    });
+
+    if(response.status !== 200) {
+      console.log(response.data.message);
+      return {success: false, msg: response.data.error.message};
+    }
+
+    setOtpInUseElectionId('');
+    setOtpInUse('');
+    return {success: true, msg: 'Vote casted successfully!'}
+  }
+
+
   async function getVotingBy(id: string): Promise<Voting> {
     const urlInfos = `${apiEndpoints.API_SERVER}/election/info/detail/${id}`;
     const urlDetails = `${apiEndpoints.API_SERVER}/election/detail/${id}`;
@@ -135,5 +153,15 @@ export const useVotingStore = defineStore('voting', () => {
     return otpInUseElectionId.value;
   }
 
-  return { getVotingBy, getVotings, createVoting, setOtpInUse, getOtpInUse, getElectionInfo, setOtpInUseElectionId, getOtpInUseElectionId }
+  return {
+      getVotingBy,
+      getVotings,
+      createVoting,
+      castVote,
+      setOtpInUse,
+      getOtpInUse,
+      getElectionInfo,
+      setOtpInUseElectionId,
+      getOtpInUseElectionId
+  }
 });
diff --git a/frontend/src/views/VoteView.vue b/frontend/src/views/VoteView.vue
@@ -4,26 +4,21 @@
     import { useRoute } from 'vue-router';
     import router from '@/router'
     import VoteOption from "@/components/vote/VoteOption.vue";
-    import axios from "axios";
+    import PageTitle from '@/components/PageTitleComponent.vue'
 
 
     const voteOptions: any = ref([]);
+    const response = ref({});
+    const submitting = ref(false);
 
     const choosedOption = ref("");
     const route = useRoute();
     const electionId = route.params.id as string;
 
-    function submitForm(): void {
-        axios.put(`http://localhost:8080/election/vote/${electionId}`, {
-            code: useVotingStore().getOtpInUse(),
-            choice: choosedOption.value
-        }).then((response) => {
-            alert(response.data.data);
-            useVotingStore().setOtpInUse("");
-            useVotingStore().setOtpInUseElectionId("");
-        }).catch((error) => {
-            alert(error);
-        });
+    async function submitForm() {
+        submitting.value = true;
+        response.value= await useVotingStore().castVote(choosedOption.value);
+        submitting.value = false;
     }
 
     const goal = ref("");
@@ -45,18 +40,27 @@
 <template>
     <div class="container">
         <header class="mb-2">
-            <h1> {{ goal }} </h1>
+          <PageTitle :title="`Vote for election ${goal}`" />
         </header>
         <form @submit.prevent="submitForm" method="POST" >
             <div class="row mb-3">
-                <h2>Vote options</h2>
+                <h2>Vote choices</h2>
                 <VoteOption v-for="option in voteOptions" 
                     :key="option.id" 
                     :optId="option.id.toString()" 
                     :name="option.name" 
                     v-model="choosedOption"/>
             </div>
-            <button type="submit" class="btn btn-primary" :disabled="!choosedOption">Submit</button>
+            <button type="submit" class="btn btn-primary" :disabled="!choosedOption">
+              Vote
+              <span v-if="submitting" class="spinner-border spinner-border-sm text-light"></span>
+            </button>
+            <slot name="footer"/>
+            <div v-if="response.hasOwnProperty('success')"
+                 class="alert mt-3 mb-3 text-center col-10 mx-auto"
+                 :class="{ 'alert-danger': !response.success, 'alert-success': response.success }"
+                 role="alert"
+            ><strong>{{ response.msg }}</strong></div>
         </form>
     </div>
 </template>