first commit

static/js/live.js

@@ -0,0 +1,109 @@
+const socket = io();
+
+function setupList(listId, username) {
+  socket.emit('join_list', { room: listId, username: username });
+
+  const newItemInput = document.getElementById('newItem');
+  if (newItemInput) {
+    newItemInput.focus();
+    newItemInput.addEventListener('keypress', function (e) {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        addItem(listId);
+      }
+    });
+  }
+
+  socket.on('user_joined', data => showToast(`${data.username} dołączył do listy`));
+
+  socket.on('item_added', data => {
+    showToast(`${data.added_by} dodał: ${data.name}`);
+    const list = document.getElementById('items');
+    const li = document.createElement('li');
+    li.className = 'list-group-item bg-dark text-white d-flex justify-content-between align-items-center';
+    li.id = `item-${data.id}`;
+    li.innerHTML = `
+      <div>
+        <input type="checkbox" onchange="checkItem(${data.id})"> 
+        <span id="name-${data.id}">${data.name}</span>
+      </div>
+      <div>
+        <button class="btn btn-sm btn-warning" onclick="editItem(${data.id}, '${data.name}')">Edytuj</button>
+        <button class="btn btn-sm btn-danger" onclick="deleteItem(${data.id})">Usuń</button>
+      </div>
+    `;
+    list.appendChild(li);
+  });
+
+  socket.on('item_checked', data => {
+    const checkbox = document.querySelector(`#item-${data.item_id} input[type='checkbox']`);
+    if (checkbox) {
+      checkbox.checked = true;
+    }
+  });
+
+  socket.on('item_deleted', data => {
+    const li = document.getElementById(`item-${data.item_id}`);
+    if (li) {
+      li.remove();
+    }
+    showToast('Usunięto produkt');
+  });
+
+  socket.on('item_edited', data => {
+    const nameSpan = document.getElementById(`name-${data.item_id}`);
+    if (nameSpan) {
+      nameSpan.innerText = data.new_name;
+    }
+    showToast(`Zmieniono nazwę na: ${data.new_name}`);
+  });
+}
+
+function addItem(listId) {
+  const name = document.getElementById('newItem').value;
+  if (name.trim() === '') return;
+  socket.emit('add_item', { list_id: listId, name: name });
+  document.getElementById('newItem').value = '';
+  document.getElementById('newItem').focus();
+}
+
+function checkItem(id) {
+  socket.emit('check_item', { item_id: id });
+}
+
+function deleteItem(id) {
+  if (confirm('Na pewno usunąć produkt?')) {
+    socket.emit('delete_item', { item_id: id });
+  }
+}
+
+function editItem(id, oldName) {
+  const newName = prompt('Podaj nową nazwę:', oldName);
+  if (newName && newName.trim() !== '') {
+    socket.emit('edit_item', { item_id: id, new_name: newName });
+  }
+}
+
+function copyLink(link) {
+  if (navigator.share) {
+    navigator.share({
+      title: 'Lista zakupów',
+      text: 'Udostępniam Ci moją listę zakupów:',
+      url: link
+    }).catch((err) => console.log('Udostępnianie anulowane', err));
+  } else {
+    navigator.clipboard.writeText(link).then(() => {
+      showToast('Link skopiowany do schowka!');
+    });
+  }
+}
+
+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(); }, 4000);
+}