toast przy polaczenie i rozlaczeniu z socketem

docker-compose.yml

@@ -1,5 +1,5 @@
 services:
-  web:
+  app:
     build: .
     container_name: live-lista-zakupow
     ports:

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 = `<div class="d-flex"><div class="toast-body">${message}</div></div>`;
+//  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 = `<div class="d-flex"><div class="toast-body">${message}</div></div>`;
   toastContainer.appendChild(toast);
   setTimeout(() => { toast.remove(); }, 1750);
 }
-