File Metadata

timer.tpl
View Options

	% rebase('base.tpl')

	<form action="{{ ctx['home'] }}/set_timer" method="post">
	<input type="submit" class="btn btn-lg mybtn" value="set timer">
	<br>
	<br>
	<br>
	<br>
	<br>
	<input type="text" class="btn btn-lg linkbtn disabled" id="timer" name="timer" value="00:00" readonly>
	<br>
	</form>

	<div class="btn-group" role="group">
	<button type="button" class="btn btn-lg mybtn setter" id="sub_min" style="width: 30%">-</button>
	<button type="button" class="btn btn-lg mybtn disabled" style="width: 40%">15m</button>
	<button type="button" class="btn btn-lg mybtn setter" id="add_min" style="width: 30%">+</button>
	</div>
	<br>
	<div class="btn-group" role="group">
	<button type="button" class="btn btn-lg mybtn setter" id="sub_hr" style="width: 30%">-</button>
	<button type="button" class="btn btn-lg mybtn disabled" style="width: 40%">1h</button>
	<button type="button" class="btn btn-lg mybtn setter" id="add_hr" style="width: 30%">+</button>
	</div>
	<br>


	<script>
	var hrs = {{ ctx['hours'] }};
	var mins = {{ ctx['mins'] }};
	function set_timer() {
	$("#timer").val(("0" + hrs).slice(-2) + ":" + ("0" + mins).slice(-2));
	}

	$(document).ready(function(){
	set_timer();

	$(".setter").click(function() {
	switch(event.target.id) {
	case "add_min":
	mins += 15;
	if (mins >= 60) {
	hrs += 1;
	mins -= 60;
	}
	break;
	case "sub_min":
	mins -= 15;
	if (mins < 0) {
	if (hrs > 0) {
	hrs -= 1;
	mins += 60;
	} else {
	hrs = mins = 0;
	}
	}
	break;
	case "add_hr":
	hrs += 1;
	break;
	case "sub_hr":
	hrs -= 1;
	if (hrs < 0) {
	hrs = mins = 0;
	}
	break;
	default:
	break;
	}
	set_timer();
	});
	});
	</script>