Started conversion to bootstrap for the frontend framework

This commit is contained in:
2025-07-01 14:12:59 -04:00
parent 604025179c
commit 03dab84224
5 changed files with 76 additions and 60 deletions

View File

@ -1,7 +1,6 @@
const testId = $("#results-table").data("test-id"); const testId = $("#results-table").data("test-id");
$(function () { $("#test-result-form").on("submit", function (e) {
$("#test-result-form").on("submit", function (e) {
e.preventDefault(); e.preventDefault();
const form = $(this); const form = $(this);
@ -14,7 +13,6 @@ $(function () {
form[0].reset(); form[0].reset();
} }
}); });
});
}); });
async function fetchTestBenchmarkResults(testId, benchmarkId) { async function fetchTestBenchmarkResults(testId, benchmarkId) {
@ -75,8 +73,10 @@ async function fetchTestBenchmarkResults(testId, benchmarkId) {
} }
} }
$("#results-table tbody tr").each(function (index, tr) { $(document).ready(function() {
$("#results-table tbody tr").each(function (index, tr) {
const benchmarkId = $(tr).data("benchmark-id"); const benchmarkId = $(tr).data("benchmark-id");
console.log("Fetching results for benchmark id: " + benchmarkId); console.log("Fetching results for benchmark id: " + benchmarkId);
fetchTestBenchmarkResults(testId, benchmarkId); fetchTestBenchmarkResults(testId, benchmarkId);
});
}); });

View File

@ -1,5 +1,5 @@
$primary-color: teal; $primary-color: teal;
body { body {
background: #eee; background: white;
} }

View File

@ -5,9 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{% block title %}{% endblock %} | Leviathan</title> <title>{% block title %}{% endblock %} | Leviathan</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/eye.css"> <link rel="stylesheet" href="/css/eye.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" charset="utf-8"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.7/js/bootstrap.min.js" charset="utf-8"></script>
<script src="/js/scar.js"></script>
{% block scripts %}{% endblock %} {% block scripts %}{% endblock %}
</head> </head>
<body> <body>

View File

@ -1,11 +1,29 @@
<nav id="main-nav"> <nav id="main-nav" class="navbar navbar-expand-md bg-body-secondary mb-3">
<div class="nav-left"> <div class="container-fluid">
<h4>Leviathan</h4> <a class="navbar-brand mb-0 h1" href="#">Leviathan</a>
<ul>
<li><a href="/">Dashboard</a></li> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<li><a href="/test">Tests</a></li> <span class="navbar-toggler-icon"></span>
<li><a href="/hardware">Hardware</a></li> </button>
<li><a href="/benchmark">Benchmarks</a></li>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link" href="/">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/benchmark">Benchmarks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/hardware">Hardware</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/test">Test</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/report">Reports</a>
</li>
</ul> </ul>
</div> </div>
</div>
</nav> </nav>

View File

@ -8,51 +8,47 @@
{% block content %} {% block content %}
<div class="row"> <div class="row">
<div class="col-12">
<h2>Test: {{ test.title }}</h2> <h2>Test: {{ test.title }}</h2>
<h4>Hardware tested: <a href="/hardware/{{ test.getHardware().id }}">{{ test.getHardware().name }}</a></h4> <h4>Hardware tested: <a href="/hardware/{{ test.getHardware().id }}">{{ test.getHardware().name }}</a></h4>
</div>
</div> </div>
<hr> <hr>
<div class="row"> <div class="row">
<form id="test-result-form" class="twelve columns" action="/api/v1/result/add" method="post"> <form id="test-result-form" class="col-12" action="/api/v1/result/add" method="post">
<input type="hidden" name="result_test" value="{{ test.id }}"> <input type="hidden" name="result_test" value="{{ test.id }}">
<div class="row"> <div class="row">
<div class="four columns"> <div class="col-4">
<label for="result_benchmark"> <label class="form-label" for="result_benchmark">Benchmark:</label>
Benchmark: <select id="result_benchmark" class="form-select" name="result_benchmark">
<select class="u-full-width" id="result_benchmark" name="result_benchmark">
{% for b in test.getBenchmarks() %} {% for b in test.getBenchmarks() %}
<option value="{{ b.id }}">{{ b.name }}</option> <option value="{{ b.id }}">{{ b.name }}</option>
{% endfor %} {% endfor %}
</select> </select>
</label>
</div> </div>
<div class="two columns"> <div class="col-2">
<label for="result_avg"> <label class="form-label" for="result_avg">Average:</label>
Average: <input id="result_avg" class="form-control" type="number" name="result_avg" step="0.01" required>
<input type="number" id="result_avg" class="u-full-width" name="result_avg" step="0.01" required>
</label>
</div> </div>
<div class="two columns"> <div class="col-2">
<label for="result_min"> <label class="form-label" for="result_min">Minimum:</label>
Minimum: <input id="result_min" class="form-control" type="number" name="result_min" step="0.01">
<input type="number" id="result_min" class="u-full-width" name="result_min" step="0.01">
</label>
</div> </div>
<div class="two columns"> <div class="col-2">
<label for="result_max"> <label class="form-label" for="result_max">Maximum:</label>
Maximum: <input id="result_max" class="form-control" type="number" name="result_max" step="0.01">
<input type="number" id="result_max" class="u-full-width" name="result_max" step="0.01">
</label>
</div> </div>
<input type="submit" class="two columns" value="Submit"> <div class="col-2">
<input type="submit" class="btn btn-primary" value="Add Result">
</div>
</div> </div>
</form> </form>
</div> </div>
@ -60,10 +56,10 @@
<hr> <hr>
<div class="row"> <div class="row">
<div class="twelve columns"> <div class="col-12">
<h3>Benchmarks</h3> <h3 class="mb-3">Benchmarks</h3>
<table id="results-table" data-test-id="{{ test.id }}" class="u-full-width"> <table id="results-table" class="table table-hover table-responsive" data-test-id="{{ test.id }}">
<thead> <thead class="table-light">
<tr> <tr>
<td>Benchmark</td> <td>Benchmark</td>
<td>Scoring type</td> <td>Scoring type</td>