Added a table to display inventory on the home page; fixed the item add route

index.js

@@ -5,10 +5,10 @@ const app = express();
 const port = 3000;
 
 // initialize database connection
-const db = require('./src/models');
+(async () => {
-db.sequelize.sync({ force: true }).then(() => {
+  const db = require('./src/models');
-  console.log("Drop and re-sync db.");  
+  await db.sequelize.sync();
-});
+})();
 
 // set up body POST parameters
 app.use(express.json());

src/routes/home.js

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

views/index.twig

@@ -27,4 +27,25 @@
   </div>
 </section>
 
+<section class="row">
+  <table class="columns twelve">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Manufacturer</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for item in inventory %}
+        <tr>
+          <td>{{ item.name }}</td>
+          <td>{{ item.manufacturer }}</td>
+          <td>{{ item.type }}</td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</section>
+
 {% endblock %}

views/item/add.twig

@@ -17,19 +17,19 @@
       <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">
+          <input class="u-full-width" type="text" placeholder="My new item" id="item_name" name="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">
+          <input class="u-full-width" type="text" placeholder="Manufacturer" id="item_manufacturer" name="item_manufacturer">
         </div>
 
         <div class="six columns">
           <label for="item_type">Item type</label>
-          <select class="u-full-width" id="item_type">
+          <select class="u-full-width" id="item_type" name="item_type">
             <option value="cpu">Processor</option>
             <option value="motherboard">Motherboard</option>
             <option value="memory">Memory (RAM)</option>