Added a basic item add page/route

This commit is contained in:
Gregory Ballantine 2022-11-02 13:45:40 -04:00
parent 3c0ebc7001
commit aa980948d8
11 changed files with 2405 additions and 63 deletions

View File

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

View File

@ -4,6 +4,16 @@ const express = require('express');
const app = express(); const app = express();
const port = 3000; 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 // load the template engine
app.set('view engine', 'twig'); app.set('view engine', 'twig');
@ -12,9 +22,12 @@ app.use(express.static('public'));
// load route handlers // load route handlers
const homeRoutes = require('./src/routes/home'); const homeRoutes = require('./src/routes/home');
const itemRoutes = require('./src/routes/item');
// register route handlers // register route handlers
app.get('/', homeRoutes.getIndex); app.get('/', homeRoutes.getIndex);
app.get('/item/add', itemRoutes.getAdd);
app.post('/item/add', itemRoutes.postAdd);
// start app // start app
app.listen(port, () => { app.listen(port, () => {

2319
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

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

11
src/models/index.js Normal file
View File

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

21
src/models/item.js Normal file
View File

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

View File

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

20
src/routes/item.js Normal file
View File

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

View File

@ -11,4 +11,20 @@
</div> </div>
</header> </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 %} {% endblock %}

49
views/item/add.twig Normal file
View File

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

View File

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