55 lines
4.6 KiB
HTML
55 lines
4.6 KiB
HTML
{% extends "page.html" %}
|
|
{% block page_content %}
|
|
<div class="card">
|
|
<div class="card-header"><h2>SLA контракты</h2>
|
|
<button class="btn btn-primary btn-sm" onclick="document.getElementById('modal-sla').classList.add('open')">+ Добавить</button>
|
|
</div>
|
|
<form method="get" class="filter-bar">
|
|
<select name="object_id" onchange="this.form.submit()"><option value="">Все объекты</option>{% for o in objects %}<option value="{{ o.id }}" {% if sel_object_id == o.id %}selected{% endif %}>{{ o.name }}</option>{% endfor %}</select>
|
|
</form>
|
|
<div class="table-wrap"><table><thead><tr><th>Объект</th><th>Уровень</th><th>Цена/мес</th><th>Период</th><th>Статус</th><th class="actions"></th></tr></thead>
|
|
<tbody>{% for sc in contracts %}<tr>
|
|
<td>{{ sc.object.name if sc.object else '' }}</td>
|
|
<td><span class="badge badge-{{ sc.service_level }}">{{ {'start':'Базовый','business':'Оптимальный','enterprise':'Максимальный'}.get(sc.service_level, sc.service_level) }}</span></td>
|
|
<td>{{ "%.2f"|format(sc.sla_price_monthly) }} ₽</td>
|
|
<td><small>{{ sc.start_date.strftime('%d.%m.%Y') if sc.start_date else '' }} — {{ sc.end_date.strftime('%d.%m.%Y') if sc.end_date else '∞' }}</small></td>
|
|
<td><span class="badge badge-{{ sc.status }}">{{ {'active':'Активен','expired':'Истёк','cancelled':'Отменён','negotiation':'Переговоры'}.get(sc.status, sc.status) }}</span></td>
|
|
<td class="actions"><button class="btn btn-secondary btn-sm" onclick="editSLA({{ sc.id }},{{ sc.object_id }},'{{ sc.service_level }}','{{ sc.sla_price_monthly if sc.sla_price_monthly is not none else '' }}','{{ sc.start_date if sc.start_date is not none else '' }}','{{ sc.end_date if sc.end_date is not none else '' }}','{{ sc.status }}')">✎</button></td>
|
|
</tr>{% endfor %}</tbody></table>
|
|
</div>
|
|
</div>
|
|
<div class="modal-overlay" id="modal-sla"><div class="modal">
|
|
<button type="button" class="modal-close" onclick="this.closest('.modal-overlay').classList.remove('open')">✕</button>
|
|
<h2 id="modal-sla-title">Новый SLA контракт</h2>
|
|
<form method="post" id="modal-sla-form" action="/service/sla/create">
|
|
<input type="hidden" name="id" id="sla-id">
|
|
<div class="form-group"><label>Объект</label><select name="object_id" id="sla-object_id" required>{% for o in objects %}<option value="{{ o.id }}">{{ o.name }}</option>{% endfor %}</select></div>
|
|
<div class="form-row">
|
|
<div class="form-group"><label>Уровень</label><select name="service_level" id="sla-service_level"><option value="start">Базовый</option><option value="business">Оптимальный</option><option value="enterprise">Максимальный</option></select></div>
|
|
<div class="form-group"><label>Цена (₽/мес)</label><input type="number" step="0.01" name="sla_price_monthly" id="sla-sla_price_monthly"></div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group"><label>Начало</label><input type="date" name="start_date" id="sla-start_date"></div>
|
|
<div class="form-group"><label>Окончание</label><input type="date" name="end_date" id="sla-end_date"></div>
|
|
</div>
|
|
<div class="form-group"><label>Статус</label><select name="status" id="sla-status"><option value="negotiation" selected>Переговоры</option><option value="active">Активен</option><option value="expired">Истёк</option><option value="cancelled">Отменён</option></select></div>
|
|
<div class="form-actions"><button type="submit" class="btn btn-primary">Сохранить</button>
|
|
<button type="button" class="btn btn-secondary" onclick="this.closest('.modal-overlay').classList.remove('open')">Отмена</button></div>
|
|
</form>
|
|
</div></div>
|
|
<script>
|
|
function editSLA(id,oid,sl,price,start,end,status){
|
|
document.getElementById('modal-sla').classList.add('open');
|
|
document.getElementById('modal-sla-title').textContent = 'Редактировать SLA';
|
|
document.getElementById('modal-sla-form').action = '/service/sla/edit';
|
|
document.getElementById('sla-id').value = id;
|
|
document.getElementById('sla-object_id').value = oid;
|
|
document.getElementById('sla-service_level').value = sl;
|
|
document.getElementById('sla-sla_price_monthly').value = price;
|
|
document.getElementById('sla-start_date').value = start;
|
|
document.getElementById('sla-end_date').value = end;
|
|
document.getElementById('sla-status').value = status;
|
|
}
|
|
</script>
|
|
{% endblock %}
|