From c839682a0c555b164e13fcbf8210943f9cc450be Mon Sep 17 00:00:00 2001 From: Benjamin Webb <40066515+webb-ben@users.noreply.github.com> Date: Wed, 5 Apr 2023 16:55:46 -0400 Subject: [PATCH 01/26] Add Error Dialog with AppMsg component (#68) * Add Error dialog - Create `src/components/app/AppMsg.vue` which catches axios response errors. - Update TokenAuth logic to allow AppMsg to serve adding a token as well - Switch from fetch to axios/$http - Use root catch method - Add messages and translations - Formatting adjustments * Add Services tab back to navigation --- src/App.vue | 54 ++++++++++++ src/components/app/AppHeader.vue | 2 +- src/components/app/AppMsg.vue | 65 ++++++++++++++ src/components/app/AppNav.vue | 10 +-- src/components/app/TokenAuth.vue | 63 ++++++-------- src/components/data/DataNavigation.vue | 16 +--- src/components/data/DataPlotter.vue | 16 +--- src/components/data/DataTable.vue | 15 +--- src/components/data/DataViewer.vue | 77 ++++++++++------- src/components/leaflet/WisMap.vue | 4 +- src/components/station/StationHistory.vue | 22 ++--- src/components/station/StationLatest.vue | 16 +--- src/locales/_template.json | 7 +- src/locales/en.json | 11 ++- src/locales/es.json | 9 +- src/locales/fr.json | 9 +- src/router/index.js | 9 ++ src/views/Datasets.vue | 101 +++++++++++----------- src/views/Services.vue | 16 ++-- 19 files changed, 304 insertions(+), 218 deletions(-) create mode 100644 src/components/app/AppMsg.vue diff --git a/src/App.vue b/src/App.vue index a2775c1..6250d80 100644 --- a/src/App.vue +++ b/src/App.vue @@ -17,6 +17,7 @@ + @@ -24,8 +25,11 @@ \ No newline at end of file diff --git a/src/components/app/AppNav.vue b/src/components/app/AppNav.vue index bc11a67..b80638a 100644 --- a/src/components/app/AppNav.vue +++ b/src/components/app/AppNav.vue @@ -43,11 +43,11 @@ export default defineComponent({ target: "/", href: undefined, }, - // { - // text: "services", - // target: "/services", - // href: undefined, - // }, + { + text: "services", + target: "/services", + href: undefined, + }, { text: "documentation", target: undefined, diff --git a/src/components/app/TokenAuth.vue b/src/components/app/TokenAuth.vue index db1dd5d..50763d7 100644 --- a/src/components/app/TokenAuth.vue +++ b/src/components/app/TokenAuth.vue @@ -2,26 +2,16 @@
- - - - + + - - - + + + + @@ -29,42 +19,41 @@ diff --git a/src/components/leaflet/WisMap.vue b/src/components/leaflet/WisMap.vue index aba58d2..4e1f7d2 100644 --- a/src/components/leaflet/WisMap.vue +++ b/src/components/leaflet/WisMap.vue @@ -144,9 +144,7 @@ export default defineComponent({ self.features_.stations = response.data.value; self.numberMatched = response.data.numberMatched; }) - .catch(function (error) { - console.log(error); - }) + .catch(this.$root.catch) .then(function () { var bounds_ = geoJSON(self.features_.stations).getBounds(); self.map.fitBounds(bounds_); diff --git a/src/components/station/StationHistory.vue b/src/components/station/StationHistory.vue index 934ee8b..dd822ec 100644 --- a/src/components/station/StationHistory.vue +++ b/src/components/station/StationHistory.vue @@ -83,11 +83,10 @@ export default defineComponent({ if (hasLinks(station)) { this.loadObservations(station); } else if (station !== null) { - this.msg = ` + this.$root.catch(` ${clean(station.properties.name)} ${this.$t( "messages.no_linked_collections" - )}. ${this.$t("messages.how_to_link_station")}`; - this.snackbar = true; + )}
${this.$t("messages.how_to_link_station")}`); this.loading = false; } }, @@ -123,14 +122,7 @@ export default defineComponent({ self.loadDailyObservations(station, index); } }) - .catch(function (error) { - // handle error - console.log(error); - if (error.response.status === 401) { - self.msg = self.$t("messages.not_authorized"); - self.snackbar = true; - } - }); + .catch(this.$root.catch); }, async loadAllObservations(station, index) { this.loading = true; @@ -161,7 +153,7 @@ export default defineComponent({ self.data.push(trace); self.plot(plot); } - }); + }).catch(this.$root.catch); this.loading = false; }, async loadDailyObservations(station, index) { @@ -217,7 +209,7 @@ export default defineComponent({ self.plot(plot); } } - }); + }).catch(this.$root.catch); } this.loading = false; }, @@ -268,9 +260,7 @@ export default defineComponent({ d.setMonth(next.getMonth()); d.setDate(next.getDate()); }) - .catch(function (error) { - console.log(error); - }); + .catch(this.$root.catch); }, }, }); diff --git a/src/components/station/StationLatest.vue b/src/components/station/StationLatest.vue index 651ef2a..95f55ec 100644 --- a/src/components/station/StationLatest.vue +++ b/src/components/station/StationLatest.vue @@ -44,11 +44,10 @@ export default defineComponent({ if (hasLinks(station)) { this.loadObservations(station); } else if (station !== null) { - this.msg = ` + this.$root.catch(` ${clean(station.properties.name)} ${this.$t( "messages.no_linked_collections" - )}. ${this.$t("messages.how_to_link_station")}`; - this.snackbar = true; + )}
${this.$t("messages.how_to_link_station")}`); this.loading = false; this.tab = null; } @@ -75,14 +74,7 @@ export default defineComponent({ response.data.features[0].properties.resultTime; self.loadRecentObservations(station, response.data.numberMatched); }) - .catch(function (error) { - // handle error - console.log(error); - if (error.response.status === 401) { - self.msg = self.$t("messages.not_authorized"); - self.snackbar = true; - } - }) + .catch(this.$root.catch) .then(function () { self.tab = 0; self.loading = false; @@ -106,7 +98,7 @@ export default defineComponent({ self.recentObservations = response.data.features.map( (obs) => obs.properties ); - }); + }).catch(this.$root.catch); }, }, }); diff --git a/src/locales/_template.json b/src/locales/_template.json index ed5dad7..9994822 100644 --- a/src/locales/_template.json +++ b/src/locales/_template.json @@ -11,7 +11,8 @@ "util": { "token": "", "cancel": "", - "save": "" + "save": "", + "close": "" }, "footer": { "powered_by": "" @@ -19,11 +20,13 @@ "messages": { "welcome": "", "no_observations_in_collection": "", + "authorized": "", "not_authorized": "", "no_linked_collections": "", "how_to_link_station": "", "from": "", - "no_of_observations": "" + "no_of_observations": "", + "does_not_exist": "" }, "station": { "map": "", diff --git a/src/locales/en.json b/src/locales/en.json index 8fbe21a..6f99f08 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -4,14 +4,15 @@ "navigation": { "home": "Home", "datasets": "Datasets", - "services": "Data services", + "services": "Services", "data": "Data", "documentation": "Documentation" }, "util": { "token": "Token", "cancel": "Cancel", - "save": "Save" + "save": "Save", + "close": "Close" }, "footer": { "powered_by": "Powered by" @@ -19,11 +20,13 @@ "messages": { "welcome": "Welcome to WIS 2.0 in a box!", "no_observations_in_collection": " has no observations in collection ", - "not_authorized": "Dataset requires authorization", + "authorized": "Authorized", + "not_authorized": "Data requires authorization; Please add an authorization token", "no_linked_collections": "has no linked collections", "how_to_link_station": "To link a collection, republish the station(s) after wis2box has published an observation from the station", "from": "from", - "no_of_observations": "Observations from the past 24 hours" + "no_of_observations": "Observations from the past 24 hours", + "does_not_exist": "Page not found" }, "station": { "map": "Station map", diff --git a/src/locales/es.json b/src/locales/es.json index 1850d52..f4b97f1 100644 --- a/src/locales/es.json +++ b/src/locales/es.json @@ -11,7 +11,8 @@ "util": { "token": "Autentificador", "cancel": "Anular", - "save": "Guardar" + "save": "Guardar", + "close": "Cerrar" }, "footer": { "powered_by": "Desarrollada por" @@ -19,11 +20,13 @@ "messages": { "welcome": "¡Bienvenido al WIS 2.0 in a box!", "no_observations_in_collection": " no tiene observaciones en la colección ", - "not_authorized": "El conjunto de datos requiere autorización", + "authorized": "Autorizada", + "not_authorized": "El conjunto de datos requiere autorización; Agregar un token de autorización", "no_linked_collections": "no tiene colecciones vinculadas", "how_to_link_station": "Para vincular una colección, vuelva a publicar la(s) estación(es) después de que wis2box haya publicado una observación de la estación", "from": "desde", - "no_of_observations": "Observaciones de las últimas 24 horas" + "no_of_observations": "Observaciones de las últimas 24 horas", + "does_not_exist": "Página no encontrada" }, "station": { "map": "Mapa de la estación", diff --git a/src/locales/fr.json b/src/locales/fr.json index 590bc70..0d44873 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -11,7 +11,8 @@ "util": { "token": "Jeton d'accès", "cancel": "Annuler", - "save": "Conserver" + "save": "Conserver", + "close": "Fermer" }, "footer": { "powered_by": "Alimenté par" @@ -19,11 +20,13 @@ "messages": { "welcome": "Bienvenue à WIS 2.0 in a box!", "no_observations_in_collection": " n'a pas d'observations dans la collection ", - "not_authorized": "L'ensemble de données nécessite une autorisation", + "authorized": "Autorisée", + "not_authorized": "L'ensemble de données nécessite une autorisation ; Ajouter un jeton d'autorisationn", "no_linked_collections": "n'a pas de collections liées", "how_to_link_station": "Pour lier une collection, republiez la ou les stations après que wis2box a publié une observation de la station", "from": "depuis", - "no_of_observations": "Observations des dernières 24 heures" + "no_of_observations": "Observations des dernières 24 heures", + "does_not_exist": "Page non trouvée" }, "station": { "map": "Plan de la station", diff --git a/src/router/index.js b/src/router/index.js index 95adaa4..c75b32f 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -3,6 +3,10 @@ import Datasets from "../views/Datasets.vue"; import Map from "../views/Map.vue"; import Services from "../views/Services.vue"; +const Authorize = { + template: "
{{ $t('messages.authorize') }}
", +} + const routes = [ { path: "/:topic", @@ -20,6 +24,11 @@ const routes = [ name: "Services", component: Services, }, + { + path: "/authorize", + name: "Authorize", + component: Authorize, + }, ]; const router = createRouter({ diff --git a/src/views/Datasets.vue b/src/views/Datasets.vue index 7d15b9d..de35262 100644 --- a/src/views/Datasets.vue +++ b/src/views/Datasets.vue @@ -10,12 +10,7 @@ - + {{ $t("datasets.map") }} @@ -99,51 +94,59 @@ export default { datasets: [], }; }, - async created() { - const response = await fetch( - oapi + "/collections/discovery-metadata/items?f=json" - ); - const data = await response.json(); - for (var c of data.features) { - const links = [ - { - href: undefined, - target: `/${c.id}`, - type: "Map", - msg: "explore", - icon: "mdi-map-marker-circle", - }, - ]; - for (var link of c.links) { - if (link.type === "OARec") { - links.push({ - href: link.href, - target: undefined, - type: "OARec", - msg: "oarec", - icon: "mdi-open-in-new", - }); - } else if (link.type === "OAFeat") { - links.push({ - href: link.href, - target: undefined, - type: "OAFeat", - msg: "oafeat", - icon: "mdi-open-in-new", - }); - } - } - c.bbox = [ - c.geometry.coordinates[0][0][0], - c.geometry.coordinates[0][0][1], - c.geometry.coordinates[0][2][0], - c.geometry.coordinates[0][2][1], - ]; - c.links = links; - this.datasets.push(c); - } + mounted() { + this.loadDatasets(); }, methods: { + async loadDatasets() { + var self = this; + await this.$http({ + method: "get", + url: oapi + "/collections/discovery-metadata/items" + }) + .then(function (response) { + // handle success + for (var c of response.data.features) { + const links = [ + { + href: undefined, + target: `/${c.id}`, + type: "Map", + msg: "explore", + icon: "mdi-map-marker-circle", + }, + ]; + for (var link of c.links) { + if (link.type === "OARec") { + links.push({ + href: link.href, + target: undefined, + type: "OARec", + msg: "oarec", + icon: "mdi-open-in-new", + }); + } else if (link.type === "OAFeat") { + links.push({ + href: link.href, + target: undefined, + type: "OAFeat", + msg: "oafeat", + icon: "mdi-open-in-new", + }); + } + } + c.bbox = [ + c.geometry.coordinates[0][0][0], + c.geometry.coordinates[0][0][1], + c.geometry.coordinates[0][2][0], + c.geometry.coordinates[0][2][1], + ]; + c.links = links; + self.datasets.push(c); + } + }) + .catch(this.$root.catch) + }, loadMap(topic) { this.$router.push(`/${topic}`); }, diff --git a/src/views/Services.vue b/src/views/Services.vue index 1eaf716..00950be 100644 --- a/src/views/Services.vue +++ b/src/views/Services.vue @@ -1,16 +1,11 @@