Week 5 & 6 Report | GSoC'22@CircuitVerse

Past two weeks I worked on the enhancement of the Navbar component which I had coded during the proposal period and also worked on the tabs-bar component.

Navbar Component

I started with converting the Navbar component coded in OptionsAPI to Composition API. Following that I made some fixes in the logic of toggling of Navbar in smaller screens. Then I focused on localization of the Navbar to Hindi.

Folder structure for Navbar -

NavbarData.json
UserData.json
Navbar
  |-------> Logo
  |-------> DropDown
  |-------> User 
  |        (fetch data from : UserData.json)
  |
  |-------> Navbar Links
            (fetch data from : NavbarData.json)
                |-------> Navbar Link
               

NavbarData.json stores the key for locale(en/hi).json which displays the corresponding values on the screen.

Link to the PR - https://github.com/CircuitVerse/cv-frontend-vue/pull/11

---

Tabsbar Component

I created the tabs-bar component. Replaced DOM rendering using strings with Vue Logic. I defined a cicuit_list state in Pinia Store and updating it on creating or delting a circuit or tab.

circuit_list - Array of Object
circuit_list[i] - { name : circuitName, id : circuitId }

One of the Issue I faced - How to use Pinia store states in external javascript files.

Vue has documentation of using states outside component, which helped me resolve it. It will also help me when I convert canvas objects to Pinia Store.

Link to PR - https://github.com/CircuitVerse/cv-frontend-vue/pull/14

---

Next Week's Aim

Next I will work on sortability of the tabs using SortableJS/Vue.Draggable

(It was previously implemented by using jQueryUI)

And also complete the remaining panels by this week.

After that in the upcoming weeks I would focus on two main things -

• Moving the canvas object to pinia store.

• Integrating the embed feature