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

This commit is contained in:
Gregory Ballantine 2022-11-25 16:30:22 -05:00
parent ade48ccb2f
commit 323152a8f5
14 changed files with 3425 additions and 2 deletions

4
.gitignore vendored
View File

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

61
Gruntfile.js Normal file
View File

@ -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']);
};

3
assets/js/bedabin.js Normal file
View File

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

65
assets/styles/nardah.scss Normal file
View File

@ -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;
}

3132
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

26
package.json Normal file
View File

@ -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"
}
}

View File

@ -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);
}
}

View File

@ -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

View File

@ -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');

View File

@ -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 %}

View File

@ -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>

9
views/layout/navbar.twig Normal file
View File

@ -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>

54
views/result/add.twig Normal file
View File

@ -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 %}

7
views/result/list.twig Normal file
View File

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