DEV Community

Cover image for GSoC’24(CircuitVerse) Week 3 & 4
Niladri Adhikary
Niladri Adhikary

Posted on

GSoC’24(CircuitVerse) Week 3 & 4

This 2 weeks I have been focusing on Implementing the remaining components and VUE + TS Integration with removal of JQuery.

Some of the Components that I have Implemented are:

  • TestBench Panel.vue
  • TestBench Creator.vue
  • TestBench Validator.vue
  • Alert MessageBox

Vue + Typescript Integration for:

  • Project.ts
  • Utils.ts
  • Testbench.ts
  • Open Offline.vue

Pania Store came really in handy to Implement the state management very nicely, and i quite love its Functionalities

Implementation of TestBench Components

Image description

As planned in my proposal I started with implementing the creator component using vuetify and converted all jQuery & DOM manipulations to Vue's reactives and typescript integration.

Previously we were using the creator as a separate window, so this time Creating TestBenchCreator.vue eliminated the need to a extra window and the data transmission was done using pinia to transmit data between Creator and Testbench Panel component.

Image description

Next, the TestbenchPanel that was under the extra.vue file, was converted to Vue's reactives, all UI DOM manipulations that was previously there in the testbench.js was migrated to the component using Vue and Pinia.

Other Testbench components like the testbench validator and some dialog boxes are migrated as well in the same folder.

Also created a Testbench store in the pinia store folder for reactive state management of the test data.

PR LINK - https://github.com/CircuitVerse/cv-frontend-vue/pull/323

Vue + Typescript Integration

Typescript and Vue integrations were done in some files like project.ts, utils.ts, testbench.ts, Open Offline.vue Component initially more integrations will be done in the next weeks

PR LINK -
utils.ts - https://github.com/CircuitVerse/cv-frontend-vue/pull/325
project.ts - https://github.com/CircuitVerse/cv-frontend-vue/pull/324
Offline.vue - https://github.com/CircuitVerse/cv-frontend-vue/pull/318

Top comments (0)