serik_gylymmedden/ot-tb-control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v2: новая структура — подразделения, план/факт, указания, акты, месяцы

Browse Source
This commit is contained in:
Dauren777 2026-06-03 12:03:37 +00:00
parent 35caf90695
commit 558748dac0
1 changed files with 301 additions and 480 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

781
index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Охрана труда и ТБ — учёт контролей</title> <title>Учёт внутренних контролей по ОТ и ТБ</title>
<style> <style>
:root{ :root{
--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF; --ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;
@ -15,106 +15,87 @@
} }
*{box-sizing:border-box;margin:0;padding:0} *{box-sizing:border-box;margin:0;padding:0}
body{ body{
font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif; font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
color:var(--ink);background:var(--gray-100);min-height:100vh; color:var(--ink);background:var(--gray-100);min-height:100vh;
} }
/* Header */
.header{background:var(--white);border-bottom:1px solid var(--gray-200);position:sticky;top:0;z-index:100} .header{background:var(--white);border-bottom:1px solid var(--gray-200);position:sticky;top:0;z-index:100}
.header-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:60px} .header-inner{max-width:1300px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:58px}
.header h1{font-size:18px;font-weight:700} .header h1{font-size:17px;font-weight:700}
.header-badge{font-size:12px;background:var(--cyan-50);color:var(--ink);padding:4px 10px;border-radius:20px;font-weight:600} .header-badge{font-size:11px;background:var(--cyan-50);color:var(--ink);padding:3px 10px;border-radius:20px;font-weight:600}
/* Tabs */ .tabs{background:var(--white);border-bottom:1px solid var(--gray-200);position:sticky;top:58px;z-index:99}
.tabs{background:var(--white);border-bottom:1px solid var(--gray-200);position:sticky;top:60px;z-index:99} .tabs-inner{max-width:1300px;margin:0 auto;padding:0 24px;display:flex;gap:0}
.tabs-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;gap:0}
.tab{ .tab{
padding:14px 20px;font-size:14px;font-weight:500;color:var(--gray-500); padding:13px 22px;font-size:14px;font-weight:500;color:var(--gray-500);
border:none;background:none;cursor:pointer;border-bottom:2px solid transparent; border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;
transition:all .15s;white-space:nowrap; transition:all .15s;white-space:nowrap;
} }
.tab:hover{color:var(--ink)} .tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);border-bottom-color:var(--cyan);font-weight:600} .tab.active{color:var(--ink);border-bottom-color:var(--cyan);font-weight:600}
/* Main */ .main{max-width:1300px;margin:0 auto;padding:28px 24px}
.main{max-width:1200px;margin:0 auto;padding:32px 24px}
/* Tab content */
.tab-panel{display:none} .tab-panel{display:none}
.tab-panel.active{display:block} .tab-panel.active{display:block}
/* Dashboard cards */ /* Cards */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px} .stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:20px}
.stat-card{background:var(--white);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow)} .stat-card{background:var(--white);border-radius:var(--radius);padding:18px 22px;box-shadow:var(--shadow)}
.stat-card .stat-label{font-size:13px;color:var(--gray-500);margin-bottom:4px} .stat-card .stat-label{font-size:12px;color:var(--gray-500);margin-bottom:2px}
.stat-card .stat-value{font-size:32px;font-weight:800;line-height:1} .stat-card .stat-value{font-size:28px;font-weight:800;line-height:1}
.stat-card .stat-icon{font-size:28px;margin-bottom:8px} .stat-card .stat-sub{font-size:12px;color:var(--gray-500);margin-top:2px}
.stat-red .stat-value{color:var(--red)}
.stat-amber .stat-value{color:var(--amber)}
.stat-green .stat-value{color:var(--green)}
/* Chart bars */ /* Section title */
.chart-card{background:var(--white);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);margin-bottom:24px} .section-title{font-size:17px;font-weight:700;margin-bottom:14px}
.chart-card h3{font-size:16px;font-weight:700;margin-bottom:16px}
.chart-bar-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.chart-bar-label{width:240px;font-size:13px;flex-shrink:0;text-align:right}
.chart-bar-track{flex:1;background:var(--gray-100);border-radius:4px;height:22px;overflow:hidden}
.chart-bar-fill{height:100%;border-radius:4px;transition:width .4s;min-width:2px}
.chart-bar-count{font-size:13px;font-weight:600;width:32px;text-align:right;flex-shrink:0}
/* Section titles */
.section-title{font-size:18px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}
/* Table */ /* Table */
.table-wrap{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden} .table-wrap{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px} table{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap}
th{text-align:left;padding:12px 16px;background:var(--gray-100);font-weight:600;font-size:12px;color:var(--gray-500);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--gray-200)} th{text-align:left;padding:10px 14px;background:var(--gray-100);font-weight:600;font-size:11px;color:var(--gray-500);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--gray-200)}
td{padding:12px 16px;border-bottom:1px solid var(--gray-100)} td{padding:10px 14px;border-bottom:1px solid var(--gray-100)}
tr:last-child td{border-bottom:none} tr:last-child td{border-bottom:none}
tr:hover td{background:var(--cyan-50)} tr:hover td{background:var(--cyan-50)}
/* Badges */ /* Badges */
.badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:12px;font-weight:600;line-height:1.5} .badge{display:inline-block;padding:2px 9px;border-radius:10px;font-size:11px;font-weight:600}
.badge-red{background:var(--red-bg);color:var(--red)} .badge-red{background:var(--red-bg);color:var(--red)}
.badge-amber{background:var(--amber-bg);color:var(--amber)} .badge-amber{background:var(--amber-bg);color:var(--amber)}
.badge-green{background:var(--green-bg);color:var(--green)} .badge-green{background:var(--green-bg);color:var(--green)}
.badge-type{background:var(--gray-100);color:var(--ink)} .badge-info{background:var(--cyan-50);color:var(--ink)}
/* Buttons */ /* Buttons */
.btn{ .btn{
display:inline-flex;align-items:center;gap:6px;padding:8px 16px; display:inline-flex;align-items:center;gap:5px;padding:7px 14px;
border-radius:var(--radius-sm);font-size:13px;font-weight:600; border-radius:var(--radius-sm);font-size:13px;font-weight:600;
border:none;cursor:pointer;transition:all .15s;line-height:1.5; border:none;cursor:pointer;transition:all .15s;line-height:1.4;
} }
.btn-primary{background:var(--cyan);color:var(--ink)} .btn-primary{background:var(--cyan);color:var(--ink)}
.btn-primary:hover{background:#1be5ff} .btn-primary:hover{background:#1be5ff}
.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--gray-200)} .btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--gray-200)}
.btn-outline:hover{border-color:var(--ink)} .btn-outline:hover{border-color:var(--ink)}
.btn-sm{padding:4px 10px;font-size:12px} .btn-sm{padding:4px 9px;font-size:11px}
.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid var(--red-bg)} .btn-danger{background:var(--red-bg);color:var(--red);border:1px solid var(--red-bg)}
.btn-danger:hover{background:var(--red);color:#fff} .btn-danger:hover{background:var(--red);color:#fff}
.btn-success{background:var(--green-bg);color:var(--green);border:1px solid var(--green-bg)} .btn-group{display:flex;gap:4px}
.btn-success:hover{background:var(--green);color:#fff}
.btn-group{display:flex;gap:6px;flex-wrap:wrap}
/* Toolbar */ /* Toolbar */
.toolbar{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;align-items:center} .toolbar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.toolbar select,.toolbar input{ .toolbar select,.toolbar input{
padding:8px 12px;border:1.5px solid var(--gray-200);border-radius:var(--radius-sm); padding:7px 11px;border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);
font-size:13px;background:var(--white);color:var(--ink); font-size:13px;background:var(--white);color:var(--ink);
} }
.toolbar select:focus,.toolbar input:focus{outline:none;border-color:var(--cyan)} .toolbar select:focus,.toolbar input:focus{outline:none;border-color:var(--cyan)}
.toolbar input{min-width:200px}
/* Form */ /* Form */
.form-card{background:var(--white);border-radius:var(--radius);padding:24px 28px;box-shadow:var(--shadow);max-width:640px} .form-card{background:var(--white);border-radius:var(--radius);padding:22px 26px;box-shadow:var(--shadow);max-width:700px}
.form-group{margin-bottom:16px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-group label{display:block;font-size:13px;font-weight:600;margin-bottom:4px} .form-group{margin-bottom:14px}
.form-group label{display:block;font-size:12px;font-weight:600;margin-bottom:3px}
.form-group input,.form-group select,.form-group textarea{ .form-group input,.form-group select,.form-group textarea{
width:100%;padding:10px 12px;border:1.5px solid var(--gray-200); width:100%;padding:9px 11px;border:1.5px solid var(--gray-200);
border-radius:var(--radius-sm);font-size:14px;color:var(--ink);font-family:inherit; border-radius:var(--radius-sm);font-size:13px;color:var(--ink);font-family:inherit;
} }
.form-group textarea{resize:vertical;min-height:80px} .form-group textarea{resize:vertical;min-height:60px}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{ .form-group input:focus,.form-group select:focus,.form-group textarea:focus{
outline:none;border-color:var(--cyan) outline:none;border-color:var(--cyan)
} }
@ -125,50 +106,53 @@ tr:hover td{background:var(--cyan-50)}
display:flex;align-items:center;justify-content:center;padding:24px; display:flex;align-items:center;justify-content:center;padding:24px;
} }
.modal{ .modal{
background:var(--white);border-radius:var(--radius);padding:28px; background:var(--white);border-radius:var(--radius);padding:26px;
max-width:560px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.15); max-width:620px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.15);
} }
.modal h3{font-size:18px;font-weight:700;margin-bottom:16px} .modal h3{font-size:17px;font-weight:700;margin-bottom:14px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px} .modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
/* Empty state */ .empty{text-align:center;padding:40px 20px;color:var(--gray-500)}
.empty{text-align:center;padding:40px 20px;color:var(--gray-500);font-size:14px}
/* Pinned recent */ /* Chart */
.recent-card{background:var(--white);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)} .chart-card{background:var(--white);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);margin-bottom:18px}
.recent-card h3{font-size:16px;font-weight:700;margin-bottom:12px} .chart-card h3{font-size:15px;font-weight:700;margin-bottom:13px}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:12px}
.bar-label{min-width:200px;text-align:right}
.bar-track{flex:1;background:var(--gray-100);border-radius:3px;height:18px;overflow:hidden}
.bar-fill{height:100%;border-radius:3px;transition:width .4s;min-width:2px;background:var(--cyan)}
.bar-num{font-weight:600;min-width:40px;text-align:right}
.exec-cell{font-weight:600}
.exec-good{color:var(--green)}
.exec-bad{color:var(--red)}
.exec-ok{color:var(--amber)}
/* Responsive */
@media (max-width:768px){ @media (max-width:768px){
.header h1{font-size:16px} .tabs-inner{overflow-x:auto}
.tab{padding:12px 14px;font-size:13px} .tab{padding:11px 14px;font-size:12px}
.stats-row{grid-template-columns:1fr 1fr} .stats-row{grid-template-columns:1fr 1fr}
.chart-bar-label{width:140px;font-size:11px} .form-row{grid-template-columns:1fr}
.toolbar{flex-direction:column} table{font-size:11px}
.toolbar select,.toolbar input{width:100%} th,td{padding:7px 8px}
table{font-size:12px} .bar-label{min-width:120px;font-size:11px}
th,td{padding:8px 10px}
} }
.plan-status-completed{text-decoration:line-through;opacity:.6}
.plan-actions{display:flex;gap:4px}
</style> </style>
</head> </head>
<body> <body>
<header class="header"> <header class="header">
<div class="header-inner"> <div class="header-inner">
<h1>Охрана труда и ТБ</h1> <h1>Учёт внутренних контролей по ОТ и ТБ</h1>
<span class="header-badge">Внутренний учёт</span> <span class="header-badge">Охрана труда</span>
</div> </div>
</header> </header>
<nav class="tabs"> <nav class="tabs">
<div class="tabs-inner" id="tabNav"> <div class="tabs-inner" id="tabNav">
<button class="tab active" data-tab="dashboard">Сводка</button> <button class="tab active" data-tab="dashboard">Сводка</button>
<button class="tab" data-tab="plan">План проверок</button> <button class="tab" data-tab="table">Таблица учёта</button>
<button class="tab" data-tab="journal">Журнал нарушений</button> <button class="tab" data-tab="add">Добавить запись</button>
<button class="tab" data-tab="add">Добавить нарушение</button>
</div> </div>
</nav> </nav>
@ -177,471 +161,308 @@ tr:hover td{background:var(--cyan-50)}
<!-- DASHBOARD --> <!-- DASHBOARD -->
<section class="tab-panel active" id="tab-dashboard"> <section class="tab-panel active" id="tab-dashboard">
<div class="stats-row" id="statsRow"></div> <div class="stats-row" id="statsRow"></div>
<div class="chart-card" id="chartCard"></div> <div style="display:grid;grid-template-columns:1fr 1fr;gap:18px" id="dashCharts">
<div class="recent-card" id="recentCard"></div> <div class="chart-card" id="chartByUnit"></div>
<div class="chart-card" id="chartByMonth"></div>
</div>
</section> </section>
<!-- PLAN --> <!-- TABLE -->
<section class="tab-panel" id="tab-plan"> <section class="tab-panel" id="tab-table">
<div class="toolbar"> <div class="toolbar">
<button class="btn btn-primary" onclick="togglePlanForm()">+ Добавить пункт плана</button> <select id="fUnit" onchange="renderTable()"><option value="all">Все подразделения</option></select>
</div> <select id="fRegion" onchange="renderTable()"><option value="all">Все регионы</option></select>
<div class="form-card" id="planFormCard" style="display:none;margin-bottom:20px"> <select id="fMonth" onchange="renderTable()">
<h3 id="planFormTitle">Новый пункт плана</h3> <option value="all">Все месяцы</option>
<div class="form-group"><label>Название</label><input id="planName" placeholder="Например: Еженедельный обход цеха"></div> <option value="Январь">Январь</option><option value="Февраль">Февраль</option><option value="Март">Март</option>
<div class="form-group"><label>Периодичность</label> <option value="Апрель">Апрель</option><option value="Май">Май</option><option value="Июнь">Июнь</option>
<select id="planFreq"> <option value="Июль">Июль</option><option value="Август">Август</option><option value="Сентябрь">Сентябрь</option>
<option value="daily">Ежедневно</option> <option value="Октябрь">Октябрь</option><option value="Ноябрь">Ноябрь</option><option value="Декабрь">Декабрь</option>
<option value="weekly">Еженедельно</option>
<option value="monthly">Ежемесячно</option>
<option value="quarterly">Ежеквартально</option>
<option value="once">Разово</option>
</select>
</div>
<div class="form-group"><label>Описание</label><textarea id="planDesc" rows="2"></textarea></div>
<div class="form-group"><label>Ответственный</label><input id="planResp" placeholder="ФИО"></div>
<div class="modal-actions">
<button class="btn btn-outline" onclick="togglePlanForm()">Отмена</button>
<button class="btn btn-primary" id="planSaveBtn" onclick="savePlan()">Сохранить</button>
</div>
</div>
<div class="table-wrap" id="planTable"></div>
</section>
<!-- JOURNAL -->
<section class="tab-panel" id="tab-journal">
<div class="toolbar">
<select id="filterType" onchange="renderJournal()">
<option value="all">Все виды нарушений</option>
</select> </select>
<select id="filterStatus" onchange="renderJournal()"> <select id="fYear" onchange="renderTable()"><option value="all">Все годы</option></select>
<option value="all">Все статусы</option>
<option value="detected">Выявлено</option>
<option value="in_progress">В работе</option>
<option value="resolved">Устранено</option>
</select>
<input type="text" id="filterSearch" placeholder="Поиск по описанию..." oninput="renderJournal()">
</div> </div>
<div class="table-wrap" id="journalTable"></div> <div class="table-wrap" id="dataTable"></div>
</section> </section>
<!-- ADD --> <!-- ADD -->
<section class="tab-panel" id="tab-add"> <section class="tab-panel" id="tab-add">
<div class="form-card"> <div class="form-card">
<h3 style="margin-bottom:16px">Новое нарушение</h3> <h3 style="margin-bottom:14px;font-size:17px">Новая запись</h3>
<div class="form-group"><label>Дата выявления</label><input type="date" id="vioDate"></div> <div class="form-row">
<div class="form-group"><label>Место / участок</label><input id="vioLocation" placeholder="Цех №2, склад..."></div> <div class="form-group"><label>Наименование структурного подразделения</label><input id="afUnit" placeholder="Например: Цех №3"></div>
<div class="form-group"><label>Вид нарушения</label><select id="vioType"></select></div> <div class="form-group"><label>Населённый пункт</label><input id="afCity" placeholder="Например: г. Алматы"></div>
<div class="form-group"><label>Описание</label><textarea id="vioDesc" rows="3" placeholder="Опишите нарушение..."></textarea></div> </div>
<div class="form-group"><label>Ответственный за устранение</label><input id="vioResp" placeholder="ФИО"></div> <div class="form-row">
<div class="form-group"><label>Срок устранения</label><input type="date" id="vioDeadline"></div> <div class="form-group"><label>Регион</label><input id="afRegion" placeholder="Например: Алматинская обл."></div>
<div class="form-group"><label>Связать с пунктом плана</label><select id="vioPlan"><option value="">— не привязано —</option></select></div> <div class="form-group"><label>Месяц</label><select id="afMonth">
<button class="btn btn-primary" onclick="addViolation()" style="margin-top:8px">Сохранить нарушение</button> <option value="">— выберите —</option>
<option>Январь</option><option>Февраль</option><option>Март</option><option>Апрель</option>
<option>Май</option><option>Июнь</option><option>Июль</option><option>Август</option>
<option>Сентябрь</option><option>Октябрь</option><option>Ноябрь</option><option>Декабрь</option>
</select></div>
</div>
<div class="form-row">
<div class="form-group"><label>Год</label><input type="number" id="afYear" min="2020" max="2030"></div>
</div>
<div class="form-row">
<div class="form-group"><label>План (кол-во проверок)</label><input type="number" id="afPlan" min="0"></div>
<div class="form-group"><label>Факт (выполнено)</label><input type="number" id="afFact" min="0"></div>
</div>
<div class="form-row">
<div class="form-group"><label>№ Указания</label><input id="afDirNo" placeholder="Например: 45/ОТ"></div>
<div class="form-group"><label>Указание оформил</label><input id="afDirBy" placeholder="ФИО"></div>
</div>
<div class="form-group"><label>Акт приостановки</label><input id="afSusp" placeholder="Например: Акт №12 от 15.03.2026"></div>
<button class="btn btn-primary" onclick="addEntry()" style="margin-top:6px">Сохранить запись</button>
</div> </div>
</section> </section>
</main> </main>
<!-- MODAL for editing -->
<div class="modal-overlay" id="editModal" style="display:none" onclick="if(event.target===this)closeEditModal()"> <div class="modal-overlay" id="editModal" style="display:none" onclick="if(event.target===this)closeEditModal()">
<div class="modal" id="editModalContent"></div> <div class="modal" id="editModalContent"></div>
</div> </div>
<script> <script>
/* ========== DATA LAYER ========== */ const MONTHS = ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'];
const VIOLATION_TYPES = [ function load(k,f) { try{ const v=localStorage.getItem(k); return v?JSON.parse(v):f } catch{ return f } }
'Несоблюдение требований безопасности', function save(k,v) { localStorage.setItem(k,JSON.stringify(v)) }
'Отсутствие / неисправность СИЗ',
'Нарушение правил эксплуатации оборудования',
'Отсутствие инструктажа / обучения',
'Несоблюдение пожарной безопасности',
'Нарушение электробезопасности',
'Отсутствие ограждений / знаков безопасности',
'Захламлённость проходов и выходов',
'Нарушение правил работы на высоте',
'Другое'
];
const STATUS_LABELS = { let entries = load('ot_entries', []);
detected: 'Выявлено',
in_progress: 'В работе',
resolved: 'Устранено'
};
const BAR_COLORS = ['#00E5FF','#0EA5E9','#6366F1','#8B5CF6','#EC4899','#F43F5E','#F97316','#EAB308','#22C55E','#14B8A6']; function genId() { return 'e'+Date.now()+'_'+Math.random().toString(36).slice(2,6) }
function load(key, fallback) { /* ========== NAV ========== */
try { const v = localStorage.getItem(key); return v ? JSON.parse(v) : fallback; } document.getElementById('tabNav').addEventListener('click', function(e){
catch { return fallback; } if(!e.target.classList.contains('tab')) return;
} document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));
function save(key, val) { localStorage.setItem(key, JSON.stringify(val)); }
let violations = load('violations', []);
let planItems = load('planItems', []);
let editingPlanId = null;
let editingViolationId = null;
if (!planItems.length) {
planItems = [
{ id: 'p1', name: 'Ежедневный обход территории', freq: 'daily', desc: 'Осмотр рабочих мест, проходов, средств пожаротушения', resp: 'Начальник смены', completed: false },
{ id: 'p2', name: 'Еженедельная проверка СИЗ', freq: 'weekly', desc: 'Проверка наличия и состояния средств индивидуальной защиты', resp: 'Специалист по ОТ', completed: false },
{ id: 'p3', name: 'Ежемесячный аудит безопасности', freq: 'monthly', desc: 'Полный аудит соблюдения норм охраны труда', resp: 'Инженер по ОТ и ТБ', completed: false },
{ id: 'p4', name: 'Проверка электроустановок', freq: 'quarterly', desc: 'Осмотр электрощитов, заземления, изоляции', resp: 'Главный энергетик', completed: false },
{ id: 'p5', name: 'Инструктаж новых сотрудников', freq: 'once', desc: 'Вводный инструктаж по охране труда для новых сотрудников', resp: 'Специалист по ОТ', completed: false }
];
save('planItems', planItems);
}
function genId() { return 'v' + Date.now() + '_' + Math.random().toString(36).slice(2,7); }
/* ========== NAVIGATION ========== */
document.getElementById('tabNav').addEventListener('click', function(e) {
if (!e.target.classList.contains('tab')) return;
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
e.target.classList.add('active'); e.target.classList.add('active');
document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active')); document.querySelectorAll('.tab-panel').forEach(p=>p.classList.remove('active'));
document.getElementById('tab-' + e.target.dataset.tab).classList.add('active'); document.getElementById('tab-'+e.target.dataset.tab).classList.add('active');
switchTab(e.target.dataset.tab); switchTab(e.target.dataset.tab);
}); });
function switchTab(name) { function switchTab(n){
if (name === 'dashboard') renderDashboard(); if(n==='dashboard') renderDashboard();
else if (name === 'plan') renderPlan(); else if(n==='table') renderTable();
else if (name === 'journal') renderJournal(); else if(n==='add') prepareAdd();
else if (name === 'add') prepareAddForm();
} }
/* ========== DASHBOARD ========== */ /* ========== DASHBOARD ========== */
function renderDashboard() { function renderDashboard(){
const total = violations.length; const total=entries.length;
const detected = violations.filter(v => v.status === 'detected').length; const totalPlan=entries.reduce((s,e)=>s+(+e.plan||0),0);
const inProgress = violations.filter(v => v.status === 'in_progress').length; const totalFact=entries.reduce((s,e)=>s+(+e.fact||0),0);
const resolved = violations.filter(v => v.status === 'resolved').length; const pct=totalPlan?Math.round(totalFact/totalPlan*100):0;
document.getElementById('statsRow').innerHTML = ` document.getElementById('statsRow').innerHTML=`
<div class="stat-card"><div class="stat-icon">📋</div><div class="stat-label">Всего нарушений</div><div class="stat-value">${total}</div></div> <div class="stat-card"><div class="stat-label">Всего записей</div><div class="stat-value">${total}</div></div>
<div class="stat-card stat-red"><div class="stat-icon">🔴</div><div class="stat-label">Выявлено</div><div class="stat-value">${detected}</div></div> <div class="stat-card"><div class="stat-label">План проверок</div><div class="stat-value">${totalPlan}</div></div>
<div class="stat-card stat-amber"><div class="stat-icon">🟡</div><div class="stat-label">В работе</div><div class="stat-value">${inProgress}</div></div> <div class="stat-card"><div class="stat-label">Факт выполнено</div><div class="stat-value">${totalFact}</div></div>
<div class="stat-card stat-green"><div class="stat-icon">🟢</div><div class="stat-label">Устранено</div><div class="stat-value">${resolved}</div></div> <div class="stat-card"><div class="stat-label">Выполнение плана</div><div class="stat-value" style="color:${pct>=100?'var(--green)':pct>=70?'var(--amber)':'var(--red)'}">${pct}%</div></div>
<div class="stat-card"><div class="stat-label">Подразделений</div><div class="stat-value">${new Set(entries.map(e=>e.unit)).size}</div></div>
<div class="stat-card"><div class="stat-label">Указаний оформлено</div><div class="stat-value">${entries.filter(e=>e.directiveNo).length}</div></div>
`; `;
const typeStats = {}; const byUnit={};
VIOLATION_TYPES.forEach(t => { typeStats[t] = 0; }); entries.forEach(e=>{ const u=e.unit||'—'; byUnit[u]=(byUnit[u]||0)+(+e.fact||0) });
violations.forEach(v => { if (typeStats[v.type] != null) typeStats[v.type]++; }); const sorted=Object.entries(byUnit).sort((a,b)=>b[1]-a[1]).slice(0,8);
const maxCount = Math.max(1, ...Object.values(typeStats)); const maxU=Math.max(1,...sorted.map(s=>s[1]));
let h1='<h3>Выполнено проверок по подразделениям</h3>';
let chartHtml = '<h3>Нарушения по видам</h3>'; sorted.forEach(([u,c])=>{
VIOLATION_TYPES.forEach((t, i) => { h1+=`<div class="bar-row"><span class="bar-label">${esc(u)}</span><div class="bar-track"><div class="bar-fill" style="width:${(c/maxU*100).toFixed(0)}%"></div></div><span class="bar-num">${c}</span></div>`;
const c = typeStats[t];
const pct = (c / maxCount * 100).toFixed(0);
chartHtml += `<div class="chart-bar-row">
<span class="chart-bar-label">${t}</span>
<div class="chart-bar-track"><div class="chart-bar-fill" style="width:${pct}%;background:${BAR_COLORS[i]}"></div></div>
<span class="chart-bar-count">${c}</span>
</div>`;
}); });
document.getElementById('chartCard').innerHTML = chartHtml; if(!sorted.length) h1+='<div class="empty">Нет данных</div>';
document.getElementById('chartByUnit').innerHTML=h1;
const recent = violations.slice().sort((a,b) => b.date.localeCompare(a.date)).slice(0,5); const byMonth={};
let recentHtml = '<h3>Последние нарушения</h3>'; MONTHS.forEach(m=>{byMonth[m]=0});
if (!recent.length) recentHtml += '<div class="empty">Пока нет записей</div>'; entries.forEach(e=>{ const m=e.month; if(byMonth[m]!=null) byMonth[m]+=(+e.fact||0) });
else { const maxM=Math.max(1,...Object.values(byMonth));
recentHtml += '<table><thead><tr><th>Дата</th><th>Вид</th><th>Описание</th><th>Статус</th></tr></thead><tbody>'; let h2='<h3>Выполнено проверок по месяцам</h3>';
recent.forEach(v => { MONTHS.forEach(m=>{
recentHtml += `<tr> const c=byMonth[m];
<td>${v.date}</td> h2+=`<div class="bar-row"><span class="bar-label">${m}</span><div class="bar-track"><div class="bar-fill" style="width:${(c/maxM*100).toFixed(0)}%"></div></div><span class="bar-num">${c}</span></div>`;
<td><span class="badge badge-type">${v.type}</span></td>
<td>${esc(v.description)}</td>
<td>${statusBadge(v.status)}</td>
</tr>`;
});
recentHtml += '</tbody></table>';
}
document.getElementById('recentCard').innerHTML = recentHtml;
}
/* ========== PLAN ========== */
const FREQ_LABELS = { daily: 'Ежедневно', weekly: 'Еженедельно', monthly: 'Ежемесячно', quarterly: 'Ежеквартально', once: 'Разово' };
function renderPlan() {
let html = '<table><thead><tr><th>Название</th><th>Периодичность</th><th>Описание</th><th>Ответственный</th><th>Статус</th><th></th></tr></thead><tbody>';
if (!planItems.length) html += '<tr><td colspan="6" class="empty">План пуст — добавьте пункты</td></tr>';
else {
planItems.forEach(p => {
const cls = p.completed ? 'plan-status-completed' : '';
html += `<tr class="${cls}">
<td><strong>${esc(p.name)}</strong></td>
<td>${FREQ_LABELS[p.freq] || p.freq}</td>
<td style="color:var(--gray-500)">${esc(p.desc || '')}</td>
<td>${esc(p.resp || '')}</td>
<td>${p.completed ? '<span class="badge badge-green">Выполнено</span>' : '<span class="badge badge-amber">Активно</span>'}</td>
<td>
<div class="plan-actions">
<button class="btn btn-sm btn-outline" onclick="editPlan('${p.id}')">✏️</button>
${p.completed
? `<button class="btn btn-sm btn-outline" onclick="togglePlanComplete('${p.id}')">↩️</button>`
: `<button class="btn btn-sm btn-success" onclick="togglePlanComplete('${p.id}')">✓</button>`
}
<button class="btn btn-sm btn-danger" onclick="deletePlan('${p.id}')">🗑</button>
</div>
</td>
</tr>`;
});
}
html += '</tbody></table>';
document.getElementById('planTable').innerHTML = html;
}
function togglePlanForm() {
const card = document.getElementById('planFormCard');
if (card.style.display === 'none') {
card.style.display = 'block';
document.getElementById('planFormTitle').textContent = 'Новый пункт плана';
document.getElementById('planSaveBtn').textContent = 'Сохранить';
document.getElementById('planName').value = '';
document.getElementById('planFreq').value = 'daily';
document.getElementById('planDesc').value = '';
document.getElementById('planResp').value = '';
editingPlanId = null;
} else {
card.style.display = 'none';
editingPlanId = null;
}
}
function editPlan(id) {
const p = planItems.find(x => x.id === id);
if (!p) return;
editingPlanId = id;
document.getElementById('planFormTitle').textContent = 'Редактировать пункт';
document.getElementById('planSaveBtn').textContent = 'Обновить';
document.getElementById('planName').value = p.name;
document.getElementById('planFreq').value = p.freq;
document.getElementById('planDesc').value = p.desc || '';
document.getElementById('planResp').value = p.resp || '';
document.getElementById('planFormCard').style.display = 'block';
document.getElementById('planFormCard').scrollIntoView({behavior:'smooth'});
}
function savePlan() {
const name = document.getElementById('planName').value.trim();
if (!name) { alert('Введите название'); return; }
const data = {
id: editingPlanId || genId(),
name,
freq: document.getElementById('planFreq').value,
desc: document.getElementById('planDesc').value.trim(),
resp: document.getElementById('planResp').value.trim(),
completed: editingPlanId ? (planItems.find(p => p.id === editingPlanId)?.completed || false) : false
};
if (editingPlanId) {
planItems = planItems.map(p => p.id === editingPlanId ? data : p);
} else {
planItems.push(data);
}
save('planItems', planItems);
togglePlanForm();
renderPlan();
updatePlanSelects();
}
function togglePlanComplete(id) {
planItems = planItems.map(p => p.id === id ? {...p, completed: !p.completed} : p);
save('planItems', planItems);
renderPlan();
}
function deletePlan(id) {
if (!confirm('Удалить пункт плана?')) return;
planItems = planItems.filter(p => p.id !== id);
save('planItems', planItems);
renderPlan();
updatePlanSelects();
}
/* ========== JOURNAL ========== */
function renderJournal() {
const typeFilter = document.getElementById('filterType').value;
const statusFilter = document.getElementById('filterStatus').value;
const search = document.getElementById('filterSearch').value.toLowerCase();
let filtered = violations.slice();
if (typeFilter !== 'all') filtered = filtered.filter(v => v.type === typeFilter);
if (statusFilter !== 'all') filtered = filtered.filter(v => v.status === statusFilter);
if (search) filtered = filtered.filter(v => v.description.toLowerCase().includes(search) || v.location.toLowerCase().includes(search));
filtered.sort((a,b) => b.date.localeCompare(a.date));
let html = '<table><thead><tr><th>Дата</th><th>Место</th><th>Вид нарушения</th><th>Описание</th><th>Статус</th><th>Срок</th><th></th></tr></thead><tbody>';
if (!filtered.length) html += '<tr><td colspan="7" class="empty">Нет записей</td></tr>';
else {
filtered.forEach(v => {
html += `<tr>
<td>${v.date}</td>
<td>${esc(v.location)}</td>
<td><span class="badge badge-type">${esc(v.type)}</span></td>
<td style="max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${esc(v.description)}">${esc(v.description)}</td>
<td>${statusBadge(v.status)}</td>
<td>${v.deadline || '—'}</td>
<td>
<div class="btn-group">
${v.status !== 'resolved' ? `<button class="btn btn-sm btn-success" onclick="changeStatus('${v.id}','resolved')">✓</button>` : `<button class="btn btn-sm btn-outline" onclick="changeStatus('${v.id}','detected')">↩</button>`}
${v.status === 'detected' ? `<button class="btn btn-sm btn-outline" onclick="changeStatus('${v.id}','in_progress')">▶</button>` : ''}
<button class="btn btn-sm btn-outline" onclick="editViolation('${v.id}')">✏️</button>
<button class="btn btn-sm btn-danger" onclick="deleteViolation('${v.id}')">🗑</button>
</div>
</td>
</tr>`;
});
}
html += '</tbody></table>';
document.getElementById('journalTable').innerHTML = html;
updateFilterOptions();
}
function updateFilterOptions() {
const sel = document.getElementById('filterType');
const cur = sel.value;
sel.innerHTML = '<option value="all">Все виды нарушений</option>';
VIOLATION_TYPES.forEach(t => {
sel.innerHTML += `<option value="${esc(t)}" ${cur === t ? 'selected' : ''}>${t}</option>`;
}); });
document.getElementById('chartByMonth').innerHTML=h2;
} }
function changeStatus(id, newStatus) { /* ========== TABLE ========== */
violations = violations.map(v => v.id === id ? {...v, status: newStatus, resolvedDate: newStatus === 'resolved' ? new Date().toISOString().slice(0,10) : v.resolvedDate} : v); function renderTable(){
save('violations', violations); const fUnit=document.getElementById('fUnit').value;
renderJournal(); const fRegion=document.getElementById('fRegion').value;
renderDashboard(); const fMonth=document.getElementById('fMonth').value;
const fYear=document.getElementById('fYear').value;
let list=entries.slice();
if(fUnit!=='all') list=list.filter(e=>e.unit===fUnit);
if(fRegion!=='all') list=list.filter(e=>e.region===fRegion);
if(fMonth!=='all') list=list.filter(e=>e.month===fMonth);
if(fYear!=='all') list=list.filter(e=>String(e.year)===fYear);
list.sort((a,b)=>(b.year-a.year)||(MONTHS.indexOf(b.month)-MONTHS.indexOf(a.month)));
function execBadge(p,f){
const r=f?Math.round(f/p*100):0;
if(!p) return '<span class="badge badge-info">—</span>';
if(r>=100) return `<span class="badge badge-green">${r}%</span>`;
if(r>=70) return `<span class="badge badge-amber">${r}%</span>`;
return `<span class="badge badge-red">${r}%</span>`;
}
let html=`<table><thead><tr>
<th>Подразделение</th><th>Нас. пункт</th><th>Регион</th>
<th>Месяц</th><th>Год</th><th>План</th><th>Факт</th>
<th>% исп.</th><th>№ Указания</th><th>Оформил</th>
<th>Акт приостановки</th><th></th>
</tr></thead><tbody>`;
if(!list.length) html+='<tr><td colspan="12" class="empty">Нет записей</td></tr>';
else list.forEach(e=>{
html+=`<tr>
<td><strong>${esc(e.unit)}</strong></td>
<td>${esc(e.city)}</td>
<td>${esc(e.region)}</td>
<td>${esc(e.month)}</td>
<td>${e.year}</td>
<td style="text-align:center">${e.plan||0}</td>
<td style="text-align:center">${e.fact||0}</td>
<td style="text-align:center">${execBadge(e.plan,e.fact)}</td>
<td>${esc(e.directiveNo||'—')}</td>
<td>${esc(e.directiveBy||'—')}</td>
<td>${esc(e.suspensionAct||'—')}</td>
<td><div class="btn-group">
<button class="btn btn-sm btn-outline" onclick="editEntry('${e.id}')">✏️</button>
<button class="btn btn-sm btn-danger" onclick="deleteEntry('${e.id}')">🗑</button>
</div></td>
</tr>`;
});
html+='</tbody></table>';
document.getElementById('dataTable').innerHTML=html;
updateFilters();
} }
function deleteViolation(id) { function updateFilters(){
if (!confirm('Удалить запись о нарушении?')) return; const units=[...new Set(entries.map(e=>e.unit).filter(Boolean))].sort();
violations = violations.filter(v => v.id !== id); const regions=[...new Set(entries.map(e=>e.region).filter(Boolean))].sort();
save('violations', violations); const years=[...new Set(entries.map(e=>e.year).filter(Boolean))].sort((a,b)=>b-a);
renderJournal();
renderDashboard(); const cu=document.getElementById('fUnit').value;
const cr=document.getElementById('fRegion').value;
const cy=document.getElementById('fYear').value;
document.getElementById('fUnit').innerHTML='<option value="all">Все подразделения</option>'+units.map(u=>`<option value="${escAttr(u)}" ${cu===u?'selected':''}>${esc(u)}</option>`).join('');
document.getElementById('fRegion').innerHTML='<option value="all">Все регионы</option>'+regions.map(r=>`<option value="${escAttr(r)}" ${cr===r?'selected':''}>${esc(r)}</option>`).join('');
document.getElementById('fYear').innerHTML='<option value="all">Все годы</option>'+years.map(y=>`<option value="${y}" ${cy===String(y)?'selected':''}>${y}</option>`).join('');
} }
/* ========== ADD ========== */ /* ========== ADD ========== */
function prepareAddForm() { function prepareAdd(){
document.getElementById('vioDate').value = new Date().toISOString().slice(0,10); document.getElementById('afUnit').value='';
document.getElementById('vioLocation').value = ''; document.getElementById('afCity').value='';
document.getElementById('vioDesc').value = ''; document.getElementById('afRegion').value='';
document.getElementById('vioResp').value = ''; document.getElementById('afMonth').value='';
document.getElementById('vioDeadline').value = ''; document.getElementById('afYear').value=new Date().getFullYear();
updatePlanSelects(); document.getElementById('afPlan').value='';
const typeSel = document.getElementById('vioType'); document.getElementById('afFact').value='';
typeSel.innerHTML = ''; document.getElementById('afDirNo').value='';
VIOLATION_TYPES.forEach(t => { typeSel.innerHTML += `<option value="${esc(t)}">${t}</option>`; }); document.getElementById('afDirBy').value='';
editingViolationId = null; document.getElementById('afSusp').value='';
} }
function updatePlanSelects() { function addEntry(){
const html = '<option value="">— не привязано —</option>' + planItems.map(p => `<option value="${p.id}">${esc(p.name)}</option>`).join(''); const unit=document.getElementById('afUnit').value.trim();
document.getElementById('vioPlan').innerHTML = html; const city=document.getElementById('afCity').value.trim();
const region=document.getElementById('afRegion').value.trim();
const month=document.getElementById('afMonth').value;
const year=document.getElementById('afYear').value;
const plan=parseInt(document.getElementById('afPlan').value)||0;
const fact=parseInt(document.getElementById('afFact').value)||0;
const dirNo=document.getElementById('afDirNo').value.trim();
const dirBy=document.getElementById('afDirBy').value.trim();
const susp=document.getElementById('afSusp').value.trim();
if(!unit){ alert('Укажите наименование структурного подразделения'); return; }
if(!month){ alert('Выберите месяц'); return; }
if(!year){ alert('Укажите год'); return; }
entries.push({id:genId(),unit,city,region,month,year:+year,plan,fact,directiveNo:dirNo,directiveBy:dirBy,suspensionAct:susp});
save('ot_entries',entries);
prepareAdd();
renderDashboard();
alert('Запись сохранена!');
} }
function editViolation(id) { /* ========== EDIT ========== */
const v = violations.find(x => x.id === id); function editEntry(id){
if (!v) return; const e=entries.find(x=>x.id===id); if(!e) return;
editingViolationId = id; document.getElementById('editModalContent').innerHTML=`
<h3>Редактировать запись</h3>
document.getElementById('editModalContent').innerHTML = ` <div class="form-row">
<h3>Редактировать нарушение</h3> <div class="form-group"><label>Подразделение</label><input id="evUnit" value="${escAttr(e.unit)}"></div>
<div class="form-group"><label>Дата</label><input type="date" id="evDate" value="${v.date}"></div> <div class="form-group"><label>Нас. пункт</label><input id="evCity" value="${escAttr(e.city)}"></div>
<div class="form-group"><label>Место</label><input id="evLocation" value="${escAttr(v.location)}"></div>
<div class="form-group"><label>Вид нарушения</label><select id="evType">${VIOLATION_TYPES.map(t => `<option value="${escAttr(t)}" ${t===v.type?'selected':''}>${t}</option>`).join('')}</select></div>
<div class="form-group"><label>Описание</label><textarea id="evDesc" rows="3">${esc(v.description)}</textarea></div>
<div class="form-group"><label>Ответственный</label><input id="evResp" value="${escAttr(v.responsible||'')}"></div>
<div class="form-group"><label>Срок</label><input type="date" id="evDeadline" value="${v.deadline||''}"></div>
<div class="form-group"><label>Статус</label>
<select id="evStatus">
<option value="detected" ${v.status==='detected'?'selected':''}>Выявлено</option>
<option value="in_progress" ${v.status==='in_progress'?'selected':''}>В работе</option>
<option value="resolved" ${v.status==='resolved'?'selected':''}>Устранено</option>
</select>
</div> </div>
<div class="form-row">
<div class="form-group"><label>Регион</label><input id="evRegion" value="${escAttr(e.region)}"></div>
<div class="form-group"><label>Месяц</label><select id="evMonth">${MONTHS.map(m=>`<option value="${m}" ${m===e.month?'selected':''}>${m}</option>`).join('')}</select></div>
</div>
<div class="form-row">
<div class="form-group"><label>Год</label><input type="number" id="evYear" value="${e.year}"></div>
</div>
<div class="form-row">
<div class="form-group"><label>План</label><input type="number" id="evPlan" value="${e.plan}"></div>
<div class="form-group"><label>Факт</label><input type="number" id="evFact" value="${e.fact}"></div>
</div>
<div class="form-row">
<div class="form-group"><label>№ Указания</label><input id="evDirNo" value="${escAttr(e.directiveNo||'')}"></div>
<div class="form-group"><label>Оформил</label><input id="evDirBy" value="${escAttr(e.directiveBy||'')}"></div>
</div>
<div class="form-group"><label>Акт приостановки</label><input id="evSusp" value="${escAttr(e.suspensionAct||'')}"></div>
<div class="modal-actions"> <div class="modal-actions">
<button class="btn btn-outline" onclick="closeEditModal()">Отмена</button> <button class="btn btn-outline" onclick="closeEditModal()">Отмена</button>
<button class="btn btn-primary" onclick="saveEditViolation('${v.id}')">Сохранить</button> <button class="btn btn-primary" onclick="saveEdit('${id}')">Сохранить</button>
</div> </div>
`; `;
document.getElementById('editModal').style.display = 'flex'; document.getElementById('editModal').style.display='flex';
} }
function closeEditModal() { function closeEditModal(){ document.getElementById('editModal').style.display='none' }
document.getElementById('editModal').style.display = 'none';
editingViolationId = null;
}
function saveEditViolation(id) { function saveEdit(id){
const status = document.getElementById('evStatus').value; entries=entries.map(e=>e.id===id?{
violations = violations.map(v => v.id === id ? { ...e,
...v, unit:document.getElementById('evUnit').value.trim(),
date: document.getElementById('evDate').value, city:document.getElementById('evCity').value.trim(),
location: document.getElementById('evLocation').value.trim(), region:document.getElementById('evRegion').value.trim(),
type: document.getElementById('evType').value, month:document.getElementById('evMonth').value,
description: document.getElementById('evDesc').value.trim(), year:+document.getElementById('evYear').value,
responsible: document.getElementById('evResp').value.trim(), plan:+document.getElementById('evPlan').value||0,
deadline: document.getElementById('evDeadline').value, fact:+document.getElementById('evFact').value||0,
status, directiveNo:document.getElementById('evDirNo').value.trim(),
resolvedDate: status === 'resolved' ? new Date().toISOString().slice(0,10) : v.resolvedDate directiveBy:document.getElementById('evDirBy').value.trim(),
} : v); suspensionAct:document.getElementById('evSusp').value.trim()
save('violations', violations); }:e);
save('ot_entries',entries);
closeEditModal(); closeEditModal();
renderJournal(); renderTable();
renderDashboard(); renderDashboard();
} }
/* ========== ADD VIOLATION ========== */ function deleteEntry(id){
function addViolation() { if(!confirm('Удалить запись?')) return;
const date = document.getElementById('vioDate').value; entries=entries.filter(e=>e.id!==id);
const location = document.getElementById('vioLocation').value.trim(); save('ot_entries',entries);
const type = document.getElementById('vioType').value; renderTable();
const description = document.getElementById('vioDesc').value.trim();
const responsible = document.getElementById('vioResp').value.trim();
const deadline = document.getElementById('vioDeadline').value;
const planId = document.getElementById('vioPlan').value;
if (!date) { alert('Выберите дату'); return; }
if (!location) { alert('Укажите место'); return; }
if (!description) { alert('Опишите нарушение'); return; }
const entry = {
id: genId(),
date,
location,
type,
description,
responsible,
deadline,
status: 'detected',
planId: planId || null,
resolvedDate: null
};
violations.push(entry);
save('violations', violations);
prepareAddForm();
renderDashboard(); renderDashboard();
alert('Нарушение сохранено!');
} }
/* ========== HELPERS ========== */ function esc(s){ return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;') }
function statusBadge(s) { function escAttr(s){ return String(s||'').replace(/&/g,'&amp;').replace(/"/g,'&quot;') }
const labels = { detected: ['badge-red','Выявлено'], in_progress: ['badge-amber','В работе'], resolved: ['badge-green','Устранено'] };
const [cls, label] = labels[s] || ['',''];
return `<span class="badge ${cls}">${label}</span>`;
}
function esc(s) { return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
function escAttr(s) { return String(s||'').replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
/* ========== INIT ========== */ /* INIT */
updateFilterOptions();
renderDashboard(); renderDashboard();
</script> </script>
</body> </body>
</html> </html>