Add level indicators in skilltree and subskilltree

components/skill-tree/Node.vue

@@ -6,6 +6,9 @@
 			:node="node"
 			:active="active"
 			:completed="completed"
+      :dottedBorder="(viewSubtree ? root_skill_level_value : sub_skill_level_value) > 25 && (viewSubtree ? root_skill_level_value : sub_skill_level_value) <= 42"
+      :segmentedBorder="(viewSubtree ? root_skill_level_value : sub_skill_level_value) > 42 && (viewSubtree ? root_skill_level_value : sub_skill_level_value) <= 50"
+      :flameEffect="(viewSubtree ? root_skill_level_value : sub_skill_level_value) > 50"
 		/>
 
 		<foreignObject
@@ -26,7 +29,7 @@
 					'text-heading-5': zoomLevel == 3,
 					'text-body-2': zoomLevel == 2,
 				}"
-				v-if="node && node.name != 'start'"
+				v-if="node"
 			>
 				{{ node?.name ?? '' }}
 			</h6>
@@ -49,9 +52,22 @@ export default defineComponent({
     zoomLevel: { type: Number, default: 2 },
     viewSubtree: { type: Boolean, default: false },
     viewSkill: { type: Boolean, default: false },
+    xp: { type: Object as PropType<any>, default: null },
   },
   emits: ['node', 'size', 'selected', 'move', 'ref'],
   setup(props, { emit }) {
+    const search_id = computed(() => props.viewSubtree ? props.node?.id : props.node?.parent_id)
+    const xp_list_root_skill = computed(() => props.xp?.skills?.find(
+      (skill: any) => skill.skill === search_id.value
+    ));
+    const xp_list_sub_skill = computed(() => xp_list_root_skill.value?.skills?.find(
+      (skill: any) => skill.skill === props.node?.id
+    ));
+    const root_skill_xp_value = computed(() => xp_list_root_skill.value?.xp);
+    const root_skill_level_value = computed(() => xp_list_root_skill.value?.level);
+    const sub_skill_xp_value = computed(() => xp_list_sub_skill.value?.xp);
+    const sub_skill_level_value = computed(() => xp_list_sub_skill.value?.level);
+
     let occupiedSpace = 3;
 
     const size = computed(() => {
@@ -135,6 +151,10 @@ export default defineComponent({
       ondblclick,
       isFilled,
       occupiedSpace,
+      root_skill_xp_value,
+      root_skill_level_value,
+      sub_skill_xp_value,
+      sub_skill_level_value,
     };
   },
 });

components/skill-tree/NodeSvg.vue

@@ -20,22 +20,47 @@
 
     <g id="icon-box" class="cursor-pointer">
       <foreignObject
+        v-if="flameEffect"
         x="43.8984"
         y="44.0664"
         :width="iconSize"
         :height="iconSize"
-        class="cursor-pointer"
+        class="bg-[#451b80] rounded-full origin-center scale-[1.4] animate-pulse"
       >
-        <!-- <object
-					class="cursor-pointer"
-					type="image/svg+xml"
-					:data="icon"
-					v-if="node && node.icon"
-					@click="onclickToggleActive"
-				></object> -->
+        <div :style="{ width: iconSize + 'px', height: iconSize + 'px' }"></div>
+      </foreignObject>
 
+      <foreignObject
+        x="43.8984"
+        y="44.0664"
+        :width="iconSize"
+        :height="iconSize"
+        class="cursor-pointer"
+      >
         <img :src="icon" class="cursor-pointer" v-if="node && node.icon" :alt="t('AltAttributes.CourseIcon')" />
       </foreignObject>
+
+      <foreignObject
+        v-if="dottedBorder"
+        x="43.8984"
+        y="44.0664"
+        :width="iconSize"
+        :height="iconSize"
+        class="border-8 border-[#f0a000] border-dotted rounded-full"
+      >
+        <div :style="{ width: iconSize + 'px', height: iconSize + 'px' }"></div>
+      </foreignObject>
+
+      <foreignObject
+        v-if="segmentedBorder"
+        x="43.8984"
+        y="44.0664"
+        :width="iconSize"
+        :height="iconSize"
+        class="border-8 border-[#f0a000] rounded-full"
+      >
+        <div :style="{ width: iconSize + 'px', height: iconSize + 'px' }"></div>
+      </foreignObject>
     </g>
 
     <path
@@ -78,6 +103,9 @@ export default {
     active: { type: Boolean, default: false },
     completed: { type: Boolean, default: false },
     failed: { type: Boolean, default: false },
+    dottedBorder: { type: Boolean, default: false },
+    segmentedBorder: { type: Boolean, default: false },
+    flameEffect: { type: Boolean, default: false },
   },
   emits: ["active", "completed"],
   setup(props, { emit }) {

pages/skill-tree/[id]/index.vue

@@ -47,6 +47,7 @@
               @move="setSelectedNode($event)"
               :active="selectedNode.row == i && selectedNode.column == j"
               :completed="getNode(i, j)?.completed ?? false"
+              :xp="xp"
             />
           </template>
         </template>
@@ -197,12 +198,18 @@ export default {
       { deep: true }
     );
 
+    const xp = useXP();
+
     onMounted(async () => {
       if (!!!subTreeId.value) {
         loading.value = false;
         return;
       }
 
+      await getXP();
+
+      console.log("xp", xp.value);  
+
       const [success, error] = await getSubSkillTree(subTreeId.value);
 
       if (!!error) {
@@ -387,6 +394,8 @@ export default {
       t,
       subTreeName,
       breadcrumbs,
+
+      xp,
     };
   },
 };

pages/skill-tree/index.vue

@@ -17,7 +17,7 @@
         <template v-for="(row, i) in map" :key="i">
           <SkillTreeNode v-for="(column, j) in row" :key="`${i}${j}`" :row="i" :column="j"
             @ref="insertRefInMap($event, i, j)" :node="getNode(i, j)" :zoomLevel="zoomLevel" @size="nodeSize = $event"
-            @click="scrollToNode(i, j, true)" view-subtree :completed="getNode(i, j) && getNode(i, j).id == 'start'" />
+            @click="scrollToNode(i, j, true)" view-subtree :completed="getNode(i, j) && getNode(i, j).id == 'start'" :xp="xp" />
         </template>
       </svg>
     </section>
@@ -46,6 +46,7 @@ export default {
     });
     const { t } = useI18n();
     const user = useUser();
+    const xp = useXP();
 
     // ! ======================================================= Set Up
     function onclickUploadCertificates() {
@@ -85,6 +86,8 @@ export default {
     onMounted(async () => {
       const [success, error] = await getRootSkillTree();
 
+      await getXP();
+
       if (!!error || !!!success) {
         loading.value = false;
         return;
@@ -264,6 +267,8 @@ export default {
       onclickUploadCertificates,
       ArrowUpTrayIcon,
       breadcrumbs,
+
+      xp,
     };
   },
 };