'use strict'; // This is the backend client js let iosocket = io.connect(); // setup all my handlers iosocket.on('clientrefresh', () => { location.reload(); }); 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'); }); }); // 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 = $('') 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'); }); });