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();
@@ -20,6 +23,7 @@ iosocket.on('stateChange', (state) => {
 
   $('.increment').click(function() {
     alert('haha');
+    // trigger a state update?
   });
   $('.decrement').click(function() {
     alert('haha');
@@ -27,11 +31,6 @@ iosocket.on('stateChange', (state) => {
 
 });
 
-// get my state
-let context = 'admin';
-iosocket.emit('loadState', context);
-
-
 
 // Bracket editing
 
@@ -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() {
+  // 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,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta charset="utf-8">
   <title>Login</title>
@@ -14,30 +15,34 @@
 
   <script>
     $(document).ready(function() {
-    var email,pass;
+      let 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){
+        $.post("http://localhost:3000/login", {
+          passwd: pass
+        }, function(data) {
           console.log(data);
-            if(data==='done')
-            {
+          if (data === 'done') {
             window.location.href = "/admin";
+          } else {
+            $("#alertbox").html = "Wrong Password";
           }
         });
       });
     });
   </script>
 </head>
+
 <body>
 
   <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">
+  <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>
+
 </html>