Basic functionality, lots of fixes needed

app.js

@@ -4,7 +4,8 @@ favicon = require('serve-favicon'),
 logger = require('morgan'),
 cookieParser = require('cookie-parser'),
 bodyParser = require('body-parser'),
-socketio = require('socket.io');
+socketio = require('socket.io'),
+session = require('express-session');
 
 let routes = require('./routes/routes'),
 app = express();
@@ -12,8 +13,17 @@ app = express();
 let io           = socketio();
 app.io           = io;
 
-// let io =  socketio.listen(app);
 
+let state = {
+    teams : [
+      ["Team 1", "Team 2"], /* first matchup */
+      ["Team 3", null],  /* second matchup */
+    ],
+    results : [
+      [[1,2]],       /* first round */
+      [[4,null]]        /* second round */
+    ]
+  }
 
 // view engine setup
 app.set('views', path.join(__dirname, 'views'));
@@ -25,6 +35,7 @@ app.use(logger('dev'));
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: false }));
 app.use(cookieParser());
+app.use(session({secret: 'thisIsTheSessionSecret'}));
 app.use(express.static(path.join(__dirname, 'public')));
 
 app.use('/', routes);
@@ -60,6 +71,33 @@ app.use(function(err, req, res, next) {
   });
 });
 
+// Socket IO actions
+
+
+
+io.on('connection', function (socket) {
+
+  socket.on('loadState', function (context) {
+    socket.emit('stateChange', state);
+    console.log("sent state");
+  });
+
+  socket.on('clientrefresh', function () {
+    console.log("Refreshing all Clients");
+    io.emit('clientrefresh');
+  });
+
+  socket.on('editState', function (newState) {
+    state = newState;
+    io.emit('stateChange', state); // Push state to all clients
+    console.log("updated state");
+  });
+
+});
+
+
+
+
 
 
 module.exports = app;

package.json

@@ -11,6 +11,7 @@
     "cookie-parser": "~1.3.5",
     "debug": "~2.2.0",
     "express": "~4.13.1",
+    "express-session": "^1.15.1",
     "hbs": "~3.1.0",
     "morgan": "~1.6.1",
     "serve-favicon": "~2.3.0",

public/css/style.css

@@ -6,9 +6,19 @@ a {
   color: #00B7FF;
 }
 
-.team-box {
+h1{
-  border-width:1px;
+  text-align: center;
-  border-color: black;
+}
-  border-style: solid;
+
-  border-radius: 3px;
+.controls{
+text-align:center;
+}
+
+
+.jQBracket {
+margin:0 auto;
+}
+
+#refresh {
+margin:0 auto;
 }

public/js/back_client.js

@@ -1,17 +1,99 @@
 'use strict';
 // This is the backend client js
-let iosocket: object = io.connect();
+let iosocket = io.connect();
 
 // setup all my handlers
 iosocket.on('clientrefresh', () => {
   location.reload();
 });
 
-iosocket.on('stateChange', () => {
+iosocket.on('stateChange', (state) => {
+  $('#team-container').bracket({
+    init: state,
+    save: saveFn,
+    /* without save() labels are disabled */
+    decorator: {
+      edit: edit_fn,
+      render: render_fn
+    }
+  });
+
+  $('.increment').click(function(){
+    alert('haha');
+  });
+  $('.decrement').click(function(){
+    alert('haha');
+  });
 
-  location.reload();
 });
 
 // get my state
 let context = 'admin';
 iosocket.emit('loadState', context);
+
+
+
+// Bracket editing
+
+
+/* Custom data objects passed as teams */
+var customData = {
+  teams: [
+    ["Team 1","Team 2"],
+    ["Team 3","Team 4"]
+  ],
+  results: []
+}
+
+/* Edit function is called when team label is clicked */
+function edit_fn(container, data, doneCb) {
+  var input = $('<input type="text" style="color:black;">')
+  container.html(input)
+  input.focus()
+  input.blur(function() {
+    var inputValue = input.val()
+    if (inputValue.length === 0) {
+      doneCb(null); // Drop the team and replace with BYE
+    } else {
+      doneCb(inputValue);
+    }
+  });
+}
+
+/* Render function is called for each team label when data is changed, data
+ * contains the data object given in init and belonging to this slot.
+ *
+ * 'state' is one of the following strings:
+ * - empty-bye: No data or score and there won't team advancing to this place
+ * - empty-tbd: No data or score yet. A team will advance here later
+ * - entry-no-score: Data available, but no score given yet
+ * - entry-default-win: Data available, score will never be given as opponent is BYE
+ * - entry-complete: Data and score available
+ */
+function render_fn(container, data, score, state) {
+  switch (state) {
+    case "empty-bye":
+      container.append("No team")
+      return;
+    case "empty-tbd":
+      container.append("Upcoming")
+      return;
+
+    case "entry-no-score":
+    case "entry-default-win":
+    case "entry-complete":
+      container.append(data);
+      return;
+  }
+}
+
+function saveFn(data, userData) {
+  iosocket.emit('editState', data);
+}
+
+
+$(function() {
+  $('#refresh').click(function(){
+    iosocket.emit('clientrefresh');
+  });
+});

public/js/front_client.js

@@ -7,52 +7,16 @@ iosocket.on('clientrefresh', () => {
   location.reload();
 });
 
-iosocket.on('stateChange', () => {
+iosocket.on('stateChange', (state) => {
-  location.reload();
+  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});
 });
 
 
+  $( document ).ready(function() {
     // get my state
     let context = 'main';
     iosocket.emit('loadState',context);
-
-
-function createTeam(member1, member2){
-
-}
-
-var singleElimination = {
-  "teams": [              // Matchups
-    ["Team 1", "Team 2"], // First match
-    ["Team 3", "Team 4"]  // Second match
-  ],
-  "results": [            // List of brackets (single elimination, so only one bracket)
-    [                     // List of rounds in bracket
-      [                   // First round in this bracket
-        [1, 2],           // Team 1 vs Team 2
-        [3, 4]            // Team 3 vs Team 4
-      ],
-      [                   // Second (final) round in single elimination bracket
-        [5, 6],           // Match for first place
-        [7, 8]            // Match for 3rd place
-      ]
-    ]
-  ]
-}
-
-var minimalData = {
-    teams : [
-      ["Team 1", "Team 2"], /* first matchup */
-      ["Team 3", "Team 4"]  /* second matchup */
-    ],
-    results : [
-      [[1,2]],       /* first round */
-      [[4,6]]        /* second round */
-    ]
-  }
-
-  $( document ).ready(function() {
-    console.log('done')
-    $('#team-container').bracket({
-      init: minimalData /* data to initialize the bracket with */ })
   });

routes/routes.js

@@ -1,14 +1,40 @@
 let express = require('express');
 let router = express.Router();
+let passwd = 'insecure';
 
 /* GET home page. */
 router.get('/', function(req, res, next) {
   res.render('index', { mainHeader: 'Aktueller Spielstand' });
 });
 
+router.get('/login', function(req, res, next) {
+  console.log(req.session.passwd);
+  console.log(req.session);
+  if(req.session.passwd=='insecure'){
+    res.redirect('/admin');
+  }else{
+    res.render('login', { mainHeader: 'Please Login' });
+  }
+});
+
+router.post('/login', function(req, res, next) {
+  if(req.body.passwd=='insecure'){
+    req.session.passwd='insecure';
+    console.log('set');
+    res.end('done')
+  }else{
+    res.end('invalid')
+  }
+});
+
 router.get('/admin', function(req, res, next) {
-  //res.send('respond with a resource');
+  console.log(req.session.passwd);
+  console.log(req.session);
+  if(req.session.passwd=='insecure'){
     res.render('admin', { mainHeader: 'Admin Interface' });
+  }else{
+    res.redirect('/login');
+  }
 });
 
 module.exports = router;

views/admin.hbs

@@ -5,7 +5,10 @@
     <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" />
+
     <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/bootstrap.min.js'></script>
     <script type='text/javascript' src='/socket.io/socket.io.js'></script>
 
@@ -15,7 +18,14 @@
 
     <h1>{{mainHeader}}</h1>
     <div class="main-content">
+      <div id="team-container">
 
       </div>
+      <br>
+      <div class="controls">
+        <button id="refresh" class="btn btn-warning"> Refresh Clients!</button>
+      </div>
+    </div>
+
   </body>
 </html>