feat(frontend): Vue (CDN) UI matching templates design; reuse /static CSS and Bootstrap; mount /static in FastAPI

frontend/app.js

@@ -1,3 +1,5 @@
+const { createApp } = Vue;
+
 const api = {
   auds: "/auditories/",
   oboruds: (audId) => `/oboruds/?aud_id=${encodeURIComponent(audId)}`,
@@ -9,68 +11,49 @@ async function fetchJSON(url) {
   return res.json();
 }
 
-function setStatus(msg, type = "info") {
-  const el = document.getElementById("status");
-  el.textContent = msg || "";
-  el.className = `status ${type}`;
-}
-
-async function loadAuditories() {
-  setStatus("Загрузка аудиторий…");
-  try {
-    const data = await fetchJSON(api.auds);
-    const select = document.getElementById("aud-select");
-    select.innerHTML = '<option value="">— выберите аудиторию —</option>';
-    data.forEach((a) => {
-      const opt = document.createElement("option");
-      opt.value = a.id;
-      opt.textContent = `${a.id} — ${a.audnazvanie}`;
-      select.appendChild(opt);
-    });
-    setStatus("");
-  } catch (e) {
-    console.error(e);
-    setStatus("Не удалось загрузить аудитории", "error");
+createApp({
+  data() {
+    return {
+      view: 'byAud',
+      auditories: [],
+      selectedAudId: '',
+      oboruds: [],
+      status: '',
+      error: '',
+    };
+  },
+  methods: {
+    async loadAuditories() {
+      this.status = 'Загрузка аудиторий…';
+      this.error = '';
+      try {
+        this.auditories = await fetchJSON(api.auds);
+        this.status = '';
+      } catch (e) {
+        console.error(e);
+        this.error = 'Не удалось загрузить аудитории';
+        this.status = '';
+      }
+    },
+    async loadOboruds() {
+      if (!this.selectedAudId) {
+        this.error = '';
+        this.status = 'Выберите аудиторию';
+        return;
+      }
+      this.status = 'Загрузка оборудования…';
+      this.error = '';
+      try {
+        this.oboruds = await fetchJSON(api.oboruds(this.selectedAudId));
+        this.status = '';
+      } catch (e) {
+        console.error(e);
+        this.error = 'Не удалось загрузить оборудование';
+        this.status = '';
+      }
+    },
+  },
+  mounted() {
+    this.loadAuditories();
   }
-}
-
-function renderOboruds(items) {
-  const tbody = document.querySelector("#ob-table tbody");
-  tbody.innerHTML = "";
-  items.forEach((it) => {
-    const tr = document.createElement("tr");
-    tr.innerHTML = `
-      <td>${it.id}</td>
-      <td>${it.invNumber ?? ""}</td>
-      <td>${it.nazvanie ?? ""}</td>
-      <td>${it.raspologenie ?? ""}</td>
-      <td>${it.kolichestvo ?? ""}</td>
-      <td>${it.type?.name ?? ""}</td>
-    `;
-    tbody.appendChild(tr);
-  });
-}
-
-async function loadOborudsForSelected() {
-  const select = document.getElementById("aud-select");
-  const audId = select.value;
-  if (!audId) {
-    setStatus("Выберите аудиторию", "warn");
-    return;
-  }
-  setStatus("Загрузка оборудования…");
-  try {
-    const data = await fetchJSON(api.oboruds(audId));
-    renderOboruds(data);
-    setStatus("");
-  } catch (e) {
-    console.error(e);
-    setStatus("Не удалось загрузить оборудование", "error");
-  }
-}
-
-document.addEventListener("DOMContentLoaded", () => {
-  document.getElementById("load-btn").addEventListener("click", loadOborudsForSelected);
-  loadAuditories();
-});
-
+}).mount('#app');