Persistent state and values from config

This commit is contained in:
Lukas Bachschwell 2017-03-20 23:10:24 +01:00
parent 860a4328db
commit db2173cfcb
8 changed files with 74 additions and 39 deletions

24
app.js
View File

@ -5,7 +5,14 @@ logger = require('morgan'),
cookieParser = require('cookie-parser'), cookieParser = require('cookie-parser'),
bodyParser = require('body-parser'), bodyParser = require('body-parser'),
socketio = require('socket.io'), socketio = require('socket.io'),
session = require('express-session'); session = require('express-session'),
low = require('lowdb');
let config = low('config.json');
let db = low('db.json');
let tbdLabel = config.get('mainConfig').chain().find({ param: 'tbdLabel' }).value()['value'];
//let tbdLabel = config.get('mainConfig').chain().find({ param: 'tbdLabel' }).value()['value'];
let routes = require('./routes/routes'), let routes = require('./routes/routes'),
app = express(); app = express();
@ -13,8 +20,9 @@ app = express();
let io = socketio(); let io = socketio();
app.io = io; app.io = io;
let state = db.getState();
let state = { let resetState = {
teams : [ teams : [
["Team 1", "Team 2"], /* first matchup */ ["Team 1", "Team 2"], /* first matchup */
["Team 3", null], /* second matchup */ ["Team 3", null], /* second matchup */
@ -35,7 +43,13 @@ app.use(logger('dev'));
app.use(bodyParser.json()); app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser()); app.use(cookieParser());
app.use(session({secret: 'thisIsTheSessionSecret'})); app.use(session({
secret: 'thisIsTheSessionSecret',
name: 'uniScoreCookie',
resave: true,
saveUninitialized: true
}));
app.use(express.static(path.join(__dirname, 'public'))); app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes); app.use('/', routes);
@ -89,6 +103,7 @@ io.on('connection', function (socket) {
socket.on('editState', function (newState) { socket.on('editState', function (newState) {
state = newState; state = newState;
db.setState(state);
io.emit('stateChange', state); // Push state to all clients io.emit('stateChange', state); // Push state to all clients
console.log("updated state"); console.log("updated state");
}); });
@ -97,7 +112,4 @@ io.on('connection', function (socket) {
module.exports = app; module.exports = app;

View File

@ -1,5 +1,5 @@
body { body {
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; /*font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;*/
} }
a { a {
@ -22,3 +22,8 @@ margin:0 auto;
#refresh { #refresh {
margin:0 auto; margin:0 auto;
} }
.label{
font-size:100%;
color: black;
}

View File

@ -1,16 +1,16 @@
'use strict'; 'use strict';
// This is the backend client js // This is the backend client js
let iosocket = io.connect(); var iosocket = io.connect();
let tbdLable = 'To be determined', var tbdLable = 'To be determined',
noTeam = 'Kein Team'; noTeam = 'Kein Team';
// setup all my handlers // setup all my handlers
iosocket.on('clientrefresh', () => { iosocket.on('adminrefresh', function(){
location.reload(); location.reload();
}); });
iosocket.on('stateChange', (state) => { iosocket.on('stateChange', function(state){
$('#team-container').bracket({ $('#team-container').bracket({
init: state, init: state,
save: saveFn, save: saveFn,
@ -18,15 +18,20 @@ iosocket.on('stateChange', (state) => {
decorator: { decorator: {
edit: edit_fn, edit: edit_fn,
render: render_fn render: render_fn
} },
teamWidth: 130,
scoreWidth: 20,
matchMargin: 20,
roundMargin: 20
}); });
$('.increment').click(function() { $('.increment').click(function() {
alert('haha'); //alert('haha');
// trigger a state update? // trigger a state update?
//TODO: Focus unfocus on first
}); });
$('.decrement').click(function() { $('.decrement').click(function() {
alert('haha'); //alert('haha');
}); });
}); });
@ -92,6 +97,7 @@ function saveFn(data, userData) {
iosocket.emit('editState', data); iosocket.emit('editState', data);
} }
$(function() { $(function() {
// Dom is loaded // Dom is loaded
$('#refresh').click(function() { $('#refresh').click(function() {
@ -102,6 +108,6 @@ $(function() {
noTeam = $('#NoT').val(); noTeam = $('#NoT').val();
// get my state // get my state
let context = 'admin'; var context = 'admin';
iosocket.emit('loadState', context); iosocket.emit('loadState', context);
}); });

View File

@ -1,29 +1,32 @@
'use strict'; 'use strict';
let iosocket = io.connect(); var iosocket = io.connect();
let tbdLable = 'To be determined', var tbdLable = 'To be determined',
noTeam = 'Kein Team'; noTeam = 'Kein Team';
// setup all my handlers // setup all my handlers
iosocket.on('clientrefresh', () => { iosocket.on('clientrefresh', function(){
location.reload(); location.reload();
}); });
iosocket.on('stateChange', (state) => { iosocket.on('stateChange', function(state){
console.log(state); console.log(state);
// basically the server tracks the state since it is the same for al clients // basically the server tracks the state since it is the same for al clients
// So we know that we HAVE to update at this point // So we know that we HAVE to update at this point
$('#team-container').bracket({ $('#team-container').bracket({
init: state, init: state,
decorator: { decorator: {
edit: ()=>{}, edit: function(){},
render: render_fn render: render_fn
} },
teamWidth: 130,
scoreWidth: 20,
matchMargin: 20,
roundMargin: 20
}); });
}); });
function lolz() {
}
function render_fn(container, data, score, state) { function render_fn(container, data, score, state) {
switch (state) { switch (state) {
case "empty-bye": case "empty-bye":
@ -31,7 +34,7 @@ function render_fn(container, data, score, state) {
return; return;
case "empty-tbd": case "empty-tbd":
container.append(tbdLable) container.append(tbdLable)
retrun; return;
case "entry-no-score": case "entry-no-score":
console.log('no score');// no return console.log('no score');// no return
case "entry-default-win": case "entry-default-win":
@ -47,6 +50,6 @@ function render_fn(container, data, score, state) {
tbdLable = $('#TBD').val(); tbdLable = $('#TBD').val();
noTeam = $('#NoT').val(); noTeam = $('#NoT').val();
// get my state // get my state
let context = 'main'; var context = 'main';
iosocket.emit('loadState',context); iosocket.emit('loadState',context);
}); });

View File

@ -4,7 +4,7 @@ let passwd = 'insecure';
/* GET home page. */ /* GET home page. */
router.get('/', function(req, res, next) { router.get('/', function(req, res, next) {
res.render('index', { mainHeader: '🍺🍺🍺 Aktueller Spielstand 🍺🍺🍺🍺', TBD:'I am TBD', NoTeam:'No TeamYet' }); res.render('index', { mainHeader: '🍺🍺🍺 Aktueller Spielstand 🍺🍺🍺🍺', TBD:'???', NoTeam:'Kein Team' });
}); });
router.get('/login', function(req, res, next) { router.get('/login', function(req, res, next) {
@ -31,7 +31,7 @@ router.get('/admin', function(req, res, next) {
console.log(req.session.passwd); console.log(req.session.passwd);
console.log(req.session); console.log(req.session);
if(req.session.passwd=='insecure'){ if(req.session.passwd=='insecure'){
res.render('admin', { mainHeader: 'Admin Interface', TBD:'I am TBD', NoTeam:'No TeamYet' }); res.render('admin', { mainHeader: 'Admin Interface', TBD:'???', NoTeam:'Kein Team' });
}else{ }else{
res.redirect('/login'); res.redirect('/login');
} }

View File

@ -3,9 +3,9 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Admin Interface</title> <title>Admin Interface</title>
<link rel='stylesheet' href='/css/style.css' />
<link rel='stylesheet' href='/css/bootstrap.min.css' /> <link rel='stylesheet' href='/css/bootstrap.min.css' />
<link rel="stylesheet" type="text/css" href="/css/jquery.bracket.min.css" /> <link rel="stylesheet" type="text/css" href="/css/jquery.bracket.min.css" />
<link rel='stylesheet' href='/css/style.css' />
<script type='text/javascript' src='/js/jquery-3.1.1.min.js'></script> <script type='text/javascript' src='/js/jquery-3.1.1.min.js'></script>
<script type='text/javascript' src='/js/jquery.bracket.min.js'></script> <script type='text/javascript' src='/js/jquery.bracket.min.js'></script>
@ -28,7 +28,7 @@
</div> </div>
<input id="TBD" type="hidden" value={{TBD}}> <input id="TBD" type="hidden" value="{{TBD}}">
<input id="NoT" type="hidden" value={{NoTeam}}> <input id="NoT" type="hidden" value="{{NoTeam}}">
</body> </body>
</html> </html>

View File

@ -3,10 +3,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Spielstand</title> <title>Spielstand</title>
<link rel='stylesheet' type="text/css" href='/css/style.css' />
<link rel='stylesheet' type="text/css" href='/css/bootstrap.min.css' /> <link rel='stylesheet' type="text/css" href='/css/bootstrap.min.css' />
<link rel="stylesheet" type="text/css" href="/css/jquery.bracket.min.css" /> <link rel="stylesheet" type="text/css" href="/css/jquery.bracket.min.css" />
<link rel='stylesheet' type="text/css" href='/css/style.css' />
<script type='text/javascript' src='/js/jquery-3.1.1.min.js'></script> <script type='text/javascript' src='/js/jquery-3.1.1.min.js'></script>
<script type='text/javascript' src='/js/jquery.bracket.min.js'></script> <script type='text/javascript' src='/js/jquery.bracket.min.js'></script>
<script type='text/javascript' src='/js/bootstrap.min.js'></script> <script type='text/javascript' src='/js/bootstrap.min.js'></script>

View File

@ -1,12 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Login</title> <title>Login</title>
<link rel='stylesheet' href='/css/style.css' />
<link rel='stylesheet' href='/css/bootstrap.min.css' /> <link rel='stylesheet' href='/css/bootstrap.min.css' />
<link rel="stylesheet" type="text/css" href="/css/jquery.bracket.min.css" /> <link rel="stylesheet" type="text/css" href="/css/jquery.bracket.min.css" />
<link rel='stylesheet' href='/css/style.css' />
<script type='text/javascript' src='/js/jquery-3.1.1.min.js'></script> <script type='text/javascript' src='/js/jquery-3.1.1.min.js'></script>
<script type='text/javascript' src='/js/jquery.bracket.min.js'></script> <script type='text/javascript' src='/js/jquery.bracket.min.js'></script>
@ -16,7 +15,8 @@
<script> <script>
$(document).ready(function() { $(document).ready(function() {
let pass; let pass;
$("#submit").click(function() {
function sendPass() {
email = $("#email").val(); email = $("#email").val();
pass = $("#password").val(); pass = $("#password").val();
$.post("http://localhost:3000/login", { $.post("http://localhost:3000/login", {
@ -26,20 +26,29 @@
if (data === 'done') { if (data === 'done') {
window.location.href = "/admin"; window.location.href = "/admin";
} else { } else {
$("#alertbox").html = "Wrong Password"; $("#alertbox").html("Wrong Password");
$("#alertbox").show();
} }
}); });
}
$('.input').keypress(function (e) {
if (e.which == 13) {
sendPass();
}});
$("#submit").click(function(){
sendPass();
}); });
}); });
</script> </script>
</head> </head>
<body> <body>
<h1>{{mainHeader}}</h1> <h1>{{mainHeader}}</h1>
<div style="text-align:center;"> <div style="text-align:center;">
<div id="alertbox" class="alert alert-daneger" role="alert"></div> <div id="alertbox" class="alert alert-danger" style="display:none;" role="alert"></div><br>
<input type="password" size="40" placeholder="Password" id="password"><br><br> <input class="input" type="password" size="40" placeholder="Password" id="password"><br><br>
<input type="submit" class="btn btn-primary" value="Submit" id="submit"> <input type="submit" class="btn btn-primary" value="Submit" id="submit">
</div> </div>