254 lines
7.8 KiB
HTML
254 lines
7.8 KiB
HTML
{% extends "_layout.html" %}
|
|
|
|
{% block content %}
|
|
<div class="header-section">
|
|
<h2>Benchmark Reports</h2>
|
|
|
|
<div class="table-controls">
|
|
<form id="sortForm" method="get" action="">
|
|
<input type="hidden" name="sort" id="sortInput" value="{{ current_sort }}">
|
|
<input type="hidden" name="order" id="orderInput" value="{{ current_order }}">
|
|
|
|
<div class="control-group">
|
|
<label>Sort by:</label>
|
|
<div class="dropdown" id="sortDropdown">
|
|
<button class="dropdown-trigger select-styled" type="button" onclick="toggleSortDropdown(event)">
|
|
<span>
|
|
{% if current_sort == "score" %}Score
|
|
{% elif current_sort == "single" %}Single Thread
|
|
{% elif current_sort == "multi" %}Multi Thread
|
|
{% elif current_sort == "ram" %}RAM Amount
|
|
{% elif current_sort == "threads" %}Thread Count
|
|
{% elif current_sort == "time" %}Time Ago
|
|
{% endif %}
|
|
</span>
|
|
<i class="fa-solid fa-chevron-down chevron"></i>
|
|
</button>
|
|
|
|
<div class="dropdown-menu">
|
|
<div class="dropdown-header">Sort Benchmarks By</div>
|
|
<a href="javascript:void(0)" onclick="selectSort('score')">
|
|
<span class="link-title"><i class="fa-solid fa-award fa-fw"></i> Score</span>
|
|
<span class="link-desc">(Singlethread + Multithread) / 2</span>
|
|
</a>
|
|
<a href="javascript:void(0)" onclick="selectSort('single')">
|
|
<span class="link-title"><i class="fa-solid fa-microchip fa-fw"></i> Singlethread</span>
|
|
<span class="link-desc">Single-core efficiency</span>
|
|
</a>
|
|
<a href="javascript:void(0)" onclick="selectSort('multi')">
|
|
<span class="link-title"><i class="fa-solid fa-microchip fa-fw"></i> Multithread</span>
|
|
<span class="link-desc">Multi-core efficiency</span>
|
|
</a>
|
|
<a href="javascript:void(0)" onclick="selectSort('ram')">
|
|
<span class="link-title"><i class="fa-solid fa-memory fa-fw"></i> RAM Amount</span>
|
|
<span class="link-desc">System memory capacity</span>
|
|
</a>
|
|
<a href="javascript:void(0)" onclick="selectSort('threads')">
|
|
<span class="link-title"><i class="fa-solid fa-microchip fa-fw"></i> Thread Count</span>
|
|
<span class="link-desc">Total logical cores</span>
|
|
</a>
|
|
<a href="javascript:void(0)" onclick="selectSort('time')">
|
|
<span class="link-title"><i class="fa-solid fa-clock fa-fw"></i> Time Ago</span>
|
|
<span class="link-desc">Newest reports first</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<button type="button" class="order-toggle" onclick="toggleOrder()">
|
|
<span>
|
|
{% if current_order == "desc" %}Descending{% else %}Ascending{% endif %}
|
|
</span>
|
|
<i class="fa-solid {% if current_order == 'desc' %}fa-arrow-down-wide-short{% else %}fa-arrow-up-short-wide{% endif %}"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>CPU Score</th>
|
|
<th>Threads</th>
|
|
<th>RAM</th>
|
|
<th>OS</th>
|
|
<th>Hostname</th>
|
|
<th>Time</th>
|
|
<th>Note</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for report in reports %}
|
|
<tr class="clickable-row" onclick="window.location='report/{{ report.id }}';">
|
|
<td data-label="MT Score" class="score-cell">
|
|
<a href="report/{{ report.id }}">{{ report.score }}</a>
|
|
</td>
|
|
<td data-label="Threads">{{ report.cores }}</td>
|
|
<td data-label="RAM">{{ report.ram }}</td>
|
|
<td data-label="OS">{{ report.os | truncate(length=30) }}</td>
|
|
<td data-label="Hostname">{{ report.hostname }}</td>
|
|
<td data-label="Time">{{ report.time_ago }}
|
|
{% if report.is_new %}
|
|
<span class="new-badge">NEW</span>
|
|
{% endif %}
|
|
</td>
|
|
<td data-label="Note" class="signature-cell">{{ report.signature }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
<script>
|
|
function toggleSortDropdown(event) {
|
|
event.stopPropagation();
|
|
document.getElementById('sortDropdown').classList.toggle('open');
|
|
}
|
|
|
|
function selectSort(value) {
|
|
document.getElementById('sortInput').value = value;
|
|
document.getElementById('sortForm').submit();
|
|
}
|
|
|
|
function toggleOrder() {
|
|
const orderInput = document.getElementById('orderInput');
|
|
orderInput.value = orderInput.value === 'desc' ? 'asc' : 'desc';
|
|
document.getElementById('sortForm').submit();
|
|
}
|
|
|
|
window.addEventListener('click', function(event) {
|
|
if (!event.target.closest('#sortDropdown')) {
|
|
const dropdown = document.getElementById('sortDropdown');
|
|
if (dropdown) dropdown.classList.remove('open');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.clickable-row {
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.clickable-row:hover {
|
|
background-color: var(--hover-color);
|
|
}
|
|
|
|
.clickable-row a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.score-cell {
|
|
color: var(--primary-color);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.signature-cell {
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
font-size: 0.8rem;
|
|
max-width: 400px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.new-badge {
|
|
font-size: 0.6rem;
|
|
padding: 3px;
|
|
color: var(--primary-text);
|
|
border: 1px solid var(--primary-color);
|
|
background: var(--primary-soft);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.header-section {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 25px;
|
|
margin-bottom: 2rem;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.header-section h2 { margin: 0; }
|
|
|
|
.table-controls form {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
background: var(--bg-card);
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-color);
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.control-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.9rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.select-styled {
|
|
min-width: 160px;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.select-styled, .order-toggle {
|
|
background: white;
|
|
border: 1px solid var(--border-color);
|
|
padding: 0 0.8rem;
|
|
border-radius: 6px;
|
|
color: var(--text-dark);
|
|
font-weight: 500;
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.7rem;
|
|
height: 38px;
|
|
box-sizing: border-box;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.select-styled:hover {
|
|
background: var(--bg-main);
|
|
}
|
|
|
|
.select-styled .chevron {
|
|
font-size: 0.7rem;
|
|
opacity: 0.5;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.dropdown.open .chevron {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.order-toggle {
|
|
white-space: nowrap;
|
|
background: white;
|
|
justify-content: center;
|
|
}
|
|
|
|
.select-styled:hover, .order-toggle:hover {
|
|
background: var(--bg-main);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
@media screen and (max-width: 640px) {
|
|
.table-controls form {
|
|
gap: 0.6rem;
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|