refactor: move frontend JS to external files and enable strict CSP

public/js/branches.js

@@ -0,0 +1,117 @@
+let branches = [];
+
+async function loadBranches() {
+  const res = await fetch(`${API}/api/branches`, { headers: hdr() });
+  if (!res.ok) return;
+  branches = await res.json();
+  renderBranches();
+}
+
+function renderBranches() {
+  const el = document.getElementById('branchesGrid');
+  if (!branches.length) {
+    el.innerHTML = '<div class="empty" style="grid-column:1/-1">Филиалов пока нет. Нажмите «Добавить филиал».</div>';
+    return;
+  }
+  el.innerHTML = branches.map(b => `
+    <div class="branch-card" data-id="${b.id}">
+      <div class="branch-header">
+        <span class="branch-name">${esc(b.name)}</span>
+        <span class="branch-badge">${b.groups_count} ${plural(b.groups_count, 'группа', 'группы', 'групп')}</span>
+      </div>
+      ${b.address ? `<div class="branch-meta">📍 ${esc(b.address)}</div>` : ''}
+      ${b.phone ? `<div class="branch-meta">📞 ${esc(b.phone)}</div>` : ''}
+      <div class="branch-actions">
+        <button class="branch-edit" data-edit-branch="${b.id}" title="Редактировать">✎</button>
+        ${b.groups_count === 0 ? `<button class="branch-delete" data-del-branch="${b.id}" title="Удалить">&times;</button>` : ''}
+      </div>
+    </div>
+  `).join('');
+}
+
+function plural(n, one, few, many) {
+  n = Math.abs(n) % 100; const n1 = n % 10;
+  if (n > 10 && n < 20) return many;
+  if (n1 > 1 && n1 < 5) return few;
+  if (n1 === 1) return one;
+  return many;
+}
+
+function openBranchModal(id = null) {
+  const modal = document.getElementById('branchModal');
+  const form = document.getElementById('branchForm');
+  const title = document.getElementById('branchModalTitle');
+  const submitBtn = document.getElementById('branchSubmitBtn');
+  form.reset();
+  document.getElementById('branchId').value = '';
+  if (id) {
+    const b = branches.find(x => x.id === id);
+    if (!b) return;
+    title.textContent = 'Редактировать филиал';
+    submitBtn.textContent = 'Сохранить';
+    form.name.value = b.name;
+    form.address.value = b.address || '';
+    form.phone.value = b.phone || '';
+    document.getElementById('branchId').value = b.id;
+  } else {
+    title.textContent = 'Создать филиал';
+    submitBtn.textContent = 'Создать';
+  }
+  modal.classList.add('open');
+  setTimeout(() => form.name.focus(), 100);
+}
+
+function closeBranchModal() {
+  document.getElementById('branchModal').classList.remove('open');
+}
+
+document.getElementById('branchForm').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const fd = new FormData(e.target);
+  const id = fd.get('id');
+  const name = fd.get('name').trim();
+  const address = fd.get('address').trim();
+  const phone = fd.get('phone').trim();
+  if (!name) { alert('Название обязательно'); return; }
+
+  const url = id ? `${API}/api/branches/${id}` : `${API}/api/branches`;
+  const method = id ? 'PUT' : 'POST';
+  const res = await fetch(url, {
+    method,
+    headers: hdrJson(),
+    body: JSON.stringify({ name, address: address || null, phone: phone || null })
+  });
+  if (res.ok) {
+    showToast(id ? 'Филиал обновлён' : 'Филиал создан');
+    closeBranchModal();
+    loadBranches();
+  } else { const err = await res.json(); alert(err.error || 'Ошибка'); }
+});
+
+async function deleteBranch(id) {
+  if (!confirm('Удалить этот филиал?')) return;
+  const res = await fetch(`${API}/api/branches/${id}`, { method: 'DELETE', headers: hdr() });
+  if (res.ok) {
+    showToast('Филиал удалён');
+    loadBranches();
+  } else { const err = await res.json(); alert(err.error || 'Ошибка'); }
+}
+
+document.getElementById('addBranchBtn').addEventListener('click', () => openBranchModal());
+document.getElementById('branchModal').addEventListener('click', e => { if (e.target === e.currentTarget) closeBranchModal(); });
+document.getElementById('branchCancelBtn').addEventListener('click', closeBranchModal);
+document.getElementById('imgModal').addEventListener('click', e => e.currentTarget.classList.remove('open'));
+
+document.getElementById('branchesGrid').addEventListener('click', e => {
+  const ed = e.target.closest('[data-edit-branch]');
+  if (ed) { openBranchModal(parseInt(ed.dataset.editBranch, 10)); return; }
+  const dl = e.target.closest('[data-del-branch]');
+  if (dl) { deleteBranch(parseInt(dl.dataset.delBranch, 10)); }
+});
+
+(async () => {
+  if (await checkAuth()) {
+    buildSidebar(document.body.dataset.page);
+    loadBranches();
+  }
+})();