70 lines
2.5 KiB
HTML
70 lines
2.5 KiB
HTML
|
{#
|
|||
|
|
matrix_mini.html — GWÖ-Matrix 5×5 Minidarstellung
|
|||
|
|
|
|||
|
|
Props:
|
|||
|
|
matrix : Dict mit Schlüsseln A1–E5, je Wert ein Dict:
|
|||
|
|
{ "rating": int (-2 bis 2), "symbol": str ("++"|"+"|"○"|"−"|"−−") }
|
|||
|
|
Fehlende Felder werden als neutral (○) dargestellt.
|
|||
|
|
|
|||
|
|
Farbstufen-Klassen (CSS in v2.css):
|
|||
|
|
m-pp : rating 2 (++ stark fördernd) — ECG-Grün auf Weiß
|
|||
|
|
m-p : rating 1 (+ fördernd) — Grün-Tint
|
|||
|
|
m-0 : rating 0 (○ neutral) — Weiß
|
|||
|
|
m-n : rating -1 (− widersprechend) — Rot-Tint
|
|||
|
|
m-nn : rating -2 (−− stark widerspr.)— Dunkelrot
|
|||
|
|
|
|||
|
|
Verwendung:
|
|||
|
|
{% from "v2/components/matrix_mini.html" import matrix_mini %}
|
|||
|
|
{{ matrix_mini(assessment.matrix) }}
|
|||
|
|
#}
|
|||
|
|
|
|||
|
|
{% macro matrix_mini(matrix) %}
|
|||
|
|
{% set rows = ["A", "B", "C", "D", "E"] %}
|
|||
|
|
{% set cols = ["1", "2", "3", "4", "5"] %}
|
|||
|
|
{% set row_labels = {"A": "A · Liefer.", "B": "B · Finanzen", "C": "C · Verwalt.", "D": "D · Bürger", "E": "E · Gesell."} %}
|
|||
|
|
{% set col_labels = {"1": "Würde", "2": "Solid.", "3": "Ökol.", "4": "Soz.", "5": "Trans."} %}
|
|||
|
|
|
|||
|
|
{% macro rating_class(r) %}
|
|||
|
|
{% if r == 2 %}m-pp
|
|||
|
|
{% elif r == 1 %}m-p
|
|||
|
|
{% elif r == -1 %}m-n
|
|||
|
|
{% elif r == -2 %}m-nn
|
|||
|
|
{% else %}m-0{% endif %}
|
|||
|
|
{% endmacro %}
|
|||
|
|
|
|||
|
|
<div class="v2-matrix-mini" role="table" aria-label="GWÖ-Matrix 5×5">
|
|||
|
|
{# Header-Zeile #}
|
|||
|
|
<div class="hdr" role="columnheader"></div>
|
|||
|
|
{% for c in cols %}
|
|||
|
|
<div class="hdr" role="columnheader">{{ col_labels[c] }}</div>
|
|||
|
|
{% endfor %}
|
|||
|
|
|
|||
|
|
{# Daten-Zeilen #}
|
|||
|
|
{% for r in rows %}
|
|||
|
|
<div class="rhdr" role="rowheader">{{ row_labels[r] }}</div>
|
|||
|
|
{% for c in cols %}
|
|||
|
|
{% set key = r ~ c %}
|
|||
|
|
{% set cell = matrix[key] if matrix is defined and key in matrix else {} %}
|
|||
|
|
{% set rating = cell.rating | default(0) | int %}
|
|||
|
|
{% set symbol = cell.symbol | default("○") %}
|
|||
|
|
<div class="{{ rating_class(rating) | trim }}"
|
|||
|
|
role="cell"
|
|||
|
|
title="{{ key }}: {{ symbol }}"
|
|||
|
|
aria-label="{{ key }}, {{ symbol }}, {% if rating == 2 %}stark fördernd{% elif rating == 1 %}fördernd{% elif rating == 0 %}neutral{% elif rating == -1 %}widersprechend{% else %}stark widersprechend{% endif %}"
|
|||
|
|
onclick="if(typeof v2ShowMatrixFieldInfo==='function')v2ShowMatrixFieldInfo('{{ key }}')"
|
|||
|
|
style="cursor:pointer;">
|
|||
|
|
{{ symbol }}
|
|||
|
|
</div>
|
|||
|
|
{% endfor %}
|
|||
|
|
{% endfor %}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="v2-matrix-legend" aria-hidden="true">
|
|||
|
|
<span>++ stark fördernd</span>
|
|||
|
|
<span>+ fördernd</span>
|
|||
|
|
<span>○ neutral</span>
|
|||
|
|
<span>− widersprechend</span>
|
|||
|
|
<span>−− stark widerspr.</span>
|
|||
|
|
</div>
|
|||
|
|
{% endmacro %}
|