annika/pi-rfid-jukebox
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Replace pug templating with mustache

Browse Source 
Resolves #1
This commit is contained in:
Annika Backstrom 2017-04-08 23:53:36 -04:00
parent d87b6a2313
commit 65b3ea7a36
9 changed files with 58 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package.json
View File

@ -17,9 +17,10 @@
"express": "^4.14.0",
"glob": "^7.1.1",
"morgan": "^1.7.0",
"nodemon": "^1.9.2",
"pug": "^2.0.0-beta11",
"stylus": "^0.54.5",
"mustache": "^2.3.0",
"ws": "^2.2.2"
},
"devDependencies": {
"nodemon": "^1.11.0"
}
}

19
player.js
View File

@ -8,7 +8,9 @@ const player = spawn(config.mpg321[0], config.mpg321.slice(1));
const express = require('express');
const logger = require('morgan')
const pug = require('pug');
const mustache = require('mustache');
const readFileSync = require('fs').readFileSync;
var app = express();
var server = require('http').createServer();
@ -17,8 +19,12 @@ const WebSocket = require('ws');
const WebSocketServer = WebSocket.Server;
var wss = new WebSocketServer({server: server});
var template = pug.compileFile(__dirname + '/source/templates/homepage.pug'),
log_tpl = pug.compileFile(__dirname + '/source/templates/log.pug');
var base_tpl = readFileSync(__dirname + '/source/templates/base.mustache', {encoding: 'utf8'});
var index_tpl = readFileSync(__dirname + '/source/templates/index.mustache', {encoding: 'utf8'});
var log_tpl = readFileSync(__dirname + '/source/templates/log.mustache', {encoding: 'utf8'});
mustache.parse(index_tpl),
mustache.parse(log_tpl);
var play_log = [];
@ -81,7 +87,7 @@ function appendLog(message) {
play_log.unshift(message);
var data = {
html: log_tpl({ play_log: play_log }),
html: mustache.render(log_tpl, { play_log: play_log }),
tag: last_tag
};
@ -132,11 +138,14 @@ app.use(express.static(__dirname + '/static'))
app.get('/', function (req, res, next) {
try {
var html = template({
var html = mustache.render(base_tpl, {
title: 'Home'
, last_tag: last_tag
, play_log: play_log
, config: config
}, {
content: index_tpl
, log: log_tpl
})
res.send(html)
} catch (e) {

22
source/templates/base.mustache Normal file
View File

@ -0,0 +1,22 @@
<!doctype html>
<html lang=en>
<head>
<title>jukebox.stop.wtf</title>
<link rel=stylesheet href=/css/index.css>
</head>
<body>
<div class=header>
<h1 class=page-title>jukebox.stop.wtf</h1>
</div>
<div class="main-content">
{{> content}}
</div>
<div class="footer">
<p>made with love by annika</p>
</div>
<script src="/jukebox.js"></script>
</body>
</html>

22
source/templates/default.pug
View File

@ -1,22 +0,0 @@
doctype html
html
head
link(rel='stylesheet', href='/css/index.css')
title jukebox.stop.wtf
body
.header
h1.page-title jukebox.stop.wtf
ul.nav
li: a(href='/') Home
li: a(href='#news') News
li: a(href='#about') About
li: a(href='#contact') Contact
.main-content
block content
.footer
p made with love by annika
script(src='/jukebox.js')

13
source/templates/homepage.pug
View File

@ -1,13 +0,0 @@
extend default
block content
p
| Last tag seen:
span#last_tag #{last_tag}
ul#play-log
include log
script.
var jukebox = {
port: #{config.port}
}

11
source/templates/index.mustache Normal file
View File

@ -0,0 +1,11 @@
<p>Last tag seen: <span id=last-tag>{{ last_tag }}</p>
<ul id=play-log>
{{> log}}
</ul>
<script>
var jukebox = {
port: {{ config.port }}
};
</script>

6
source/templates/log.mustache Normal file
View File

@ -0,0 +1,6 @@
{{#play_log}}
<li>{{ . }}</li>
{{/play_log}}
{{^play_log}}
<li>nothing in the log</li>
{{/play_log}}

4
source/templates/log.pug
View File

@ -1,4 +0,0 @@
for tag in play_log
li= tag
else
li nothing in the log

3
static/jukebox.js
View File

@ -2,7 +2,7 @@ window.onload = function() {
console.log('window.onload');
var play_log = document.getElementById('play-log');
var last_tag = document.getElementById('last_tag');
var last_tag = document.getElementById('last-tag');
function updateLog(data) {
last_tag.innerHTML = data.tag;
@ -12,7 +12,6 @@ window.onload = function() {
var host = window.document.location.host.replace(/:.*/, '');
var ws = new WebSocket('ws://' + host + ':' + jukebox.port);
ws.onmessage = function (event) {
console.log(event.data);
updateLog(JSON.parse(event.data));
};