Archives de
Étiquette : covid19

Vue.js et localstorage

Vue.js et localstorage

Afin d’utiliser les données https://github.com/CSSEGISandData/COVID-19/tree/master/csse_covid_19_data/csse_covid_19_time_series nous allons les récupérés a la création de notre application.

Pour ce faire nous regardons si nous avons dans le localstorage une date de défini ou de moins d’une heure. Si non, nous récupérons à l’aide de fetch les données, convertissons le csv a l’aide de papaparse puis stockons le résultats sous forme de JSON dans le localstorage.

Une fois les 3 fichiers chargés grâce à Promise.all, nous allons vers la route /single.

if (localStorage.date === undefined || localStorage.date < Date.now() - 3600) {
                this.$router.push('/');
                localStorage.date = Date.now();
                Promise.all([
                    fetch('https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv')
                        .then((resp) => resp.text())
                        .then((data) => {
                            localStorage.confirmed = JSON.stringify(Papa.parse(data));
                        }),
                    fetch('https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_recovered_global.csv')
                        .then((resp) => resp.text())
                        .then((data) => {
                            localStorage.recovered = JSON.stringify(Papa.parse(data));
                        }),
                    fetch('https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_deaths_global.csv')
                        .then((resp) => resp.text())
                        .then((data) => {
                            localStorage.death = JSON.stringify(Papa.parse(data));
                        }),
                ])
                    .then(() => this.$router.push('/single'));
            }

Le dépôt est accessible sur: https://gitlab.com/dayo/covid19 et l’application: https://dayo.gitlab.io/covid19/single