feat(gsoc'24): OpenOffline.vue component jquery to Vue's reactive and…

… ts integration (#318)

* OpenOffline.vue component jquery to Vue's reactive and ts integration

* Update OpenOffline.vue

src/components/DialogBox/OpenOffline.vue

@@ -26,11 +26,12 @@
                             type="radio"
                             name="projectId"
                             :value="projectId"
+                            v-model="selectedProjectId"
                         />
                         {{ projectName }}<span></span>
                         <i
                             class="fa fa-trash deleteOfflineProject"
-                            @click="deleteOfflineProject(projectId)"
+                            @click="deleteOfflineProject(projectId.toString())"
                         ></i>
                     </label>
                     <p v-if="JSON.stringify(projectList) == '{}'">
@@ -64,32 +65,39 @@
 <script lang="ts" setup>
 import load from '#/simulator/src/data/load'
 import { useState } from '#/store/SimulatorStore/state'
-import { onMounted, onUpdated, ref, toRaw } from '@vue/runtime-core'
+import { onMounted, onUpdated, ref, reactive } from '@vue/runtime-core'
 const SimulatorState = useState()
-const projectList = ref({})
+const projectList: {
+    [key: string]: string
+} = reactive({})
+const selectedProjectId = ref<string | null>(null)
+
 onMounted(() => {
     SimulatorState.dialogBox.open_project_dialog = false
 })
 
 onUpdated(() => {
-    var data = localStorage.getItem('projectList')
-    projectList.value = JSON.parse(localStorage.getItem('projectList')) || {}
+    const data = localStorage.getItem('projectList')
+    projectList.value = data ? JSON.parse(data) : {}
 })
 
-function deleteOfflineProject(id) {
+function deleteOfflineProject(id: string) {
     localStorage.removeItem(id)
-    const temp = JSON.parse(localStorage.getItem('projectList')) || {}
+    const data = localStorage.getItem('projectList')
+    const temp = data ? JSON.parse(data) : {}
     delete temp[id]
     projectList.value = temp
     localStorage.setItem('projectList', JSON.stringify(temp))
 }
 
 function openProjectOffline() {
     SimulatorState.dialogBox.open_project_dialog = false
-    let ele = $('input[name=projectId]:checked')
-    if (!ele.val()) return
-    load(JSON.parse(localStorage.getItem(ele.val())))
-    window.projectId = ele.val()
+    if (!selectedProjectId.value) return
+    const projectData = localStorage.getItem(selectedProjectId.value)
+    if (projectData) {
+        load(JSON.parse(projectData))
+        window.projectId = selectedProjectId.value
+    }
 }
 
 function OpenImportProjectDialog() {