timer.tpl
7a3998699ademaster

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>