Database-ready

html/RentForCamp/app/database.js

@@ -36,3 +36,23 @@ exports.init = function(express) {
   
 	return this;
 }
+
+exports.getItem = function(identifier, callback) {
+  const sql = `SELECT * FROM items WHERE identifier = '${identifier}'`
+  
+  pool.query(sql, function (error, results, fields) {
+    if (error) throw error;
+    
+    callback(results[0])
+  });
+}
+
+exports.getItemList = function(callback) {
+  const sql = `SELECT * FROM items i ORDER BY i.order ASC`
+  
+  pool.query(sql, function (error, results, fields) {
+    if (error) throw error;
+    
+    callback(results)
+  });
+}

html/RentForCamp/public/stylesheets/style.less

@@ -30,16 +30,16 @@ a {
     display: block;
     position: absolute;
     left: 5px;
-    top: 3px;
+    top: 5px;
-    line-height: 0.8em;
+    line-height: 1.2em;
     font-size: 1.8em;
     font-weight: bold;
     text-align: center;
     background-color: fade(@color_white, 10%);
     border: 1px solid @color_grey;
     border-radius: 3px;
-    width: 1.0em;
+    width: 1.5em;
-    height: 1.0em;
+    height: 1.5em;
     z-index: 2;
   }
 }
@@ -88,10 +88,6 @@ a {
   .item {
     display: block;
     position: relative;
-    min-height: 250px;
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: cover;
     
     &:hover {
       text-decoration: none;
@@ -106,6 +102,11 @@ a {
       }
     }
     
+    .preview {
+      height: auto;
+      width: 100%;
+    }
+    
     title {
       display: block;
       position: relative;
@@ -139,7 +140,7 @@ a {
   height: 100%;
   
   #stage {
-    height: 30%;
+    height: auto;
     border-bottom: 1px solid @color_orange;
     margin-bottom: 10px;
   }

html/RentForCamp/routes/index.js

@@ -3,11 +3,23 @@ var router  = express.Router();
 
 /* GET home page. */
 router.get('/', function(req, res, next) {
-  res.render('index', { title: 'Rent For Camp' });
+  var app = req.app
+  var db = app.get('DB')
+  
+  db.getItemList((items)=>{
+    res.render('index', { title: 'Rent For Camp', items: items })
+  })
 });
 
 router.get('/article/show/:identifier', function(req, res, next) {
-  res.render('detail', { title: 'Anhänger Stema Retro' });
+  var app = req.app
+  var db = app.get('DB')
+  
+  const identifier = req.params.identifier
+  
+  db.getItem(identifier, (item)=>{
+    res.render('detail', { title: item.title, item: item })
+  })
 });
 
 module.exports = router;

html/RentForCamp/views/detail.pug

@@ -3,10 +3,10 @@ extends layout
 block content
   #itemPage
     a#back(href="/") «
-    #stage(style="background-image: url('https://i.ebayimg.com/00/s/NzY1WDEwMjQ=/z/mMEAAOSwB9dama23/$_72.JPG')")
+    img#stage(src=item.previewfile)
 
     section#details
-      p Familienurlaub, Camping oder Wochenendausflug - erweitere deinen Stauraum um weitere 147 x 107cm.
+      p #{item.intro}
       ul
         li Gesamtgewicht: 750kg
         li Nutzlast: 580kg
@@ -14,4 +14,4 @@ block content
         li Radgröße: 10"
         li Ungebremst
       p.price
-        span.value nur 20€ / Tag
+        span.value #{item.price}

html/RentForCamp/views/index.pug

@@ -6,12 +6,8 @@ block content
     a.startLink(href="#", onclick="document.getElementById('items').scrollIntoView(); return false;") Jetzt stöbern
   
   section#items
-    a.item(href="#", style="background-image: url('https://i.ebayimg.com/00/s/NzY1WDEwMjQ=/z/mMEAAOSwB9dama23/$_72.JPG')")
+    each val, index in items
-      title Anhänger
+      a.item(href='/article/show/' + val.identifier)
-      intro Ich bin eine Beschreibung.
+        img.preview(src=val.previewfile)
-    a.item(href="#", style="background-image: url('https://i.pinimg.com/originals/40/e7/7f/40e77f882031dc270a1010fd373a19d5.jpg')")
+        title #{val.title}
-      title Diesel-Heizung
+        intro #{val.intro}
-      intro Ich bin eine Beschreibung.
-    a.item(href="#", style="background-image: url('https://tenturi.com/91/reifentritt.jpg')")
-      title Reifen-Tritthilfe
-      intro Ich bin eine Beschreibung.