Done and Dusted

This week was pretty stable and concluded with nearly finishing up all development related to the competition project.

At the start of the week I altered my code to make all backend API calls pass through the Vuex store. This was done by making use of Vuex Actions, which is the only asynchronous method available in the Vuex store, and using it to perform the same operations that were performed in the Driver file from the Services folder. While this may seem redundant at first, it helps organize code a bit better because instead of utilizing API calls through the database global scope it makes them pass through the Vuex state store instead which you can use to handle all data related operations respectively.

Pouchdb supports two way synchronization and one way replication through its sync and replicate methods. Earlier, we had been utilizing both of these methods in our code but ended up doing by duplicating much of the code since both of these processes were essentially doing much the same. Hence, we decided to remove the replication code in its entirety and use just the synchronization process instead.

Minor cosmetic changes were also made like fixing the Cordova Application in landscape mode through the usage of the screen orientation plugin and removing all Vuetify Dialog boxes with Javascript Alert and Confirm messages instead. Since Icons cannot be added to Alert and Confirm messages we added Emojis to serve as visual queues to symbolize what information each part of the message was meant to convey. Trial and Error had to be performed for these Emojis since their representation changes across platforms and are entirely unsupported from one browser to the next at times.These emojis were added as an ES6 module so they could be easily imported in whichever component needed them.

Another minor issue we came across was with the logo of the application. Since we are fetching our logo first from the remote database and then only hydrating it in an html image tag once the logo is ready, this process was earlier causing a small flicker as a broken html image tag went to showing the logo whenever the route changed to the homepage. Although the flickering rate was quite fast, it was still noticeable to the naked eye. This was solved by adding CSS to the image tag to keep it hidden until the logo had been loaded and made ready for display.