Basic functionality, lots of fixes needed

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);
+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', () => {
-  location.reload();
+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});
 });
 
 
-// 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 */ })
+    // get my state
+    let context = 'main';
+    iosocket.emit('loadState',context);
   });