goto dep

src/components/PopUp.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { Course, CourseWrap } from '@/types'
+import { DepPath, CourseWrap } from '@/types'
 import Fuse from 'fuse.js'
+import { coursewrap2str, path2str } from '@/composables/utils'
 
 interface Props {
     visible?: boolean
@@ -23,8 +24,11 @@ function toggleVisible() {
 const dataStore = useDataStore()
 const { courses } = storeToRefs(dataStore)
 
-const select = ref<Course>()
-const search = ref<string>('')
+const selectCourse = ref<CourseWrap>()
+const paths = computed(
+    () => selectCourse.value?.paths.map((path) => ({ path })) ?? [],
+)
+const searchCourse = ref<string>('')
 const loading = ref(false)
 
 let fuse = new Fuse([] as CourseWrap[])
@@ -47,16 +51,31 @@ const courseItems = computed(() => {
     try {
         loading.value = true
         return fuse
-            .search(search.value)
-            .map(({ item }) => ({
-                value: `${item.course.cos_cname} (${item.course.cos_id})`,
-                ...item,
-            }))
+            .search(searchCourse.value)
+            .map(({ item }) => item)
             .slice(0, 100)
     } finally {
         loading.value = false
     }
 })
+
+const selectPath = ref<{ path: DepPath }>()
+
+watch(selectPath, async (value) => {
+    if (value) {
+        await goDep(value.path)
+            .catch((err) => {
+                console.error(err)
+                alert(`Error when go to ${path2str(value)}`)
+            })
+        const list = document.querySelector('.course-list') as HTMLElement
+        for (const el of Array.from(list.children) as HTMLElement[]) {
+            if (el.innerText.indexOf(selectCourse.value?.course.cos_id ?? '') !== -1) {
+                el.classList.add('show')
+            }
+        }
+    }
+})
 </script>
 
 <template>
@@ -71,11 +90,24 @@ const courseItems = computed(() => {
                 autofocus
                 clearable
                 return-object
-                v-model="select"
-                v-model:search="search"
+                v-model="selectCourse"
+                v-model:search="searchCourse"
                 :loading="loading"
                 :items="courseItems"
-                item-title="value"
+                :item-title="coursewrap2str"
+                no-filter
+            />
+
+            <v-autocomplete
+                label="Search Path"
+                variant="underlined"
+                hide-no-data
+                hide-details
+                clearable
+                return-object
+                v-model="selectPath"
+                :items="paths"
+                :item-title="path2str"
             />
         </div>
     </v-container>

src/composables/utils.ts

@@ -1,3 +1,13 @@
+import { DepPath, CourseWrap } from "@/types"
+
+export function sleep(ms: number) {
+    return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+export function waitNextFrame() {
+    return new Promise((resolve) => requestAnimationFrame(resolve))
+}
+
 export function isUUID(str: string) {
     return /^[0-9A-F]{8}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{12}$/.test(
         str,
@@ -14,3 +24,34 @@ export async function digestMessage(message: any) {
         .join('') // convert bytes to hex string
     return hashHex
 }
+
+export function coursewrap2str({ course }: CourseWrap) {
+    const { cos_id, cos_cname, cos_ename, cos_credit } = course
+    return `${cos_id} ${cos_cname} ${cos_ename} ${cos_credit}`
+}
+
+export function path2str({ path }: { path: DepPath } ) {
+    return path.map((d) => d.label).join('/')
+}
+
+export async function goDep(paths: DepPath) {
+    const picker = document.querySelector('.ant-cascader-picker-label') as HTMLElement
+    picker.click()
+    await waitNextFrame()
+    const menu = document.querySelector('.ant-cascader-menus') as HTMLElement
+    const div = menu.children[0] as HTMLElement
+    let r = 0
+    for (const { label } of paths) {
+        const el = div.children[r].querySelector(`[title="${label}"]`) as HTMLElement
+        el.click()
+        await waitNextFrame()
+        r += 1
+    }
+    while (div.children.length > r) {
+        const el = div.children[r].children[0] as HTMLElement
+        el.click()
+        await waitNextFrame()
+        r += 1
+    }
+    return true
+}

src/content-scripts/main.vue

@@ -23,8 +23,14 @@ chrome.runtime.onMessage.addListener((message) => {
         href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css"
         rel="stylesheet"
     />
-    <PopUp v-if="visible" v-model:visible="visible" />
+    <PopUp v-if="visible" v-model:visible="visible" id="cos-search" />
     <Teleport to=".navbar-end">
         <a class="navbar-item" @click.prevent="toggleVisible">🔍</a>
     </Teleport>
 </template>
+
+<style>
+body:has(#cos-search) .sidebar > .course-list > .course:not(.show) {
+    display: none !important;
+}
+</style>