Web Application Development

INF3048 – S6

TP3: Dual View Dually Persistent

N-Operand Calculator App in
Quasar-TS-Pug-JsonServer-Cypress-NYC

Jacques Robin and Camilo Correa © 2023-2024

 TP3 tasks
A. Add to the Dual View N-Operand Calculator App you delivered in TP2
the following additional functionalities:
1. On each input-operand component and each keytab operand component add:
a) one button to transfer the value of the operand persisted in LocalStorage to a local
JSON file called db.json by making a PUT HTTP request to a Json-Server instance
managing this db.json file
b) one button to transfer the value of the operand persisted in the db.json file to
LocalStorage by making a GET HTTP request to Json-Server
2. On each dropdown menu operator selection component and each keytab
operator selection component add:
a) One button to persist the volatile value of the operator in the Pinia store to
LocalStorage
b) One button the transfer the value of the operator persisted in LocalStorage into the
Pinia store
c) One button to transfer the value of the operator persisted in LocalStorage to a local
JSON file called db.json by making a PUT HTTP request to a Json-Server instance
managing this db.json file
d) One button to transfer the value of the operator persisted in the db.json file to
LocalStorage by making a GET HTTP request to Json-Server
 TP3 Tasks
Since both the LocalStorage persistence and the Json-Server
managed db.json file persistence is share for both views of the
app, the effect on clicking on any of the buttons in one view
should be reactively and immediately visible in the other view
Make sure that all the Cypress tests that you had to write for
your TP2, still work with the extend code of your TP3
The model of such calculator with dual views (input-select vs.
keypad) and dual persistence method (LocalStorage vs. Json-
Server managed db.json file) in the simple case of two
operand and a single operator, which code was demoed and
explain in class is available here:
https://gitlab.esiea.fr/webdev/calcquasarstudents/-/tree/JsonS
erverWebStoragePersistent?ref_type=heads