test6.php

<div id="workout">
	<div><strong>Total workout time:</strong> <span id="TotalTime"></span></div>
	<div><strong>Exercises:</strong> <span id="exercisesNo"></span>, 
		<span id="exercisesName"></span>, 
		<span class="showPopup" data-exercises="<?php echo $exercise->exercises_id; ?>">Video info</span></div>
	<div><strong>Workout rep:</strong> <span id="RunRep"></span></div>
	<div><strong>Workout time:</strong> <span id="RunTimer"></span></div>
	<div><strong>Rest time:</strong> <span id="RestTimer"></span></div>

	<br><br>
	<div id="RatingButtons" style="display: none;">
		<a class="button" data-rating="1" onclick="onRatingButtonClicked(event)">Lätt</a>
		<a class="button" data-rating="2" onclick="onRatingButtonClicked(event)">Svårt</a>
	</div>
</div>

<div id="done" style="display: none;">
	<strong>Workout done</strong>
</div>




<script type='text/javascript'>
	
	var exercises, currentIndex;
	exercises = [
			{
				exercises_name: 'Pull-Ups',
				exercises_id: '1519202945460953',
				exercises_amount: '10',
				exercises_unit: 'rep',
				exercises_rest: '30',
				exercises_rest_unit: 'sec',
			},
			{
				exercises_name: 'Bent Over Barbell Row',
				exercises_id: '1519203318790762',
				exercises_amount: '60',
				exercises_unit: 'sec',
				exercises_rest: '30',
				exercises_rest_unit: 'sec',
			},
			{
				exercises_name: 'Seated Low Row',
				exercises_id: '1519203837179430',
				exercises_amount: '60',
				exercises_unit: 'sec',
				exercises_rest: '30',
				exercises_rest_unit: 'sec',
			},
			{
				exercises_name: 'Vertical Crunch',
				exercises_id: '1519204214125133',
				exercises_amount: '20',
				exercises_unit: 'rep',
				exercises_rest: '30',
				exercises_rest_unit: 'sec',
			},
			{
				exercises_name: 'Hanging Knee Raises 90 Degrees',
				exercises_id: '1519204340511907',
				exercises_amount: '60',
				exercises_unit: 'sec',
				exercises_rest: '30',
				exercises_rest_unit: 'sec',
			},
		]; 
	currentIndex = 0;
	
	
	var startNextExercise = function () {
			var exercise;
			if (currentIndex >= exercises.length) {
				
					// End of exercises
					$('#workout').hide();
					$('#done').show();
					console.log('end');
					return;
			}
			exercise = exercises[currentIndex];
			switch (exercise.exercises_unit) {
					case 'sec':
					
							$('#exercisesNo').html(currentIndex)
							$('#exercisesName').html(exercise.exercises_name);
							$(".showPopup").attr("data-exercises", exercise.exercises_id);
							
							$('#RunTimer').show();
							$('#RunTimer').text(exercise.exercises_amount);
					
							runTimer(exercise.exercises_amount, function (secondsLeft) {
								
									// Updatera sekundvisaren på sidan
									$('#RunTimer').text(secondsLeft);
							}, function () {
							        $('#RunTimer').hide();
									displayRatingButtons();
									startRestTimer();
							});
							break;
					case 'rep':
					
							$('#exercisesNo').html(currentIndex)
							$('#exercisesName').html(exercise.exercises_name);
							$(".showPopup").attr("data-exercises", exercise.exercises_id);
							
							$('#RunRep').show();
							$('#RunRep').text(exercise.exercises_amount);
					
							displayRatingButtons();
							break;
			}
	};
	var runTimer = function (seconds, tick, callback) {
			var intervalRef, onTick;
			onTick = function () {
					tick(--seconds);
					if (seconds <= 0) {
							clearInterval(intervalRef);
							callback();
					}
				
			};
		
			intervalRef = setInterval(onTick, 100);
			return intervalRef;
	};
	var displayRatingButtons = function () {
		
			// Visa betyg-knapparna
			jQuery( "#RatingButtons" ).show();
		
	};
	// När man trycker på en betyg-knapp
	var onRatingButtonClicked = function (event) {
			var element, value;
			// Ta reda på vad man valde:
			element = event.target || event.srcElement;
			value = element.dataset['rating']; /* e.g.: <a class="button" data-rating="1">Lätt</a> */
			// Spara "value" + "exercises_id" någonstans :)
			jQuery( "#RatingButtons" ).hide();
			console.log('Betyg: ' + value);
		
			// gå till nästa exercises när man har klickat på betyg
			$('#RunRep').hide();
			currentIndex++;
			startNextExercise();
	};
	var startRestTimer = function () {
			var exercise;
			
			$('#RunRep').hide();
			$('#RunTimer').hide();
			$('#RestTimer').show();
			exercise = exercises[currentIndex];
			$('#RestTimer').text(exercise.exercises_rest);
			runTimer(exercise.exercises_rest, function (secondsLeft) {
				
					// Uppdatera sekundvisaren
					$('#RestTimer').text(secondsLeft);
			}, function () {
					$('#RestTimer').hide();
					$('#RunRep').hide();
			});
	};
	
	
	
	
	// Start workout
	$(document).ready(function () {
	
		startNextExercise();
		
	});
	
	
	
</script>