diff --git a/frontend/js/websocket.js b/frontend/js/websocket.js index 8c0200f..dbabe67 100644 --- a/frontend/js/websocket.js +++ b/frontend/js/websocket.js @@ -1,5 +1,8 @@ import { buttonResults } from '../resources/vue/stores/buttonResults.js' import { rateLimits } from '../resources/vue/stores/rateLimits.js' +import { connectionState } from '../resources/vue/stores/connectionState.js' + +const RECONNECT_DELAY_MS = 3000 export function initWebsocket () { window.addEventListener('EventOutputChunk', onOutputChunk) @@ -16,9 +19,14 @@ async function reconnectWebsocket () { return } + connectionState.reconnecting = true + connectionState.connected = false + try { window.websocketAvailable = true for await (const e of window.client.eventStream()) { + connectionState.connected = true + connectionState.reconnecting = false handleEvent(e) } } catch (err) { @@ -26,7 +34,11 @@ async function reconnectWebsocket () { } window.websocketAvailable = false - console.log('Reconnecting websocket...') + connectionState.connected = false + console.log('Reconnecting websocket in ' + RECONNECT_DELAY_MS + 'ms...') + setTimeout(() => { + reconnectWebsocket() + }, RECONNECT_DELAY_MS) } function handleEvent (msg) { diff --git a/frontend/resources/vue/App.vue b/frontend/resources/vue/App.vue index 7dfae4a..82830d7 100644 --- a/frontend/resources/vue/App.vue +++ b/frontend/resources/vue/App.vue @@ -50,7 +50,7 @@ {{ currentThemeName }} - {{ t('connected') }} + {{ connectionStatusLabel }}

@@ -107,6 +107,7 @@ import { DashboardSquare01Icon } from '@hugeicons/core-free-icons' import logoUrl from '../../OliveTinLogo.png'; import { useI18n } from 'vue-i18n'; import combinedTranslations from '../../../lang/combined_output.json'; +import { connectionState } from './stores/connectionState.js'; const { t, locale } = useI18n(); @@ -116,7 +117,6 @@ const sidebar = ref(null); const navigation = ref(null); const username = ref('notset'); const isLoggedIn = ref(false); -const serverConnection = ref(true); const currentVersion = ref('?'); const pageTitle = ref('OliveTin'); const bannerMessage = ref(''); @@ -130,6 +130,18 @@ const showVersionNumber = ref(true) const showLoginLink = ref(true) const sectionNavigationStyle = ref('sidebar') +const connectionStatusLabel = computed(() => { + if (connectionState.connected) { + return t('connected') + } + if (connectionState.reconnecting) { + return t('reconnecting') + } + return t('disconnected') +}) + +const connectionStatusTitle = computed(() => connectionStatusLabel.value) + const languageDialog = ref(null) const browserLanguages = ref([]) @@ -404,7 +416,6 @@ function handleThemeDialogClick(event) { window.updateHeaderFromInit = updateHeaderFromInit onMounted(() => { - serverConnection.value = true; updateHeaderFromInit() // Initialize selected language from stored preference diff --git a/frontend/resources/vue/stores/connectionState.js b/frontend/resources/vue/stores/connectionState.js new file mode 100644 index 0000000..c8a4606 --- /dev/null +++ b/frontend/resources/vue/stores/connectionState.js @@ -0,0 +1,6 @@ +import { reactive } from 'vue' + +export const connectionState = reactive({ + connected: false, + reconnecting: false +}) diff --git a/lang/combined_output.json b/lang/combined_output.json index 3fda01a..9e4514b 100644 --- a/lang/combined_output.json +++ b/lang/combined_output.json @@ -20,6 +20,7 @@ "diagnostics.unknown": "Unbekannt", "diagnostics.useragent-data-error": "Fehler beim Abrufen von userAgentData", "diagnostics.where-to-find-help": "Wo Sie Hilfe finden", + "disconnected": "Getrennt", "docs": "Dokumentation", "language-dialog.browser-languages": "Browser-Sprachen", "language-dialog.close": "Schließen", @@ -47,6 +48,7 @@ "nav.entities": "Entitäten", "nav.logs": "Protokolle", "raise-issue": "Ein Problem melden auf GitHub", + "reconnecting": "Verbinde erneut…", "return-to-index": "Zurück zur Startseite", "search-filter": "Filter aktuelle Seite", "theme-dialog.close": "Schließen", @@ -73,6 +75,7 @@ "diagnostics.unknown": "Unknown", "diagnostics.useragent-data-error": "Error retrieving userAgentData", "diagnostics.where-to-find-help": "Where to find help", + "disconnected": "Disconnected", "docs": "Documentation", "language-dialog.browser-languages": "Browser languages", "language-dialog.close": "Close", @@ -100,6 +103,7 @@ "nav.entities": "Entities", "nav.logs": "Logs", "raise-issue": "Raise an issue on GitHub", + "reconnecting": "Reconnecting…", "return-to-index": "Return to index", "search-filter": "Filter current page", "theme-dialog.close": "Close", @@ -126,6 +130,7 @@ "diagnostics.unknown": "Desconocido", "diagnostics.useragent-data-error": "Error al recuperar userAgentData", "diagnostics.where-to-find-help": "Dónde encontrar ayuda", + "disconnected": "Desconectado", "docs": "Documentación", "language-dialog.browser-languages": "Idiomas del navegador", "language-dialog.close": "Cerrar", @@ -153,6 +158,7 @@ "nav.entities": "Entidades", "nav.logs": "Registros", "raise-issue": "Reportar un problema en GitHub", + "reconnecting": "Reconectando…", "return-to-index": "Volver a la página principal", "search-filter": "Filtrar página actual", "theme-dialog.close": "Cerrar", @@ -179,6 +185,7 @@ "diagnostics.unknown": "Sconosciuto", "diagnostics.useragent-data-error": "Errore nel recupero di userAgentData", "diagnostics.where-to-find-help": "Dove trovare aiuto", + "disconnected": "Disconnesso", "docs": "Documentazione", "language-dialog.browser-languages": "Lingue del browser", "language-dialog.close": "Chiudi", @@ -206,6 +213,7 @@ "nav.entities": "Entità", "nav.logs": "Registri", "raise-issue": "Segnala un problema su GitHub", + "reconnecting": "Riconnessione…", "return-to-index": "Torna alla pagina principale", "search-filter": "Filtra la pagina corrente", "theme-dialog.close": "Chiudi", @@ -232,6 +240,7 @@ "diagnostics.unknown": "未知", "diagnostics.useragent-data-error": "检索 userAgentData 时出错", "diagnostics.where-to-find-help": "在哪里找到帮助", + "disconnected": "已断开连接", "docs": "文档", "language-dialog.browser-languages": "浏览器语言", "language-dialog.close": "关闭", @@ -259,6 +268,7 @@ "nav.entities": "实体", "nav.logs": "日志", "raise-issue": "在 GitHub 上报告问题", + "reconnecting": "正在重新连接…", "return-to-index": "返回首页", "search-filter": "过滤当前页面", "theme-dialog.close": "关闭", @@ -267,4 +277,4 @@ "welcome": "欢迎使用 OliveTin" } } -} \ No newline at end of file +} diff --git a/lang/de-DE.yaml b/lang/de-DE.yaml index 2e5f6c7..e56b45a 100644 --- a/lang/de-DE.yaml +++ b/lang/de-DE.yaml @@ -6,6 +6,8 @@ translations: nav.entities: Entitäten nav.diagnostics: Diagnostik connected: Verbunden + disconnected: Getrennt + reconnecting: Verbinde erneut… login-button: Login raise-issue: Ein Problem melden auf GitHub docs: Dokumentation @@ -50,4 +52,4 @@ translations: language-dialog.close: Schließen theme-dialog.title: Design auswählen theme-dialog.default: Standard-Design - theme-dialog.close: Schließen \ No newline at end of file + theme-dialog.close: Schließen diff --git a/lang/en.yaml b/lang/en.yaml index 8cf5c25..4205514 100644 --- a/lang/en.yaml +++ b/lang/en.yaml @@ -8,6 +8,8 @@ translations: nav.entities: Entities nav.diagnostics: Diagnostics connected: Connected + disconnected: Disconnected + reconnecting: Reconnecting… login-button: Login logs.title: Logs logs.page-description: This is a list of logs from actions that have been executed. You can filter the list by action title. @@ -50,4 +52,4 @@ translations: language-dialog.close: Close theme-dialog.title: Select Theme theme-dialog.default: Default Theme - theme-dialog.close: Close \ No newline at end of file + theme-dialog.close: Close diff --git a/lang/es-ES.yaml b/lang/es-ES.yaml index 974eaf6..21a4bff 100644 --- a/lang/es-ES.yaml +++ b/lang/es-ES.yaml @@ -6,6 +6,8 @@ translations: nav.entities: Entidades nav.diagnostics: Diagnósticos connected: Conectado + disconnected: Desconectado + reconnecting: Reconectando… login-button: Iniciar sesión raise-issue: Reportar un problema en GitHub docs: Documentación @@ -50,4 +52,4 @@ translations: language-dialog.close: Cerrar theme-dialog.title: Seleccionar tema theme-dialog.default: Tema Predeterminado - theme-dialog.close: Cerrar \ No newline at end of file + theme-dialog.close: Cerrar diff --git a/lang/it-IT.yaml b/lang/it-IT.yaml index 4bc9c66..b56f498 100644 --- a/lang/it-IT.yaml +++ b/lang/it-IT.yaml @@ -7,6 +7,8 @@ translations: nav.diagnostics: Diagnostica docs: Documentazione connected: Connesso + disconnected: Disconnesso + reconnecting: Riconnessione… login-button: Login raise-issue: Segnala un problema su GitHub logs.title: Registri @@ -50,4 +52,4 @@ translations: language-dialog.close: Chiudi theme-dialog.title: Seleziona tema theme-dialog.default: Tema Predefinito - theme-dialog.close: Chiudi \ No newline at end of file + theme-dialog.close: Chiudi diff --git a/lang/zh-Hans-CN.yaml b/lang/zh-Hans-CN.yaml index ad84897..73f7810 100644 --- a/lang/zh-Hans-CN.yaml +++ b/lang/zh-Hans-CN.yaml @@ -6,6 +6,8 @@ translations: nav.entities: 实体 nav.diagnostics: 诊断 connected: 已连接 + disconnected: 已断开连接 + reconnecting: 正在重新连接… login-button: 登录 raise-issue: 在 GitHub 上报告问题 docs: 文档 @@ -50,4 +52,4 @@ translations: diagnostics.copy-to-clipboard: 复制到剪贴板 diagnostics.copied: 已复制！ diagnostics.unknown: 未知 - diagnostics.useragent-data-error: 检索 userAgentData 时出错 \ No newline at end of file + diagnostics.useragent-data-error: 检索 userAgentData 时出错