Basic functionality, lots of fixes needed

This commit is contained in:
Lukas Bachschwell 2017-03-19 16:00:30 +01:00
parent be47815b33
commit cc447a6975
7 changed files with 188 additions and 57 deletions

42
app.js
View File

@ -4,7 +4,8 @@ favicon = require('serve-favicon'),
logger = require('morgan'), logger = require('morgan'),
cookieParser = require('cookie-parser'), cookieParser = require('cookie-parser'),
bodyParser = require('body-parser'), bodyParser = require('body-parser'),
socketio = require('socket.io'); socketio = require('socket.io'),
session = require('express-session');
let routes = require('./routes/routes'), let routes = require('./routes/routes'),
app = express(); app = express();
@ -12,8 +13,17 @@ app = express();
let io = socketio(); let io = socketio();
app.io = io; 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 // view engine setup
app.set('views', path.join(__dirname, 'views')); app.set('views', path.join(__dirname, 'views'));
@ -25,6 +35,7 @@ app.use(logger('dev'));
app.use(bodyParser.json()); app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser()); app.use(cookieParser());
app.use(session({secret: 'thisIsTheSessionSecret'}));
app.use(express.static(path.join(__dirname, 'public'))); app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes); 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; module.exports = app;

View File

@ -11,6 +11,7 @@
"cookie-parser": "~1.3.5", "cookie-parser": "~1.3.5",
"debug": "~2.2.0", "debug": "~2.2.0",
"express": "~4.13.1", "express": "~4.13.1",
"express-session": "^1.15.1",
"hbs": "~3.1.0", "hbs": "~3.1.0",
"morgan": "~1.6.1", "morgan": "~1.6.1",
"serve-favicon": "~2.3.0", "serve-favicon": "~2.3.0",

View File

@ -6,9 +6,19 @@ a {
color: #00B7FF; color: #00B7FF;
} }
.team-box { h1{
border-width:1px; text-align: center;
border-color: black; }
border-style: solid;
border-radius: 3px; .controls{
text-align:center;
}
.jQBracket {
margin:0 auto;
}
#refresh {
margin:0 auto;
} }

View File

@ -1,17 +1,99 @@
'use strict'; 'use strict';
// This is the backend client js // This is the backend client js
let iosocket: object = io.connect(); let iosocket = io.connect();
// setup all my handlers // setup all my handlers
iosocket.on('clientrefresh', () => { iosocket.on('clientrefresh', () => {
location.reload(); 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 // get my state
let context = 'admin'; 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');
});
});

View File

@ -7,52 +7,16 @@ iosocket.on('clientrefresh', () => {
location.reload(); location.reload();
}); });
iosocket.on('stateChange', () => { iosocket.on('stateChange', (state) => {
location.reload(); 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() { $( document ).ready(function() {
console.log('done') // get my state
$('#team-container').bracket({ let context = 'main';
init: minimalData /* data to initialize the bracket with */ }) iosocket.emit('loadState',context);
}); });

View File

@ -1,14 +1,40 @@
let express = require('express'); let express = require('express');
let router = express.Router(); let router = express.Router();
let passwd = 'insecure';
/* GET home page. */ /* GET home page. */
router.get('/', function(req, res, next) { router.get('/', function(req, res, next) {
res.render('index', { mainHeader: 'Aktueller Spielstand' }); 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) { router.get('/admin', function(req, res, next) {
//res.send('respond with a resource'); console.log(req.session.passwd);
res.render('admin', { mainHeader: 'Admin Interface' }); console.log(req.session);
if(req.session.passwd=='insecure'){
res.render('admin', { mainHeader: 'Admin Interface' });
}else{
res.redirect('/login');
}
}); });
module.exports = router; module.exports = router;

View File

@ -5,7 +5,10 @@
<title>Admin Interface</title> <title>Admin Interface</title>
<link rel='stylesheet' href='/css/style.css' /> <link rel='stylesheet' href='/css/style.css' />
<link rel='stylesheet' href='/css/bootstrap.min.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-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='/js/bootstrap.min.js'></script>
<script type='text/javascript' src='/socket.io/socket.io.js'></script> <script type='text/javascript' src='/socket.io/socket.io.js'></script>
@ -15,7 +18,14 @@
<h1>{{mainHeader}}</h1> <h1>{{mainHeader}}</h1>
<div class="main-content"> <div class="main-content">
<div id="team-container">
</div>
<br>
<div class="controls">
<button id="refresh" class="btn btn-warning"> Refresh Clients!</button>
</div>
</div> </div>
</body> </body>
</html> </html>