add vehicle service profile settings

2026-05-12 04:52:42 +09:00
parent b5012ec6e7
commit e75697f83e
10 changed files with 496 additions and 5 deletions
--- a/web/index.html
+++ b/web/index.html
@@ -11,13 +11,14 @@
    <link rel="stylesheet" href="/static/styles.css" />
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
  </head>
-  <body>
+  <body class="auth-required">
    <div class="auth-overlay" id="authOverlay">
      <div class="auth-panel">
        <p class="eyebrow">Drivers</p>
        <h1>Гараж</h1>
        <p>Войди через Telegram, чтобы привязать гараж к твоему chat_id.</p>
        <div id="telegramLoginSlot" class="telegram-login-slot"></div>
+        <a id="telegramLoginLink" class="telegram-login-link hidden" href="#" target="_blank" rel="noreferrer">Войти через Telegram</a>
      </div>
    </div>
    <main class="shell">
@@ -216,6 +217,7 @@
          <button class="icon-btn" id="closeMenuBtn" aria-label="Закрыть">×</button>
        </div>
        <button class="menu-row" id="openCarFormBtn">Добавить автомобиль</button>
+        <button class="menu-row" id="openCarProfileBtn">Параметры автомобиля</button>
        <button class="menu-row" id="openSettingsBtn">Локаль и валюта</button>
        <button class="menu-row" id="openNotificationsBtn">Уведомления</button>
        <button class="menu-row" id="openScanBtn">Сканировать чек</button>
@@ -291,6 +293,64 @@
            <button type="submit">Добавить авто</button>
          </form>
        </section>
+
+        <section class="drawer-section hidden" id="carProfileSection">
+          <h2>Параметры авто</h2>
+          <div class="tip-card" id="carProfileHint">Выбери автомобиль, чтобы настроить жидкости, расход и сервисные нормы.</div>
+          <form id="carProfileForm" class="grid-form drawer-form">
+            <label>
+              Тип топлива
+              <select name="fuel_type">
+                <option value="">Не задано</option>
+                <option value="gasoline">Бензин</option>
+                <option value="diesel">Дизель</option>
+                <option value="hybrid">Гибрид</option>
+                <option value="electric">Электро</option>
+              </select>
+            </label>
+            <label>
+              Нормальный расход, л/100 км
+              <input name="target_consumption_l_per_100km" type="number" min="0" step="0.01" placeholder="8.50" />
+            </label>
+            <label>
+              Бак, л
+              <input name="fuel_tank_volume_l" type="number" min="0" step="0.01" placeholder="60" />
+            </label>
+            <label>
+              Моторное масло
+              <input name="engine_oil_type" placeholder="5W-30 API SP" />
+            </label>
+            <label>
+              Объем масла, л
+              <input name="engine_oil_volume_l" type="number" min="0" step="0.01" placeholder="4.50" />
+            </label>
+            <label>
+              Трансмиссионная жидкость
+              <input name="transmission_fluid_type" placeholder="ATF WS / DCTF / CVT" />
+            </label>
+            <label>
+              Объем трансмиссии, л
+              <input name="transmission_fluid_volume_l" type="number" min="0" step="0.01" placeholder="7.20" />
+            </label>
+            <label>
+              Антифриз
+              <input name="coolant_type" placeholder="G12+ / LLC" />
+            </label>
+            <label>
+              Тормозная жидкость
+              <input name="brake_fluid_type" placeholder="DOT 4" />
+            </label>
+            <label>
+              Давление перед, bar
+              <input name="tire_pressure_front_bar" type="number" min="0" step="0.01" placeholder="2.30" />
+            </label>
+            <label>
+              Давление зад, bar
+              <input name="tire_pressure_rear_bar" type="number" min="0" step="0.01" placeholder="2.20" />
+            </label>
+            <button type="submit">Сохранить параметры</button>
+          </form>
+        </section>
      </div>
    </div>

--- a/web/static/app.js
+++ b/web/static/app.js
@@ -509,18 +509,25 @@ async function ensureUser() {

 function hideAuthOverlay() {
  document.querySelector("#authOverlay")?.classList.add("hidden");
+  document.body.classList.remove("auth-required");
 }

 async function showTelegramLogin() {
  const overlay = document.querySelector("#authOverlay");
  const slot = document.querySelector("#telegramLoginSlot");
+  const link = document.querySelector("#telegramLoginLink");
  overlay?.classList.remove("hidden");
+  document.body.classList.add("auth-required");
  if (!slot || slot.dataset.ready) return;
  const botUsername = state.authConfig?.bot_username;
  if (!botUsername) {
    slot.textContent = "Telegram Login временно недоступен";
    return;
  }
+  if (link) {
+    link.href = `https://t.me/${botUsername}?start=web_login`;
+    link.classList.remove("hidden");
+  }
  window.onTelegramAuth = async (user) => {
    state.user = await api("/users/telegram-login", {
      method: "POST",
@@ -538,6 +545,9 @@ async function showTelegramLogin() {
  script.setAttribute("data-radius", "8");
  script.setAttribute("data-request-access", "write");
  script.setAttribute("data-onauth", "onTelegramAuth(user)");
+  script.addEventListener("error", () => {
+    slot.textContent = "Кнопка Telegram не загрузилась. Используй вход ниже.";
+  });
  slot.dataset.ready = "true";
  slot.appendChild(script);
 }
@@ -565,6 +575,10 @@ function selectedCar() {
  return state.cars.find((car) => car.id === state.selectedCarId) || null;
 }

+function numberOrNull(value) {
+  return value === "" || value == null ? null : Number(value);
+}
+
 function shiftMonths(base, count) {
  const copy = new Date(base);
  copy.setMonth(copy.getMonth() + count);
@@ -690,7 +704,7 @@ function updateHero(stats) {
  const car = selectedCar();
  document.querySelector("#selectedCarTitle").textContent = car?.name || t("Не выбран");
  document.querySelector("#selectedCarMeta").textContent = car
-    ? [car.make, car.model, car.trim, car.year].filter(Boolean).join(" ") || t("Без деталей")
+    ? [car.make, car.model, car.trim, car.year, car.fuel_type].filter(Boolean).join(" ") || t("Без деталей")
    : t("Добавь авто или выбери из списка");
  document.querySelector("#summaryTotal").textContent = money(stats?.total_cost);
  document.querySelector("#summaryConsumption").textContent = stats?.avg_consumption_l_per_100km
@@ -717,7 +731,7 @@ function renderCars() {
          <span class="car-badge">${(car.make || car.name).slice(0, 2).toUpperCase()}</span>
          <span>
            <strong>${car.name}</strong>
-            <small>${[car.make, car.model, car.trim, car.year].filter(Boolean).join(" ") || t("Без деталей")}</small>
+            <small>${[car.make, car.model, car.trim, car.year, car.fuel_type].filter(Boolean).join(" ") || t("Без деталей")}</small>
          </span>
        </button>
      `,
@@ -728,6 +742,45 @@ function renderCars() {
  });
 }

+function setInputValue(form, name, value) {
+  if (form?.elements[name]) form.elements[name].value = value ?? "";
+}
+
+function fillCarProfileForm() {
+  const form = document.querySelector("#carProfileForm");
+  const hint = document.querySelector("#carProfileHint");
+  const car = selectedCar();
+  form.querySelectorAll("input, select, button").forEach((node) => {
+    node.disabled = !car;
+  });
+  if (!car) {
+    form.reset();
+    hint.textContent = t("Выбери автомобиль, чтобы настроить жидкости, расход и сервисные нормы.");
+    return;
+  }
+  hint.textContent = [car.make, car.model, car.trim, car.year].filter(Boolean).join(" ") || car.name;
+  [
+    "fuel_type",
+    "target_consumption_l_per_100km",
+    "fuel_tank_volume_l",
+    "engine_oil_type",
+    "engine_oil_volume_l",
+    "transmission_fluid_type",
+    "transmission_fluid_volume_l",
+    "coolant_type",
+    "brake_fluid_type",
+    "tire_pressure_front_bar",
+    "tire_pressure_rear_bar",
+  ].forEach((name) => setInputValue(form, name, car[name]));
+}
+
+function openCarProfile() {
+  document.querySelector("#userDrawer").classList.remove("hidden");
+  document.querySelector("#carProfileSection").classList.remove("hidden");
+  fillCarProfileForm();
+  document.querySelector("#carProfileSection").scrollIntoView({ behavior: "smooth", block: "start" });
+}
+
 function renderStats(stats) {
  const root = document.querySelector("#stats");
  if (!stats) {
@@ -1051,6 +1104,7 @@ async function loadCars() {
      state.selectedCarId = state.cars[0]?.id || null;
    }
    renderCars();
+    fillCarProfileForm();
    await loadSelectedCar();
  } finally {
    document.body.classList.remove("loading");
@@ -1061,6 +1115,7 @@ async function loadCars() {
 async function selectCar(carId) {
  state.selectedCarId = carId;
  renderCars();
+  fillCarProfileForm();
  await loadSelectedCar();
 }

@@ -1145,6 +1200,41 @@ document.querySelector("#carForm").addEventListener("submit", async (event) => {
  });
 });

+document.querySelector("#carProfileForm").addEventListener("submit", async (event) => {
+  event.preventDefault();
+  const form = event.currentTarget;
+  const car = selectedCar();
+  if (!car) {
+    toast("Выбери автомобиль", "error");
+    return;
+  }
+  await runAction(form.querySelector('button[type="submit"]'), "Сохраняю...", async () => {
+    const data = formData(form);
+    const updated = await api(`/cars/${car.id}`, {
+      method: "PATCH",
+      body: JSON.stringify({
+        fuel_type: data.fuel_type || null,
+        target_consumption_l_per_100km: numberOrNull(data.target_consumption_l_per_100km),
+        fuel_tank_volume_l: numberOrNull(data.fuel_tank_volume_l),
+        engine_oil_type: data.engine_oil_type || null,
+        engine_oil_volume_l: numberOrNull(data.engine_oil_volume_l),
+        transmission_fluid_type: data.transmission_fluid_type || null,
+        transmission_fluid_volume_l: numberOrNull(data.transmission_fluid_volume_l),
+        coolant_type: data.coolant_type || null,
+        brake_fluid_type: data.brake_fluid_type || null,
+        tire_pressure_front_bar: numberOrNull(data.tire_pressure_front_bar),
+        tire_pressure_rear_bar: numberOrNull(data.tire_pressure_rear_bar),
+      }),
+    });
+    state.cars = state.cars.map((item) => (item.id === updated.id ? updated : item));
+    renderCars();
+    fillCarProfileForm();
+    await loadSelectedCar();
+    toast("Параметры сохранены");
+    haptic("success");
+  });
+});
+
 document.querySelector("#settingsForm").addEventListener("submit", async (event) => {
  event.preventDefault();
  const form = event.currentTarget;
@@ -1272,6 +1362,8 @@ document.querySelector("#openCarFormBtn").addEventListener("click", () => {
  document.querySelector("#carFormSection").scrollIntoView({ behavior: "smooth", block: "start" });
 });

+document.querySelector("#openCarProfileBtn").addEventListener("click", openCarProfile);
+
 document.querySelector("#openSettingsBtn").addEventListener("click", () => {
  document.querySelector("#settingsSection").classList.remove("hidden");
  document.querySelector("#localeSelect").value = state.user?.locale || "ru";
--- a/web/static/styles.css
+++ b/web/static/styles.css
@@ -14,6 +14,10 @@
  --shadow: 0 14px 40px rgba(24, 33, 31, 0.08);
 }

+body.auth-required .shell {
+  display: none;
+}
+
 .top-actions {
  display: flex;
  gap: 8px;
@@ -1194,6 +1198,24 @@ select {
  min-height: 46px;
 }

+.telegram-login-link {
+  display: inline-flex;
+  width: 100%;
+  min-height: 46px;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10px;
+  border-radius: 8px;
+  background: #16806a;
+  color: #fff;
+  font-weight: 800;
+  text-decoration: none;
+}
+
+.telegram-login-link.hidden {
+  display: none;
+}
+
 .scan-form {
  display: grid;
  gap: 10px;