big update

update UI, added CommendGrading, added loading, error icon :)))

public/manifest.json

@@ -1,7 +1,7 @@
 {
-  "name": "END Auto V3",
+  "name": "EDN Auto V3",
   "description": "Automate grading tasks on edunext system ",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "manifest_version": 3,
   "icons": {
     "128": "icon.png"
@@ -25,7 +25,7 @@
     "default_popup": "index.html",
     "default_title": "Edunext Auto"
   },
-  "permissions": ["https://fu-edunext.fpt.edu.vn/*", "activeTab", "scripting"],
+  "permissions": ["activeTab", "scripting"],
   "host_permissions": ["https://fu-edunext.fpt.edu.vn/*"],
   "commands": {
     "_execute_action": {

src/App.vue

@@ -30,7 +30,7 @@ window.addEventListener("keydown", handleShortCut);
       src="/icon.png"
       class="mx-auto w-20 drop-shadow-lg animate-wiggle"
     />
-    <h1 class="text-center text-base pt-4 dark:text-white font-bold">{{ store.user?.name }}</h1>
+    <h1 class="text-center text-base pt-2 font-bold">{{ store.user?.name }}</h1>
     <div>
       <Card
         :on-btn-click="store.gradeTeammates"

src/components/Button.vue

@@ -1,4 +1,8 @@
-<script setup lang="ts">
+<script setup>
+import loading from "../assets/loading.svg";
+import check from "../assets/check.svg";
+import failed from "../assets/failed.svg";
+
 const props = defineProps({
   state: {
     type: String,
@@ -8,19 +12,34 @@ const props = defineProps({
 
 const dynamicClass = {
   static: "bg-blue-500 dark:bg-blue-400 hover:scale-110 shadow-lg",
-  disable: "bg-slate-400 dark:bg-slate-600 shadow-inner",
-  ok: "bg-lime-500 dark:bg-lime-400 shadow-inner",
-  failed: "bg-rose-500 dark:bg-rose-400 shadow-inner",
-  pending: "bg-gray-400 dark:bg-gray-600 shadow-inner",
+  disable: "bg-slate-400 dark:bg-slate-600 shadow-inner cursor-not-allowed",
+  ok: "bg-lime-500 dark:bg-lime-400 shadow-inner cursor-not-allowed",
+  failed: "bg-rose-500 dark:bg-rose-400 shadow-inner cursor-not-allowed",
+  pending: "bg-gray-400 dark:bg-gray-600 shadow-inner cursor-not-allowed",
 };
 </script>
 
 <template>
   <button
-    class="duration-200 font-bold text-white text-lg w-fit rounded-full px-10 ease-in-out select-none"
-    :disabled="state !== 'static'"
+    class="duration-200 font-bold text-white text-lg w-36 rounded-lg px-10 ease-in-out select-none"
     :class="dynamicClass[state]"
+    :disabled="state != 'static'"
   >
-    <slot />
+    <slot v-if="state == 'static' || state == 'disable'" />
+    <img
+      v-else-if="state == 'pending'"
+      :src="loading"
+      class="animate-spin mx-auto"
+    />
+    <img
+      v-else-if="state == 'ok'"
+      :src="check"
+      class="mx-auto"
+    />
+    <img
+      v-else-if="state == 'failed'"
+      :src="failed"
+      class="mx-auto"
+    />
   </button>
 </template>

src/components/Card.vue

@@ -12,7 +12,7 @@ const props = defineProps({
 });
 </script>
 <template>
-  <div class="bg-sky-50 dark:bg-slate-800 rounded-full my-4 mx-2 p-5 pl-8 flex justify-between">
+  <div class="bg-sky-50 dark:bg-slate-800 rounded-xl my-2 mx-2 p-5 pl-8 flex justify-between">
     <p class="text-lg select-none font-medium">
       <slot />
     </p>

src/store.ts

@@ -6,7 +6,7 @@ import { utils } from "./utils";
 const delay = 1500;
 
 let user: user;
-let appReady: true | false = false;
+let appReady: true | false = true;
 let gradeTeammatesState: state = "static";
 let gradeGroupsState: state = "static";
 let gradeCommentsState: state = "static";
@@ -31,13 +31,13 @@ export const useStore = defineStore("store", {
       const msg: message = { command: "get_url" };
       chrome.runtime.sendMessage(msg, (response: response) => {
         this.currentURL = new URL(response.data);
+        if (this.currentURL.host !== "fu-edunext.fpt.edu.vn") {
+          this.appReady = false;
+        }
         if (this.currentURL.pathname !== "/course/activity/question") {
           this.gradeTeammatesState = "disable";
           this.gradeGroupsState = "disable";
           this.gradeCommentsState = "disable";
-          this.appReady = false;
-        } else {
-          this.appReady = true;
         }
       });
     },
@@ -77,6 +77,7 @@ export const useStore = defineStore("store", {
               for (let user of group.listStudentByGroups) {
                 if (user.email == this.user.email) {
                   groupId = group.id;
+                  this.user.groupId = group.id;
                   myGroup = group;
                   break;
                 }
@@ -103,9 +104,9 @@ export const useStore = defineStore("store", {
                 endpoints.gradeTeammates,
                 this.TOKEN,
                 undefined,
-                JSON.stringify({
+                {
                   gradeTeammatesList: gradeTeammatesList,
-                })
+                }
               );
               if (response.ok) {
                 this.gradeTeammatesState = "ok";
@@ -176,12 +177,7 @@ export const useStore = defineStore("store", {
               reviewingGroupDTO: null,
             };
 
-            let response = await utils.post(
-              endpoints.gradeGroups,
-              this.TOKEN,
-              undefined,
-              JSON.stringify(body)
-            );
+            let response = await utils.post(endpoints.gradeGroups, this.TOKEN, undefined, body);
 
             if (response.ok && this.gradeGroupsState !== "failed") {
               this.gradeGroupsState = "ok";
@@ -205,10 +201,79 @@ export const useStore = defineStore("store", {
       const classroomId = this.currentURL.searchParams.get("classId");
       const sessionId = this.currentURL.searchParams.get("sessionId");
 
-      let qcSettings: response = await utils.get(endpoints.qcSettings, this.TOKEN, {
+      // get settings for the QC
+      const qcSettings: response = await utils.get(endpoints.qcSettings, this.TOKEN, {
         privateCqId: privateCqId,
       });
       if (qcSettings.data.data) {
+        const settings = qcSettings.data.data;
+        const hashCode: string = settings.hashCode;
+        const classroomSessionId: string = settings.cqDetail.classroomSessionId;
+        let voteQueue: Number[] = [];
+        const typeStar = {
+          1: 4,
+          2: 3,
+          3: 2,
+          4: 1,
+        };
+        const insideSettings = settings.typeOfGrade.INSIDE;
+
+        for (let cardName in insideSettings) {
+          for (let quantity = 0; quantity < insideSettings[cardName].quantity; ++quantity) {
+            voteQueue.push(insideSettings[cardName].star);
+          }
+        }
+
+        // get votes that user gave
+        const allVoted: response = await utils.get(endpoints.getVoteGiven, this.TOKEN, {
+          privateCqId: privateCqId,
+          typeFilter: 1,
+        });
+        if (allVoted.data.data) {
+          const comments = allVoted.data.data;
+          for (let comment of comments) {
+            // unvote
+            await utils.post(endpoints.unVote, this.TOKEN, undefined, {
+              commentId: comment._id,
+              cqId: privateCqId,
+            });
+          }
+
+          // get all comments
+          const allComments: response = await utils.get(endpoints.getComments, this.TOKEN, {
+            cqId: privateCqId,
+            role: this.user.role,
+            userId: this.user.userId,
+            classroomSessionId: classroomSessionId,
+            groupId: this.user.groupId,
+            outsideGroup: false,
+            minItemId: "empty",
+            maxItemId: "empty",
+            beforePage: 1,
+            currentPage: 1,
+            statusClickAll: false,
+            pageSize: 999,
+            hashCode: hashCode,
+          });
+
+          if (allComments.data.comments) {
+            let comments = allComments.data.comments.items;
+            for (let comment of comments) {
+              if (comment.writer._id === this.user.id) continue;
+              if (voteQueue.length > 0) {
+                const star = voteQueue.shift() || "";
+                await utils.post(endpoints.upVote, this.TOKEN, undefined, {
+                  commentId: comment._id,
+                  cqId: privateCqId,
+                  star: star,
+                  typeStar: typeStar[+star],
+                  typeFilter: 1,
+                });
+              }
+            }
+          }
+          this.gradeCommentsState = "ok";
+        }
       }
     },
   },

src/utils/endpoints.ts

@@ -5,6 +5,10 @@ const API_BASE = BASE + PORT + "/api/v1";
 
 export const endpoints = {
   auth: `${BASE}/api/auth/token`,
+  getVoteGiven: `${BASE}/api/comment/get-vote-given`,
+  unVote: `${BASE}/api/comment/un-votes`,
+  upVote: `${BASE}/api/comment/up-votes`,
+  getComments: `${BASE}/api/comment/get-comments`,
   courseSessionDetail: `${API_BASE}/course/course-detail/session-detail`,
   listGroups: `${API_BASE}/group/list-group`,
   gradeTeammates: `${API_BASE}/grade/grade-teammates`,

src/utils/index.ts

@@ -73,7 +73,7 @@ export const utils = {
     endpoint: string,
     token: string,
     params: Object | undefined = undefined,
-    body: string | undefined = undefined
+    body: Object | undefined = undefined
   ) {
     const message: message = {
       command: "make_request",
@@ -82,7 +82,7 @@ export const utils = {
         configs: {
           method: "POST",
           headers: utils.getRequestHeaders(endpoint, token),
-          body: body,
+          body: JSON.stringify(body),
         },
         params: params,
       },