From 1aeb29c6bc650f3d8924a7aab594b1c4bcb92538 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Gruszczy=C5=84ski?= <gru@macbook.net.r.local>
Date: Sat, 5 Jul 2025 23:43:37 +0200
Subject: [PATCH] toast przy polaczenie i rozlaczeniu z socketem

---
 docker-compose.yml |  2 +-
 static/js/live.js  | 30 +++++++++++++++++++++++++++---
 2 files changed, 28 insertions(+), 4 deletions(-)

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 = `<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);
 }
-