Added titles to a few pages

Dockerfile

@@ -10,7 +10,7 @@ RUN composer install
 RUN composer update
 
 # Actual PHP runtime
-FROM php:8.2-cli
+FROM php:8.4-cli
 
 WORKDIR /usr/src/colossus/
 

Dockerfile.grunt

@@ -1,5 +1,5 @@
 # Node.js runtime
-FROM node:20
+FROM node:24
 
 WORKDIR /usr/src/colossus/
 

assets/scripts/reports.coffee

@@ -0,0 +1,110 @@
+$ ->
+  chartInstance = null
+
+  $('#reports-download').on 'click', ->
+    canvas = $('#benchmark-chart')[0]
+    a = document.createElement 'a'
+    a.href = canvas.toDataURL 'image/png'
+    a.download = 'chart.png'
+    a.click()
+
+  $('#reports-button').on 'click', (e) ->
+    $('#reports-download').attr('disabled', true)
+    chartInstance.destroy() if chartInstance
+
+    benchmarkId = $('#report-benchmarks').val()
+    testIds = $('#report-tests').val()
+
+    benchmarkSearchParams = new URLSearchParams
+      benchmark_id: benchmarkId
+    benchmarkRes = await fetch("/api/v1/benchmark/details?#{benchmarkSearchParams}")
+    benchmarkData = await benchmarkRes.json()
+
+    data =
+      labels: []
+      datasets: []
+
+    switch benchmarkData.scoring
+      when 'pts'
+        data.datasets.push({
+          label: 'Average Score'
+          data: []
+        })
+      when 'fps'
+        data.datasets.push({
+          label: 'Average FPS'
+          data: []
+        })
+        data.datasets.push({
+          label: 'Minimum FPS'
+          data: []
+        })
+      when 'ms'
+        data.datasets.push({
+          label: 'Average Frame Time'
+          data: []
+        })
+        data.datasets.push({
+          label: 'Minimum Frame Time'
+          data: []
+        })
+
+    for testId in testIds
+      try
+        testSearchParams = new URLSearchParams
+          test_id: testId
+        testRes = await fetch("/api/v1/test/details?#{testSearchParams}")
+        testData = await testRes.json()
+
+        resultSearchParams = new URLSearchParams
+          test_id: testId
+          benchmark_id: benchmarkId
+        resultRes = await fetch("/api/v1/result/list?#{resultSearchParams}")
+        resultData = await resultRes.json()
+
+        avg_total = 0
+        min_total = 0
+        max_total = 0
+
+        for result in resultData
+          avg_total += result.average
+          min_total += result.minimum if result.minimum
+          max_total += result.maximum if result.maximum
+
+        data.labels.push(testData.title)
+        data.datasets[0].data.push(avg_total / resultData.length)
+        switch benchmarkData.scoring
+          when 'fps', 'ms'
+            data.datasets[1].data.push(min_total / resultData.length)
+      catch error
+        console.error 'An error occurred while fetching benchmark results.', error
+
+    ctx = $('#benchmark-chart')[0].getContext('2d')
+
+    options =
+      indexAxis: 'y'
+      plugins:
+        title:
+          display: true
+          text: benchmarkData.name
+          font:
+            size: '24'
+        datalabels:
+          anchor: 'end'
+          align: 'left'
+          color: 'black'
+          font:
+            weight: 'bold'
+          formatter: (value) -> value
+      scales:
+        y:
+          beginAtZero: true
+
+    chartInstance = new Chart ctx,
+      type: 'bar'
+      data: data
+      options: options
+      plugins: [ChartDataLabels]
+
+    $('#reports-download').attr('disabled', false)
+    $('#benchmark-chart').removeClass('disabled')

assets/scripts/test.coffee

@@ -53,6 +53,8 @@ fetchTestBenchmarkResults = (testId, benchmarkId) ->
 		else
 			tableRow.append('<td>N/a</td>')
 			tableRow.append('<td>N/a</td>')
+
+		tableRow.append('<td><a href="/test/' + testId + '/results">Details</a></td>')
 	catch error
 		console.error 'An error occurred while fetching benchmark results.', error
 

assets/styles/nardah.scss

@@ -5,84 +5,30 @@ $nav-height: 65px;
 
 $textarea-min-height: 100px;
 
+$shadow-normal: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
+$shadow-light: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+$shadow-heavy: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+
+.disabled{
+  display: none;
+}
+
 body{
-  margin: 0;
-  padding: $nav-height 0 0;
-  background: white;
+  background: rgb(240, 235, 248);
+  font-size: 18px;
+}
+
+table{
+  border: 1px solid #eee;
 }
 
 a{
-  color: $primary-color;
-  transition: all 230ms ease-in-out;
-  &:hover{
-    color: $primary-color-highlight;
-  }
-}
-
-textarea{
-  min-width: 100%;
-  max-width: 100%;
-  min-height: $textarea-min-height;
-}
-
-select[multiple]{
-  max-width: 100%;
-  min-height: 100px;
-}
-
-#main-nav{
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: $nav-height;
-  background: $primary-color;
-  color: #eee;
-  font-size: 2rem;
-
-  ul{
-    list-style: none;
-    li{
-      display: inline-block;
-    }
-  }
-
-  .nav-left{
-    float: left;
-  }
-  .nav-right{
-    float: right;
-  }
-
-  a{
-    display: inline-block;
-    padding: 15px 10px;
-    color: #eee;
-    text-decoration: none;
-    &:hover{
-      color: white;
-    }
-  }
-
-  .site-logo{
-    margin-left: 25px;
-    margin-right: 25px;
-    font-weight: bold;
-  }
+  transition: color 210ms ease-in-out;
 }
 
 #main-wrapper{
-  max-width: 1180px;
-  margin-top: 15px;
-  padding: 15px 20px;
-}
-
-#result-form{
-  margin: 0;
-
-  button,
-  input,
-  select{
-    margin: 0;
-  }
+  padding: 1.5rem 2rem;
+  background: white;
+  border: 1px solid #bbb;
+  border-radius: 8px;
 }

composer.json

@@ -1,5 +1,6 @@
 {
     "name": "bitgoblin/colossus",
+    "version": "0.1.0",
     "description": "Self-hosted database for organizing PC hardware benchmarking results",
     "type": "project",
     "license": "BSD-2-Clause",
@@ -16,13 +17,13 @@
     ],
     "minimum-stability": "stable",
     "require": {
-        "slim/slim": "^4.11",
-        "slim/psr7": "^1.6",
-        "php-di/php-di": "^6.4",
-        "slim/twig-view": "^3.3",
-        "illuminate/database": "^9.41",
-        "robmorgan/phinx": "^0.13.1",
-        "hassankhan/config": "^3.0"
+        "slim/slim": "^4.14",
+        "slim/psr7": "^1.7",
+        "php-di/php-di": "^7.0",
+        "slim/twig-view": "^3.4",
+        "illuminate/database": "^12.19",
+        "robmorgan/phinx": "^0.16",
+        "hassankhan/config": "^3.2"
     },
     "scripts": {
         "phinx": "./vendor/bin/phinx"

src/Controllers/ApiController.php

@@ -7,6 +7,7 @@ use Psr\Http\Message\ServerRequestInterface as Request;
 use Slim\Routing\RouteContext;
 use BitGoblin\Colossus\Models\Benchmark;
 use BitGoblin\Colossus\Models\Result;
+use BitGoblin\Colossus\Models\Test;
 
 class ApiController extends Controller {
 
@@ -65,4 +66,32 @@ class ApiController extends Controller {
       ->withHeader('Content-Type', 'application/json');
   }
 
+  public function getResultDelete(Request $request, Response $response, array $args): Response {
+    $result = Result::where('id', $args['result_id'])->delete();
+
+    $payload = json_encode($result);
+
+    $referrer = $request->getHeaderLine('Referer');
+    if ($referrer) {
+      return $response
+        ->withHeader('Location', $referrer)
+        ->withStatus(302);
+    }
+
+    $response->getBody()->write($payload);
+    return $response
+      ->withHeader('Content-Type', 'application/json');
+  }
+
+  public function getTestDetails(Request $request, Response $response, array $args): Response {
+    $urlParams = $request->getQueryParams();
+    $test = Test::where('id', $urlParams['test_id'])->first();
+
+    $payload = json_encode($test);
+
+    $response->getBody()->write($payload);
+    return $response
+      ->withHeader('Content-Type', 'application/json');
+  }
+
 }

src/Controllers/BenchmarkController.php

@@ -60,4 +60,32 @@ class BenchmarkController extends Controller {
       ->withStatus(302);
   }
 
+  public function getEdit(Request $request, Response $response, array $args): Response {
+    $benchmark = Benchmark::where('id', $args['benchmark_id'])->first();
+
+    $view = Twig::fromRequest($request);
+    return $view->render($response, 'benchmark/edit.twig', [
+      'benchmark' => $benchmark,
+    ]);
+  }
+
+  public function postEdit(Request $request, Response $response, array $args): Response {
+    $benchmark = Benchmark::where('id', $args['benchmark_id'])->first();
+
+    $params = (array)$request->getParsedBody();
+
+    $benchmark->name = $params['benchmark_name'];
+    $benchmark->description = $params['benchmark_description'];
+    $benchmark->scoring = $params['benchmark_scoring'];
+
+    $benchmark->save();
+
+    // redirect the user back to the home page
+    $routeContext = RouteContext::fromRequest($request);
+    $routeParser = $routeContext->getRouteParser();
+    return $response
+      ->withHeader('Location', $routeParser->urlFor('benchmark.view', ['benchmark_id' => $benchmark->id]))
+      ->withStatus(302);
+  }
+
 }

src/Controllers/ComponentController.php

@@ -59,4 +59,31 @@ class ComponentController extends Controller {
       ->withStatus(302);
   }
 
+  public function getEdit(Request $request, Response $response, array $args): Response {
+    $component = Component::where('id', $args['component_id'])->first();
+
+    $view = Twig::fromRequest($request);
+    return $view->render($response, 'component/edit.twig', [
+      'component' => $component,
+    ]);
+  }
+
+  public function postEdit(Request $request, Response $response, array $args): Response {
+    $component = Component::where('id', $args['component_id'])->first();
+
+    $params = (array)$request->getParsedBody();
+
+    $component->name = $params['component_name'];
+    $component->type = $params['component_type'];
+
+    $component->save();
+
+    // redirect the user back to the home page
+    $routeContext = RouteContext::fromRequest($request);
+    $routeParser = $routeContext->getRouteParser();
+    return $response
+      ->withHeader('Location', $routeParser->urlFor('component.view', ['component_id' => $component->id]))
+      ->withStatus(302);
+  }
+
 }

src/Controllers/TestController.php

@@ -64,4 +64,58 @@ class TestController extends Controller {
       ->withStatus(302);
   }
 
+  public function getEdit(Request $request, Response $response, array $args): Response {
+    $test = Test::where('id', $args['test_id'])->first();
+    $benchmarks = Benchmark::all();
+    $components = Component::all();
+
+    $view = Twig::fromRequest($request);
+    return $view->render($response, 'test/edit.twig', [
+      'test'       => $test,
+      'benchmarks' => $benchmarks,
+      'components' => $components,
+    ]);
+  }
+
+  public function postEdit(Request $request, Response $response, array $args): Response {
+    $params = (array)$request->getParsedBody();
+
+    $test = Test::where('id', $args['test_id'])->first();
+    $test->title = $params['test_title'];
+    $test->description = $params['test_description'];
+    $test->component_id = $params['test_component'];
+
+    $test->save();
+
+    // attach benchmarks to test that aren't already attached
+    foreach ($params['test_benchmarks'] as $b) {
+      if (!$test->isBenchmarkSelected($b)) {
+        $test->benchmarks()->attach($b);
+      }
+    }
+
+    // remove benchmarks are not in the list
+    foreach ($test->benchmarks as $b) {
+      if (!in_array($b->id, $params['test_benchmarks'])) {
+        $test->benchmarks()->detach($b);
+      }
+    }
+
+    // redirect the user back to the home page
+    $routeContext = RouteContext::fromRequest($request);
+    $routeParser = $routeContext->getRouteParser();
+    return $response
+      ->withHeader('Location', $routeParser->urlFor('test.view', [ 'test_id' => $test->id ]))
+      ->withStatus(302);
+  }
+
+  public function getResults(Request $request, Response $response, array $args): Response {
+    $test = Test::where('id', $args['test_id'])->first();
+
+    $view = Twig::fromRequest($request);
+    return $view->render($response, 'test/results.twig', [
+      'test' => $test,
+    ]);
+  }
+
 }

src/Middleware/AppInfo.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace BitGoblin\Colossus\Middleware;
+
+use Psr\Http\Message\ServerRequestInterface as Request;
+
+class AppInfo {
+
+	protected $view;
+
+	public function __construct($view) {
+		$this->view = $view;
+	}
+
+	public function __invoke(Request $request, $handler) {
+		// add running app version
+		$composer = json_decode(file_get_contents(__DIR__ . '/../../composer.json'), true);
+		$this->view->getEnvironment()->addGlobal('APP_VERSION', $composer['version'] ?? 'unknown');
+
+		// add running PHP version
+		$this->view->getEnvironment()->addGlobal('PHP_VERSION', PHP_VERSION);
+
+		return $handler->handle($request);
+	}
+
+}

src/Models/Test.php

@@ -24,6 +24,12 @@ class Test extends Model {
     return $this->belongsTo(Component::class);
   }
 
+  public function isBenchmarkSelected($benchmarkId) {
+    return $this->benchmarks()
+        ->where('benchmarks.id', $benchmarkId)
+        ->exists();
+  }
+
   public function benchmarkResults() {
     $data = [];
 

src/app.php

@@ -9,6 +9,8 @@ use Slim\Factory\AppFactory;
 use Slim\Views\Twig;
 use Slim\Views\TwigMiddleware;
 
+use BitGoblin\Colossus\Middleware\AppInfo;
+
 require __DIR__ . '/../vendor/autoload.php';
 
 // Load app configuration
@@ -38,5 +40,8 @@ $twig = Twig::create(__DIR__ . '/../views', ['cache' => false]);
 // Add Twig-View Middleware
 $app->add(TwigMiddleware::create($app, $twig));
 
+// Add middleware for injecting global vars for app's info
+$app->add(new AppInfo($twig));
+
 // Register routes
 require_once __DIR__ . '/routes.php';

src/routes.php

@@ -9,7 +9,13 @@ $app->group('/benchmark', function(RouteCollectorProxy $group) {
   $group->get('/list', '\\BitGoblin\\Colossus\\Controllers\\BenchmarkController:getList')->setName('benchmark.list');
   $group->get('/add', '\\BitGoblin\\Colossus\\Controllers\\BenchmarkController:getAdd')->setName('benchmark.add');
   $group->post('/add', '\\BitGoblin\\Colossus\\Controllers\\BenchmarkController:postAdd');
-  $group->get('/{benchmark_id}', '\\BitGoblin\\Colossus\\Controllers\\BenchmarkController:getView')->setName('benchmark.view');
+
+  $group->group('/{benchmark_id}', function(RouteCollectorProxy $benchmark) {
+    $benchmark->get('', '\\BitGoblin\\Colossus\\Controllers\\BenchmarkController:getView')->setName('benchmark.view');
+
+    $benchmark->get('/edit', '\\BitGoblin\\Colossus\\Controllers\\BenchmarkController:getEdit')->setName('benchmark.edit');
+    $benchmark->post('/edit', '\\BitGoblin\\Colossus\\Controllers\\BenchmarkController:postEdit');
+  });
 });
 
 $app->group('/component', function(RouteCollectorProxy $group) {
@@ -17,14 +23,28 @@ $app->group('/component', function(RouteCollectorProxy $group) {
   $group->get('/list', '\\BitGoblin\\Colossus\\Controllers\\ComponentController:getList')->setName('component.list');
   $group->get('/add', '\\BitGoblin\\Colossus\\Controllers\\ComponentController:getAdd')->setName('component.add');
   $group->post('/add', '\\BitGoblin\\Colossus\\Controllers\\ComponentController:postAdd');
-  $group->get('/{component_id}', '\\BitGoblin\\Colossus\\Controllers\\ComponentController:getView')->setName('component.view');
+
+  $group->group('/{component_id}', function(RouteCollectorProxy $component) {
+    $component->get('', '\\BitGoblin\\Colossus\\Controllers\\ComponentController:getView')->setName('component.view');
+
+    $component->get('/edit', '\\BitGoblin\\Colossus\\Controllers\\ComponentController:getEdit')->setName('component.edit');
+    $component->post('/edit', '\\BitGoblin\\Colossus\\Controllers\\ComponentController:postEdit');
+  });
 });
 
 $app->group('/test', function(RouteCollectorProxy $group) {
   $group->get('', '\\BitGoblin\\Colossus\\Controllers\\TestController:getList')->setName('test.list');
   $group->get('/add', '\\BitGoblin\\Colossus\\Controllers\\TestController:getAdd')->setName('test.add');
   $group->post('/add', '\\BitGoblin\\Colossus\\Controllers\\TestController:postAdd');
-  $group->get('/{test_id}', '\\BitGoblin\\Colossus\\Controllers\\TestController:getView')->setName('test.view');
+
+  $group->group('/{test_id}', function(RouteCollectorProxy $test) {
+    $test->get('', '\\BitGoblin\\Colossus\\Controllers\\TestController:getView')->setName('test.view');
+
+    $test->get('/edit', '\\BitGoblin\\Colossus\\Controllers\\TestController:getEdit')->setName('test.edit');
+    $test->post('/edit', '\\BitGoblin\\Colossus\\Controllers\\TestController:postEdit');
+
+    $test->get('/results', '\\BitGoblin\\Colossus\\Controllers\\TestController:getResults')->setName('test.results');
+  });
 });
 
 $app->group('/reports', function(RouteCollectorProxy $group) {
@@ -38,5 +58,8 @@ $app->group('/api', function(RouteCollectorProxy $group) {
 
     $apiv1->get('/result/list', '\\BitGoblin\\Colossus\\Controllers\\ApiController:getResultList')->setName('api.resultList');
     $apiv1->post('/result/add', '\\BitGoblin\\Colossus\\Controllers\\ApiController:postResultAdd')->setName('api.resultAdd');
+    $apiv1->get('/result/{result_id}/delete', '\\BitGoblin\\Colossus\\Controllers\\ApiController:getResultDelete')->setName('api.resultDelete');
+
+    $apiv1->get('/test/details', '\\BitGoblin\\Colossus\\Controllers\\ApiController:getTestDetails')->setName('api.testDetails');
   });
 });

views/benchmark/add.twig

@@ -4,43 +4,39 @@
 
 {% block content %}
 
-<div class="row">
-  <div class="twelve columns">
+<div class="row mb-4">
+  <div class="col-12">
     <h1>Add new benchmark</h1>
   </div>
 </div>
 
 <div class="row">
-  <div class="twelve columns">
-    <form action="{{ url_for('benchmark.add') }}" method="POST" class="u-full-width">
+  <form action="{{ url_for('benchmark.add') }}" method="POST">
     <div class="row">
-        <div class="nine columns">
-          <label for="benchmark_name">Benchmark name:</label>
-          <input type="text" id="benchmark_name" class="u-full-width" name="benchmark_name">
+      <div class="col-9 mb-3">
+        <label class="form-label" for="benchmark_name">Benchmark name:</label>
+        <input id="benchmark_name" class="form-control" type="text" name="benchmark_name">
       </div>
 
-        <div class="three columns">
-          <label>
-            Scoring type
-            <select class="u-full-width" name="benchmark_scoring">
+      <div class="col-3 mb-3">
+        <label class="form-label" for="benchmark_scoring">Scoring type:</label>
+        <select id="benchmark_scoring" class="form-select" name="benchmark_scoring">
           <option value="fps">Frames per Second (fps)</option>
           <option value="ms">Frame Time (ms)</option>
           <option value="pts">Total Points</option>
         </select>
-          </label>
       </div>
     </div>
 
-      <div class="row">
-        <div class="twelve columns">
+    <div class="row mb-3">
+      <div class="col-12">
         <label for="benchmark_description">Description</label>
-          <textarea class="u-full-width" name="benchmark_description" id="benchmark_description" rows="5" placeholder="Describe this benchmark..."></textarea>
+        <textarea id="benchmark_description" class="form-control" name="benchmark_description" rows="5" placeholder="Describe this benchmark..."></textarea>
       </div>
     </div>
 
-      <input class="button button-primary u-full-width" type="submit" value="Submit">
+    <input class="btn btn-primary" type="submit" value="Create Benchmark">
   </form>
-  </div>
 </div>
 
 {% endblock %}

views/benchmark/edit.twig

@@ -0,0 +1,42 @@
+{% extends 'layout.twig' %}
+
+{% block title %}Editing Benchmark: {{ benchmark.name }}{% endblock %}
+
+{% block content %}
+
+<div class="row mb-4">
+  <div class="col-12">
+    <h1>Editing Benchmark: {{ benchmark.name }}</h1>
+  </div>
+</div>
+
+<div class="row">
+  <form action="{{ url_for('benchmark.edit', { benchmark_id: benchmark.id }) }}" method="POST">
+    <div class="row">
+      <div class="col-9 mb-3">
+        <label class="form-label" for="benchmark_name">Benchmark name:</label>
+        <input id="benchmark_name" class="form-control" type="text" name="benchmark_name" value="{{ benchmark.name }}">
+      </div>
+
+      <div class="col-3 mb-3">
+        <label class="form-label" for="benchmark_scoring">Scoring type:</label>
+        <select id="benchmark_scoring" class="form-select" name="benchmark_scoring">
+          <option value="fps" {% if benchmark.scoring == 'fps' %}selected{% endif %}>Frames per Second (fps)</option>
+          <option value="ms" {% if benchmark.scoring == 'ms' %}selected{% endif %}>Frame Time (ms)</option>
+          <option value="pts" {% if benchmark.scoring == 'pts' %}selected{% endif %}>Total Points</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="row mb-3">
+      <div class="col-12">
+        <label for="benchmark_description">Description</label>
+        <textarea id="benchmark_description" class="form-control" name="benchmark_description" rows="5" placeholder="Describe this benchmark...">{{ benchmark.description }}</textarea>
+      </div>
+    </div>
+
+    <input class="btn btn-primary" type="submit" value="Submit Changes">
+  </form>
+</div>
+
+{% endblock %}

views/benchmark/list.twig

@@ -3,11 +3,13 @@
 {% block title %}List of Benchmarks{% endblock %}
 
 {% block content %}
+  <h1>List of Benchmarks</h1>
+
   <p><a href="{{ url_for('benchmark.add') }}">Create new Benchmark</a></p>
 
   {% if benchmarks | length > 0 %}
-    <table class="u-full-width">
-      <thead>
+    <table class="table table-hover table-responsive">
+      <thead class="table-light">
         <tr>
           <th>Benchmark name</th>
           <th>Description</th>

views/benchmark/view.twig

@@ -4,8 +4,9 @@
 
 {% block content %}
   <div class="row">
-    <div class="twelve columns">
+    <div class="col-12">
       <h1>{{ benchmark.name }}</h1>
+      <p><a href="{{ url_for('benchmark.edit', { benchmark_id: benchmark.id }) }}">Edit</a></p>
       <p>{{ benchmark.description }}</p>
     </div>
   </div>
@@ -13,12 +14,12 @@
   <hr>
 
   <div class="row">
-    <div class="twelve columns">
-      <h3>Tests using this benchmark:</h3>
+    <div class="col-12">
+      <h3 class="mb-3">Tests using this benchmark:</h3>
 
       {% if benchmark.tests | length > 0 %}
-        <table class="u-full-width">
-          <thead>
+        <table class="table table-hover table-responsive">
+          <thead class="table-light">
             <tr>
               <th>Test title</th>
               <th>Benchmarks</th>

views/component/add.twig

@@ -4,33 +4,31 @@
 
 {% block content %}
 
-<div class="row">
-  <div class="twelve columns">
+<div class="row mb-4">
+  <div class="col-12">
     <h1>Add new component</h1>
   </div>
 </div>
 
 <div class="row">
-  <div class="twelve columns">
-    <form action="{{ url_for('component.add') }}" method="POST" class="u-full-width">
-      <div class="row">
-        <div class="nine columns">
-          <label for="component_name">Component name:</label>
-          <input type="text" id="component_name" class="u-full-width" name="component_name">
+  <div class="col-12">
+    <form action="{{ url_for('component.add') }}" method="POST">
+      <div class="row mb-3">
+        <div class="col-9">
+          <label class="form-label" for="component_name">Component name:</label>
+          <input id="component_name" class="form-control" type="text" name="component_name">
         </div>
 
-        <div class="three columns">
-          <label>
-            Component type:
-            <select class="u-full-width" name="component_type">
+        <div class="col-3">
+          <label class="form-label" for="component_type">Component type:</label>
+          <select id="component_type" class="form-select" name="component_type">
             <option value="gpu">Graphics card</option>
             <option value="cpu">Processor</option>
           </select>
-          </label>
         </div>
       </div>
 
-      <input class="button button-primary u-full-width" type="submit" value="Submit">
+      <input class="btn btn-primary" type="submit" value="Create Component">
     </form>
   </div>
 </div>

views/component/edit.twig

@@ -0,0 +1,36 @@
+{% extends 'layout.twig' %}
+
+{% block title %}Editing Component: {{ component.name }}{% endblock %}
+
+{% block content %}
+
+<div class="row mb-4">
+  <div class="col-12">
+    <h1>Editing Component: {{ component.name }}</h1>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-12">
+    <form action="{{ url_for('component.edit', { component_id: component.id }) }}" method="POST" class="u-full-width">
+      <div class="row mb-3">
+        <div class="col-9">
+          <label class="form-label" for="component_name">Component name:</label>
+          <input id="component_name" class="form-control" type="text" name="component_name" value="{{ component.name }}">
+        </div>
+
+        <div class="col-3">
+          <label class="form-label" for="component_type">Component type:</label>
+          <select id="component_type" class="form-select" name="component_type">
+            <option value="gpu" {% if component.type == 'gpu' %}selected{% endif %}>Graphics card</option>
+            <option value="cpu" {% if component.type == 'cpu' %}selected{% endif %}>Processor</option>
+          </select>
+        </div>
+      </div>
+
+      <input class="btn btn-primary" type="submit" value="Submit Changes">
+    </form>
+  </div>
+</div>
+
+{% endblock %}

views/component/list.twig

@@ -3,11 +3,13 @@
 {% block title %}List of Hardware Components{% endblock %}
 
 {% block content %}
+  <h1>List of Hardware Components</h1>
+
   <p><a href="{{ url_for('component.add') }}">Create new Hardware Component</a></p>
 
   {% if components | length > 0 %}
-    <table class="u-full-width">
-      <thead>
+    <table class="table table-hover table-responsive">
+      <thead class="table-light">
         <tr>
           <th>Component name</th>
           <th>Type</th>

views/component/view.twig

@@ -4,8 +4,9 @@
 
 {% block content %}
   <div class="row">
-    <div class="twelve columns">
+    <div class="col-12">
       <h1>{{ component.name }}</h1>
+      <p><a href="{{ url_for('component.edit', { component_id: component.id }) }}">Edit</a></p>
       <p>{{ component.type }}</p>
     </div>
   </div>
@@ -13,12 +14,12 @@
   <hr>
 
   <div class="row">
-    <div class="twelve columns">
+    <div class="col-12">
       <h3>Tests using this component:</h3>
 
       {% if component.tests | length > 0 %}
-        <table class="u-full-width">
-          <thead>
+        <table class="table table-hover table-responsive">
+          <thead class="table-light">
             <tr>
               <th>Test title</th>
               <th>Benchmarks</th>

views/index.twig

@@ -5,7 +5,7 @@
 {% block content %}
 
   <div class="row">
-    <div class="twelve columns">
+    <div class="col-12">
       <h1>Welcome to Colossus!</h1>
       <p>Using Colossus, you can easily organize your hardware benchmark results.</p>
     </div>
@@ -14,7 +14,7 @@
   <hr>
 
   <div class="row">
-    <div class="twelve columns">
+    <div class="col-12">
       <p><a href="{{ url_for('test.list') }}">View current tests</a></p>
       <p><a href="{{ url_for('test.add') }}">Add a new test</a></p>
     </div>

views/layout.twig

@@ -4,17 +4,20 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{% block title %}{% endblock %} | Colossus</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/nardah.css">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.7/js/bootstrap.min.js"></script>
   <script src="/js/bedabin.js"></script>
+  {% block scripts %}{% endblock %}
 </head>
-<body>
+<body class="d-flex flex-column min-vh-100">
   {% include 'partials/navbar.twig' %}
 
-  <div id="main-wrapper" class="container">
+  <div id="main-wrapper" class="container mb-5">
     {% block content %}{% endblock %}
   </div>
 
+  {% include 'partials/footer.twig' %}
 </body>
 </html>

views/partials/footer.twig

@@ -0,0 +1,10 @@
+<footer id="main-footer" class="bg-light py-4 mt-auto">
+	<div class="container">
+		<div class="row">
+			<div class="col-12">
+				<p class="text-center mb-0">Colossus version {{ APP_VERSION }}</p>
+				<p class="text-center mb-0">Running PHP version {{ PHP_VERSION }}</p>
+			</div>
+		</div>
+	</div>
+</footer>

views/partials/navbar.twig

@@ -1,12 +1,29 @@
-<nav id="main-nav">
+<nav id="main-nav" class="navbar navbar-expand-md navbar-dark bg-primary mb-3">
+  <div class="container-fluid">
+    <a class="navbar-brand mb-0 h1" href="#">Colossus</a>
 
-  <ul class="nav-left">
-    <li class="site-logo">Colossus</li>
-    <li><a href="{{ url_for('dashboard') }}">Dashboard</a></li>
-    <li><a href="{{ url_for('benchmark.list') }}">Benchmarks</a></li>
-    <li><a href="{{ url_for('component.list') }}">Components</a></li>
-    <li><a href="{{ url_for('test.list') }}">Test</a></li>
-    <li><a href="{{ url_for('reports.generate') }}">Reports</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">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <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="{{ url_for('dashboard') }}">Dashboard</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="{{ url_for('benchmark.list') }}">Benchmarks</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="{{ url_for('component.list') }}">Components</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="{{ url_for('test.list') }}">Test</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="{{ url_for('reports.generate') }}">Reports</a>
+        </li>
       </ul>
-
+    </div>
+  </div>
 </nav>

views/reports/generate.twig

@@ -2,6 +2,12 @@
 
 {% block title %}Dashboard{% endblock %}
 
+{% block scripts %}
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js" charset="utf-8"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" charset="utf-8"></script>
+  <script src="/js/reports.js" charset="utf-8"></script>
+{% endblock %}
+
 {% block content %}
 
   <div class="row">
@@ -13,16 +19,16 @@
   <hr>
 
   <div class="row">
-    <div class="five columns">
-      <select id="report-benchmarks" class="u-full-width">
+    <div class="col-5">
+      <select id="report-benchmarks" class="form-select">
         {% for b in benchmarks %}
           <option value="{{ b.id }}">{{ b.name }}</option>
         {% endfor %}
       </select>
     </div>
 
-    <div class="seven columns">
-      <select id="report-tests" class="u-full-width" multiple>
+    <div class="col-7">
+      <select id="report-tests" class="form-select" multiple>
         {% for t in benchmarks[0].tests %}
           <option value="{{ t.id }}">{{ t.title }}</option>
         {% endfor %}
@@ -30,4 +36,18 @@
     </div>
   </div>
 
+  <div class="row">
+    <div class="col-12">
+      <button id="reports-button" class="btn btn-primary" type="button" name="button">Generate Chart</button>
+      <button id="reports-download" class="btn btn-primary" type="button" name="button" disabled>Download Chart</button>
+
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-12">
+      <canvas id="benchmark-chart" class="disabled" width="1200" height="720"></canvas>
+    </div>
+  </div>
+
 {% endblock %}

views/test/add.twig

@@ -4,58 +4,50 @@
 
 {% block content %}
 
-<div class="row">
-  <div class="twelve columns">
+<div class="row mb-4">
+  <div class="col-12">
     <h1>Add new test</h1>
   </div>
 </div>
 
 <div class="row">
-  <div class="twelve columns">
-    <form action="{{ url_for('test.add') }}" method="POST" class="u-full-width">
-      <div class="row">
-        <div class="six columns">
-          <label>
-            Test title:
-            <input class="u-full-width" type="text" name="test_title" placeholder="My new test">
-          </label>
+  <div class="col-12">
+    <form action="{{ url_for('test.add') }}" method="POST">
+      <div class="row mb-3">
+        <div class="col-6">
+          <label class="form-label" for="test_title">Test title:</label>
+          <input id="test_title" class="form-control" type="text" name="test_title" placeholder="My new test">
         </div>
 
-        <div class="six columns">
-          <label>
-            Hardware component:
-            <select class="u-full-width" name="test_component">
+        <div class="col-6">
+          <label class="form-label" for="test_component">Hardware component:</label>
+          <select id="test_component" class="form-select" name="test_component">
             {% for c in components %}
               <option value="{{ c.id }}">{{ c.name }}</option>
             {% endfor %}
           </select>
-          </label>
         </div>
       </div>
 
       <div class="row">
-        <div class="twelve columns">
-          <label>
-            Benchmarks:
-            <select id="benchmark-selector" class="u-full-width" name="test_benchmarks[]" multiple>
+        <div class="col-12 mb-3">
+          <label class="form-label" for="test_benchmarks">Benchmarks:</label>
+          <select id="test_benchmarks" class="form-select" name="test_benchmarks[]" multiple>
             {% for b in benchmarks %}
               <option value="{{ b.id }}">{{ b.name }}</option>
             {% endfor %}
           </select>
-          </label>
         </div>
       </div>
 
-      <div class="row">
-        <div class="twelve columns">
-          <label>
-            Test description:
-            <textarea class="u-full-width" name="test_description" rows="8"></textarea>
-          </label>
+      <div class="row mb-3">
+        <div class="col-12">
+          <label class="form-label" for="test_description">Test description:</label>
+          <textarea id="test_description" class="form-control" name="test_description" rows="8"></textarea>
         </div>
       </div>
 
-      <input class="button button-primary u-full-width" type="submit" value="Submit">
+      <input class="btn btn-primary" type="submit" value="Create Test">
     </form>
   </div>
 </div>

views/test/edit.twig

@@ -0,0 +1,55 @@
+{% extends 'layout.twig' %}
+
+{% block title %}Editing: {{ test.title }}{% endblock %}
+
+{% block content %}
+
+<div class="row mb-4">
+  <div class="col-12">
+    <h1>Editing: {{ test.title }}</h1>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-12">
+    <form action="{{ url_for('test.edit', { test_id: test.id }) }}" method="POST">
+      <div class="row mb-3">
+        <div class="col-6">
+          <label class="form-label" for="test_title">Test title:</label>
+          <input id="test_title" class="form-control" type="text" name="test_title" placeholder="My new test" value="{{ test.title }}">
+        </div>
+
+        <div class="col-6">
+          <label class="form-label" for="test_component">Hardware component:</label>
+          <select id="test_component" class="form-select" name="test_component">
+            {% for c in components %}
+              <option value="{{ c.id }}" {% if test.component.id == c.id %}selected{% endif %}>{{ c.name }}</option>
+            {% endfor %}
+          </select>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-12 mb-3">
+          <label class="form-label" for="test_benchmarks">Benchmarks:</label>
+          <select id="test_benchmarks" class="form-select" name="test_benchmarks[]" multiple>
+            {% for b in benchmarks %}
+              <option value="{{ b.id }}" {% if test.isBenchmarkSelected(b.id) %}selected{% endif %}>{{ b.name }}</option>
+            {% endfor %}
+          </select>
+        </div>
+      </div>
+
+      <div class="row mb-3">
+        <div class="col-12">
+          <label class="form-label" for="test_description">Test description:</label>
+          <textarea id="test_description" class="form-control" name="test_description" rows="8">{{ test.description }}</textarea>
+        </div>
+      </div>
+
+      <input class="btn btn-primary" type="submit" value="Submit Changes">
+    </form>
+  </div>
+</div>
+
+{% endblock %}

views/test/list.twig

@@ -3,11 +3,13 @@
 {% block title %}List of Tests{% endblock %}
 
 {% block content %}
+  <h1>List of Hardware Tests</h1>
+
   <p><a href="{{ url_for('test.add') }}">Create new test</a></p>
 
   {% if tests | length > 0 %}
-    <table class="u-full-width">
-      <thead>
+    <table class="table table-hover table-responsive">
+      <thead class="table-light">
         <tr>
           <th>Test title</th>
           <th>Hardware</th>

views/test/results.twig

@@ -0,0 +1,44 @@
+{% extends 'layout.twig' %}
+
+{% block title %}Result Details for {{ test.title }}{% endblock %}
+
+{% block content %}
+  <div class="row mb-3">
+    <div class="col-12">
+      <h1>Result Details for {{ test.title }}</h1>
+      <p><a href="{{ url_for('test.view', { test_id: test.id }) }}">Back</a></p>
+    </div>
+  </div>
+
+  <hr class="mb-4">
+
+  <div class="row mb-4">
+    {% for b in test.benchmarks %}
+      <div class="col-12 mb-3">
+        <h2><a href="{{ url_for('benchmark.view', { benchmark_id: b.id }) }}">{{ b.name }}</a></h2>
+        <table class="table table-hover table-responsive">
+          <thead>
+            <tr>
+              <th>Average</th>
+              <th>Minimum</th>
+              <th>Maximum</th>
+              <th>Edit</th>
+              <th>Delete</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for r in b.results().where('test_id', test.id).get() %}
+              <tr>
+                <td>{{ r.average }}</td>
+                <td>{{ r.minimum }}</td>
+                <td>{{ r.maximum }}</td>
+                <td><a href="#">Edit</a></td>
+                <td><a href="{{ url_for('api.resultDelete', { result_id: r.id }) }}">Delete</a></td>
+              </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+    {% endfor %}
+  </div>
+{% endblock %}

views/test/view.twig

@@ -3,39 +3,40 @@
 {% block title %}Test: {{ test.title }}{% endblock %}
 
 {% block content %}
-  <div class="row">
-    <div class="twelve columns">
+  <div class="row mb-3">
+    <div class="col-12">
       <h1>{{ test.title }}</h1>
+      <p><a href="{{ url_for('test.edit', { test_id: test.id }) }}">Edit</a></p>
       <p>{{ test.description }}</p>
     </div>
   </div>
 
-  <hr>
+  <hr class="mb-4">
 
+  <div class="row mb-4">
+    <div class="col-12">
+      <form id="result-form" action="{{ url_for('api.resultAdd') }}" method="POST">
         <div class="row">
-    <div class="twelve columns">
-      <form id="result-form" class="u-full-width" action="{{ url_for('api.resultAdd') }}" method="POST">
-        <div class="row">
-          <div class="four columns">
-            <select class="u-full-width" name="result_benchmark">
+          <div class="col-4">
+            <select class="form-select" name="result_benchmark">
               {% for b in test.benchmarks %}
                 <option value="{{ b.id }}">{{ b.name }}</option>
               {% endfor %}
             </select>
           </div>
 
-          <div class="two columns">
-            <input type="number" step="0.01" name="result_avg" placeholder="0.0">
+          <div class="col-2">
+            <input class="form-control" type="number" step="0.01" name="result_avg" placeholder="0.0">
           </div>
-          <div class="two columns">
-            <input type="number" step="0.01" name="result_min" placeholder="0.0">
+          <div class="col-2">
+            <input class="form-control" type="number" step="0.01" name="result_min" placeholder="0.0">
           </div>
-          <div class="two columns">
-            <input type="number" step="0.01" name="result_max" placeholder="0.0">
+          <div class="col-2">
+            <input class="form-control" type="number" step="0.01" name="result_max" placeholder="0.0">
           </div>
 
-          <div class="two columns">
-            <button class="button-primary u-full-width" type="submit" name="button">Submit</button>
+          <div class="col-2">
+            <button class="btn btn-primary w-100" type="submit" name="button">Submit Result</button>
           </div>
         </div>
 
@@ -45,14 +46,14 @@
     </div>
   </div>
 
-  <hr>
+  <hr class="mb-4">
 
   <div class="row">
-    <div class="twelve columns">
-      <h3>Benchmark results:</h3>
+    <div class="col-12">
+      <h3 class="mb-3">Benchmark results:</h3>
 
-      <table id="results-table" class="u-full-width" data-test-id="{{ test.id }}">
-        <thead>
+      <table id="results-table" class="table table-hover table-responsive" data-test-id="{{ test.id }}">
+        <thead class="table-light">
           <tr>
             <th>Benchmark</th>
             <th>Scoring</th>
@@ -60,6 +61,7 @@
             <th>Avg.</th>
             <th>Min.</th>
             <th>Max.</th>
+            <th>Actions</th>
           </tr>
         </thead>
         <tbody>