Add popular

Author: soudy

frontEnd/index.html

@@ -5,7 +5,6 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Student Saver</title>
-    <link rel="icon" type="image/png" href="./src/images/favicon.jpg">
     <link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="styles.css" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

frontEnd/src/index.js

@@ -1,6 +1,6 @@
 var m = require("mithril");
-var sitesList = require("./views/sitesList");
 var searchBar = require("./views/searchBar");
+var popular = require("./views/popular");
 var addForm = require("./views/addForm");
 var layout = require("./views/layout");
 
@@ -10,6 +10,11 @@ m.route(document.body, "/list", {
             return m(layout, m(searchBar))
         }
     },
+    "/popular": { 
+        render: function() { 
+            return m(layout, m(popular))
+        }
+    },
     "/add": { 
         render: function() { 
             return m(layout, m(addForm))

frontEnd/src/models/sites.js

@@ -13,6 +13,18 @@ var sites = {
         })
     },
 
+    popular: [],
+    loadPopular: function() { 
+        return m.request({ 
+            method: "GET",
+            url: "https://api.schroeff.com/sites",
+        })
+        .then(function(result) { 
+            sites.popular = result;
+            console.log(sites.popular);
+        })
+    },
+
     newSite: {},
     add: function(site) {
         return m.request({ 

frontEnd/src/views/layout.js

@@ -8,6 +8,7 @@ module.exports = {
                 m("div.inner", [
                     m("nav.nav nav-masthead justify-content-center", [
                         m(m.route.Link, {href: "/list", class: 'nav-link' + (route === "/list" ? ' active' : '')}, "Zoeken"),
+                        m(m.route.Link, {href: "/popular", class: 'nav-link' + (route === "/popular" ? ' active' : '')}, "Populaire kortingen"),
                         m(m.route.Link, {href: "/add", class: 'nav-link' + (route === "/add" ? ' active' : '')}, "Voeg korting toe")
                     ])
                 ])

frontEnd/src/views/popular.js

@@ -0,0 +1,33 @@
+var m = require("mithril");
+var sites = require("../models/sites");
+
+module.exports = { 
+  oninit: function() {
+    sites.loadPopular();
+  },
+  view: function() { 
+    return m("div.card-columns popular", sites.popular.map(function(site) {
+      const thumbnail = site.thumbnail || 'https://seeklogo.net/wp-content/themes/seeklogo-2017/images/not-available.jpg';
+      const title = site.product_name ? `${site.site_name}: ${site.product_name}` : site.site_name;
+      const requirements =
+        site.discount_requirements !== null
+          ?  m('p.card-text', [
+              m('b', 'Voorwaarden'),
+              m('span', `: ${site.discount_requirements}`)])
+          : null;
+      const score = site.upvotes - site.downvotes;
+
+        return m('div.card', [
+          m(`img[src=${thumbnail}].card-img-top .coupon-thumbnail`),
+          m('div.card-body', [
+            m(`a[href=${site.url}]`, m('h4.card-title', title)),
+            m('p.card-text', site.description),
+            requirements,
+            m('div.card-footer', [
+              `${score} punten`,
+            ]),
+          ])
+        ]);
+    }));
+  }
+};

frontEnd/src/views/sitesList.js

@@ -39,7 +39,7 @@ body {
   justify-content: center;
   color: #fff;
   text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
-  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
+  /*box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);*/
 }
 
 .cover-container {
@@ -111,7 +111,7 @@ body {
 }
 
 main {
-  width: 50%;
+  width: 60%;
   margin: 0 auto;
 }
 
@@ -145,3 +145,10 @@ main {
     border-radius: 0px 30px 30px 0px;
 }
 
+.card {
+  background: #262626 !important;
+}
+
+.popular {
+  margin-top: 2em;
+}