Change template engine from mustache to handlebars

create.sql

@@ -1 +1,5 @@
-CREATE TABLE tags(uuid TEXT PRIMARY KEY, tag TEXT);
+CREATE TABLE tags(uuid TEXT PRIMARY KEY, tag TEXT, label TEXT);
+INSERT INTO tags (uuid, tag, label) VALUES
+	("585687cb-1ff7-4106-a888-a40ff09b7fa1", "12121212", "OK Then"),
+	("85a6f785-51e1-4220-be75-fd306b973221", "12121212", "Other"),
+	("b4eabe35-9f96-4455-9294-56cc375cfbc4", "badc0ffee", " Brazil Theme");

jukebox/library/sqlite-backend.js

@@ -1,13 +1,9 @@
 "use strict";
 
-const sqlite3 = require('sqlite3');
-
 class SqliteBackend {
-  constructor(config) {
+  constructor(config, db) {
     this.config = config;
-    sqlite3.verbose();
-    this.db = new sqlite3.Database(this.config.db, sqlite3.OPEN_READONLY);
-    console.log(this.db);
+    this.db = db;
   }
 
   find(tag, callback) {
@@ -20,8 +16,8 @@ class SqliteBackend {
   }
 }
 
-module.exports = function(config) {
-  return new SqliteBackend(config);
+module.exports = function(config, db) {
+  return new SqliteBackend(config, db);
 };
 
 // vim:ts=2 sw=2 et:

jukebox/views.js

@@ -1,61 +0,0 @@
-"use strict";
-
-const mustache = require('mustache');
-const readFileSync = require('fs').readFileSync;
-
-var template_dir = undefined;
-
-class View {
-    constructor() {
-        this.template = readFileSync(template_dir + this.path(), {encoding: 'utf8'})
-        mustache.parse(this.template)
-    }
-
-    render(vars) {
-        return mustache.render(this.template, vars, this.partials());
-    }
-
-    path() {
-        throw 'Subclasses must define a template path';
-    }
-
-    partials() {
-        return {};
-    }
-}
-
-class BaseView extends View {
-    path() {
-        return 'base.mustache';
-    }
-}
-
-class IndexView extends View {
-    path() {
-        return 'index.mustache';
-    }
-
-    partials() {
-        return {
-            log: views.log.template
-        }
-    }
-}
-
-class LogView extends View {
-    path() {
-        return 'log.mustache';
-    }
-}
-
-const views = {};
-
-module.exports = function(tpl_dir) {
-    template_dir = tpl_dir;
-
-    views.base = new BaseView();
-    views.index = new IndexView();
-    views.log = new LogView();
-
-    return views;
-}

package.json

@@ -17,9 +17,9 @@
     "body-parser": "^1.19.0",
     "bufferutil": "^4.0.1",
     "express": "^4.17.1",
+    "express-handlebars": "^3.1.0",
     "glob": "^7.1.6",
     "morgan": "^1.7.0",
-    "mustache": "^3.1.0",
     "sqlite": "^3.0.3",
     "throttle-debounce": "^2.1.0",
     "utf-8-validate": "^5.0.2",

player.js

@@ -2,16 +2,13 @@
 
 const config = require('./config.json')
 
-const views = require('./jukebox/views')(__dirname + '/templates/');
 const library = require('./jukebox/library');
 
-const MediaLibrarySqliteBackend = require('./jukebox/library/sqlite-backend')(config);
-const MediaLibrary = new library.Library(config, MediaLibrarySqliteBackend);
-
 const ScriptRunner = require('./jukebox/scripts')(config);
 
 const express = require('express');
-const morgan = require('morgan')
+const morgan = require('morgan');
+const handlebars = require('express-handlebars');
 
 const { createLogger, format, transports } = require('winston');
 
@@ -29,6 +26,12 @@ const MediaPlayer = require('./jukebox/media-player')(config, logger);
 const TagReader = require('./jukebox/tag-reader')(config, logger);
 const play_log = require('./jukebox/library/play-log');
 
+const sqlite3 = require('sqlite3');
+var db = new sqlite3.Database(config.db);
+
+const MediaLibrarySqliteBackend = require('./jukebox/library/sqlite-backend')(config, db);
+const MediaLibrary = new library.Library(config, MediaLibrarySqliteBackend);
+
 const PlayLog = new play_log.PlayLog();
 
 var app = express();
@@ -86,37 +89,53 @@ MediaPlayer.on('command', tag => {
   PlayLog.updateLog(tag);
 });
 
-PlayLog.on('update', tag => {
-  var data = {
-    html: views.log.render({ play_log: PlayLog.getLog() }),
-    tag: tag.tag
-  };
-
-  wss.broadcast(JSON.stringify(data));
+var hbs = handlebars.create({
+  extname: ".hbs",
 });
 
 MediaLibrary.on('action', MediaPlayer.handleTag.bind(MediaPlayer));
 
+app.engine(".hbs", hbs.engine);
+
+app.set('view engine', '.hbs');
+app.set('views', __dirname + '/views');
+
 app.use(morgan('dev'))
 app.use(express.static(__dirname + '/static'))
 
+PlayLog.on('update', tag => {
+  app.render("log", { layout: false, play_log: PlayLog.getLog(), }, (err, html) => {
+    var data = {
+      html: html,
+      tag: tag.tag
+    };
+
+    wss.broadcast(JSON.stringify(data));
+  });
+});
+
 app.get('/', function (req, res, next) {
-  try {
-    var index = views.index.render({
-      last_tag: PlayLog.getLastTag()
-      , config: config
-      , play_log: PlayLog.getLog()
+  res.render('index', {
+    last_tag: PlayLog.getLastTag(),
+    config: config,
+    play_log: PlayLog.getLog(),
+  });
+});
+
+app.get('/library', function (req, res, next) {
+  db.all("SELECT * FROM tags", (err, rows) => {
+    var content = views.library.render({
+      rows: rows,
+      config: config,
     });
 
     var html = views.base.render({
-      title: 'Home'
-      , content: index
-    })
+      title: 'Library',
+      content: content,
+    });
 
-    res.send(html)
-  } catch (e) {
-    next(e)
-  }
+    res.send(html);
+  });
 });
 
 wss.broadcast = function broadcast(data) {

static/css/index.css

@@ -1,56 +1,23 @@
-@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro:400,200,700");
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 body {
-  font-family: 'Source Code Pro', monospace;
+    font-family: Arial;
+    margin: 1em;
 }
-.header {
-  background: url("https://images.unsplash.com/photo-1451337516015-6b6e9a44a8a3?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925");
-  background-position: center;
+h1 {
+    margin: 0.5em 0;
+    color: hsl(182.8, 70.2%, 42.2%)
 }
-.header .page-title {
-  font-weight: 200;
-  font-size: 80px;
-  text-align: center;
-  padding: 100px;
-  text-transform: uppercase;
-  color: #fff;
+li {
+    margin-left: 1em;
 }
-.nav {
-  background: #000;
-  text-align: center;
+p {
+    margin: 1em 0;
 }
-.nav li {
-  display: inline-block;
-}
-.nav a {
-  display: inline-block;
-  padding: 20px;
-  color: #fff;
-  text-decoration: none;
-}
-.nav a:hover {
-  background-color: #3ab795;
-  text-decoration: underline;
-}
-.main-content {
-  margin: 50px auto;
-  max-width: 600px;
-}
-.main-content p {
-  line-height: 1.6;
-  margin-bottom: 1.7em;
-}
-.footer {
-  margin: 50px auto;
-  max-width: 600px;
-  border-top: 1px solid #444;
-  padding: 20px 0;
-}
-.footer p {
-  color: #444;
-  font-size: 12px;
+footer {
+    margin-top: 2em;
+    font-size: 0.75rem;
 }

views/layouts/main.hbs

@@ -4,6 +4,7 @@
 <head>
     <title>jukebox.stop.wtf</title>
     <link rel=stylesheet href=/css/index.css>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 
 <body>
@@ -11,11 +12,11 @@
         <h1 class=page-title>jukebox.stop.wtf</h1>
     </div>
     <div class="main-content">
-        {{{ content }}}
+        {{{body}}}
     </div>
-    <div class="footer">
+    <footer>
         <p>made with love by annika</p>
-    </div>
+    </footer>
     <script src="/jukebox.js"></script>
 </body>
 

views/library.hbs

@@ -0,0 +1 @@
+hello

views/log.hbs

@@ -0,0 +1,2 @@
+{{! Used for rending *just* the log line partial. }}
+{{> log}}