144 lines
5.9 KiB
HTML
144 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
||
<!-- Дизайн: Стандартный дизайн. Сохраняй все пять CSS; подробности в design.md. -->
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Журнал заявок на ремонт оборудования</title>
|
||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||
<link rel="stylesheet" href="design-system/vibe-theme.css">
|
||
<link rel="stylesheet" href="style.css">
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
</head>
|
||
<body class="kt-ai-app">
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-pagehead-in">
|
||
<div class="brand">
|
||
<img src="https://code.vibe42.kz/tore/aitu/kt-logo.svg" alt="Казахтелеком" height="28">
|
||
<strong>Журнал заявок на ремонт</strong>
|
||
</div>
|
||
<span class="kt-ai-spacer"></span>
|
||
<button class="kt-ai-btn" data-variant="ghost" id="resetBtn" title="Вернуть исходный список">
|
||
<svg class="kt-icon"><use href="#refresh"></use></svg><span>Сбросить</span>
|
||
</button>
|
||
<button class="kt-ai-btn" data-variant="primary" id="newBtn">
|
||
<svg class="kt-icon"><use href="#plus"></use></svg><span>Новая заявка</span>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="journal-layout">
|
||
<section class="journal-main">
|
||
<div class="kt-ai-v" data-gap="block">
|
||
|
||
<div class="kt-ai-kpi-strip">
|
||
<div class="kt-ai-kpi">
|
||
<span class="label">Всего заявок</span>
|
||
<span class="value" id="kpiTotal">0</span>
|
||
</div>
|
||
<div class="kt-ai-kpi">
|
||
<span class="label">Новые</span>
|
||
<span class="value" id="kpiNew">0</span>
|
||
</div>
|
||
<div class="kt-ai-kpi">
|
||
<span class="label">В работе</span>
|
||
<span class="value" id="kpiWork">0</span>
|
||
</div>
|
||
<div class="kt-ai-kpi">
|
||
<span class="label">Завершено</span>
|
||
<span class="value" id="kpiDone">0</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toolbar-row">
|
||
<h1 class="kt-ai-h1">Заявки на ремонт</h1>
|
||
<div class="search-row">
|
||
<input type="search" class="kt-ai-input" id="searchInput" placeholder="Номер, оборудование, место, описание…" aria-label="Поиск по заявкам">
|
||
<button class="kt-ai-btn" id="sortBtn">
|
||
<svg class="kt-icon"><use href="#arrowUpDown"></use></svg><span id="sortLabel">Сначала новые</span>
|
||
</button>
|
||
<button class="kt-ai-btn" id="exportBtn">
|
||
<svg class="kt-icon"><use href="#download"></use></svg><span>Экспорт в Excel</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-v" data-gap="tight">
|
||
<div class="kt-ai-filterbar" id="statusFilters"></div>
|
||
</div>
|
||
|
||
<div class="kt-ai-filterbar chips-row">
|
||
<span class="kt-ai-meta" id="tableCount">Показаны все заявки</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<button class="clear-all" id="clearFiltersBtn" hidden>Сбросить фильтры</button>
|
||
</div>
|
||
|
||
<div class="kt-ai-table-wrap">
|
||
<table class="kt-ai-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Заявка</th>
|
||
<th>Статус</th>
|
||
<th>Класс</th>
|
||
<th>Создана</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="reqBody"></tbody>
|
||
</table>
|
||
<div class="kt-ai-empty" id="emptyState" hidden>
|
||
<div class="icon-spot"><svg class="kt-icon"><use href="#clipboard"></use></svg></div>
|
||
<div class="title">Ничего не найдено</div>
|
||
<div class="kt-ai-meta">Попробуйте другой статус или сбросьте фильтры.</div>
|
||
<button class="kt-ai-btn" data-variant="ghost" id="emptyClearBtn">Сбросить фильтры</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<aside class="journal-side">
|
||
<div id="detailPane"></div>
|
||
</aside>
|
||
</main>
|
||
|
||
<div class="kt-ai-modal-overlay" id="modal" hidden>
|
||
<div class="kt-ai-modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
|
||
<div class="modal-title" id="modalTitle">Новая заявка</div>
|
||
<form id="reqForm" novalidate>
|
||
<div class="kt-ai-field">
|
||
<label for="fEquipment">Оборудование</label>
|
||
<input type="text" class="kt-ai-input" id="fEquipment" placeholder="Например: Шкаф ОД-2, 2 этаж" required>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="fClass">Класс</label>
|
||
<select class="kt-ai-select" id="fClass">
|
||
<option>Повседневный</option>
|
||
<option>Срочный</option>
|
||
</select>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="fPlace">Место</label>
|
||
<input type="text" class="kt-ai-input" id="fPlace" placeholder="Строй, этаж, кабинет">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="fDesc">Описание проблемы</label>
|
||
<textarea class="kt-ai-textarea" id="fDesc" placeholder="Что вышло из строя, что замечено"></textarea>
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button type="button" class="kt-ai-btn" data-variant="ghost" id="cancelBtn">Отмена</button>
|
||
<button type="submit" class="kt-ai-btn" data-variant="primary">Сохранить заявку</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-toast-stack" id="toasts" role="status" aria-live="polite"></div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|