302 lines
9.6 KiB
HTML
302 lines
9.6 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block content %}
|
||
<div class="spreadsheet-container">
|
||
|
||
<style>
|
||
.spreadsheet-container {
|
||
padding: 20px;
|
||
}
|
||
|
||
.sheet-navigation {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
padding: 10px;
|
||
background-color: #f8f9fa;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.sheet-navigation h2 {
|
||
margin: 0;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.sheet-navigation a,
|
||
.sheet-navigation span {
|
||
text-decoration: none;
|
||
color: #007bff;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.sheet-navigation .disabled-link {
|
||
color: #aaa;
|
||
cursor: default;
|
||
}
|
||
.indent {
|
||
padding-left: 18px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
width: 60px;
|
||
}
|
||
.top-tables {
|
||
display: flex;
|
||
gap: 20px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.table-container {
|
||
flex: 1;
|
||
background-color: #ffffff;
|
||
border-radius: 5px;
|
||
padding: 10px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.table-container h3 {
|
||
margin-top: 0;
|
||
margin-bottom: 10px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.sheet-table,
|
||
.spreadsheet-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.sheet-table th,
|
||
.sheet-table td,
|
||
.spreadsheet-table th,
|
||
.spreadsheet-table td {
|
||
border: 1px solid #dee2e6;
|
||
padding: 4px 6px;
|
||
}
|
||
|
||
.sheet-table th,
|
||
.spreadsheet-table th {
|
||
background-color: #f2f2f2;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
|
||
.row-label {
|
||
background-color: #f9f9f9;
|
||
font-weight: bold;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.number-cell {
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.sheet-table tbody tr:nth-child(even),
|
||
.spreadsheet-table tbody tr:nth-child(even) {
|
||
background-color: #fcfcfc;
|
||
}
|
||
|
||
.sheet-table tbody tr:hover,
|
||
.spreadsheet-table tbody tr:hover {
|
||
background-color: #f1f3f5;
|
||
}
|
||
|
||
.summary-row {
|
||
font-weight: bold;
|
||
background-color: #e8f4f8;
|
||
}
|
||
</style>
|
||
|
||
<div class="sheet-navigation">
|
||
<a href="{% url 'clients_list' %}">← Helium Output Übersicht</a>
|
||
<h2>
|
||
{% with first=window.0 last=window|last %}
|
||
Halbjahres-Bilanz ({{ first.1 }}/{{ first.0 }} – {{ last.1 }}/{{ last.0 }})
|
||
{% endwith %}
|
||
</h2>
|
||
{% with first=window.0 %}
|
||
<a href="{% url 'monthly_sheet' first.0 first.1 %}">Monatsblätter</a>
|
||
{% endwith %}
|
||
</div>
|
||
|
||
<div class="top-tables">
|
||
<!-- LEFT TABLE (Top Left – AG Vogel / AG Halfm / IKP) -->
|
||
<div class="table-container">
|
||
<h3>Top Left – Halbjahresbilanz</h3>
|
||
<table class="sheet-table spreadsheet-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Bezeichnung</th>
|
||
{% for c in clients_left %}
|
||
<th>{{ c }}</th>
|
||
{% endfor %}
|
||
<th>Σ</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for row in rows_left %}
|
||
<tr>
|
||
<td>{{ row.label }}</td>
|
||
{% for v in row.values %}
|
||
<td class="number-cell">
|
||
{% if row.is_percent and v is not None %}
|
||
{{ v|floatformat:4 }}
|
||
{% elif v is not None %}
|
||
{{ v|floatformat:2 }}
|
||
{% endif %}
|
||
</td>
|
||
{% endfor %}
|
||
<td class="number-cell">
|
||
{% if row.is_percent and row.total %}
|
||
{{ row.total|floatformat:4 }}
|
||
{% elif row.total is not None %}
|
||
{{ row.total|floatformat:2 }}
|
||
{% endif %}
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- RIGHT TABLE (Top Right – Dr. Fohrer / AG Buntk. / etc.) -->
|
||
<div class="table-container">
|
||
<h3>Top Right – Halbjahresbilanz</h3>
|
||
<table class="sheet-table spreadsheet-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Bezeichnung</th>
|
||
{% for c in clients_right %}
|
||
<th>{{ c }}</th>
|
||
{% endfor %}
|
||
<th>Σ</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for row in rows_right %}
|
||
<tr>
|
||
<td>{{ row.label }}</td>
|
||
{% for v in row.values %}
|
||
<td class="number-cell">
|
||
{% if row.is_text_row %}
|
||
{{ v }}
|
||
{% elif row.is_percent and v is not None %}
|
||
{{ v|floatformat:4 }}
|
||
{% elif v is not None %}
|
||
{{ v|floatformat:2 }}
|
||
{% endif %}
|
||
</td>
|
||
{% endfor %}
|
||
<td class="number-cell">
|
||
{% if row.is_text_row %}
|
||
{{ row.total }}
|
||
{% elif row.is_percent and row.total %}
|
||
{{ row.total|floatformat:4 }}
|
||
{% elif row.total is not None %}
|
||
{{ row.total|floatformat:2 }}
|
||
{% endif %}
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="table-container">
|
||
<h3>Summe</h3>
|
||
<table class="sheet-table spreadsheet-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Bezeichnung</th>
|
||
<th>Σ</th>
|
||
<th>Licht-wiese</th>
|
||
<th>Chemie</th>
|
||
<th>MaWi</th>
|
||
<th>M3</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for r in rows_sum %}
|
||
<tr>
|
||
<td>{{ r.label }}</td>
|
||
<td class="sum-col">
|
||
{% if r.is_percent %}
|
||
{{ r.total|floatformat:2 }}%
|
||
{% else %}
|
||
{{ r.total|floatformat:2 }}
|
||
{% endif %}
|
||
</td>
|
||
|
||
<td class="sum-col">
|
||
{% if r.is_percent %}
|
||
{{ r.lichtwiese|floatformat:2 }}%
|
||
{% else %}
|
||
{{ r.lichtwiese|floatformat:2 }}
|
||
{% endif %}
|
||
</td>
|
||
|
||
<td class="sum-col">
|
||
{% if r.is_percent %}
|
||
{{ r.chemie|floatformat:2 }}%
|
||
{% else %}
|
||
{{ r.chemie|floatformat:2 }}
|
||
{% endif %}
|
||
</td>
|
||
|
||
<td class="sum-col">
|
||
{% if r.is_percent %}
|
||
{{ r.mawi|floatformat:2 }}%
|
||
{% else %}
|
||
{{ r.mawi|floatformat:2 }}
|
||
{% endif %}
|
||
</td>
|
||
|
||
<td class="sum-col">
|
||
{% if r.is_percent %}
|
||
{{ r.m3|floatformat:2 }}%
|
||
{% else %}
|
||
{{ r.m3|floatformat:2 }}
|
||
{% endif %}
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="table-container" style="margin-top: 20px;">
|
||
<h3>Bottom Table 1 – Bilanz (read-only)</h3>
|
||
|
||
<table class="sheet-table spreadsheet-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Gasspeicher</th>
|
||
<th>Volumen</th>
|
||
<th>bar</th>
|
||
<th>korrigiert</th>
|
||
<th>Nm³</th>
|
||
<th>Lit. LHe</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
{% for r in bottom1_rows %}
|
||
<tr class="{% if r.is_total %}summary-row{% endif %}">
|
||
<td class="row-label {% if r.indent %}indent{% endif %}">{{ r.label }}</td>
|
||
<td class="number-cell">{{ r.volume|floatformat:1 }}</td>
|
||
<td class="number-cell">{{ r.bar|floatformat:0 }}</td>
|
||
<td class="number-cell">{{ r.korr|floatformat:1 }}</td>
|
||
<td class="number-cell">{{ r.nm3|floatformat:0 }}</td>
|
||
<td class="number-cell">{{ r.lhe|floatformat:0 }}</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div> {# closes .spreadsheet-container #}
|
||
{% endblock %}
|