Added Grunt for compiling CSS/JS; added start of Result controller

.gitignore

@@ -4,6 +4,10 @@
 # Local data directory
 data/
 
+# NPM dependencies for Grunt
+node_modules/
+
 # Compiled CSS and JS
 public/css/
 public/js/
+

Gruntfile.js

@@ -0,0 +1,61 @@
+module.exports = function(grunt) {
+
+  // Project configuration.
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+
+    sass: {
+      dist: {
+        options: {
+          style: 'compressed'
+        },
+        files: [{
+          expand: true,
+          cwd: 'assets/styles',
+          src: ['**/*.scss'],
+          dest: 'public/css',
+          ext: '.css'
+        }]
+      }
+    },
+
+    uglify: {
+      options: {
+        mangle: false
+      },
+      compile: {
+        files: {
+          'public/js/bedabin.min.js': ['assets/js/**/*.js']
+        }
+      }
+    },
+
+    watch: {
+      css: {
+        files: ['assets/styles/**/*.scss'],
+        tasks: ['sass'],
+        options: {
+          atBegin: true,
+          spawn: false
+        }
+      },
+      js: {
+        files: ['assets/js/**/*.js'],
+        tasks: ['uglify'],
+        options: {
+          atBegin: true,
+          spawn: false
+        }
+      }
+    }
+  });
+
+  // Load plugins.
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-contrib-sass');
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+
+  // CLI tasks.
+  grunt.registerTask('default', ['sass', 'uglify']);
+
+};

assets/js/bedabin.js

@@ -0,0 +1,3 @@
+$(document).ready(function() {
+  console.log("ready");
+});

assets/styles/nardah.scss

@@ -0,0 +1,65 @@
+$primary-color: navy;
+$primary-color-highlight: lighten($primary-color, 10%);
+
+$nav-height: 65px;
+
+body{
+  margin: 0;
+  padding: $nav-height 0 0;
+  background: white;
+}
+
+a{
+  color: $primary-color;
+  transition: all 230ms ease-in-out;
+  &:hover{
+    color: $primary-color-highlight;
+  }
+}
+
+#main-nav{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: $nav-height;
+  background: navy;
+  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;
+  }
+}
+
+#main-wrapper{
+  max-width: 1180px;
+  margin-top: 15px;
+  padding: 15px 20px;
+}

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "colossus",
+  "version": "1.0.0",
+  "description": "Self-hosted database for organizing PC hardware benchmarking results",
+  "main": "index.js",
+  "scripts": {
+    "grunt": "grunt",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.metaunix.net/BitGoblin/colossus"
+  },
+  "keywords": [
+    "inventory"
+  ],
+  "author": "Gregory Ballantine <gballantine@bitgoblin.tech>",
+  "license": "BSD-2-Clause",
+  "dependencies": {
+    "grunt": "^1.5.3",
+    "grunt-contrib-sass": "^2.0.0",
+    "grunt-contrib-uglify": "^5.2.2",
+    "grunt-contrib-watch": "^1.1.0",
+    "sass": "^1.56.1"
+  }
+}

src/Controllers/ResultController.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace BitGoblin\Colossus\Controllers;
+
+use Psr\Http\Message\ResponseInterface as Response;
+use Psr\Http\Message\ServerRequestInterface as Request;
+use Slim\Routing\RouteContext;
+use Slim\Views\Twig;
+
+class ResultController extends Controller {
+
+  public function getList(Request $request, Response $response): Response {
+    $view = Twig::fromRequest($request);
+    return $view->render($response, 'result/list.twig');
+  }
+
+  public function getAdd(Request $request, Response $response): Response {
+    $view = Twig::fromRequest($request);
+    return $view->render($response, 'result/add.twig');
+  }
+
+  public function postAdd(Request $request, Response $response): Response {
+    // will add data to database later...
+
+    // redirect the user back to the home page
+    $routeContext = RouteContext::fromRequest($request);
+    $routeParser = $routeContext->getRouteParser();
+    return $response
+      ->withHeader('Location', $routeParser->urlFor('result.list'))
+      ->withStatus(302);
+  }
+
+}

src/app.php

@@ -16,6 +16,12 @@ $container = new Container();
 AppFactory::setContainer($container);
 $app = AppFactory::create();
 
+// Allow body parsing for POST parameters
+$app->addBodyParsingMiddleware();
+
+// Add Error Handling Middleware
+$app->addErrorMiddleware(true, false, false);
+
 // Create Twig
 $twig = Twig::create(__DIR__ . '/../views', ['cache' => false]);
 // Add Twig-View Middleware

src/routes.php

@@ -1,3 +1,7 @@
 <?php
 
 $app->get('/', '\\BitGoblin\\Colossus\\Controllers\\HomeController:getIndex')->setName('dashboard');
+
+$app->get('/result', '\\BitGoblin\\Colossus\\Controllers\\ResultController:getList')->setName('result.list');
+$app->get('/result/add', '\\BitGoblin\\Colossus\\Controllers\\ResultController:getAdd')->setName('result.add');
+$app->post('/result/add', '\\BitGoblin\\Colossus\\Controllers\\ResultController:postAdd');

views/index.twig

@@ -4,6 +4,16 @@
 
 {% block content %}
 
-<p>This is a test.</p>
+<div class="row">
+  <div class="twelve columns">
+    <h1>Welcome to Colossus!</h1>
+    <p>Using Colossus, you can easily organize your hardware benchmark results.</p>
+
+    <hr>
+
+    <p><a href="{{ url_for('result.list') }}">View saved results</a></p>
+    <p><a href="{{ url_for('result.add') }}">Add a new result</a></p>
+  </div>
+</div>
 
 {% endblock %}

views/layout.twig

@@ -4,8 +4,17 @@
   <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="/css/nardah.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
+  <script src="/js/bedabin.min.js"></script>
 </head>
 <body>
-  {% block content %}{% endblock %}
+  {% include 'layout/navbar.twig' %}
+
+  <div id="main-wrapper" class="container">
+    {% block content %}{% endblock %}
+  </div>
+  
 </body>
 </html>

views/layout/navbar.twig

@@ -0,0 +1,9 @@
+<nav id="main-nav">
+
+  <ul class="nav-left">
+    <li class="site-logo">Colossus</li>
+    <li><a href="{{ url_for('dashboard') }}">Dashboard</a></li>
+    <li><a href="/result">Results</a></li>
+  </ul>
+  
+</nav>

views/result/add.twig

@@ -0,0 +1,54 @@
+{% extends 'layout.twig' %}
+
+{% block title %}Add Benchmark Result{% endblock %}
+
+{% block content %}
+
+<div class="row">
+  <div class="twelve columns">
+    <h1>Add new benchmark result</h1>
+  </div>
+</div>
+
+<div class="row">
+  <div class="twelve columns">
+    <form action="{{ url_for('result.add') }}" method="POST" class="u-full-width">
+      <div class="row">
+        <div class="six columns">
+          <label for="result_component">Hardware name:</label>
+          <input type="text" id="result_component" class="u-full-width" name="result_component">
+        </div>
+        <div class="six columns">
+          <label for="result_benchmark">Benchmark used:</label>
+          <input type="text" id="result_benchmark" class="u-full-width" name="result_benchmark">
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="six columns">
+          <label for="result_type">Score type:</label>
+          <select id="result_type" class="u-full-width" name="result_type">
+            <option value="fps">Frames per second</option>
+            <option value="points">Point value</option>
+          </select>
+        </div>
+        <div class="two columns">
+          <label for="result_avg">Average:</label>
+          <input type="number" id="result_avg" class="u-full-width" name="result_avg">
+        </div>
+        <div class="two columns">
+          <label for="result_min">Minimum:</label>
+          <input type="number" id="result_min" class="u-full-width" name="result_min">
+        </div>
+        <div class="two columns">
+          <label for="result_max">Maximum:</label>
+          <input type="number" id="result_max" class="u-full-width" name="result_max">
+        </div>
+      </div>
+
+      <input class="button button-primary" type="submit" value="Submit">
+    </form>
+  </div>
+</div>
+
+{% endblock %}

views/result/list.twig

@@ -0,0 +1,7 @@
+{% extends 'layout.twig' %}
+
+{% block title %}List of Results{% endblock %}
+
+{% block content %}
+  <p>Results list...</p>
+{% endblock %}