182 lines
8 KiB
HTML
182 lines
8 KiB
HTML
{% extends "base.html" %}
|
||
{% load i18n risk_extras %}
|
||
{% block crumbs %}
|
||
<li><a href="{% url 'risks:risk_matrix' %}">{% trans "Risk Matrix" %}</a></li>
|
||
{% endblock %}
|
||
{% block content %}
|
||
<div class="erp-tabs">
|
||
<a class="is-active" data-tab="matrix">{% trans "Risk Matrix" %}</a>
|
||
<a data-tab="details">{% trans "Detail View" %}</a>
|
||
</div>
|
||
<section class="section">
|
||
<div class="box">
|
||
<!-- Panel: Matrix View -->
|
||
<div class="tab-panel" data-tab="matrix">
|
||
<table class="table is-bordered is-fullwidth has-text-centered risk-matrix-table">
|
||
<thead>
|
||
<tr>
|
||
<th class="has-text-left">{% trans "Impact" %} * {% trans "Likelihood" %}</th>
|
||
{% for likelihood in likelihoods %}
|
||
<th class="{{ likelihood.value|likelihood_class|to_bg }}">
|
||
{{ likelihood.value }} ({{ likelihood.name }}) <br> {{ likelihood.description }}
|
||
</th>
|
||
{% endfor %}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for impact in impacts reversed %}
|
||
<tr>
|
||
<th class="has-text-left {{ impact.value|impact_class|to_bg }}">{{ impact.value }} - {{ impact.name }}<br>{{ impact.description }}</th>
|
||
{% for likelihood in likelihoods %}
|
||
{% with s=impact.value|mul:likelihood.value %}
|
||
<td class="risk-matrix-cell {{ s|score_bg_class }}">
|
||
<div class="is-flex is-justify-content-center is-align-items-center">
|
||
{% if s <= 4 %}
|
||
<span class="tag is-control-verylow is-light">{% trans "Low" %} ({{ s }})</span>
|
||
{% elif s <= 8 %}
|
||
<span class="tag is-control-low is-light">{% trans "Medium" %} ({{ s }})</span>
|
||
{% elif s <= 12 %}
|
||
<span class="tag is-control-mid is-light">{% trans "High" %} ({{ s }})</span>
|
||
{% else %}
|
||
<span class="tag is-control-veryhigh is-light">{% trans "Critical" %} ({{ s }})</span>
|
||
{% endif %}
|
||
</div>
|
||
</td>
|
||
{% endwith %}
|
||
{% endfor %}
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- Panel: Details View -->
|
||
<div class="tab-panel is-hidden" data-tab="details">
|
||
<div class="level mb-3">
|
||
<div class="level-left">
|
||
<div class="level-item"><strong>{% trans "Show" %}:</strong></div>
|
||
<div class="level-item">
|
||
<div class="buttons has-addons">
|
||
<button type="button" class="button is-small is-info is-light details-toggle is-active" data-mode="gross">
|
||
{% trans "Gross" %}
|
||
</button>
|
||
<button type="button" class="button is-small is-info is-light details-toggle" data-mode="net">
|
||
{% trans "Net" %}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Gross Risk List -->
|
||
<div class="details-table" data-mode="gross">
|
||
<table class="table is-bordered is-fullwidth has-text-centered risk-matrix-table">
|
||
<thead>
|
||
<tr>
|
||
<th class="has-text-left">{% trans "Impact" %} / {% trans "Likelihood" %}</th>
|
||
{% for likelihood in likelihoods %}
|
||
<th class="{{ likelihood.value|likelihood_class|to_bg }}">{{ likelihood.value }} ({{ likelihood.name }}) <br> {{ likelihood.description }}</th>
|
||
{% endfor %}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for impact in impacts reversed %}
|
||
<tr>
|
||
<th class="has-text-left {{ impact.value|impact_class|to_bg }}">{{ impact.value }} - {{ impact.name }}<br>{{ impact.description }}</th>
|
||
{% for likelihood in likelihoods %}
|
||
{% with row=gross_matrix|dict_get:impact.value %}
|
||
{% with cell=row|dict_get:likelihood.value %}
|
||
{% with s=impact.value|mul:likelihood.value %}
|
||
<td class="risk-matrix-cell {{ likelihood|likelihood_class }}">
|
||
{% if cell %}
|
||
<ul class="risk-cell-list">
|
||
{% for risk in cell %}
|
||
<li style="list-style:none;">
|
||
<a href="{% url 'risks:show_risk' risk.id %}" class="tag">{{ risk.title }}</a>
|
||
</li>
|
||
{% endfor %}
|
||
</ul>
|
||
{% else %}
|
||
<span class="has-text-grey">–</span>
|
||
{% endif %}
|
||
</td>
|
||
{% endwith %}
|
||
{% endwith %}
|
||
{% endwith %}
|
||
{% endfor %}
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- Net Risk List -->
|
||
<div class="details-table is-hidden" data-mode="net">
|
||
<table class="table is-bordered is-fullwidth has-text-centered risk-matrix-table">
|
||
<thead>
|
||
<tr>
|
||
<th class="has-text-left">{% trans "Impact" %} / {% trans "Likelihood" %}</th>
|
||
{% for likelihood in likelihoods %}
|
||
<th class="{{ likelihood.value|likelihood_class|to_bg }}">{{ likelihood.value }} ({{ likelihood.name }}) <br> {{ likelihood.description }}</th>
|
||
{% endfor %}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for impact in impacts reversed %}
|
||
<tr>
|
||
<th class="has-text-left {{ impact.value|impact_class|to_bg }}">{{ impact.value }} - {{ impact.name }}<br>{{ impact.description }}</th>
|
||
{% for likelihood in likelihoods %}
|
||
{% with row=net_matrix|dict_get:impact.value %}
|
||
{% with cell=row|dict_get:likelihood.value %}
|
||
{% with s=impact.value|mul:likelihood.value %}
|
||
<td class="risk-matrix-cell {{ likelihood|likelihood_class }}">
|
||
{% if cell %}
|
||
<ul class="risk-cell-list">
|
||
{% for risk in cell %}
|
||
<li style="list-style:none;">
|
||
<a href="{% url 'risks:show_risk' risk.id %}" class="tag">{{ risk.title }}</a>
|
||
</li>
|
||
{% endfor %}
|
||
</ul>
|
||
{% else %}
|
||
<span class="has-text-grey">–</span>
|
||
{% endif %}
|
||
</td>
|
||
{% endwith %}
|
||
{% endwith %}
|
||
{% endwith %}
|
||
{% endfor %}
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const tabs = document.querySelectorAll('.erp-tabs a[data-tab]');
|
||
const panels = document.querySelectorAll('.tab-panel');
|
||
tabs.forEach(tab => {
|
||
tab.addEventListener('click', e => {
|
||
e.preventDefault();
|
||
tabs.forEach(x => x.classList.remove('is-active'));
|
||
panels.forEach(p => p.classList.add('is-hidden'));
|
||
tab.classList.add('is-active');
|
||
const target = tab.getAttribute('data-tab');
|
||
const activePanel = document.querySelector(`.tab-panel[data-tab="${target}"]`);
|
||
if (activePanel) activePanel.classList.remove('is-hidden');
|
||
});
|
||
});
|
||
const toggles = document.querySelectorAll('.details-toggle');
|
||
const tables = document.querySelectorAll('.details-table');
|
||
toggles.forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
const mode = btn.getAttribute('data-mode');
|
||
toggles.forEach(b => b.classList.toggle('is-active', b === btn));
|
||
tables.forEach(t => {
|
||
t.classList.toggle('is-hidden', t.getAttribute('data-mode') !== mode);
|
||
});
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
{% endblock %}
|