fix: [app] Better parsing of inject's score and support in UI

exercise.py

@@ -48,17 +48,27 @@ def init_inject_flow():
 
 def init_exercises_tasks():
     for exercise in db.ALL_EXERCISES:
+        max_score = 0
         tasks = {}
         for inject in exercise['injects']:
+            score = 0
+            try:
+                for inject_eval in inject['inject_evaluation']:
+                    score += inject_eval['score_range'][1]
+            except KeyError:
+                pass
+            max_score += score
             tasks[inject['uuid']] = {
                 "name": inject['name'],
                 "uuid": inject['uuid'],
                 "completed_by_user": [],
+                "score": score,
             }
         db.EXERCISES_STATUS[exercise['exercise']['uuid']] = {
             'uuid': exercise['exercise']['uuid'],
             'name': exercise['exercise']['name'],
-            'tasks': tasks
+            'tasks': tasks,
+            'max_score': max_score,
         }
 
 
@@ -67,12 +77,7 @@ def get_exercises():
     for exercise in db.ALL_EXERCISES:
         tasks = []
         for inject in exercise['injects']:
-            score = 0
-            try:
-                for inject_eval in inject['inject_evaluation']:
-                    score += inject_eval['score_range'][1]
-            except KeyError:
-                pass
+            score = db.EXERCISES_STATUS[exercise['exercise']['uuid']]['tasks'][inject['uuid']]['score']
             tasks.append(
                 {
                     "name": inject['name'],
@@ -222,6 +227,7 @@ def get_progress():
             progress[user_id]['exercises'][exec_uuid] = {
                 'tasks_completion': tasks_completion,
                 'score': get_score_for_task_completion(tasks_completion),
+                'max_score': db.EXERCISES_STATUS[exec_uuid]['max_score'],
             }
     return progress
 

src/components/TheAdminPanel.vue

@@ -37,7 +37,7 @@
           <div class="flex mb-5">
             <button
               @click="resetAllExerciseProgress()"
-              class="px-2 py-1 rounded-md focus-outline font-semibold bg-red-600 text-slate-200 hover:bg-red-700"
+              class="h-10 min-h-10 px-2 py-1 font-semibold bg-red-600 text-slate-200 hover:bg-red-700 btn btn-sm"
             >
               <FontAwesomeIcon :icon="faTrash" class="mr-1"></FontAwesomeIcon>
               Reset All Exercises

src/components/TheScores.vue

@@ -97,10 +97,10 @@
             </span>
             </td>
             <td class="border-b border-slate-100 dark:border-slate-700 text-slate-500 dark:text-slate-400 p-3">
-              <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-neutral-600" role="progressbar" :aria-valuenow="progress.exercises[exercise.uuid].percentage" :aria-valuemin="0" aria-valuemax="100">
+              <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-neutral-600" role="progressbar" :aria-valuenow="progress.exercises[exercise.uuid].score" :aria-valuemin="0" aria-valuemax="100">
                 <div
                   class="flex flex-col justify-center rounded-full overflow-hidden bg-green-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-green-500 transition-width transition-slowest ease"
-                  :style="`width: ${progress.exercises[exercise.uuid].score}%`"
+                  :style="`width: ${100 * (progress.exercises[exercise.uuid].score / progress.exercises[exercise.uuid].max_score)}%`"
                 ></div>
               </div>
             </td>