diff --git a/app.js b/app.js
index 950e3eb..433a824 100644
--- a/app.js
+++ b/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;
diff --git a/package.json b/package.json
index 0bde89b..d058f5e 100644
--- a/package.json
+++ b/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",
diff --git a/public/css/style.css b/public/css/style.css
index 7f99be6..68d6c88 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -6,9 +6,19 @@ a {
color: #00B7FF;
}
-.team-box {
- border-width:1px;
- border-color: black;
- border-style: solid;
- border-radius: 3px;
+h1{
+ text-align: center;
+}
+
+.controls{
+text-align:center;
+}
+
+
+.jQBracket {
+margin:0 auto;
+}
+
+#refresh {
+margin:0 auto;
}
diff --git a/public/js/back_client.js b/public/js/back_client.js
index 5f5f3a0..7110907 100644
--- a/public/js/back_client.js
+++ b/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 = $('')
+ 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');
+ });
+});
diff --git a/public/js/front_client.js b/public/js/front_client.js
index 27fffe0..6624e63 100644
--- a/public/js/front_client.js
+++ b/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);
});
diff --git a/routes/routes.js b/routes/routes.js
index ae1dc1e..765810e 100644
--- a/routes/routes.js
+++ b/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');
- res.render('admin', { mainHeader: 'Admin Interface' });
+ 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;
diff --git a/views/admin.hbs b/views/admin.hbs
index 9142096..33c2607 100644
--- a/views/admin.hbs
+++ b/views/admin.hbs
@@ -5,7 +5,10 @@
Admin Interface
+
+
+
@@ -15,7 +18,14 @@
{{mainHeader}}
+
+
+
+
+
+