Persistent state and values from config

app.js

@@ -5,7 +5,14 @@ logger = require('morgan'),
 cookieParser = require('cookie-parser'),
 bodyParser = require('body-parser'),
 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'),
 app = express();
@@ -13,8 +20,9 @@ app = express();
 let io           = socketio();
 app.io           = io;
 
+let state = db.getState();
 
-let state = {
+let resetState = {
     teams : [
       ["Team 1", "Team 2"], /* first matchup */
       ["Team 3", null],  /* second matchup */
@@ -35,7 +43,13 @@ app.use(logger('dev'));
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: false }));
 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('/', routes);
@@ -89,6 +103,7 @@ io.on('connection', function (socket) {
 
   socket.on('editState', function (newState) {
     state = newState;
+    db.setState(state);
     io.emit('stateChange', state); // Push state to all clients
     console.log("updated state");
   });
@@ -97,7 +112,4 @@ io.on('connection', function (socket) {
 
 
 
-
-
-
 module.exports = app;

public/css/style.css

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

public/js/back_client.js

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

public/js/front_client.js

@@ -1,29 +1,32 @@
 'use strict';
 
-let iosocket = io.connect();
+var iosocket = io.connect();
 
-let tbdLable = 'To be determined',
+var tbdLable = 'To be determined',
 noTeam = 'Kein Team';
 
 // setup all my handlers
-iosocket.on('clientrefresh', () => {
+iosocket.on('clientrefresh', function(){
   location.reload();
 });
 
-iosocket.on('stateChange', (state) => {
+iosocket.on('stateChange', function(state){
   console.log(state);
   // 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
   $('#team-container').bracket({
     init: state,
     decorator: {
-      edit: ()=>{},
+      edit: function(){},
       render: render_fn
-    }
+    },
+    teamWidth: 130,
+    scoreWidth: 20,
+    matchMargin: 20,
+    roundMargin: 20
   });
 });
-function lolz() {
-}
+
 function render_fn(container, data, score, state) {
   switch (state) {
     case "empty-bye":
@@ -31,7 +34,7 @@ function render_fn(container, data, score, state) {
       return;
     case "empty-tbd":
       container.append(tbdLable)
-      retrun;
+      return;
     case "entry-no-score":
       console.log('no score');// no return
     case "entry-default-win":
@@ -47,6 +50,6 @@ function render_fn(container, data, score, state) {
     tbdLable = $('#TBD').val();
     noTeam = $('#NoT').val();
     // get my state
-    let context = 'main';
+    var context = 'main';
     iosocket.emit('loadState',context);
   });

routes/routes.js

@@ -4,7 +4,7 @@ let passwd = 'insecure';
 
 /* GET home page. */
 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) {
@@ -31,7 +31,7 @@ router.get('/admin', function(req, res, next) {
   console.log(req.session.passwd);
   console.log(req.session);
   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{
     res.redirect('/login');
   }

views/admin.hbs

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

views/index.hbs

@@ -3,9 +3,9 @@
   <head>
     <meta charset="utf-8">
     <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/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.bracket.min.js'></script>

views/login.hbs

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