From 3f91dc91ec4da234f2021767cba59cfb990ff3b5 Mon Sep 17 00:00:00 2001
From: Danamir <danamir@danamir.site>
Date: Mon, 10 Nov 2025 08:45:25 +0300
Subject: [PATCH] feat(frontend): Vue (CDN) UI matching templates design; reuse
 /static CSS and Bootstrap; mount /static in FastAPI

---
 backend/main.py     |   3 +-
 frontend/app.js     | 111 +++++++++++++++++++-------------------------
 frontend/index.html |  98 +++++++++++++++++++++++++-------------
 3 files changed, 115 insertions(+), 97 deletions(-)

diff --git a/backend/main.py b/backend/main.py
index 3c90fb5..c28c42b 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -30,7 +30,8 @@ def ping():
     return {"message": "pong"}
 
 
-# Serve static frontend
+# Serve static assets and frontend
+app.mount("/static", StaticFiles(directory="static"), name="static")
 app.mount("/app", StaticFiles(directory="frontend", html=True), name="frontend")
 
 @app.get("/")
diff --git a/frontend/app.js b/frontend/app.js
index ab3e6e0..34fb61f 100644
--- a/frontend/app.js
+++ b/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');
diff --git a/frontend/index.html b/frontend/index.html
index d290d84..f09791f 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,45 +3,79 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>ASU Inventory — Фронт</title>
-    <link rel="stylesheet" href="/app/styles.css" />
+    <title>АСУ Инвентаризация</title>
+    <link rel="stylesheet" href="/static/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="/static/css/index.css" />
   </head>
   <body>
     <header>
-      <h1>ASU Inventory</h1>
-      <nav>
-        <a href="/docs" target="_blank">API Docs</a>
-      </nav>
+      <h1>
+        <a href="/app/">АСУ Инвентаризация</a>
+      </h1>
+      <h2>Учет оборудования. Демоверсия</h2>
     </header>
 
-    <main>
-      <section class="panel">
-        <h2>Оборудование по аудитории</h2>
-        <div class="controls">
-          <label for="aud-select">Аудитория:</label>
-          <select id="aud-select">
-            <option value="">— выберите аудиторию —</option>
-          </select>
-          <button id="load-btn">Показать</button>
+    <div class="row no-print">
+      <nav class="no-print navbar navbar-expand-lg navbar-light">
+        <div class="container-fluid">
+          <a class="navbar-brand" href="/app/">Главная</a>
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+              <li class="nav-item"><a class="nav-link" href="#" @click="view='byAud'">По аудитории</a></li>
+              <li class="nav-item"><a class="nav-link" href="/docs" target="_blank">API Docs</a></li>
+            </ul>
+          </div>
         </div>
-        <div id="status" class="status"></div>
-        <table id="ob-table">
-          <thead>
-            <tr>
-              <th>ID</th>
-              <th>Инв. номер</th>
-              <th>Название</th>
-              <th>Расположение</th>
-              <th>Кол-во</th>
-              <th>Тип</th>
-            </tr>
-          </thead>
-          <tbody></tbody>
-        </table>
-      </section>
-    </main>
+      </nav>
+    </div>
 
+    <div id="app" class="container">
+      <div v-if="view==='byAud'" class="row">
+        <div class="card col-md-10 col-10">
+          <div class="card-body">
+            <h3 class="card-title">Оборудование по аудитории</h3>
+            <div class="mb-2 d-flex align-items-center gap-2">
+              <label for="aud-select" class="me-2">Аудитория:</label>
+              <select id="aud-select" class="form-select w-auto" v-model="selectedAudId">
+                <option value="">— выберите аудиторию —</option>
+                <option v-for="a in auditories" :key="a.id" :value="a.id">{{ a.id }} — {{ a.audnazvanie }}</option>
+              </select>
+              <button class="btn btn-primary" @click="loadOboruds">Показать</button>
+            </div>
+            <div class="status" :class="{error: !!error}">{{ status }}</div>
+            <div class="table-responsive">
+              <table class="table datatable">
+                <thead>
+                  <tr>
+                    <th scope="col">ID</th>
+                    <th scope="col">Инв. номер</th>
+                    <th scope="col">Название</th>
+                    <th scope="col">Расположение</th>
+                    <th scope="col">Кол-во</th>
+                    <th scope="col">Тип</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="it in oboruds" :key="it.id">
+                    <td>{{ it.id }}</td>
+                    <td class="inv">{{ it.invNumber ?? '' }}</td>
+                    <td>{{ it.nazvanie ?? '' }}</td>
+                    <td class="rasp">{{ it.raspologenie ?? '' }}</td>
+                    <td>{{ it.kolichestvo ?? '' }}</td>
+                    <td>{{ it.type?.name ?? '' }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
     <script src="/app/app.js" defer></script>
   </body>
   </html>
-