martin/RollCalcPython
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine capacity summary and analysis presentation

Browse Source
This commit is contained in:
admin
2026-07-27 15:21:02 +02:00
parent 1827c6de6c
commit 1ac9b08233
1 changed files with 61 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/roll_calculator.html
+61 -27
View File
@@ -289,6 +289,23 @@
border-left: 4px solid #2BAC70; border-left: 4px solid #2BAC70;
} }
.lo-results-summary h4 { margin-top: 0; color: #333; font-size: 14px; margin-bottom: 12px; } .lo-results-summary h4 { margin-top: 0; color: #333; font-size: 14px; margin-bottom: 12px; }
.lo-summary-section {
padding-top: 12px;
margin-top: 12px;
border-top: 1px solid #e6ece9;
}
.lo-summary-section:first-of-type {
padding-top: 0;
margin-top: 0;
border-top: 0;
}
.lo-summary-section-title {
margin-bottom: 8px;
color: #1F5438;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}
.lo-summary-item { .lo-summary-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -415,6 +432,11 @@
} }
.lo-sideview-section.show { display: block; } .lo-sideview-section.show { display: block; }
.lo-sideview-section h4 { margin: 0 0 12px 0; font-size: 14px; color: #333; } .lo-sideview-section h4 { margin: 0 0 12px 0; font-size: 14px; color: #333; }
.lo-sideview-context {
margin: -6px 0 12px;
color: #666;
font-size: 12px;
}
.lo-sideview-wrap { .lo-sideview-wrap {
background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 4px; overflow: hidden; background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 4px; overflow: hidden;
} }
@@ -827,32 +849,43 @@
<div class="lo-results-summary"> <div class="lo-results-summary">
<h4>Capacity Summary:</h4> <h4>Capacity Summary:</h4>
<div class="lo-summary-item lo-governing-summary"> <div class="lo-summary-section">
<span><strong>Governing Constraint:</strong></span> <div class="lo-summary-section-title">Governing Constraint</div>
<span id="limitingFactorValue" class="lo-value-highlight">–</span> <div class="lo-summary-item lo-governing-summary">
</div> <span><strong>Constraint:</strong></span>
<div class="lo-summary-item"> <span id="limitingFactorValue" class="lo-value-highlight">–</span>
<span><strong>Total Rolls:</strong></span>
<div style="text-align:right;">
<span id="totalRollsValue" class="lo-value-highlight">–</span>
<small id="rollsDetailValue" style="display:block;color:#888;"></small>
</div> </div>
</div> </div>
<div class="lo-summary-item">
<span><strong>Utilization:</strong></span> <div class="lo-summary-section">
<div class="lo-util-group"> <div class="lo-summary-section-title">Transport Result</div>
<div>Weight: <span id="weightUtilValue" class="lo-value-number">–</span> %</div> <div class="lo-summary-item">
<div>Volume: <span id="volumeUtilValue" class="lo-value-number">–</span> %</div> <span><strong>Total Rolls:</strong></span>
<div>Product: <span id="productM2Value" class="lo-value-number">–</span> m²</div> <div style="text-align:right;">
<span id="totalRollsValue" class="lo-value-highlight">–</span>
<small id="rollsDetailValue" style="display:block;color:#888;"></small>
</div>
</div>
<div class="lo-summary-item">
<span><strong>Utilization:</strong></span>
<div class="lo-util-group">
<div>Weight Utilization: <span id="weightUtilValue" class="lo-value-number">–</span> %</div>
<div>Volume Utilization: <span id="volumeUtilValue" class="lo-value-number">–</span> %</div>
<div>Transported Product Area: <span id="productM2Value" class="lo-value-number">–</span> m²</div>
</div>
</div> </div>
</div> </div>
<div class="lo-summary-item">
<span><strong>Remaining Capacity:</strong></span> <div class="lo-summary-section">
<div class="lo-util-group"> <div class="lo-summary-section-title">Remaining Capacity</div>
<div>Payload: <span id="remainingPayloadValue" class="lo-value-number">–</span> kg</div> <div class="lo-summary-item">
<div>Unused Payload: <span id="unusedPayloadValue" class="lo-value-number">–</span> %</div> <span><strong>Remaining Capacity:</strong></span>
<div>Unused Volume: <span id="unusedVolumeValue" class="lo-value-number">–</span> %</div> <div class="lo-util-group">
<div id="capacityInterpretationValue" class="lo-reserve-note"></div> <div>Remaining Payload: <span id="remainingPayloadValue" class="lo-value-number">–</span> kg</div>
<div>Unused Payload: <span id="unusedPayloadValue" class="lo-value-number">–</span> %</div>
<div>Unused Volume: <span id="unusedVolumeValue" class="lo-value-number">–</span> %</div>
<div id="capacityInterpretationValue" class="lo-reserve-note"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -863,8 +896,8 @@
<thead> <thead>
<tr> <tr>
<th>Constraint</th> <th>Constraint</th>
<th>Theoretical Max Rolls</th> <th>Max Rolls</th>
<th>Theoretical Total Weight</th> <th>Total Weight</th>
<th>Transported Area [m²]</th> <th>Transported Area [m²]</th>
<th>Payload Util. %</th> <th>Payload Util. %</th>
</tr> </tr>
@@ -875,6 +908,7 @@
<div class="lo-sideview-section" id="sideViewSection"> <div class="lo-sideview-section" id="sideViewSection">
<h4>🔍 Front View – Cross-Section</h4> <h4>🔍 Front View – Cross-Section</h4>
<p class="lo-sideview-context">Cross-section of the actual loading configuration.</p>
<div class="lo-sideview-wrap"> <div class="lo-sideview-wrap">
<svg id="sideViewSVG" width="100%" viewBox="0 0 800 300" xmlns="http://www.w3.org/2000/svg"> <svg id="sideViewSVG" width="100%" viewBox="0 0 800 300" xmlns="http://www.w3.org/2000/svg">
<text x="400" y="130" text-anchor="middle" fill="#aaa" font-size="14">Run a calculation to see the side view.</text> <text x="400" y="130" text-anchor="middle" fill="#aaa" font-size="14">Run a calculation to see the side view.</text>
@@ -1382,9 +1416,9 @@ class LoadOptimizerUI {
const unusedPayload = Math.max(0, 100 - res.utilizationWeight); const unusedPayload = Math.max(0, 100 - res.utilizationWeight);
const unusedVolume = Math.max(0, 100 - res.utilizationVolume); const unusedVolume = Math.max(0, 100 - res.utilizationVolume);
const interpretations = { const interpretations = {
geometry: 'Payload remains available; no additional roll fits geometrically.', geometry: 'Geometry prevents loading additional rolls although payload capacity remains available.',
weight: 'Payload limit is reached before volume or geometry.', weight: 'Payload limit is reached before the available geometry or volume is fully used.',
volume: 'Volume capacity is reached before payload or geometry.' volume: 'Volume capacity is reached before payload or geometric capacity is fully used.'
}; };
document.getElementById('limitingFactorValue').textContent = res.limiting.name; document.getElementById('limitingFactorValue').textContent = res.limiting.name;
document.getElementById('totalRollsValue').textContent = res.finalRolls; document.getElementById('totalRollsValue').textContent = res.finalRolls;