Basic functionality, lots of fixes needed
This commit is contained in:
parent
be47815b33
commit
cc447a6975
42
app.js
42
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;
|
||||
|
@ -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",
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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');
|
||||
});
|
||||
});
|
||||
|
@ -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);
|
||||
});
|
||||
|
@ -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;
|
||||
|
@ -5,7 +5,10 @@
|
||||
<title>Admin Interface</title>
|
||||
<link rel='stylesheet' href='/css/style.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.bracket.min.js'></script>
|
||||
<script type='text/javascript' src='/js/bootstrap.min.js'></script>
|
||||
<script type='text/javascript' src='/socket.io/socket.io.js'></script>
|
||||
|
||||
@ -15,7 +18,14 @@
|
||||
|
||||
<h1>{{mainHeader}}</h1>
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
Loading…
Reference in New Issue
Block a user