Files
asuinventory/frontend/index.html
Danamir 35bd29c223 feat: add all equipment view with sorting, print functionality, and UI improvements
- Add "Всё оборудование" menu item with equipment sorted by inventory number
- Add row numbering in all equipment view
- Add print functionality for auditory view with "Проверено" column
- Hide unnecessary columns (quantity, type, owner) when printing
- Make cards full-width and responsive (container-fluid)
- Consolidate CSS styles from static/css/index.css to frontend/styles.css
- Fix text wrapping in "Расположение" column
- Add sort_by_inv parameter to /oboruds/ API endpoint

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-22 22:48:27 +01:00

270 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>АСУ Инвентаризация</title>
<link rel="stylesheet" href="/static/css/bootstrap.min.css" />
<link rel="stylesheet" href="/app/styles.css" />
</head>
<body>
<header class="no-print">
<h1>
<a href="/app/">АСУ Инвентаризация</a>
</h1>
<h2>Учет оборудования. Демоверсия</h2>
</header>
<div id="app">
<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.prevent="view='byAud'">По аудитории</a></li>
<li class="nav-item"><a class="nav-link" href="#" @click.prevent="showAllEquipment">Всё оборудование</a></li>
<li class="nav-item" v-if="isAdmin"><a class="nav-link" href="#" @click.prevent="view='users'">Пользователи</a></li>
<li class="nav-item" v-if="isAdmin"><a class="nav-link" href="#" @click.prevent="view='audManage'">Аудитории</a></li>
<li class="nav-item"><a class="nav-link" href="/docs" target="_blank">API Docs</a></li>
<li class="nav-item" v-if="canEdit"><a class="nav-link" href="#" @click.prevent="view='owners'">Владельцы</a></li>
</ul>
<span class="navbar-text ms-auto" v-if="isAuth">Роль: {{ role }}</span>
<a class="btn btn-outline-primary ms-2" v-if="!isAuth" href="/login">Войти</a>
<button class="btn btn-outline-secondary ms-2" v-else @click.prevent="logout">Выйти</button>
</div>
</div>
</nav>
</div>
<div class="container-fluid px-4">
<div v-if="view==='byAud'" class="row">
<div class="card col-12">
<div class="card-body">
<h3 class="card-title no-print">Оборудование по аудитории</h3>
<h2 class="print-only print-title">{{ printTitle }}</h2>
<div class="mb-2 d-flex align-items-center gap-2 no-print">
<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.audnazvanie }}</option>
</select>
<button class="btn btn-primary" @click="loadOboruds">Показать</button>
<button class="btn btn-secondary" @click="printPage" :disabled="!oboruds.length">Печать</button>
</div>
<div class="status no-print" :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" class="no-print">Кол-во</th>
<th scope="col" class="no-print">Тип</th>
<th scope="col" class="no-print">Владелец</th>
<th scope="col" class="print-only">Проверено</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 class="no-print">{{ it.kolichestvo ?? '' }}</td>
<td class="no-print">{{ it.type?.name ?? '' }}</td>
<td class="no-print">
<template v-if="canEdit">
<select class="form-select form-select-sm d-inline w-auto" v-model="it.selectedOwnerId">
<option value="">— нет —</option>
<option v-for="ow in owners" :key="ow.id" :value="ow.id">{{ ow.name }}</option>
</select>
<button class="btn btn-sm btn-outline-primary ms-2" @click="saveOwner(it)">Сохранить</button>
</template>
<template v-else>
{{ it.owner?.name ?? '' }}
</template>
</td>
<td class="print-only"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div v-if="view==='allEquipment'" class="row">
<div class="card col-12">
<div class="card-body">
<h3 class="card-title">Всё оборудование (по инв. номеру)</h3>
<div class="status" :class="{error: !!error}">{{ status }}</div>
<div class="table-responsive">
<table class="table datatable">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Инв. номер</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, index) in allOboruds" :key="it.id">
<td>{{ index + 1 }}</td>
<td class="inv">{{ it.invNumber ?? '' }}</td>
<td>{{ it.nazvanie ?? '' }}</td>
<td>{{ getAuditoryName(it.aud_id) }}</td>
<td class="rasp">{{ it.raspologenie ?? '' }}</td>
<td>{{ it.kolichestvo ?? '' }}</td>
<td>{{ it.owner?.name ?? '' }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div v-if="view==='users'" class="row">
<div class="card col-12">
<div class="card-body">
<h3 class="card-title">Администрирование пользователей</h3>
<div v-if="role!=='admin'" class="alert alert-warning">Недостаточно прав. Войдите как администратор.</div>
<div v-else>
<h5 class="mt-2">Создать пользователя-админа</h5>
<div class="row g-2 align-items-end">
<div class="col-auto">
<label class="form-label">Логин</label>
<input class="form-control" v-model="newAdminUsername" placeholder="username" />
</div>
<div class="col-auto">
<label class="form-label">Пароль</label>
<input type="password" class="form-control" v-model="newAdminPassword" placeholder="password" />
</div>
<div class="col-auto">
<button class="btn btn-success" @click="createAdmin">Создать админа</button>
</div>
</div>
<div class="status mt-2" :class="{error: !!error}">{{ status }}</div>
<h5 class="mt-4">Пользователи</h5>
<div class="table-responsive">
<table class="table datatable">
<thead>
<tr>
<th>ID</th>
<th>Логин</th>
<th>Роль</th>
</tr>
</thead>
<tbody>
<tr v-for="u in users" :key="u.id">
<td>{{ u.id }}</td>
<td>{{ u.username }}</td>
<td>{{ u.role }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div v-if="view==='audManage'" class="row">
<div class="card col-12">
<div class="card-body">
<h3 class="card-title">Управление аудиториями</h3>
<div v-if="role!=='admin'" class="alert alert-warning">Недостаточно прав. Войдите как администратор.</div>
<div v-else>
<h5 class="mt-2">Добавить аудиторию</h5>
<div class="row g-2 align-items-end">
<div class="col-auto">
<label class="form-label">Название аудитории</label>
<input class="form-control" v-model="newAudName" placeholder="например, 519" />
</div>
<div class="col-auto">
<button class="btn btn-success" @click="createAuditory">Добавить</button>
</div>
</div>
<div class="status mt-2" :class="{error: !!error}">{{ status }}</div>
<h5 class="mt-4">Список аудиторий</h5>
<div class="table-responsive">
<table class="table datatable">
<thead>
<tr>
<th>ID</th>
<th>Название</th>
</tr>
</thead>
<tbody>
<tr v-for="a in auditories" :key="a.id">
<td>{{ a.id }}</td>
<td>{{ a.audnazvanie }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div v-if="view==='owners'" class="row">
<div class="card col-12">
<div class="card-body">
<h3 class="card-title">Управление владельцами</h3>
<div v-if="!canEdit" class="alert alert-warning">Недостаточно прав. Войдите как администратор или редактор.</div>
<div v-else>
<h5 class="mt-2">Добавить владельца</h5>
<div class="row g-2 align-items-end">
<div class="col-auto">
<label class="form-label">Имя владельца</label>
<input class="form-control" v-model="newOwnerName" placeholder="например, Иванов И.И." />
</div>
<div class="col-auto">
<button class="btn btn-success" @click="createOwner">Добавить</button>
</div>
</div>
<div class="status mt-2" :class="{error: !!error}">{{ status }}</div>
<h5 class="mt-4">Список владельцев</h5>
<div class="table-responsive">
<table class="table datatable">
<thead>
<tr>
<th>ID</th>
<th>Имя</th>
</tr>
</thead>
<tbody>
<tr v-for="o in owners" :key="o.id">
<td>{{ o.id }}</td>
<td>{{ o.name }}</td>
</tr>
</tbody>
</table>
</div>
</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>