From d5be85daade2d2e232a638fc1489ea8ad9e3a5db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Thu, 19 May 2022 15:41:48 +0200
Subject: [PATCH] Web: show SocketIO connection status in the notifications
 popover as well

Move the connection status indicator to its own component, and use that
in both the notification bar and the popover.
---
 web/app/src/components/ConnectionStatus.vue | 28 +++++++++++++++++++++
 web/app/src/components/FooterPopup.vue      |  2 ++
 web/app/src/components/NotificationBar.vue  | 23 ++++-------------
 3 files changed, 35 insertions(+), 18 deletions(-)
 create mode 100644 web/app/src/components/ConnectionStatus.vue

diff --git a/web/app/src/components/ConnectionStatus.vue b/web/app/src/components/ConnectionStatus.vue
new file mode 100644
index 00000000..66bf2343
--- /dev/null
+++ b/web/app/src/components/ConnectionStatus.vue
@@ -0,0 +1,28 @@
+<template>
+  <span class='socket-status' v-if="!sockStatus.isConnected" :title="sockStatus.message">Connection Lost</span>
+</template>
+
+<script setup>
+import { useSocketStatus } from '@/stores/socket-status';
+
+const sockStatus = useSocketStatus();
+</script>
+
+<style scoped>
+.socket-status {
+  font-size: 1rem;
+
+  min-width: 1.2em;
+  padding: 0.1em 1em;
+  border-radius: 0.5em;
+  text-align: center;
+  margin: 0 0.5em;
+
+  color: var(--color-connection-lost-text);
+  background-color: var(--color-connection-lost-bg);
+  box-shadow: 0 0 1em var(--color-connection-lost-bg);
+  border: solid thin var(--color-connection-lost-text);
+
+  cursor: help;
+}
+</style>
diff --git a/web/app/src/components/FooterPopup.vue b/web/app/src/components/FooterPopup.vue
index 0a4c3b5e..eff9ffb9 100644
--- a/web/app/src/components/FooterPopup.vue
+++ b/web/app/src/components/FooterPopup.vue
@@ -3,6 +3,7 @@ import { onMounted } from 'vue'
 import { TabulatorFull as Tabulator } from 'tabulator-tables';
 import { useNotifs } from '@/stores/notifications'
 import * as datetime from "@/datetime";
+import ConnectionStatus from '@/components/ConnectionStatus.vue'
 
 const notifs = useNotifs();
 const emit = defineEmits(['clickClose'])
@@ -62,6 +63,7 @@ function _subscribeToPinia() {
   <section class="footer-popup">
     <header>
       <h3 class="sub-title">Notifications</h3>
+      <connection-status />
       <button class='close' @click="emit('clickClose')">X</button>
     </header>
     <div id="notification_list"></div>
diff --git a/web/app/src/components/NotificationBar.vue b/web/app/src/components/NotificationBar.vue
index cb1350b7..869e0fc2 100644
--- a/web/app/src/components/NotificationBar.vue
+++ b/web/app/src/components/NotificationBar.vue
@@ -1,19 +1,21 @@
 <template>
   <section class="notification-bar">
     <span class='notifications' v-if="notifs.last">{{ notifs.last.msg }}</span>
-    <span class='socket-status' v-if="!sockStatus.isConnected" :title="sockStatus.message">Connection Lost</span>
+    <connection-status />
   </section>
 </template>
 
 <script>
 import { useNotifs } from '@/stores/notifications';
-import { useSocketStatus } from '@/stores/socket-status';
+import ConnectionStatus from '@/components/ConnectionStatus.vue'
 
 export default {
   name: 'NotificationBar',
+  components: {
+    ConnectionStatus,
+  },
   data: () => ({
     notifs: useNotifs(),
-    sockStatus: useSocketStatus(),
   }),
 }
 </script>
@@ -25,20 +27,5 @@ export default {
 
 .socket-status {
   float: right;
-
-  font-weight: bold;
-  font-size: larger;
-
-  min-width: 1.2em;
-  padding: 0.2em 1em;
-  border-radius: 0.5em;
-  text-align: center;
-
-  color: var(--color-connection-lost-text);
-  background-color: var(--color-connection-lost-bg);
-  box-shadow: 0 0 1em var(--color-connection-lost-bg);
-  border: solid thin var(--color-connection-lost-text);
-
-  cursor: help;
 }
 </style>