Added a basic item add page/route

assets/styles/gargoyle.scss

@@ -53,3 +53,9 @@ body{
     }
   }
 }
+
+#main-content{
+  margin-top: 25px;
+  padding: 15px 25px;
+  background: white;
+}

index.js

@@ -4,6 +4,16 @@ const express = require('express');
 const app = express();
 const port = 3000;
 
+// initialize database connection
+const db = require('./src/models');
+db.sequelize.sync({ force: true }).then(() => {
+  console.log("Drop and re-sync db.");  
+});
+
+// set up body POST parameters
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+
 // load the template engine
 app.set('view engine', 'twig');
 
@@ -12,9 +22,12 @@ app.use(express.static('public'));
 
 // load route handlers
 const homeRoutes = require('./src/routes/home');
+const itemRoutes = require('./src/routes/item');
 
 // register route handlers
 app.get('/', homeRoutes.getIndex);
+app.get('/item/add', itemRoutes.getAdd);
+app.post('/item/add', itemRoutes.postAdd);
 
 // start app
 app.listen(port, () => {

package.json

@@ -25,6 +25,8 @@
   },
   "dependencies": {
     "express": "^4.18.2",
+    "sequelize": "^6.25.3",
+    "sqlite3": "^5.1.2",
     "twig": "^1.15.4"
   }
 }

src/models/index.js

@@ -0,0 +1,11 @@
+const Sequelize = require("sequelize");
+const sequelize = new Sequelize('sqlite::memory:');
+
+const db = {};
+
+db.Sequelize = Sequelize;
+db.sequelize = sequelize;
+
+db.items = require("./item.js")(sequelize, Sequelize);
+
+module.exports = db;

src/models/item.js

@@ -0,0 +1,21 @@
+module.exports = (sequelize, Sequelize) => {
+
+  const Item = sequelize.define("item", {
+  
+    name: {
+      type: Sequelize.STRING
+    },
+    
+    manufacturer: {
+      type: Sequelize.STRING
+    },
+    
+    type: {
+      type: Sequelize.STRING
+    }
+    
+  });
+  
+  return Item;
+
+};

src/routes/home.js

@@ -1,4 +1,9 @@
+const db = require('../models');
+const Item = db.items;
+
 // GET - /
-exports.getIndex = function (req, res) {
+exports.getIndex = async function (req, res) {
+  let items = await Item.findAll({});
+  console.log(items);
   res.render('index.twig');
 };

src/routes/item.js

@@ -0,0 +1,20 @@
+const db = require('../models');
+const Item = db.items;
+
+// GET - /item/add
+exports.getAdd = async function (req, res) {
+  res.render('item/add.twig');
+};
+
+// POST - /item/add
+exports.postAdd = async function (req, res) {
+  const item = await Item.create({
+    name: req.body.item_name,
+    manufacturer: req.body.item_manufacturer,
+    type: req.body.item_type,
+  });
+
+  console.log(`Saved item ${item.name} to the database.`);
+
+  res.redirect('/');
+};

views/index.twig

@@ -11,4 +11,20 @@
   </div>
 </header>
 
+<section class="row">
+  <div class="columns six">
+    <a href="/item/add">
+      <i class="fa-solid fa-plus"></i>
+      <p>Add Item</p>
+    </a>
+  </div>
+
+  <div class="columns six">
+    <a href="/item/search">
+      <i class="fa-solid fa-search"></i>
+      <p>Search</p>
+    </a>
+  </div>
+</section>
+
 {% endblock %}

views/item/add.twig

@@ -0,0 +1,49 @@
+{% extends 'layout.twig' %}
+
+{% block title %}Create Item{% endblock %}
+
+{% block content %}
+
+<!-- page header -->
+<header class="row">
+  <div class="columns twelve">
+    <h1>Add new item</h1>
+  </div>
+</header>
+
+<section class="row">
+  <div class="columns twelve">
+    <form action="/item/add" method="POST">
+      <div class="row">
+        <div class="columns twelve">
+          <label for="item_name">Item name:</label>
+          <input class="u-full-width" type="text" placeholder="My new item" id="item_name">
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="six columns">
+          <label for="item_manufacturer">Manufacturer:</label>
+          <input class="u-full-width" type="text" placeholder="Manufacturer" id="item_manufacturer">
+        </div>
+
+        <div class="six columns">
+          <label for="item_type">Item type</label>
+          <select class="u-full-width" id="item_type">
+            <option value="cpu">Processor</option>
+            <option value="motherboard">Motherboard</option>
+            <option value="memory">Memory (RAM)</option>
+            <option value="psu">Power Supply</option>
+            <option value="case">Case</option>
+            <option value="storage">Storage Device</option>
+            <option value="gpu">Graphics Card</option>
+          </select>
+        </div>
+      </div>
+
+      <input class="button-primary" type="submit" value="Submit">
+    </form>
+  </div>
+</section>
+
+{% endblock %}

views/layout.twig

@@ -18,8 +18,8 @@
       <ul>
         <li class="site-logo">Overseer</li>
         <li class="nav-link"><a href="/">Home</a></li>
-        <li class="nav-link"><a href="/search">Search</a></li>
-        <li class="nav-link"><a href="/add">Add Item</a></li>
+        <li class="nav-link"><a href="/item/search">Search</a></li>
+        <li class="nav-link"><a href="/item/add">Add Item</a></li>
       </ul>
     </div>
   </nav>