diff --git a/docker-compose.yml b/docker-compose.yml index 14d5480..27ffc51 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,5 +1,5 @@ services: - web: + app: build: . container_name: live-lista-zakupow ports: diff --git a/static/js/live.js b/static/js/live.js index 09c4327..e8b655c 100644 --- a/static/js/live.js +++ b/static/js/live.js @@ -21,6 +21,21 @@ window.addEventListener("focus", function() { window.addEventListener("online", function() { reconnectIfNeeded(); }); + +// --- Toasty przy rozłączeniu i połączeniu --- +let firstConnect = true; + +socket.on('connect', function() { + if (!firstConnect) { + showToast('Połączono z serwerem! 🔄', 'info'); + } + firstConnect = false; +}); + +socket.on('disconnect', function(reason) { + showToast('Utracono połączenie z serwerem...', 'warning'); +}); + // --- koniec fragmentu reconnect --- function setupList(listId, username) { @@ -331,13 +346,22 @@ function copyLink(link) { } } -function showToast(message) { +//function showToast(message) { +// const toastContainer = document.getElementById('toast-container'); +// const toast = document.createElement('div'); +// toast.className = 'toast align-items-center text-bg-primary border-0 show'; +// toast.setAttribute('role', 'alert'); +// toast.innerHTML = `
${message}
`; +// toastContainer.appendChild(toast); +// setTimeout(() => { toast.remove(); }, 1750); +//} + +function showToast(message, type = 'primary') { const toastContainer = document.getElementById('toast-container'); const toast = document.createElement('div'); - toast.className = 'toast align-items-center text-bg-primary border-0 show'; + toast.className = `toast align-items-center text-bg-${type} border-0 show`; toast.setAttribute('role', 'alert'); toast.innerHTML = `
${message}
`; toastContainer.appendChild(toast); setTimeout(() => { toast.remove(); }, 1750); } -