From 22ecf153310eb99a1f922c84878f385bb751cb38 Mon Sep 17 00:00:00 2001 From: Michael Geers Date: Fri, 27 May 2022 15:19:02 +0200 Subject: [PATCH] Add offline indicator (#3516) --- assets/js/api.js | 10 ++-- assets/js/app.js | 19 ++++++-- assets/js/components/Notifications.vue | 2 +- assets/js/components/OfflineIndicator.vue | 25 ++++++++++ assets/js/components/Site.vue | 14 +++++- assets/js/i18n/de.js | 4 ++ assets/js/i18n/en.js | 4 ++ assets/js/views/App.vue | 21 +++++++- assets/js/views/Main.vue | 8 +++- ...{index.a4ef9a54.css => index.dca955c6.css} | 2 +- .../{index.61d9e798.js => index.e9c8c81b.js} | 48 +++++++++---------- dist/index.html | 4 +- 12 files changed, 120 insertions(+), 41 deletions(-) create mode 100644 assets/js/components/OfflineIndicator.vue rename dist/assets/{index.a4ef9a54.css => index.dca955c6.css} (99%) rename dist/assets/{index.61d9e798.js => index.e9c8c81b.js} (64%) diff --git a/assets/js/api.js b/assets/js/api.js index 55d733b72..5a97ffba9 100644 --- a/assets/js/api.js +++ b/assets/js/api.js @@ -13,10 +13,12 @@ const api = axios.create({ api.interceptors.response.use( (response) => response, (error) => { - const url = error.config.baseURL + error.config.url; - const message = `${error.message}: API request failed ${url}`; - window.app.error({ message }); + if (error.config.url !== "health") { + const url = error.config.baseURL + error.config.url; + const message = `${error.message}: API request failed ${url}`; + window.app.error({ message }); + } + return Promise.reject(error); } ); - export default api; diff --git a/assets/js/app.js b/assets/js/app.js index 0dfada6a6..e37181be8 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -14,7 +14,12 @@ smoothscroll.polyfill(); const app = createApp({ data() { - return { notifications: [] }; + return { notifications: [], offline: false }; + }, + watch: { + offline: function (value) { + console.log(`we are ${value ? "offline" : "online"}`); + }, }, methods: { raise: function (msg) { @@ -42,13 +47,19 @@ const app = createApp({ msg.type = "error"; this.raise(msg); }, + setOnline: function () { + this.offline = false; + }, + setOffline: function () { + this.offline = true; + }, warn: function (msg) { msg.type = "warn"; this.raise(msg); }, }, render: function () { - return h(App, { notifications: this.notifications }); + return h(App, { notifications: this.notifications, offline: this.offline }); }, }); @@ -60,7 +71,5 @@ app.use(featureflags); window.app = app.mount("#app"); window.setInterval(function () { - api.get("health").catch(function () { - window.app.error({ message: "Server unavailable" }); - }); + api.get("health").then(window.app.setOnline).catch(window.app.setOffline); }, 5000); diff --git a/assets/js/components/Notifications.vue b/assets/js/components/Notifications.vue index 7d77ff595..20507b393 100644 --- a/assets/js/components/Notifications.vue +++ b/assets/js/components/Notifications.vue @@ -48,7 +48,7 @@ 'text-danger': msg.type === 'error', 'text-warning': msg.type === 'warn', }" - class="flex-grow-0 d-block" + class="flex-grow-0 flex-shrink-0 d-block" > {{ msg.message }} diff --git a/assets/js/components/OfflineIndicator.vue b/assets/js/components/OfflineIndicator.vue new file mode 100644 index 000000000..9801735a1 --- /dev/null +++ b/assets/js/components/OfflineIndicator.vue @@ -0,0 +1,25 @@ + + + diff --git a/assets/js/components/Site.vue b/assets/js/components/Site.vue index cdfa8bff5..2db20d8e0 100644 --- a/assets/js/components/Site.vue +++ b/assets/js/components/Site.vue @@ -1,5 +1,7 @@