From ecc48226a7e09f13b0524d46626eafed6478e8a7 Mon Sep 17 00:00:00 2001
From: Gregory Ballantine <gballantine@metaunix.net>
Date: Sun, 26 Nov 2023 02:07:20 -0500
Subject: [PATCH] Added pages to list projects and create new ones

---
 index.js                   |  9 +++++++++
 public/css/eye.css         |  6 ++++++
 src/routes/index.js        | 11 +++++++----
 src/routes/project.js      | 29 ++++++++++++++++++++++++++++
 views/index/dashboard.twig | 39 +++++++++++++++++++++++++++++++++++++-
 views/project/add.twig     | 27 ++++++++++++++++++++++++++
 views/project/list.twig    | 29 ++++++++++++++++++++++++++++
 7 files changed, 145 insertions(+), 5 deletions(-)
 create mode 100644 src/routes/project.js
 create mode 100644 views/project/add.twig
 create mode 100644 views/project/list.twig

diff --git a/index.js b/index.js
index 4979877..449b1f0 100644
--- a/index.js
+++ b/index.js
@@ -22,6 +22,10 @@ sequelize.sync({}).then(function(){
 const session = require("express-session");
 app.use(session({ resave: true, secret: "123456", saveUninitialized: true }));
 
+// enable body-parser to read form data
+const bodyParser = require('body-parser');
+app.use(bodyParser.urlencoded({ extended: true }));
+
 // enable the Twig template engine
 app.set('view engine', 'twig');
 
@@ -30,9 +34,14 @@ app.use(express.static('public'));
 
 // load routes
 const indexRoutes = require('./src/routes/index');
+const projectRoutes = require('./src/routes/project');
 
 // register routes
 app.get('/', indexRoutes.getIndex);
+app.get('/project', projectRoutes.getIndex);
+app.get('/project/list', projectRoutes.getList);
+app.get('/project/add', projectRoutes.getAdd);
+app.post('/project/add', projectRoutes.postAdd);
 
 app.listen(port, () => {
   console.log(`Leviathan listening on port ${port}`);
diff --git a/public/css/eye.css b/public/css/eye.css
index d0a91bd..e707f95 100644
--- a/public/css/eye.css
+++ b/public/css/eye.css
@@ -12,6 +12,12 @@ body{
   background: #eee;
 }
 
+textarea{
+  max-width: 100%;
+  min-width: 100%;
+  height: 100px;
+}
+
 .container{
   max-width: 1024px;
 }
diff --git a/src/routes/index.js b/src/routes/index.js
index 85ddd74..28fa14a 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -1,6 +1,9 @@
+const Project = require('../models').models.Project;
+
 // GET / - primary app dashboard
-exports.getIndex = function(req, res) {
-
-  res.render('index/dashboard', { title: 'Hey', message: 'Hello there!' });
-
+exports.getIndex = async function(req, res) {
+  var projects = await Project.findAll();
+  res.render('index/dashboard', {
+    projects: projects
+  });
 };
diff --git a/src/routes/project.js b/src/routes/project.js
new file mode 100644
index 0000000..806dbdb
--- /dev/null
+++ b/src/routes/project.js
@@ -0,0 +1,29 @@
+const Project = require('../models').models.Project;
+
+// GET /project - redirects to project list
+exports.getIndex = async function(req, res) {
+  res.redirect('/project/list');
+};
+
+// GET /project/list - list of projects
+exports.getList = async function(req, res) {
+  var projects = await Project.findAll();
+  res.render('project/list', {
+    projects: projects
+  });
+};
+
+// GET /project/add - add a new project
+exports.getAdd = async function(req, res) {
+  res.render('project/add');
+};
+
+// POST /project/add - add the project to the database
+exports.postAdd = async function(req, res) {
+  var project = await Project.create({
+    title: req.body.project_title,
+    description: req.body.project_description
+  });
+
+  res.redirect('/project');
+};
diff --git a/views/index/dashboard.twig b/views/index/dashboard.twig
index cc47bb2..87efade 100644
--- a/views/index/dashboard.twig
+++ b/views/index/dashboard.twig
@@ -3,5 +3,42 @@
 {% block title %}Dashboard{% endblock %}
 
 {% block content %}
-<p>This is the dashboard!</p>
+<div class="row">
+  <h2>Recently updated projects:</h2>
+  <table class="twelve columns">
+    <thead>
+      <tr>
+        <td>Title</td>
+        <td>Last updated</td>
+      </tr>
+    </thead>
+    <tbody>
+      {% for p in projects %}
+        <tr>
+          <td>{{ p.title }}</td>
+          <td>{{ p.updatedAt | date('m/d/Y g:ia') }}</td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>
+
+<hr>
+
+<div class="row">
+  <h2>Recently added results:</h2>
+  <table class="twelve columns">
+    <thead>
+      <tr>
+        <td>Benchmark</td>
+        <td>Hardware</td>
+        <td>Average/Score</td>
+        <td>Scoring type</td>
+        <td>Added on</td>
+      </tr>
+    </thead>
+    <tbody>
+    </tbody>
+  </table>
+</div>
 {% endblock %}
diff --git a/views/project/add.twig b/views/project/add.twig
new file mode 100644
index 0000000..bafc183
--- /dev/null
+++ b/views/project/add.twig
@@ -0,0 +1,27 @@
+{% extends 'layouts/default.twig' %}
+
+{% block title %}Add a Project{% endblock %}
+
+{% block content %}
+<div class="row">
+  <h2>Add a project</h2>
+
+  <form class="twelve columns" action="/project/add" method="POST">
+    <div class="row">
+      <label for="project_title">
+        Project title:
+        <input id="project_title" class="u-full-width" type="text" name="project_title" placeholder="My hardware benchmarking project">
+      </label>
+    </div>
+
+    <div class="row">
+      <label for="project_description">
+        Project description:
+        <textarea id="project_description" class="twelve columns" cols="30" rows="10" name="project_description"></textarea>
+      </label>
+    </div>
+
+    <input class="button-primary u-full-width" type="submit" value="Submit">
+  </form>
+</div>
+{% endblock %}
diff --git a/views/project/list.twig b/views/project/list.twig
new file mode 100644
index 0000000..b2edda9
--- /dev/null
+++ b/views/project/list.twig
@@ -0,0 +1,29 @@
+{% extends 'layouts/default.twig' %}
+
+{% block title %}List of Projects{% endblock %}
+
+{% block content %}
+<div class="row">
+  <h2>Projects</h2>
+  <a href="/project/add">Add a project</a>
+
+  <table class="twelve columns">
+    <thead>
+      <tr>
+        <td>Title</td>
+        <td>Created at</td>
+        <td>Last updated</td>
+      </tr>
+    </thead>
+    <tbody>
+      {% for p in projects %}
+        <tr>
+          <td><a href="/project/{{ p.id }}">{{ p.title }}</a></td>
+          <td>{{ p.createdAt | date('m/d/Y g:ia') }}</td>
+          <td>{{ p.updatedAt | date('m/d/Y g:ia') }}</td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>
+{% endblock %}