From 689bc85a620ae6e69296eb5913df0f324dee2d3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= <kasper@kasperrt.no>
Date: Wed, 8 Aug 2018 22:21:53 +0200
Subject: [PATCH] Started work on fetching frontpage-lists at the same time as
 sending the html

---
 server/public/assets/css/style.css            |  4 --
 server/public/assets/js/frontpage.js          |  4 +-
 .../partials/frontpage/channel.handlebars     | 57 ++++++++++--------
 .../partials/frontpage/channels.handlebars    |  6 +-
 .../partials/frontpage/header.handlebars      |  5 +-
 server/routing/client/router.js               | 59 ++++++++++++++++++-
 6 files changed, 99 insertions(+), 36 deletions(-)

diff --git a/server/public/assets/css/style.css b/server/public/assets/css/style.css
index 1a2ae0d5..7726ec47 100755
--- a/server/public/assets/css/style.css
+++ b/server/public/assets/css/style.css
@@ -899,10 +899,6 @@ nav .zbrand{
     height: 120px;
 }
 
-#channels{
-    display: none;
-}
-
 .white-bg{
     background-color:white !important;
 }
diff --git a/server/public/assets/js/frontpage.js b/server/public/assets/js/frontpage.js
index 2a5a736f..9fe17e5a 100755
--- a/server/public/assets/js/frontpage.js
+++ b/server/public/assets/js/frontpage.js
@@ -269,7 +269,7 @@ var Frontpage = {
         if(window.location.hostname == "fb.zoff.me") {
             add = "https://zoff.me";
         }
-        Helper.ajax({
+        /*Helper.ajax({
             url: add + "/api/frontpages",
             method: "get",
             success: function(response){
@@ -282,7 +282,7 @@ var Frontpage = {
                     Frontpage.get_frontpage_lists();
                 }, 3000);
             },
-        });
+        });*/
     },
 
     start_snowfall: function() {
diff --git a/server/public/partials/frontpage/channel.handlebars b/server/public/partials/frontpage/channel.handlebars
index 4bec4a5e..7ba97e27 100644
--- a/server/public/partials/frontpage/channel.handlebars
+++ b/server/public/partials/frontpage/channel.handlebars
@@ -1,26 +1,31 @@
-<li class="chan-card col s6 m4 l4">
-    <div class="card sticky-action">
-        <a class="chan-link">
-            <div class="chan-bg card-image cardbg"></div>
-            <div class="card-content">
-                <i class="material-icons pin">star_rate</i>
-                <p class="left-align">
-                    <span class="chan-name flow-text truncate"></span>
-                    <br>
-                    <span class="highlighted">Viewers:&nbsp;</span>
-                    <span class="chan-views"></span>
-                    <br>
-                    <span class="highlighted">Songs:&nbsp;</span>
-                    <span class="chan-songs"></span>
-                </p>
-            </div>
-            <div class="card-action noselect">
-                <span class="chan-link-element waves-effect waves-orange btn-flat">Listen</span>
-            </div>
-            <div class="card-reveal">
-                <span class="card-title grey-text text-darken-4 truncate"></span>
-                <p class="description_text"></p>
-            </div>
-        </a>
-    </div>
-</li>
+
+    <li class="chan-card col s6 m4 l4">
+        <div class="card sticky-action">
+            <a id="chan-link" href="{{_id}}/">
+                <div class="chan-bg card-image cardbg" style="background-image:url({{thumbnail}});"></div>
+                <div class="card-content">
+                    {{#if pinned}}
+                        <i class="material-icons pin">star_rate</i>
+                    {{/if}}
+                    <p class="left-align">
+                        <span class="chan-name flow-text truncate">{{_id}}</span>
+                        <br>
+                        <span class="highlighted">Viewers:&nbsp;</span>
+                        <span class="chan-views">{{viewers}}</span>
+                        <br>
+                        <span class="highlighted">Songs:&nbsp;</span>
+                        <span class="chan-songs">{{count}}</span>
+                    </p>
+                </div>
+                <div class="card-action noselect">
+                    <span class="chan-link-element waves-effect waves-orange btn-flat">Listen</span>
+                </div>
+                {{#if description}}
+                    <div class="card-reveal">
+                        <span class="card-title grey-text text-darken-4 truncate">{{_id}}</span>
+                        <p class="description_text">{{description}}</p>
+                    </div>
+                {{/if}}
+            </a>
+        </div>
+    </li>
diff --git a/server/public/partials/frontpage/channels.handlebars b/server/public/partials/frontpage/channels.handlebars
index 2aaadd3c..b2f53965 100644
--- a/server/public/partials/frontpage/channels.handlebars
+++ b/server/public/partials/frontpage/channels.handlebars
@@ -1,5 +1,9 @@
 <div id="channel-list-container">
     <ul class="row" id="channels">
-        {{> frontpage/channel}}
+        {{#each channels}}
+            {{#if frontpage}}
+                {{> frontpage/channel}}
+            {{/if}}
+        {{/each}}
     </ul>
 </div>
diff --git a/server/public/partials/frontpage/header.handlebars b/server/public/partials/frontpage/header.handlebars
index cc576944..08948e9c 100644
--- a/server/public/partials/frontpage/header.handlebars
+++ b/server/public/partials/frontpage/header.handlebars
@@ -4,7 +4,10 @@
             <a href="#" class="brand-logo">
                 <img class="zicon" src="/assets/images/z.svg" alt="zoff" title="Zoff" />
             </a>
-            <div id="frontpage-viewer-counter" class="noselect" title="Divided among all channels. Hidden or not"></div>
+            <div id="frontpage-viewer-counter" class="noselect" title="Divided among all channels. Hidden or not">
+                <i class="material-icons frontpage-viewers">visibility</i>
+                {{viewers}}
+            </div>
             <ul class="right">
                 {{#if client}}
                     <li><a class="header-buttons waves-effect waves-orange orange" id="client-mode-button" title="Client mode" href="https://zoff.me">Client</a></li>
diff --git a/server/routing/client/router.js b/server/routing/client/router.js
index 81bd6529..b91ad2bb 100644
--- a/server/routing/client/router.js
+++ b/server/routing/client/router.js
@@ -7,6 +7,8 @@ var analytics = "xx";
 var mongojs = require('mongojs');
 var token_db = mongojs("tokens");
 var Functions = require(pathThumbnails + '/handlers/functions.js');
+
+var db = require(pathThumbnails + '/handlers/db.js');
 //var db = require(pathThumbnails + '/handlers/db.js');
 
 try {
@@ -142,14 +144,67 @@ function root(req, res, next) {
                 embed: false,
                 client: false,
                 og_image: "https://zoff.me/assets/images/small-square.jpg",
+                channels: [],
             }
             if(subdomain[0] == "client") {
                 data.client = true;
             }
-            res.render('layouts/client/frontpage', data);
+            var project_object = {
+                "_id": 1,
+                "count": 1,
+                "frontpage": 1,
+                "id": 1,
+                "title": 1,
+                "viewers": 1,
+                "pinned": 1,
+                "description": 1,
+                "thumbnail": {
+                    $ifNull: [ {$cond: {
+                        "if": {
+                            "$or": [
+                                { "$eq": [ "$thumbnail", ""] },
+                                { "$eq": [ "$thumbnail", null] },
+                                { "$eq": [ "$thumbnail", undefined] }
+                            ]
+                        },
+                        then: {
+                            $concat : [ "https://img.youtube.com/vi/", "$id", "/mqdefault.jpg"]
+                        },
+                        else: "$thumbnail"
+                    }}, { $concat : [ "https://img.youtube.com/vi/", "$id", "/mqdefault.jpg"]}]
+
+                }
+            };
+            db.collection("frontpage_lists").aggregate([
+                {
+                    "$match": {
+                        frontpage: true,
+                        count: {$gt: 0},
+                    }
+                },
+                {
+                    "$project": project_object
+                },
+                {
+                    "$sort" : {
+                        "pinned": -1,
+                        "count": -1,
+                        "accessed": -1,
+                        "title": 1
+                    }
+                },
+                ], function(err, docs) {
+                db.collection("connected_users").find({"_id": "total_users"}, function(err, tot) {
+                    data.channels = docs.slice(0, 12);
+                    data.channel_list = docs;
+                    data.viewers = tot[0].total_users.length;
+                    res.render('layouts/client/frontpage', data);
+                });
+            });
+
         }
     } catch(e) {
-        //console.log(e);
+        console.log(e);
         //res.redirect("https://zoff.me");
     }
 }