<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container" id="main-view">
<div class="row">
<h2>RouteChoices</h2>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#settings-modal">Settings</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#login-modal">Login</button>
<h3>Competitions <small><a role="button" class="btn btn-default" href="#refresh-competition-list" id="refresh-competition-list-button"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Refresh</a></small></h3>
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist" id="select-competition-list-tabs">
<li role="presentation"><a href="#live-competition-list" aria-controls="live-competition-list" role="tab" data-toggle="tab">Live</a></li>
<li role="presentation"><a href="#upcoming-competition-list" aria-controls="upcoming-competition-list" role="tab" data-toggle="tab">Upcoming</a></li>
<li role="presentation"><a href="#archived-competition-list" aria-controls="archived-competition-list" role="tab" data-toggle="tab">Archived</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="live-competition-list">
<div class="competition-list"><p class="alert alert-info"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Loading...</p></div>
</div>
<div role="tabpanel" class="tab-pane" id="upcoming-competition-list">
<div class="competition-list"><p class="alert alert-info"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Loading...</p></div>
</div>
<div role="tabpanel" class="tab-pane" id="archived-competition-list">
<div class="competition-list"><p class="alert alert-info"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Loading...</p></div>
</div>
</div>
</div>
</div>
</div>
<div class="container" id="competition-view">
</div>
<div class="modal fade" id="settings-modal" tabindex="-1" role="dialog" aria-labelledby="settings-modal-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="settings-modal-label">Settings</h4>
</div>
<div class="modal-body">
<div class="alert alert-warning" id="settings-errors"></div>
<div class="form-group">
<label for="server-address-input">Server address</label>
<input type="text" class="form-control" id="server-address-input" placeholder="http://127.0.0.1:8000/">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="save_settings()">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="login-modal-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="login-modal-label">Login</h4>
</div>
<div class="modal-body">
<div class="alert alert-warning" id="login-errors"></div>
<div class="form-group">
<label for="username-input">Username</label>
<input type="text" class="form-control" id="username-input" placeholder="Username">
</div>
<div class="form-group">
<label for="password-input">Password</label>
<input type="password" class="form-control" id="password-input" placeholder="Password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="login()">Login</button>
</div>
</div>
</div>
</div>
<script id="competitor-list-element-template" type="text/template">
<div class="competitor-list-element">
<h4><a href="#open-competitor"><%- c.name %></a></h4>
<p>Starting Time: <%- c.start_time %></p>
</div>
<hr/>
</script>
<script id="competition-list-element-template" type="text/template">
<div class="media competition-list-element">
<div class="media-left">
<a href="#open-competition">
<img class="media-object"
src="https://maps.googleapis.com/maps/api/staticmap?center=<%- c.latitude %>,<%- c.longitude %>&zoom=<%- c.zoom %>&size=100x100"
alt="map area">
</a>
</div>
<div class="media-body">
<h4 class="media-heading"><a href="#open-competition"><%- c.name %></a></h4>
<p>Schedule: <%- c.start_date %> - <%- c.end_date %></p>
<p>Signup: <%- c.signup_policy %></p>
<p>Competitors: <%- c.competitor_count %> (<%- c.pending_competitor_count %> Pending)</p>
</div>
</div>
</script>
<script id="competition-template" type="text/template">
<div class="row">
<h2>RouteChoices <small><a href="#home" class="home-button">Back</a></small></h2>
<div class="media competition-list-element">
<div class="media-left">
<a href="#open-competition">
<img class="media-object"
src="https://maps.googleapis.com/maps/api/staticmap?center=<%- c.latitude %>,<%- c.longitude %>&zoom=<%- c.zoom %>&size=100x100"
alt="map area">
</a>
</div>
<div class="media-body">
<h3 class="media-heading"><%- c.name %></h3>
<p>Schedule: <%- c.start_date %> - <%- c.end_date %></p>
<p>Signup: <%- c.signup_policy %></p>
</div>
</div>
<div>
<h3>Competitors <small><a role="button" class="btn btn-default" href="#refresh-competition-list" id="refresh-competition-list-button"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Refresh</a></h3>
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist" id="select-competition-list-tabs">
<li role="presentation"><a href="#approved-competitor-list" aria-controls="approved-competitor-list" role="tab" data-toggle="tab">Approved</a></li>
<li role="presentation"><a href="#pending-competitor-list" aria-controls="pending-competitor-list" role="tab" data-toggle="tab">Pending</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="approved-competitor-list">
<div class="competition-list"><p class="alert alert-info"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Loading...</p></div>
</div>
<div role="tabpanel" class="tab-pane" id="pending-competitor-list">
<div class="competition-list"><p class="alert alert-info"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Loading...</p></div>
</div>
</div>
</div>
</div>
</div>
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jStorage/0.4.12/jstorage.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
.competition-list-element{
padding-top: 5px;
}
var DEFAULT_SERVER_ADDRESS = 'http://127.0.0.1:8000/';
var get_server_url = function(){
return $.jStorage.get('server_address', DEFAULT_SERVER_ADDRESS);
}
var save_settings = function(){
errors = [];
var url = $('#server-address-input').val();
if(!url){
url = DEFAULT_SERVER_ADDRESS;
}
address_re = /^https?:\/\/.*\/?$/i;
if(!url.match(address_re)){
errors.push("Invalid Server Address");
} else {
if(url[url.length-1] != "/"){
url = url + "/";
}
}
if(errors.length > 0){
$('#settings-errors').html('<ul><li>'+errors.join('</li><li>')+"</li></ul>");
$('#settings-errors').show();
} else {
$.jStorage.set('server_address', url);
$('#settings-errors').hide();
$('#settings-modal').modal('hide');
}
}
var load_settings = function(){
$('#server-address-input').val(get_server_url());
}
var refresh_competition_lists = function(){
_.each(['live', 'upcoming', 'archived'], function(status, index){
load_competition_list(status);
})
}
var load_competition_list = function(competitions_status){
$.ajax({
url: get_server_url()+'api/competition',
data: {
status: competitions_status
},
dataType: 'JSON'
}).success(function(response){
return on_competition_list_loaded(competitions_status, response)
}).error(function(response, status){
return on_competition_list_load_error(competitions_status, response, status)
})
}
var on_competition_list_loaded = function(competitions_status, response){
var target_div = $('#'+competitions_status+"-competition-list");
target_div.html('')
if(response.count === 0){
$(target_div).html('<p class="alert alert-warning">Currently the database doesn\'t contain any '+competitions_status+' competitions</p>');
} else {
var template = _.template($('#competition-list-element-template').html())
_.each(response.results, function(competition_data, index){
var competition_div = $(template({c: competition_data}));
competition_div.find('a').on('click', function(){
open_competition_view(competition_data);
})
target_div.append(competition_div);
});
}
}
var on_competition_list_load_error = function(competitions_status, response){
$('#'+competitions_status+"-competition-list").html(
'<p class="alert alert-danger">An error occured loading the '+competitions_status+' competition list</p>'
)
}
var refresh_competitor_lists = function(competition){
_.each(['pending', 'approved'], function(status, index){
load_competitor_list(competition, status);
})
}
var load_competitor_list = function(competition, competitors_status){
$.ajax({
url: get_server_url()+'api/competitor',
data: {
competition_id: competition.id,
approval_status: competitors_status
},
dataType: 'JSON'
}).success(function(response){
return on_competitor_list_loaded(competition, competitors_status, response)
}).error(function(response, status){
return on_competitor_list_load_error(competitors_status, response, status)
})
}
var on_competitor_list_loaded = function(competition, competitors_status, response){
var target_div = $('#'+competitors_status+"-competitor-list");
target_div.html('')
if(response.count === 0){
$(target_div).html('<p class="alert alert-warning">Currently the database doesn\'t contain any '+competitors_status+' competitors</p>');
} else {
var template = _.template($('#competitor-list-element-template').html())
_.each(response.results, function(competitor_data, index){
var competitor_div = $(template({c: competitor_data}));
competitor_div.find('a').on('click', function(){
open_competitor_view(competitor_data);
})
target_div.append(competitor_div);
});
}
}
var on_competitor_list_load_error = function(competitions_status, response){
$('#'+competitions_status+"-competition-list").html(
'<p class="alert alert-danger">An error occured loading the '+competitions_status+' competitor list</p>'
)
}
var open_home_view = function(){
console.log('Home');
$('.container').hide();
$('#main-view').show();
}
var open_competition_view = function(competition_data){
console.log("opening competition "+competition_data.id);
var target_div = $('#competition-view');
var template = _.template($('#competition-template').html())
var competition_div = $(template({c: competition_data}));
competition_div.find('.home-button').on('click', function(e){
e.preventDefault();
open_home_view();
})
target_div.html('');
target_div.append(competition_div);
$('.container').hide();
target_div.show();
refresh_competitor_lists(competition_data)
}
$(function () {
$('#settings-errors').hide();
$('.container').hide();
$('.container:first').show();
load_settings();
/*
$('#select-competition-list-tabs a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// e.target; // newly activated tab
// #e.relatedTarget; // previous active tab
e.preventDefault();
var target_href = $(e.target).attr('href');
var target_status = /^#([^-]+)/.exec(target_href)[1];
// load_competition_list(target_status);
});
*/
$('#refresh-competition-list-button').on('click', function(e){
e.preventDefault();
refresh_competition_lists();
});
$('#refresh-competition-list-button').trigger('click');
$('#select-competition-list-tabs a:first').tab('show');
});
