Version bump to v0.2.1

.gitignore

@@ -65,3 +65,6 @@ node_modules/
 # Compiled assets
 public/css/
 public/js/
+
+# Ignore production configuration files to protect against credential leaks
+config/production.yaml

.rubocop.yml

@@ -1,4 +1,6 @@
-require: rubocop-sequel
+plugins:
+  - rubocop-rspec
+  - rubocop-sequel
 
 AllCops:
   NewCops: enable

.woodpecker.yml

@@ -1,11 +1,32 @@
-pipeline:
+steps:
-  style:
+  setup:
-    image: ruby:3.0
+    image: ruby:3.4
+    env:
+      RACK_ENV: testing
     commands:
-      - 'gem install rake'
+      - gem install rake
-      - 'bundle config set --local path "vendor/bundle"'
+      - bundle config set --local path "vendor/bundle"
-      - 'bundle install'
+      - bundle install
-      - 'rake test:rubocop'
+      - rake db:migrate
+
+  test_ruby34:
+    image: ruby:3.4
+    env:
+      RACK_ENV: testing
+    commands:
+      - gem install rake
+      - bundle config set --local path "vendor/bundle"
+      - rake test:unit
+    group: tests
+
+  style:
+    image: ruby:3.4
+    env:
+      RACK_ENV: testing
+    commands:
+      - gem install rake
+      - bundle config set --local path "vendor/bundle"
+      - rake test:lint
 
   gitea_release:
     image: plugins/gitea-release
@@ -15,5 +36,5 @@ pipeline:
       base_url: https://git.metaunix.net
       title: "${CI_COMMIT_TAG}"
     when:
-      event: tag
+      event:
-
+        - tag

Gemfile

@@ -1,7 +1,7 @@
 source 'https://rubygems.org'
 
-gem 'sinatra', '~> 3.2'
+gem 'sinatra', '~> 4.1'
-gem 'sinatra-contrib', '~> 3.2'
+gem 'sinatra-contrib', '~> 4.1'
 gem 'puma', '~> 6.6'
 
 gem 'sequel', '~> 5.92'
@@ -15,5 +15,12 @@ group :development, :test do
 
   # rubocop and extensions for code style
   gem 'rubocop'
+  gem 'rubocop-rspec'
   gem 'rubocop-sequel'
 end
+
+group :test do
+  gem 'rspec'
+  gem 'rack-test'
+  gem 'database_cleaner-sequel'
+end

Gemfile.lock

@@ -4,6 +4,11 @@ GEM
     ast (2.4.3)
     base64 (0.3.0)
     bigdecimal (3.2.2)
+    database_cleaner-core (2.0.1)
+    database_cleaner-sequel (2.0.2)
+      database_cleaner-core (~> 2.0.0)
+      sequel
+    diff-lcs (1.6.2)
     ffi (1.17.2-aarch64-linux-gnu)
     ffi (1.17.2-aarch64-linux-musl)
     ffi (1.17.2-arm-linux-gnu)
@@ -33,10 +38,16 @@ GEM
     puma (6.6.0)
       nio4r (~> 2.0)
     racc (1.8.1)
-    rack (2.2.17)
+    rack (3.2.0)
-    rack-protection (3.2.0)
+    rack-protection (4.1.1)
       base64 (>= 0.1.0)
-      rack (~> 2.2, >= 2.2.4)
+      logger (>= 1.6.0)
+      rack (>= 3.0.0, < 4)
+    rack-session (2.1.1)
+      base64 (>= 0.1.0)
+      rack (>= 3.0.0)
+    rack-test (2.2.0)
+      rack (>= 1.3)
     rainbow (3.1.1)
     rb-fsevent (0.11.2)
     rb-inotify (0.11.1)
@@ -44,6 +55,19 @@ GEM
     regexp_parser (2.10.0)
     rerun (0.14.0)
       listen (~> 3.0)
+    rspec (3.13.1)
+      rspec-core (~> 3.13.0)
+      rspec-expectations (~> 3.13.0)
+      rspec-mocks (~> 3.13.0)
+    rspec-core (3.13.5)
+      rspec-support (~> 3.13.0)
+    rspec-expectations (3.13.5)
+      diff-lcs (>= 1.2.0, < 2.0)
+      rspec-support (~> 3.13.0)
+    rspec-mocks (3.13.5)
+      diff-lcs (>= 1.2.0, < 2.0)
+      rspec-support (~> 3.13.0)
+    rspec-support (3.13.4)
     rubocop (1.76.1)
       json (~> 2.3)
       language_server-protocol (~> 3.17.0.2)
@@ -58,6 +82,9 @@ GEM
     rubocop-ast (1.45.1)
       parser (>= 3.3.7.2)
       prism (~> 1.4)
+    rubocop-rspec (3.6.0)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.72, >= 1.72.1)
     rubocop-sequel (0.4.1)
       lint_roller (~> 1.1)
       rubocop (>= 1.72.1, < 2)
@@ -65,16 +92,18 @@ GEM
     ruby2_keywords (0.0.5)
     sequel (5.93.0)
       bigdecimal
-    sinatra (3.2.0)
+    sinatra (4.1.1)
+      logger (>= 1.6.0)
       mustermann (~> 3.0)
-      rack (~> 2.2, >= 2.2.4)
+      rack (>= 3.0.0, < 4)
-      rack-protection (= 3.2.0)
+      rack-protection (= 4.1.1)
+      rack-session (>= 2.0.0, < 3)
       tilt (~> 2.0)
-    sinatra-contrib (3.2.0)
+    sinatra-contrib (4.1.1)
       multi_json (>= 0.0.2)
       mustermann (~> 3.0)
-      rack-protection (= 3.2.0)
+      rack-protection (= 4.1.1)
-      sinatra (= 3.2.0)
+      sinatra (= 4.1.1)
       tilt (~> 2.0)
     sqlite3 (2.7.0-aarch64-linux-gnu)
     sqlite3 (2.7.0-aarch64-linux-musl)
@@ -104,14 +133,18 @@ PLATFORMS
   x86_64-linux-musl
 
 DEPENDENCIES
+  database_cleaner-sequel
   logger
   puma (~> 6.6)
+  rack-test
   rerun
+  rspec
   rubocop
+  rubocop-rspec
   rubocop-sequel
   sequel (~> 5.92)
-  sinatra (~> 3.2)
+  sinatra (~> 4.1)
-  sinatra-contrib (~> 3.2)
+  sinatra-contrib (~> 4.1)
   sqlite3 (~> 2.6)
 
 BUNDLED WITH

README.md

@@ -1,5 +1,7 @@
 # Game Data
 
+![Build badge](https://builds.metaunix.net/api/badges/84/status.svg)
+
 Web-based tool to store and organize PC hardware gaming benchmarks.
 
 ## Project Goals
@@ -7,28 +9,58 @@ Web-based tool to store and organize PC hardware gaming benchmarks.
 The goals of this project are to:
 
 * Record benchmarking results from multiple devices - e.g. log from a laptop or a phone.
-* Group results into tests - it's good practice to run a benchmark multiple times for accuracy.
+* Group results into tests to keep track of different testing configurations.
+* Encourage running tests multiple times - it's good practice to run a benchmark multiple times for accuracy.
 * Create comparisons of hardware tests to compare performance.
 * Generate graphs of hardware comparisons for usage in videos and articles.
 
 ## Requirements
 
-Game Data runs on Ruby, and takes advantage of Bundler to manage code dependencies and Rake to run various tasks for maintaining the app. You can install them globally like so:
+Game Data runs on Ruby, and takes advantage of [Bundler](https://bundler.io/) to manage code dependencies and [Rake](https://ruby.github.io/rake/) to run various tasks for maintaining the app. You can install them globally like so:
 
 Debian/Ubuntu: `apt install -y ruby ruby-bundler rake`
+RedHat and clones: `dnf install -y ruby rubygem-bundler rubygem-rake`
+
+## Production Deployment
+
+**TBD**
 
 ## Development
 
-Install dependencies via bundler:
+### Via Docker
+
+If you'd prefer not to install dependencies and such to your local OS, you can do the development via Docker. The scripts provided in `bin/` will build Docker images for running the Ruby app and building the front-end assets via Gulp. *Both containers will automatically watch for changes.*
+
+**Note:** Using the scripts below, the Docker images will remove themselves when stopped. This is to make clean up a bit more streamlined.
+
+1. [Install Docker](https://docs.docker.com/engine/install/) for your OS.
+
+2. Build the docker images for Ruby and Gulp:
+
+`bin/docker-build.sh`
+
+3. Run the docker images:
+
+`bin/docker-run.sh`
+
+4. If everything is running successfully you can open your browser and go to https://localhost:9292.
+
+### Local/Native Development
+
+1. Install dependencies via bundler:
 
 `bundle install`
 
-Perform database migrations:
+2. Perform database migrations:
 
 `rake db:migrate`
 
-Run the server in development with auto-reloading:
+3. Run the server in development with auto-reloading:
 
 `rake server:dev`
 
-If everything is running successfully you can open your browser and go to https://localhost:9292.
+4. If everything is running successfully you can open your browser and go to https://localhost:9292.
+
+## License
+
+This project is available under the BSD 2-Clause license.

Rakefile

@@ -3,18 +3,22 @@ require 'bundler/setup'
 namespace :db do
   desc 'Run migrations'
   task :migrate, [:version] do |t, args|
-    require "sequel/core"
+    require 'sequel/core'
+    # load configuration
+    require_relative 'src/config'
+    conf = Config.new()
+
     Sequel.extension :migration
     version = args[:version].to_i if args[:version]
-    Sequel.connect('sqlite://data/gamedata.db') do |db|
+    Sequel.connect(adapter: conf.get('database.adapter'), database: conf.get('database.database')) do |db|
-      Sequel::Migrator.run(db, "db/migrations", target: version)
+      Sequel::Migrator.run(db, 'db/migrations', target: version)
     end
   end
 end
 
 namespace :server do
   task :start do
-    ENV['APP_ENV'] = 'production'
+    ENV['RACK_ENV'] = 'production'
     system("puma")
   end
 
@@ -24,8 +28,12 @@ namespace :server do
 end
 
 namespace :test do
-  task :rubocop do
+  task :unit do
-    system("rubocop src/")
+    ENV['RACK_ENV'] = 'testing'
+    system("rspec")
+  end
+
+  task :lint do
+    system("rubocop src/ spec/")
   end
 end
-

assets/scripts/edgeville.coffee

@@ -1,3 +1,21 @@
 $ ->
   # run foundation scripts
-  $(document).foundation()
+  console.log('Ready.')
+
+averageResults = (results, decimals = 2) ->
+  avgScore = 0
+  minScore = Infinity
+  maxScore = -Infinity
+
+  factor = (10 ^ decimals)
+
+  for result in results
+    avgScore += result.avg_score
+    minScore = Math.min(minScore, result.min_score)
+    maxScore = Math.max(maxScore, result.max_score)
+
+  return {
+    avgScore: Math.round((avgScore / results.length) * factor) / factor,
+    minScore: minScore,
+    maxScore: maxScore,
+  }

assets/scripts/reports.coffee

@@ -1,55 +1,109 @@
-$(document).ready ->
+$ ->
-  $('#generate_button').on 'click', (e) ->
+  chartInstance = null
-    e.preventDefault()
-    $.ajax(
-      method: 'POST'
-      url: '/reports'
-      data:
-        type: $('#report_type').val()
-        choice: $('#report_choice').val()
-        compare: $('#report_compare').val()
-    ).done (data) ->
-      benchChart.options.title.text = data.choice
-      benchChart.data.labels = data.names
-      benchChart.data.datasets[0].data = data.avg_results
-      benchChart.data.datasets[1].data = data.min_results
-      benchChart.update()
-      return
-    return
-  return
 
-benchChart = new Chart(document.getElementById('chart_canvas').getContext('2d'),
+  $('#report-benchmarks').on 'change', (e) ->
-  type: 'horizontalBar'
+    $('#report-tests option').prop('selected', false)
-  data:
+
-    labels: []
+  $('#reports-download').on 'click', (e) ->
-    datasets: [
+    e.preventDefault()
-      {
+    canvas = $('#benchmark-chart')[0]
-        label: 'Average FPS'
+    a = document.createElement 'a'
-        data: []
+    a.href = canvas.toDataURL 'image/png'
-        backgroundColor: 'hotpink'
+    a.download = 'chart.png'
-        borderColor: '#212121'
+    a.click()
-        borderWidth: 1
+
-      }
+  $('#reports-button').on 'click', (e) ->
-      {
+    e.preventDefault()
-        label: 'Minimum FPS'
+    $('#reports-download').attr('disabled', true)
-        data: []
+    chartInstance.destroy() if chartInstance
-        backgroundColor: 'cornflowerblue'
+
-        borderColor: '#212121'
+    benchmarkId = $('#report-benchmarks').val()
-        borderWidth: 1
+    testIds = $('#report-tests').val()
-      }
+
-    ]
+    benchmarkSearchParams = new URLSearchParams
-  options:
+      benchmark_id: benchmarkId
-    title:
+    benchmarkRes = await fetch("/api/v1/benchmark/details?#{benchmarkSearchParams}")
-      display: true
+    benchmarkData = await benchmarkRes.json()
-      text: 'N/a'
+
-    scales: xAxes: [ {
+    data =
-      display: true
+      labels: []
-      ticks: beginAtZero: true
+      datasets: []
-    } ]
+
-    animation: onComplete: ->
+    switch benchmarkData.scoring
-      dwnbtn = $('#download_button')
+      when 'pts'
-      dwnbtn.attr 'href', benchChart.toBase64Image()
+        data.datasets.push({
-      dwnbtn.attr 'download', 'benchmark_chart.png'
+          label: 'Average Score'
-      dwnbtn.attr 'disabled', false
+          data: []
-      return
+        })
-)
+      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()
+
+        resultAverage = averageResults(resultData)
+
+        data.labels.push(testData.name)
+        data.datasets[0].data.push(resultAverage.avgScore)
+        console.log(data.datasets[0].data)
+        switch benchmarkData.scoring
+          when 'fps', 'ms'
+            data.datasets[1].data.push(resultAverage.minScore)
+      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

@@ -10,33 +10,28 @@ fetchTestBenchmarkResults = (testId, benchmarkId) ->
 		resultSearchParams = new URLSearchParams
 			test_id: testId
 			benchmark_id: benchmarkId
-		resultRes = await fetch("/api/v1/results?#{resultSearchParams}")
+		resultRes = await fetch("/api/v1/result/list?#{resultSearchParams}")
 		resultData = await resultRes.json()
 
-		avg_total = 0
+		resultAverage = averageResults(resultData)
-		min_total = 0
-		max_total = 0
-
-		for result in resultData
-			avg_total += result.avg_score
-			min_total += result.min_score
-			max_total += result.max_score
 
 		tableRow = $("#results-table tr[data-benchmark-id=#{benchmarkId}]")
 
-		tableRow.append('<td>' + benchmarkData.name + '</td>')
+		tableRow.append('<td><a href="/benchmark/' + benchmarkData.id + '">' + benchmarkData.name + '</a></td>')
 		tableRow.append('<td>' + benchmarkData.scoring + '</td>')
 		tableRow.append('<td>' + resultData.length + '</td>')
 
 		if resultData.length != 0
-			tableRow.append('<td>' + (avg_total / resultData.length) + '</td>')
+			tableRow.append('<td>' + resultAverage.avgScore + '</td>')
+
+			if benchmarkData.scoring == 'fps'
+				tableRow.append('<td>' + resultAverage.minScore + '</td>')
+				tableRow.append('<td>' + resultAverage.maxScore + '</td>')
+			else
+				tableRow.append('<td>N/a</td>')
+				tableRow.append('<td>N/a</td>')
 		else
 			tableRow.append('<td>N/a</td>')
-
-		if min_total != 0
-			tableRow.append('<td>' + (min_total / resultData.length) + '</td>')
-			tableRow.append('<td>' + (max_total / resultData.length) + '</td>')
-		else
 			tableRow.append('<td>N/a</td>')
 			tableRow.append('<td>N/a</td>')
 	catch error

assets/styles/rimmington.sass

@@ -4,10 +4,18 @@
 $primary-color: cornflowerblue
 $primary-color-highlight: color.adjust($primary-color, $lightness: -10%)
 
+html
+  width: 100%
+  height: 100%
+
 body
   background: rgb(240, 235, 248)
 
+table
+  border: 1px solid #666
+
 #wrapper
   background: white
   padding: 1.5rem 2rem
+  border: 1px solid #bbb
   border-radius: 8px

config.ru

@@ -1,6 +1,4 @@
 # Load application config
-require_relative 'src/config.rb'
-$conf = Config.new(File.join(__dir__, 'config/defaults.yaml'))
 
 root = ::File.dirname(__FILE__)
 require ::File.join( root, 'src', 'server' )

config/defaults.yaml

@@ -1,6 +1,6 @@
-database:
+server:
-  adapter: 'sqlite'
+  host: '0.0.0.0'
-  database: 'data/gamedata.db'
+  port: '9292'
 
 testing:
   minimum_results_required: 3

config/development.yaml

@@ -0,0 +1,3 @@
+database:
+  adapter: 'sqlite'
+  database: 'data/gamedata.db'

config/puma.rb

@@ -0,0 +1,11 @@
+app_dir = File.expand_path('..', __dir__)
+directory app_dir
+
+environment ENV.fetch('RACK_ENV', 'development')
+
+require_relative '../src/config'
+conf = Config.new()
+
+bind "tcp://#{conf.get('server.host')}:#{conf.get('server.port')}"
+workers 2
+threads 1, 5

config/testing.yaml

@@ -0,0 +1,3 @@
+database:
+  adapter: 'sqlite'
+  database: 'data/gamedata_testing.db'

spec/controllers/benchmark_controller_spec.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+require_relative '../spec_helper'
+
+RSpec.describe(BenchmarkController) do
+  # /benchmark - redirects to /benchmark/list
+  describe 'GET /benchmark' do
+    before { get '/benchmark' }
+
+    it 'Benchmark base route is a redirect' do
+      expect(last_response).to(be_redirect)
+    end
+
+    it 'Benchmark base route Location header points to /benchmark/list' do
+      expect(last_response['Location']).to(eq("#{BASE_URL}/benchmark/list"))
+    end
+  end
+
+  # /benchmark/list - displays a table of benchmarks
+  describe 'GET /benchmark/list' do
+    before { get '/benchmark/list' }
+
+    it 'Benchmark list page returns 200.' do
+      expect(last_response).to(be_ok)
+    end
+
+    it "Benchmark list page contains 'List of benchmarks' on page." do
+      expect(last_response.body).to(include('List of benchmarks'))
+    end
+  end
+
+  # /benchmark/add - form for adding benchmark
+  describe 'GET /benchmark/add' do
+    before { get '/benchmark/add' }
+
+    it 'Benchmark add page returns 200.' do
+      expect(last_response).to(be_ok)
+    end
+
+    it "Benchmark add page contains 'Add new benchmark' on page." do
+      expect(last_response.body).to(include('Add new benchmark'))
+    end
+  end
+end

spec/controllers/hardware_controller_spec.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+require_relative '../spec_helper'
+
+RSpec.describe(HardwareController) do
+  # /hardware - redirects to /hardware/list
+  describe 'GET /hardware' do
+    before { get '/hardware' }
+
+    it 'Hardware base route is a redirect' do
+      expect(last_response).to(be_redirect)
+    end
+
+    it 'Hardware base route Location header points to /hardware/list' do
+      expect(last_response['Location']).to(eq("#{BASE_URL}/hardware/list"))
+    end
+  end
+
+  # /hardware/list - displays a table of hardwares
+  describe 'GET /hardware/list' do
+    before { get '/hardware/list' }
+
+    it 'Hardware list page returns 200.' do
+      expect(last_response).to(be_ok)
+    end
+
+    it "Hardware list page contains 'List of hardware' on page." do
+      expect(last_response.body).to(include('List of hardware'))
+    end
+  end
+
+  # /hardware/add - form for adding hardware
+  describe 'GET /hardware/add' do
+    before { get '/hardware/add' }
+
+    it 'Hardware add page returns 200.' do
+      expect(last_response).to(be_ok)
+    end
+
+    it "Hardware add page contains 'Add new hardware' on page." do
+      expect(last_response.body).to(include('Add new hardware'))
+    end
+  end
+end

spec/controllers/index_controller_spec.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+require_relative '../spec_helper'
+
+RSpec.describe(IndexController) do
+  describe 'GET /' do
+    before { get '/' }
+
+    it 'Dashboard returns 200.' do
+      expect(last_response).to(be_ok)
+    end
+
+    it "Dashboard contains 'Game Data' on page (nav bar should be loaded)." do
+      expect(last_response.body).to(include('Game Data'))
+    end
+
+    it "Dashboard contains 'Ruby version' on page (footer should be loaded)." do
+      expect(last_response.body).to(include('Ruby version'))
+    end
+  end
+end

spec/controllers/reports_controller_spec.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+require_relative '../spec_helper'
+
+RSpec.describe(ReportsController) do
+  describe 'GET /report' do
+    before { get '/report' }
+
+    it 'Reports page returns 200.' do
+      expect(last_response).to(be_ok)
+    end
+
+    it "Reports page contains 'Generate report' on page." do
+      expect(last_response.body).to(include('Generate report'))
+    end
+  end
+end

spec/controllers/test_controller_spec.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+require_relative '../spec_helper'
+
+RSpec.describe(TestController) do
+  # /test - redirects to /test/list
+  describe 'GET /test' do
+    before { get '/test' }
+
+    it 'Test base route is a redirect' do
+      expect(last_response).to(be_redirect)
+    end
+
+    it 'Test base route Location header points to /test/list' do
+      expect(last_response['Location']).to(eq("#{BASE_URL}/test/list"))
+    end
+  end
+
+  # /test/list - displays a table of tests
+  describe 'GET /test/list' do
+    before { get '/test/list' }
+
+    it 'Test list page returns 200.' do
+      expect(last_response).to(be_ok)
+    end
+
+    it "Test list page contains 'List of tests' on page." do
+      expect(last_response.body).to(include('List of tests'))
+    end
+  end
+
+  # /test/add - form for adding test
+  describe 'GET /test/add' do
+    before { get '/test/add' }
+
+    it 'Test add page returns 200.' do
+      expect(last_response).to(be_ok)
+    end
+
+    it "Test add page contains 'Add new test' on page." do
+      expect(last_response.body).to(include('Add new test'))
+    end
+  end
+end

spec/models/benchmark_model_spec.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require_relative '../spec_helper'
+
+RSpec.describe(Benchmark) do
+  describe 'Benchmark Creation' do
+    it 'Benchmark creation updates model count.' do
+      expect do
+        described_class.create(name: 'Test Benchmark', scoring: 'fps')
+      end.to(change(described_class, :count).by(1))
+    end
+  end
+
+  describe 'Benchmark Read' do
+    before { described_class.create(name: 'Test Benchmark', scoring: 'fps') }
+
+    it 'Benchmark model has name.' do
+      bench = described_class.first()
+      expect(bench.name).to(eq('Test Benchmark'))
+    end
+
+    it 'Benchmark model has scoring.' do
+      bench = described_class.first()
+      expect(bench.scoring).to(eq('fps'))
+    end
+  end
+end

spec/models/hardware_model_spec.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+require_relative '../spec_helper'
+
+RSpec.describe(Hardware) do
+  describe 'Hardware Creation' do
+    it 'Hardware creation updates model count.' do
+      expect { described_class.create(name: 'Test Hardware', type: 'gpu') }.to(change(described_class, :count).by(1))
+    end
+  end
+
+  describe 'Hardware Read' do
+    before { described_class.create(name: 'Test Hardware', type: 'gpu') }
+
+    it 'Hardware model has name.' do
+      hardware = described_class.first()
+      expect(hardware.name).to(eq('Test Hardware'))
+    end
+
+    it 'Hardware model has scoring.' do
+      hardware = described_class.first()
+      expect(hardware.type).to(eq('gpu'))
+    end
+  end
+end

spec/models/test_model_spec.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+require_relative '../spec_helper'
+
+RSpec.describe(Test) do
+  describe 'Test Creation' do
+    it 'Test creation updates model count.' do
+      expect { described_class.create(name: 'Test Test') }.to(change(described_class, :count).by(1))
+    end
+  end
+
+  describe 'Test Read' do
+    before do
+      described_class.create(name: 'Test Test')
+    end
+
+    it 'Test model has name.' do
+      tst = described_class.first()
+      expect(tst.name).to(eq('Test Test'))
+    end
+  end
+
+  describe 'Test one-to-many association with Hardware' do
+    it 'Test model has Hardware associated with it.' do
+      hardware = Hardware.create(name: 'Test Hardware', type: 'gpu')
+      tst = described_class.create(name: 'Test Test', hardware_id: hardware.id)
+      expect(tst.hardware).to(eq(hardware))
+    end
+
+    it 'Test model\'s hardware has name set.' do
+      hardware = Hardware.create(name: 'Test Hardware', type: 'gpu')
+      tst = described_class.create(name: 'Test Test', hardware_id: hardware.id)
+      expect(tst.hardware.name).to(eq('Test Hardware'))
+    end
+  end
+end

spec/spec_helper.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+ENV['APP_ENV'] = 'test'
+
+require_relative '../src/server'
+require 'rspec'
+require 'rack/test'
+require 'database_cleaner/sequel'
+
+# setting this here so all redirect tests can reference the same base URL
+BASE_URL = 'http://example.org'
+
+module RSpecMixin
+
+  include Rack::Test::Methods
+
+  def app
+    GameData
+  end
+
+end
+
+RSpec.configure do |config|
+  config.include(RSpecMixin)
+
+  config.before(:suite) do
+    DatabaseCleaner.strategy = :transaction
+  end
+
+  config.around do |suite|
+    DatabaseCleaner.cleaning do
+      suite.run
+    end
+  end
+end

src/appinfo.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module AppInfo
+
+  VERSION = '0.2.1'
+
+end

src/config.rb

@@ -6,8 +6,9 @@ require 'yaml'
 class Config
 
   DEFAULT_CONFIG = 'config/defaults.yaml'
+  ENVIRONMENT_CONFIG = ENV.fetch('RACK_ENV', 'development')
 
-  def initialize(config_path)
+  def initialize(config_path = "config/#{ENVIRONMENT_CONFIG}.yaml")
     @data = YAML.load_file(DEFAULT_CONFIG)
 
     # merge in user-defined configuration if it exists

src/controllers/api1.rb

@@ -1,7 +1,14 @@
 # frozen_string_literal: true
 
+require 'sinatra/json'
+
+require_relative 'base_controller'
+require_relative '../models/benchmark'
+require_relative '../models/test'
+require_relative '../models/result'
+
 # /api/v1 routes
-class GameData < Sinatra::Base
+class APIv1Controller < BaseController
 
   get '/api/v1/benchmark/details' do
     benchmark_id = params[:benchmark_id]
@@ -11,7 +18,7 @@ class GameData < Sinatra::Base
     json benchmark.values()
   end
 
-  get '/api/v1/results' do
+  get '/api/v1/result/list' do
     test_id = params[:test_id]
     benchmark_id = params[:benchmark_id]
 
@@ -20,4 +27,12 @@ class GameData < Sinatra::Base
     json results.map(&:values)
   end
 
+  get '/api/v1/test/details' do
+    test_id = params[:test_id]
+
+    tst = Test.where(id: test_id).first()
+
+    json tst.values()
+  end
+
 end

src/controllers/base_controller.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+require 'sinatra/base'
+
+# BaseController - base modular Sinatra app class
+class BaseController < Sinatra::Base
+
+  # Register view helpers
+  require_relative '../helpers'
+  helpers Helpers
+
+  # Set up our view engine
+  set :views, File.join(settings.root, '/../../views')
+
+end

src/controllers/benchmark.rb

@@ -1,9 +1,16 @@
 # frozen_string_literal: true
 
+require_relative 'base_controller'
+require_relative '../models/benchmark'
+
 # /benchmark routes
-class GameData < Sinatra::Base
+class BenchmarkController < BaseController
 
   get '/benchmark' do
+    redirect('/benchmark/list')
+  end
+
+  get '/benchmark/list' do
     benchmarks = Benchmark.reverse(:updated_at).limit(10).all()
 
     erb :'benchmark/index', locals: {

src/controllers/hardware.rb

@@ -1,9 +1,17 @@
 # frozen_string_literal: true
 
+require_relative 'base_controller'
+require_relative '../models/hardware'
+require_relative '../models/benchmark'
+
 # /hardware routes
-class GameData < Sinatra::Base
+class HardwareController < BaseController
 
   get '/hardware' do
+    redirect('/hardware/list')
+  end
+
+  get '/hardware/list' do
     hardware = Hardware.reverse(:updated_at).limit(10).all()
 
     erb :'hardware/index', locals: {

src/controllers/index.rb

@@ -1,7 +1,10 @@
 # frozen_string_literal: true
 
+require_relative 'base_controller'
+require_relative '../models/test'
+
 # / (top-level) routes
-class GameData < Sinatra::Base
+class IndexController < BaseController
 
   get '/' do
     tests = Test.reverse(:updated_at).limit(10).all()

src/controllers/reports.rb

@@ -1,7 +1,14 @@
 # frozen_string_literal: true
 
+require 'sinatra/json'
+
+require_relative 'base_controller'
+require_relative '../models/benchmark'
+require_relative '../models/result'
+require_relative '../models/test'
+
 # /reports routes
-class GameData < Sinatra::Base
+class ReportsController < BaseController
 
   get '/report' do
     benchmarks = Benchmark.order(:name).all()

src/controllers/result.rb

@@ -1,7 +1,10 @@
 # frozen_string_literal: true
 
+require_relative 'base_controller'
+require_relative '../models/result'
+
 # /result routes
-class GameData < Sinatra::Base
+class ResultController < BaseController
 
   post '/result/add' do
     result_minimum = params[:result_minimum] if params.key?(:result_minimum)

src/controllers/test.rb

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+require_relative 'base_controller'
+require_relative '../models/benchmark'
+require_relative '../models/hardware'
+require_relative '../models/test'
+
+# /test routes
+class TestController < BaseController
+
+  get '/test' do
+    redirect('/test/list')
+  end
+
+  get '/test/list' do
+    tests = Test.reverse(:updated_at).limit(10).all()
+
+    erb :'test/index', locals: {
+      title: 'List of Tests',
+      tests: tests
+    }
+  end
+
+  get '/test/add' do
+    hardware = Hardware.order(:name).all()
+    benchmarks = Benchmark.order(:name).all()
+
+    erb :'test/add', locals: {
+      title: 'Add Test',
+      hardware: hardware,
+      benchmarks: benchmarks
+    }
+  end
+  post '/test/add' do
+    tst = Test.create(
+      name: params[:test_name],
+      hardware_id: params[:test_hardware],
+      description: params[:test_description]
+    )
+
+    # create an array of the selected benchmarks
+    benchmarks = Array(params[:test_benchmarks])
+    # associate the benchmarks to the test
+    benchmarks.each do |b|
+      tst.add_benchmark(b)
+    end
+
+    redirect "/test/#{tst.id}"
+  end
+
+  get '/test/:test_id' do
+    tst = Test.where(id: params[:test_id]).first()
+    erb :'test/view', locals: {
+      title: tst.name,
+      test: tst
+    }
+  end
+
+  get '/test/:test_id/edit' do
+    tst = Test.where(id: params[:test_id]).first()
+    hardware = Hardware.order(:name).all()
+    benchmarks = Benchmark.order(:name).all()
+
+    erb :'test/edit', locals: {
+      title: "Editing: #{tst.name}",
+      test: tst,
+      hardware: hardware,
+      benchmarks: benchmarks
+    }
+  end
+
+  post '/test/:test_id/edit' do
+    tst = Test.where(id: params[:test_id]).first()
+
+    tst.update(
+      name: params[:test_name],
+      hardware_id: params[:test_hardware],
+      description: params[:test_description]
+    )
+
+    selected_benchmarks = Array(params[:test_benchmarks])
+
+    # remove benchmarks no longer associated with the test
+    tst.benchmarks.dup.each do |b|
+      tst.remove_benchmark(b.id) unless selected_benchmarks.include?(b.id)
+    end
+
+    # associate the benchmarks to the test
+    selected_benchmarks.each do |b|
+      tst.add_benchmark(b) unless tst.benchmark?(b)
+    end
+
+    redirect "/test/#{tst.id}"
+  end
+
+end

src/helpers.rb

@@ -1,14 +1,16 @@
 # frozen_string_literal: true
 
+require_relative 'appinfo'
+
 # Helpers - view helper functions
 module Helpers
 
-  def ruby_version()
+  def ruby_version
     return RUBY_VERSION
   end
 
-  def app_version()
+  def app_version
-    return `git describe --tags`
+    return AppInfo::VERSION
   end
 
   def date_format(date)

src/models/benchmark.rb

@@ -3,6 +3,7 @@
 # Benchmark - database model for PC benchmarks
 class Benchmark < Sequel::Model
 
+  many_to_many :tests
   one_to_many :results
 
 end

src/models/init.rb

@@ -1,6 +0,0 @@
-# frozen_string_literal: true
-
-require_relative 'hardware'
-require_relative 'benchmark'
-require_relative 'result'
-require_relative 'test'

src/models/test.rb

@@ -5,6 +5,10 @@ class Test < Sequel::Model
 
   one_to_many :result
   many_to_one :hardware
-  many_to_many :benchmark
+  many_to_many :benchmarks
+
+  def benchmark?(benchmark_id)
+    return benchmarks_dataset.where(Sequel[:benchmarks][:id] => benchmark_id).any?
+  end
 
 end

src/routes/init.rb

@@ -1,10 +0,0 @@
-# frozen_string_literal: true
-
-require_relative 'index'
-require_relative 'hardware'
-require_relative 'benchmark'
-require_relative 'reports'
-require_relative 'result'
-require_relative 'test'
-
-require_relative 'api1'

src/routes/test.rb

@@ -1,68 +0,0 @@
-# frozen_string_literal: true
-
-# /test routes
-class GameData < Sinatra::Base
-
-  get '/test' do
-    tests = Test.reverse(:updated_at).limit(10).all()
-
-    erb :'test/index', locals: {
-      title: 'List of Tests',
-      tests: tests
-    }
-  end
-
-  get '/test/add' do
-    hardware = Hardware.order(:name).all()
-    benchmarks = Benchmark.order(:name).all()
-    erb :'test/add', locals: {
-      title: 'Add Test',
-      hardware: hardware,
-      benchmarks: benchmarks
-    }
-  end
-  post '/test/add' do
-    tst = Test.create(
-      name: params[:test_name],
-      hardware_id: params[:test_hardware],
-      description: params[:test_description]
-    )
-
-    # create an array of the selected benchmarks
-    benchmarks = Array(params[:test_benchmarks])
-    # associate the benchmarks to the test
-    benchmarks.each do |b|
-      tst.add_benchmark(b)
-    end
-
-    redirect "/test/#{tst.id}"
-  end
-
-  get '/test/:test_id' do
-    tst = Test.where(id: params[:test_id]).first()
-    erb :'test/view', locals: {
-      title: tst.name,
-      test: tst
-    }
-  end
-
-  get '/test/:hardware_id/edit' do
-    hardware = Hardware.where(id: params[:hardware_id]).first()
-    erb :'test/edit', locals: {
-      title: "Editing: #{hardware.name}",
-      hardware: hardware
-    }
-  end
-
-  post '/test/:hardware_id/edit' do
-    hardware = Hardware.where(id: params[:hardware_id]).first()
-
-    hardware.update(
-      name: params[:hardware_name],
-      type: params[:hardware_type]
-    )
-
-    redirect "/hardware/#{hardware.id}"
-  end
-
-end

src/server.rb

@@ -1,16 +1,32 @@
 # frozen_string_literal: true
 
 require 'sinatra/base'
-require 'sinatra/json'
 require 'sequel'
 require 'sqlite3'
 
+require_relative 'config'
+
+# Load configuration from environment config file
+$conf = Config.new()
+
 # Load the Sequel timestamps plugin
 Sequel::Model.plugin(:timestamps)
 # Initialize Sequel gem for database actions
 DB = Sequel.connect(adapter: $conf.get('database.adapter'), database: $conf.get('database.database'))
 
-# Base app
+# Load in routes (must happen after Sequel is loaded!)
+require_relative 'controllers/api1'
+require_relative 'controllers/benchmark'
+require_relative 'controllers/hardware'
+require_relative 'controllers/index'
+require_relative 'controllers/reports'
+require_relative 'controllers/result'
+require_relative 'controllers/test'
+
+# GameData - main app that gets launched
+#   - inherits from Sinatra::Base to instantiate the server
+#   - sets up some base app configuration
+#   - registers route classes with the base app
 class GameData < Sinatra::Base
 
   enable :sessions
@@ -19,16 +35,12 @@ class GameData < Sinatra::Base
   enable :static
   set :public_folder, File.join(__dir__, '/../public')
 
-  # Register view helpers
+  use IndexController
-  require_relative 'helpers'
+  use HardwareController
-  helpers Helpers
+  use BenchmarkController
-
+  use TestController
-  # Set up our view engine
+  use ResultController
-  set :views, File.join(settings.root, '/../views')
+  use ReportsController
+  use APIv1Controller
 
 end
-
-# Load routes
-require_relative 'routes/init'
-# Load models
-require_relative 'models/init'

views/benchmark/add.erb

@@ -26,11 +26,15 @@
     <div class="row mb-3">
       <div class="col-12">
         <label for="benchmark_description">Benchmark description</label>
-        <textarea id="benchmark_description" class="form-control" name="benchmark_description">Enter a description/notes here.</textarea>
+        <textarea id="benchmark_description" class="form-control" name="benchmark_description" placeholder="Enter a description/notes here."></textarea>
       </div>
     </div>
 
-    <input class="btn btn-primary" type="submit" value="Create Benchmark">
+    <div class="row">
+      <div class="col-12">
+        <input class="btn btn-primary w-100" type="submit" value="Create Benchmark">
+      </div>
+    </div>
   </form>
 
 </div>

views/benchmark/edit.erb

@@ -26,11 +26,15 @@
     <div class="row mb-3">
       <div class="col-12">
         <label for="benchmark_description">Benchmark description</label>
-        <textarea id="benchmark_description" class="form-control" name="benchmark_description"><%= benchmark.description %></textarea>
+        <textarea id="benchmark_description" class="form-control" name="benchmark_description" placeholder="Enter a description/notes here."><%= benchmark.description %></textarea>
       </div>
     </div>
 
-    <input class="btn btn-primary" type="submit" value="Submit Changes">
+    <div class="row">
+      <div class="col-12">
+        <input class="btn btn-primary w-100" type="submit" value="Submit Changes">
+      </div>
+    </div>
   </form>
 
 </div>

views/benchmark/view.erb

@@ -16,3 +16,34 @@
     <p><%= benchmark.description %></p>
   </div>
 </div>
+
+<hr>
+
+<div class="row">
+  <div class="col-12">
+    <h3 class="mb-3">Tests using this benchmark:</h3>
+
+    <% if benchmark.tests.length > 0 %>
+      <table class="table table-hover table-responsive">
+        <thead class="table-light">
+          <tr>
+            <th>Test title</th>
+            <th>Benchmarks</th>
+            <th>Last updated</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% benchmark.tests.each do |t| %>
+            <tr>
+              <td><a href="/test/<%= t.id %>"><%= t.name %></a></td>
+              <td><%= t.benchmarks.length %></td>
+              <td><%= t.updated_at %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    <% else %>
+      <p>There are no tests associated with this benchmark.</p>
+    <% end %>
+  </div>
+</div>

views/hardware/add.erb

@@ -22,7 +22,11 @@
       </div>
     </div>
 
-    <input class="btn btn-primary" type="submit" value="Create Hardware">
+    <div class="row">
+      <div class="col-12">
+        <input class="btn btn-primary w-100" type="submit" value="Create Hardware">
+      </div>
+    </div>
   </form>
 
 </div>

views/hardware/edit.erb

@@ -22,7 +22,11 @@
       </div>
     </div>
 
-    <input class="btn btn-primary" type="submit" value="Create Hardware">
+    <div class="row">
+      <div class="col-12">
+        <input class="btn btn-primary w-100" type="submit" value="Submit Changes">
+      </div>
+    </div>
   </form>
 
 </div>

views/hardware/view.erb

@@ -11,3 +11,34 @@
     Hardware type: <%= hardware.type %>
   </div>
 </div>
+
+<hr>
+
+<div class="row">
+  <div class="col-12">
+    <h3 class="mb-3">Tests using this benchmark:</h3>
+
+    <% if hardware.tests.length > 0 %>
+      <table class="table table-hover table-responsive">
+        <thead class="table-light">
+          <tr>
+            <th>Test title</th>
+            <th>Benchmarks</th>
+            <th>Last updated</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% hardware.tests.each do |t| %>
+            <tr>
+              <td><a href="/test/<%= t.id %>"><%= t.name %></a></td>
+              <td><%= t.benchmarks.length %></td>
+              <td><%= t.updated_at %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    <% else %>
+      <p>There are no tests associated with this benchmark.</p>
+    <% end %>
+  </div>
+</div>

views/index/index.erb

@@ -1,12 +1,12 @@
 <div class="row">
   <% if tests.length > 0 %>
-    <div class="twelve columns">
+    <div class="12-col mb-3">
       <h2>Latest benchmark results:</h2>
     </div>
 
-    <div class="twelve columns">
+    <div class="12-col">
-      <table>
+      <table class="table table-hover table-responsive">
-        <thead>
+        <thead class="table-light">
           <tr>
             <th>Test name</th>
             <th># Benchmarks</th>
@@ -17,7 +17,7 @@
           <% tests.each do |t| %>
             <tr>
               <td><a href="/test/<%= t.id %>"><%= t.name %></a></td>
-              <td><%= t.benchmark.length %></td>
+              <td><%= t.benchmarks.length %></td>
               <td><%= t.updated_at %></td>
             </tr>
           <% end %>
@@ -25,7 +25,7 @@
       </table>
     </div>
   <% else %>
-    <div class="twelve columns">
+    <div class="12-col">
       <p>I'm sorry, there don't appear to be any benchmark results logged yet. Check again later!</p>
     </div>
   <% end %>

views/layout.erb

@@ -10,16 +10,17 @@
   <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/bootstrap/5.3.7/js/bootstrap.min.js" charset="utf-8"></script>
   <script src="/js/edgeville.js" charset="utf-8"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" charset="utf-8"></script>
 </head>
-<body>
+<body class="d-flex flex-column min-vh-100">
   <!-- main navigation -->
   <%= erb :'partials/navbar', :locals => locals %>
 
   <!-- main content -->
-  <div id="wrapper" class="container mb-4">
+  <main class="flex-grow-1 py-4">
-    <%= yield %>
+    <div id="wrapper" class="container mb-4">
-  </div>
+      <%= yield %>
+    </div>
+  </main>
 
   <!-- site footer -->
   <%= erb :'partials/footer', :locals => locals %>

views/partials/footer.erb

@@ -1,8 +1,10 @@
-<nav id="main-footer" class="container">
+<footer id="main-footer" class="bg-light border-top py-3 text-center">
-  <div class="row">
+  <div class="container">
-    <div class="col-12">
+    <div class="row">
-      <p>Game Data version v<%= app_version() %></p>
+      <div class="col-12">
-      <p>Running Ruby version v<%= ruby_version() %></p>
+        <p>Game Data version v<%= app_version() %></p>
+        <p class="mb-0">Running Ruby version v<%= ruby_version() %></p>
+      </div>
     </div>
   </div>
-</nav>
+</footer>

views/partials/navbar.erb

@@ -1,4 +1,4 @@
-<div id="main-nav" class="navbar navbar-expand-md bg-body-secondary mb-3">
+<div id="main-nav" class="navbar navbar-expand-md bg-dark border-bottom border-body mb-3" data-bs-theme="dark">
   <div class="container-fluid">
     <a class="navbar-brand mb-0 h1" href="#">Game Data</a>
 

views/reports/index.erb

@@ -1,35 +1,49 @@
+<div class="row">
+  <div class="col-12">
+    <h1>Generate report</h1>
+  </div>
+</div>
+
 <div class="row">
   <form class="col-12" action="/reports" method="post">
-    <div class="grid-x grid-margin-x">
+    <div class="row mb-3">
-      <select class="col-12 col-md-6 form-select" id="report_type" name="report_type" disabled>
+      <div class="col-12 col-md-6">
-        <option value="benchmark">Benchmark</option>
+        <select id="report-type" class="form-select" name="report_type" disabled>
-        <option value="test">Test</option>
+          <option value="benchmark">Benchmark</option>
-      </select>
+          <option value="test">Test</option>
+        </select>
+      </div>
 
-      <select class="col-12 col-md-6 form-select" id="report_choice" name="report_choice">
+      <div class="col-12 col-md-6">
-        <% benchmarks.each do |b| %>
+        <select id="report-benchmarks" class="form-select" name="report_choice">
-          <option value="<%= b.id %>"><%= b.name %></option>
+          <% benchmarks.each do |b| %>
-        <% end %>
+            <option value="<%= b.id %>"><%= b.name %></option>
-      </select>
+          <% end %>
+        </select>
+      </div>
     </div>
 
-    <div class="grid-x grid-margin-x">
+    <div class="col-12 mb-3">
-      <select class="col-12 form-select" id="report_compare" name="report_compare[]" multiple>
+      <select id="report-tests" class="col-12 form-select" name="report_compare[]" multiple>
         <% tests.each do |t| %>
           <option value="<%= t.id %>"><%= t.name %></option>
         <% end %>
       </select>
     </div>
 
-    <input type="submit" class="btn btn-primary" id="generate_button" value="Generate">
+    <div class="col-12 mb-3">
-    <a href="#" class="button" id="download_button" disabled>Download</a>
+      <button id="reports-button" class="btn btn-primary">Generate</button>
+      <button id="reports-download" class="btn btn-primary" disabled>Download</button>
+    </div>
 
-    <div class="grid-x grid-margin-x">
+    <div class="col-12">
-      <canvas id="chart_canvas" width="100%" height="25"></canvas>
+      <canvas id="benchmark-chart" width="100%" height="25"></canvas>
     </div>
   </form>
 </div>
 
 <!-- load the chart.js library -->
+<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>
 <!-- load chart functionality -->
 <script src="/js/reports.js" charset="utf-8"></script>

views/test/add.erb

@@ -7,13 +7,13 @@
 <div class="row">
 
   <form class="col-12" action="/test/add" method="post">
-    <div class="row mb-3">
+    <div class="row mb-0 mb-md-3">
-      <div class="col-12 col-md-6 mb-3">
+      <div class="col-12 col-md-6 mb-3 mb-md-0">
         <label for="test_name">Test name</label>
         <input id="test_name" class="form-control" type="text" name="test_name" placeholder="My hardware test (01/99)">
       </div>
 
-      <div class="col-12 col-md-6 mb-3">
+      <div class="col-12 col-md-6 mb-3 mb-md-0">
         <label for="test_hardware">Hardware to test</label>
         <select id="test_hardware" class="form-select" name="test_hardware">
           <% for h in hardware %>
@@ -21,8 +21,10 @@
           <% end %>
         </select>
       </div>
+    </div>
 
-      <div class="col-12 col-md-4 mb-3">
+    <div class="row mb-0 mb-md-3">
+      <div class="col-12 col-md-4 mb-3 mb-md-0">
         <label for="test_benchmarks">Benchmarks</label>
         <select id="test_benchmarks" class="form-select" name="test_benchmarks[]" multiple>
           <% for b in benchmarks %>
@@ -31,14 +33,15 @@
         </select>
       </div>
 
-      <div class="col-12 col-md-8 mb-3">
+      <div class="col-12 col-md-8 mb-3 mb-md-0">
         <label for="test_description">Test description</label>
         <textarea id="test_description" class="form-control" name="test_description" placeholder="This is my test for a hardware..."></textarea>
+      </div>
     </div>
 
     <div class="row">
       <div class="col-12">
-        <input class="btn btn-primary" type="submit" value="Create Test">
+        <input class="btn btn-primary w-100" type="submit" value="Create Test">
       </div>
     </div>
   </form>

views/test/edit.erb

@@ -1,32 +1,49 @@
-<div class="grid-x grid-margin-x">
+<div class="row mb-3">
-  <div class="cell small-12">
+  <div class="col-12">
-    <h1>Editing: <%= hardware.name %></h1>
+    <h1>Editing: <%= test.name %></h1>
   </div>
 </div>
 
-<div class="grid-x grid-margin-x">
+<div class="row">
 
-  <form class="cell small-12" action="/hardware/<%= hardware.id %>/edit" method="post">
+  <form class="col-12" action="/test/<%= test.id %>/edit" method="post">
-    <div class="grid-x grid-padding-x">
+    <div class="row mb-0 mb-md-3">
-      <div class="cell medium-9">
+      <div class="col-12 col-md-6 mb-3 mb-md-0">
-        <label>
+        <label for="test_name">Test name</label>
-          Hardware name
+        <input id="test_name" class="form-control" type="text" name="test_name" placeholder="My hardware test (01/99)" value="<%= test.name %>">
-          <input type="text" name="hardware_name" placeholder="Example hardware" value="<%= hardware.name %>">
-        </label>
       </div>
 
-      <div class="cell medium-3">
+      <div class="col-12 col-md-6 mb-3 mb-md-0">
-        <label>
+        <label for="test_hardware">Hardware to test</label>
-          Type
+        <select id="test_hardware" class="form-select" name="test_hardware">
-          <select name="hardware_type">
+          <% for h in hardware %>
-            <option value="gpu" <% if hardware.type == 'gpu' %>selected<% end %>>Graphics card</option>
+            <option value="<%= h.id %>" <% if h.id == test.hardware.id %>selected<% end %>><%= h.name %></option>
-            <option value="cpu" <% if hardware.type == 'cpu' %>selected<% end %>>Processor</option>
+          <% end %>
-          </select>
+        </select>
-        </label>
       </div>
     </div>
 
-    <input type="submit" class="button" value="Submit">
+    <div class="row mb-0 mb-md-3">
+      <div class="col-12 col-md-4 mb-3 mb-md-0">
+        <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.benchmark?(b.id) %>selected<% end %>><%= b.name %></option>
+            <% end %>
+        </select>
+      </div>
+
+      <div class="col-12 col-md-8 mb-3 mb-md-0">
+        <label for="test_description">Test description</label>
+        <textarea id="test_description" class="form-control" name="test_description" placeholder="This is my test for a hardware..."><%= test.description %></textarea>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-12">
+        <input class="btn btn-primary w-100" type="submit" value="Submit Changes">
+      </div>
+    </div>
   </form>
 
 </div>

views/test/index.erb

@@ -26,7 +26,7 @@
           <% tests.each do |t| %>
             <tr>
               <td><a href="/test/<%= t.id %>"><%= t.name %></a></td>
-              <td><%= t.benchmark.length %></td>
+              <td><%= t.benchmarks.length %></td>
               <td><%= date_format(t.created_at) %></td>
               <td><%= date_format(t.updated_at) %></td>
             </tr>

views/test/view.erb

@@ -1,64 +1,56 @@
-<div class="grid-x grid-margin-x">
+<div class="row">
-  <div class="cell small-12">
+  <div class="col-12">
     <h1><%= test.name %></h1>
   </div>
 
-  <div class="cell small-12">
+  <div class="col-12">
     <p><a href="/test/<%= test.id %>/edit">Edit</a></p>
   </div>
 
-  <div class="cell small-12">
+  <div class="col-12">
-    Hardware tested: <%= test.hardware.name %>
+    <p>Hardware tested: <a href="/hardware/<%= test.hardware.id %>"><%= test.hardware.name %></a></p>
   </div>
 
-  <div class="cell small-12">
+  <div class="col-12">
     <p><%= test.description %></p>
   </div>
 </div>
 
 <hr>
 
-<div class="grix-x grix-margin-x">
+<div class="row">
-  <div class="cell small-12">
+  <div class="col-12">
-    <form class="u-full-width" action="/result/add" method="post">
+    <form action="/result/add" method="post">
       <input type="hidden" name="result_test" value="<%= test.id %>">
       <input type="hidden" name="result_referrer" value="test">
 
-      <div class="grid-x grid-margin-x">
+      <div class="row">
-        <div class="cell medium-5">
+        <div class="col-12 col-md-5 mb-3 mb-md-0">
-          <label for="result_benchmark">
+          <label for="result_benchmark">Add benchmark result:</label>
-            Add benchmark result:
+          <select class="form-select" id="result_benchmark" name="result_benchmark">
-            <select class="u-full-width" id="result_benchmark" name="result_benchmark">
+            <% test.benchmarks.each do |b| %>
-              <% test.benchmark.each do |b| %>
+              <option value="<%= b.id %>"><%= b.name %></option>
-                <option value="<%= b.id %>"><%= b.name %></option>
+            <% end %>
-              <% end %>
+          </select>
-            </select>
-          </label>
         </div>
 
-        <div class="cell medium-2">
+        <div class="col-4 col-md-2">
-          <label for="result_average">
+          <label for="result_average">Average score:</label>
-            Average score:
+          <input id="result_average" class="form-control" type="text" name="result_average" value="">
-            <input type="text" id="result_average" name="result_average" value="">
-          </label>
         </div>
 
-        <div class="cell medium-2">
+        <div class="col-4 col-md-2">
-          <label for="result_minimum">
+          <label for="result_minimum">Minimum score:</label>
-            Minimum score:
+          <input id="result_minimum" class="form-control" type="text" name="result_minimum" value="">
-            <input type="text" id="result_minimum" name="result_minimum" value="">
-          </label>
         </div>
 
-        <div class="cell medium-2">
+        <div class="col-4 col-md-2 mb-3 mb-md-0">
-          <label for="result_maximum">
+          <label for="result_maximum">Maximum score:</label>
-            Maximum score:
+          <input id="result_maximum" class="form-control" type="text" name="result_maximum" value="">
-            <input type="text" id="result_maximum" name="result_maximum" value="">
-          </label>
         </div>
 
-        <div class="cell medium-1">
+        <div class="col-12 col-md-1 d-flex align-items-stretch mb-3 mb-md-0">
-          <input type="submit" class="u-full-width button" value="Submit">
+          <input class="btn btn-primary w-100" type="submit" value="Submit">
         </div>
       </div>
     </form>
@@ -67,8 +59,8 @@
 
     <h4>Benchmark results for this test:</h4>
 
-    <table id="results-table" data-test-id="<%= test.id %>">
+    <table id="results-table" class="table table-hover table-responsive" data-test-id="<%= test.id %>">
-      <thead>
+      <thead class="table-light">
         <tr>
           <th>Benchmark name</th>
           <th>Scoring type</th>
@@ -79,7 +71,7 @@
         </tr>
       </thead>
       <tbody>
-        <% test.benchmark.each do |benchmark| %>
+        <% test.benchmarks.each do |benchmark| %>
           <tr data-benchmark-id="<%= benchmark.id %>"></tr>
         <% end %>
       </tbody>