Lablenames and more

public/js/back_client.js

@@ -2,6 +2,9 @@
 // This is the backend client js
 let iosocket = io.connect();
 
+let tbdLable = 'To be determined',
+noTeam = 'Kein Team';
+
 // setup all my handlers
 iosocket.on('clientrefresh', () => {
   location.reload();
@@ -18,20 +21,16 @@ iosocket.on('stateChange', (state) => {
     }
   });
 
-  $('.increment').click(function(){
+  $('.increment').click(function() {
     alert('haha');
+    // trigger a state update?
   });
-  $('.decrement').click(function(){
+  $('.decrement').click(function() {
     alert('haha');
   });
 
 });
 
-// get my state
-let context = 'admin';
-iosocket.emit('loadState', context);
-
-
 
 // Bracket editing
 
@@ -39,8 +38,8 @@ iosocket.emit('loadState', context);
 /* Custom data objects passed as teams */
 var customData = {
   teams: [
-    ["Team 1","Team 2"],
-    ["Team 3","Team 4"]
+    ["Team 1", "Team 2"],
+    ["Team 3", "Team 4"]
   ],
   results: []
 }
@@ -73,27 +72,36 @@ function edit_fn(container, data, doneCb) {
 function render_fn(container, data, score, state) {
   switch (state) {
     case "empty-bye":
-      container.append("No team")
+      container.append(noTeam)
       return;
     case "empty-tbd":
-      container.append("Upcoming")
+      container.append("To be determined")
       return;
-
     case "entry-no-score":
+      console.log('no score');// no return
     case "entry-default-win":
+      console.log('default win');// no return
     case "entry-complete":
       container.append(data);
       return;
   }
+  console.log(container);
 }
 
 function saveFn(data, userData) {
   iosocket.emit('editState', data);
 }
 
-
 $(function() {
-  $('#refresh').click(function(){
+  // Dom is loaded
+  $('#refresh').click(function() {
     iosocket.emit('clientrefresh');
   });
+  // Reading config (not state) from dom... and after all jquery is a doomed dom lib
+  tbdLable = $('#TBD').val();
+  noTeam = $('#NoT').val();
+
+  // get my state
+  let context = 'admin';
+  iosocket.emit('loadState', context);
 });

public/js/front_client.js

@@ -2,6 +2,9 @@
 
 let iosocket = io.connect();
 
+let tbdLable = 'To be determined',
+noTeam = 'Kein Team';
+
 // setup all my handlers
 iosocket.on('clientrefresh', () => {
   location.reload();
@@ -11,11 +14,38 @@ iosocket.on('stateChange', (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});
+  $('#team-container').bracket({
+    init: state,
+    decorator: {
+      edit: ()=>{},
+      render: render_fn
+    }
+  });
 });
+function lolz() {
+}
+function render_fn(container, data, score, state) {
+  switch (state) {
+    case "empty-bye":
+      container.append(noTeam)
+      return;
+    case "empty-tbd":
+      container.append(tbdLable)
+      retrun;
+    case "entry-no-score":
+      console.log('no score');// no return
+    case "entry-default-win":
+      console.log('default win');// no return
+    case "entry-complete":
+      container.append(data);
+      return;
+  }
+}
 
 
   $( document ).ready(function() {
+    tbdLable = $('#TBD').val();
+    noTeam = $('#NoT').val();
     // get my state
     let 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' });
+  res.render('index', { mainHeader: '🍺🍺🍺 Aktueller Spielstand 🍺🍺🍺🍺', TBD:'I am TBD', NoTeam:'No TeamYet' });
 });
 
 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' });
+    res.render('admin', { mainHeader: 'Admin Interface', TBD:'I am TBD', NoTeam:'No TeamYet' });
   }else{
     res.redirect('/login');
   }

views/admin.hbs

@@ -27,5 +27,8 @@
       </div>
     </div>
 
+
+<input id="TBD" type="hidden" value={{TBD}}>
+<input id="NoT" type="hidden" value={{NoTeam}}>
   </body>
 </html>

views/index.hbs

@@ -23,5 +23,7 @@
       </div>
     </div>
 
+    <input id="TBD" type="hidden" value='{{TBD}}'>
+    <input id="NoT" type="hidden" value='{{NoTeam}}'>
   </body>
 </html>

views/login.hbs

@@ -1,43 +1,48 @@
 <!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" />
 
-    <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>
+<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" />
 
-    <script>
-$(document).ready(function(){
-    var email,pass;
-    $("#submit").click(function(){
-        email=$("#email").val();
-        pass=$("#password").val();
-        /*
-        * Perform some validation here.
-        */
-        $.post("http://localhost:3000/login",{email:email,passwd:pass},function(data){
+  <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>
+
+  <script>
+    $(document).ready(function() {
+      let pass;
+      $("#submit").click(function() {
+        email = $("#email").val();
+        pass = $("#password").val();
+        $.post("http://localhost:3000/login", {
+          passwd: pass
+        }, function(data) {
           console.log(data);
-            if(data==='done')
-            {
-                window.location.href="/admin";
-            }
+          if (data === 'done') {
+            window.location.href = "/admin";
+          } else {
+            $("#alertbox").html = "Wrong Password";
+          }
         });
+      });
     });
-});
-</script>
-  </head>
-  <body>
+  </script>
+</head>
 
-    <h1>{{mainHeader}}</h1>
-    <input type="text" size="40" placeholder="Type your email" id="email"><br />
-    <input type="password" size="40" placeholder="Type your password" id="password"><br />
-    <input type="button" value="Submit" id="submit">
+<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>
+    <input type="submit" class="btn btn-primary" value="Submit" id="submit">
+  </div>
+
+</body>
 
-  </body>
 </html>