Add event timer
This commit is contained in:
parent
8e6f7a4365
commit
4e28f534e3
5 changed files with 2452 additions and 8 deletions
27
web_app/css/external/jquery-ui-timepicker-addon.css
vendored
Normal file
27
web_app/css/external/jquery-ui-timepicker-addon.css
vendored
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
|
||||
.ui-timepicker-div dl { text-align: left; }
|
||||
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
|
||||
.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
|
||||
.ui-timepicker-div td { font-size: 90%; }
|
||||
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
|
||||
.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }
|
||||
|
||||
.ui-timepicker-rtl{ direction: rtl; }
|
||||
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
|
||||
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
|
||||
.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }
|
||||
|
||||
/* Shortened version style */
|
||||
.ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
|
||||
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time,
|
||||
.ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
|
||||
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
|
||||
.ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }
|
||||
.ui-timepicker-div.ui-timepicker-oneLine dl dd,
|
||||
.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }
|
||||
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
|
||||
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
|
||||
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
|
||||
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
|
||||
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
|
||||
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }
|
||||
91
web_app/js/external/jquery-ui-sliderAccess.js
vendored
Normal file
91
web_app/js/external/jquery-ui-sliderAccess.js
vendored
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
/*
|
||||
* jQuery UI Slider Access
|
||||
* By: Trent Richardson [http://trentrichardson.com]
|
||||
* Version 0.3
|
||||
* Last Modified: 10/20/2012
|
||||
*
|
||||
* Copyright 2011 Trent Richardson
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
* http://trentrichardson.com/Impromptu/GPL-LICENSE.txt
|
||||
* http://trentrichardson.com/Impromptu/MIT-LICENSE.txt
|
||||
*
|
||||
*/
|
||||
(function($){
|
||||
|
||||
$.fn.extend({
|
||||
sliderAccess: function(options){
|
||||
options = options || {};
|
||||
options.touchonly = options.touchonly !== undefined? options.touchonly : true; // by default only show it if touch device
|
||||
|
||||
if(options.touchonly === true && !("ontouchend" in document)){
|
||||
return $(this);
|
||||
}
|
||||
|
||||
return $(this).each(function(i,obj){
|
||||
var $t = $(this),
|
||||
o = $.extend({},{
|
||||
where: 'after',
|
||||
step: $t.slider('option','step'),
|
||||
upIcon: 'ui-icon-plus',
|
||||
downIcon: 'ui-icon-minus',
|
||||
text: false,
|
||||
upText: '+',
|
||||
downText: '-',
|
||||
buttonset: true,
|
||||
buttonsetTag: 'span',
|
||||
isRTL: false
|
||||
}, options),
|
||||
$buttons = $('<'+ o.buttonsetTag +' class="ui-slider-access">'+
|
||||
'<button data-icon="'+ o.downIcon +'" data-step="'+ (o.isRTL? o.step : o.step*-1) +'">'+ o.downText +'</button>'+
|
||||
'<button data-icon="'+ o.upIcon +'" data-step="'+ (o.isRTL? o.step*-1 : o.step) +'">'+ o.upText +'</button>'+
|
||||
'</'+ o.buttonsetTag +'>');
|
||||
|
||||
$buttons.children('button').each(function(j, jobj){
|
||||
var $jt = $(this);
|
||||
$jt.button({
|
||||
text: o.text,
|
||||
icons: { primary: $jt.data('icon') }
|
||||
})
|
||||
.click(function(e){
|
||||
var step = $jt.data('step'),
|
||||
curr = $t.slider('value'),
|
||||
newval = curr += step*1,
|
||||
minval = $t.slider('option','min'),
|
||||
maxval = $t.slider('option','max'),
|
||||
slidee = $t.slider("option", "slide") || function(){},
|
||||
stope = $t.slider("option", "stop") || function(){};
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
if(newval < minval || newval > maxval){
|
||||
return;
|
||||
}
|
||||
|
||||
$t.slider('value', newval);
|
||||
|
||||
slidee.call($t, null, { value: newval });
|
||||
stope.call($t, null, { value: newval });
|
||||
});
|
||||
});
|
||||
|
||||
// before or after
|
||||
$t[o.where]($buttons);
|
||||
|
||||
if(o.buttonset){
|
||||
$buttons.removeClass('ui-corner-right').removeClass('ui-corner-left').buttonset();
|
||||
$buttons.eq(0).addClass('ui-corner-left');
|
||||
$buttons.eq(1).addClass('ui-corner-right');
|
||||
}
|
||||
|
||||
// adjust the width so we don't break the original layout
|
||||
var bOuterWidth = $buttons.css({
|
||||
marginLeft: ((o.where === 'after' && !o.isRTL) || (o.where === 'before' && o.isRTL)? 10:0),
|
||||
marginRight: ((o.where === 'before' && !o.isRTL) || (o.where === 'after' && o.isRTL)? 10:0)
|
||||
}).outerWidth(true) + 5;
|
||||
var tOuterWidth = $t.outerWidth(true);
|
||||
$t.css('display','inline-block').width(tOuterWidth-bOuterWidth);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
2251
web_app/js/external/jquery-ui-timepicker-addon.js
vendored
Normal file
2251
web_app/js/external/jquery-ui-timepicker-addon.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -31,6 +31,7 @@ $(document).ready(function(){
|
|||
// set up button handlers
|
||||
setup_button_handlers();
|
||||
// set up slider handlers
|
||||
window.timerInterval = 0;
|
||||
});
|
||||
|
||||
// Set up UI elements (tabs, buttons, etc.)
|
||||
|
|
@ -58,9 +59,11 @@ function setup_ui_elements()
|
|||
|
||||
// set up datepicker
|
||||
$( "#gem_desired_date" ).datepicker();
|
||||
$( "#event_end_date" ).datepicker();
|
||||
$( "#event_end_time" ).timepicker();
|
||||
|
||||
// set up buttons
|
||||
["calculate-rank", "reset-rank", "calculate-gems", "reset-gems", "calculate-card", "reset-card"].forEach(function(entry) {
|
||||
["calculate-rank", "reset-rank", "calculate-gems", "reset-gems", "calculate-card", "reset-card", "start-stop-timer", "clear-timer"].forEach(function(entry) {
|
||||
var selector = "#button-" + entry;
|
||||
LOG(1, "setting up " + selector);
|
||||
$(selector).button();
|
||||
|
|
@ -105,6 +108,12 @@ function setup_button_handlers()
|
|||
$("#button-reset-card").click(function(evt) {
|
||||
reset_card();
|
||||
});
|
||||
$("#button-start-stop-timer").click(function(evt) {
|
||||
start_stop_timer();
|
||||
});
|
||||
$("#button-clear-timer").click(function(evt) {
|
||||
clear_timer();
|
||||
});
|
||||
}
|
||||
|
||||
// tab functions
|
||||
|
|
@ -299,6 +308,21 @@ function year(moment)
|
|||
return moment.year();
|
||||
}
|
||||
|
||||
function hour(moment)
|
||||
{
|
||||
return moment.hour();
|
||||
}
|
||||
|
||||
function minute(moment)
|
||||
{
|
||||
return moment.minute();
|
||||
}
|
||||
|
||||
function second(moment)
|
||||
{
|
||||
return moment.second();
|
||||
}
|
||||
|
||||
function is_same_day(m1, m2)
|
||||
{
|
||||
if (month(m1) == month(m2) && day(m1) == day(m2) && year(m1) == year(m2)) {
|
||||
|
|
@ -588,11 +612,51 @@ function reset_card()
|
|||
$("#card-level-area").show();
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function start_stop_timer()
|
||||
{
|
||||
if (window.timerInterval != 0) {
|
||||
// stop it
|
||||
clearInterval(window.timerInterval);
|
||||
window.timerInterval = 0;
|
||||
$("#button-start-stop-timer span").text("Start Timer");
|
||||
} else {
|
||||
// 2013-02-08 09:30 # An hour and minute time part
|
||||
var dateString = $("#event_end_date").val() + " " + $("#event_end_time").val() + "Z";
|
||||
window.the_end = moment(dateString, "MM/DD/YYYY HH:mmZ");
|
||||
window.timerInterval = setInterval(run_timer, 1000);
|
||||
$("#button-start-stop-timer span").text("Stop Timer");
|
||||
}
|
||||
}
|
||||
|
||||
function run_timer()
|
||||
{
|
||||
var now = moment(new Date());
|
||||
var end = window.the_end;
|
||||
var string = "<h1><b>CURRENT TIME</b></h1><h2>" + now.utc().format("MM/DD/YYYY HH:mm:ss") + " UTC</h2><h1>EVENT ENDS:</h1><h2>" + end.utc().format("MM/DD/YYYY HH:mm:ss") + " UTC</h2>";
|
||||
if (now.isBefore(end)) {
|
||||
var ms = end.diff(now.utc());
|
||||
var t = moment.duration(ms).asMilliseconds();
|
||||
var seconds = Math.floor( (t/1000) % 60 );
|
||||
var minutes = Math.floor( (t/1000/60) % 60 );
|
||||
var hours = Math.floor( (t/(1000*60*60)) % 24 );
|
||||
var days = Math.floor( t/(1000*60*60*24) );
|
||||
var total_hours = (days * 24) + hours;
|
||||
|
||||
var time_till = sprintf("<h2>%d hours total<br />%d days %d hours %d minutes %d seconds</h2>", total_hours, days, hours, minutes, seconds);
|
||||
// d.asDays() + " days " + d.asHours() + moment.utc(ms).format(":mm:ss");
|
||||
|
||||
// var time_till = moment.utc(end.diff(now)).format("HH:mm:ss");//.format("HH:mm:ss");
|
||||
string += "<h1>TIME REMAINING:</h1><h2>" + time_till + "</H2>";
|
||||
} else {
|
||||
string += "<h1>EVENT IS OVER</h1>";
|
||||
}
|
||||
$("#timer_output_area").html(string);
|
||||
}
|
||||
|
||||
function clear_timer()
|
||||
{
|
||||
$("#timer_output_area").html("<h1>Timer Not Running</h1>");
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -4,9 +4,12 @@
|
|||
<meta charset="utf-8">
|
||||
<title>SIFTools</title>
|
||||
<link href="css/external/jquery-ui.css" rel="stylesheet">
|
||||
<link href="css/external/jquery-ui-timepicker-addon.css" rel="stylesheet">
|
||||
<link href="css/sif-tools.css" rel="stylesheet">
|
||||
<script src="js/external/jquery.js"></script>
|
||||
<script src="js/external/jquery-ui.js"></script>
|
||||
<script src="js/external/jquery-ui-timepicker-addon.js"></script>
|
||||
<script src="js/external/jquery-ui-sliderAccess.js"></script>
|
||||
<script src="js/external/moment.js"></script>
|
||||
<script src="js/external/sprintf.js"></script>
|
||||
<script src="js/sif_tools.js"></script>
|
||||
|
|
@ -114,13 +117,21 @@
|
|||
</div>
|
||||
|
||||
<div id="tab-event">
|
||||
<div id="love-gem-form" align="center">
|
||||
<H1>Coming Soon...</H1>
|
||||
<div id="event-timer-form" align="center">
|
||||
<h3>Enter Event End Date/Time (in UTC):</h3><br />
|
||||
<input type="text" size="10" id="event_end_date" name="event_end_date" placeholder="MM/DD/YYYY" value="" />
|
||||
<input type="text" size="5" id="event_end_time" name="event_end_time" placeholder="HH:MM" value="" />
|
||||
<br /><br />
|
||||
<div id="button-start-stop-timer">Start Timer</div>
|
||||
<div id="timer_output_area" align="center">
|
||||
<h1>Timer Not Running</h1>
|
||||
</div>
|
||||
<div id="button-clear-timer">Clear Timer</div>
|
||||
</div>
|
||||
|
||||
<div id="error-dialog" title="Error">
|
||||
<p><span id="error-text" /></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue