357 lines
14 KiB
JavaScript
357 lines
14 KiB
JavaScript
$(document).ready(function() {
|
|
function createStopwatch(name, id, currentTime = 0, pausedAt = 0) {
|
|
if (!id) {
|
|
id = 'stopwatch' + ($('#stopWatches').children().length + 1);
|
|
}
|
|
var panelHtml = generatePanelHtml( name, id, 'glyphicon-time', 'stopwatch', 0, currentTime, pausedAt );
|
|
$('#stopWatches').append(panelHtml);
|
|
|
|
setupStopwatch( id, currentTime, pausedAt );
|
|
}
|
|
|
|
function createTimer( name, id, totalTime = 0, currentTime = 0, pausedAt = 0 ) {
|
|
if (!id) {
|
|
id = 'timer' + ($('#timers').children().length + 1);
|
|
}
|
|
var panelHtml = generatePanelHtml( name, id, 'glyphicon-hourglass', 'timer', totalTime, currentTime, pausedAt );
|
|
$('#timers').append(panelHtml);
|
|
|
|
setupTimer( id, totalTime, currentTime, pausedAt );
|
|
}
|
|
|
|
function generatePanelHtml(name, id, iconClass, type, totalSeconds, currentSeconds = 0, pausedAt = 0) {
|
|
var panelColor, readout, defaultTime, resumeButtons;
|
|
if (type === 'timer') {
|
|
panelColor = 'primary';
|
|
defaultTime = `<b>Default Time:</b>
|
|
<span class="pull-right">
|
|
${formatTime(totalSeconds)}
|
|
</span>
|
|
<br />`;
|
|
readout = `<p id="${id}">Time left: ${formatTime(currentSeconds)}</p>`;
|
|
} else {
|
|
panelColor = 'info';
|
|
defaultTime = '';
|
|
readout = `<p id="${id}">Time elapsed: ${formatTime(currentSeconds)}</p>`;
|
|
}
|
|
|
|
if ( 0 != pausedAt ) {
|
|
resumeButtons = `<button id="Resume${id}" class="btn btn-sm btn-success"><i class="glyphicon glyphicon-play"></i></button>
|
|
<button id="Pause${id}" class="btn btn-sm btn-default" style="display:none"><i class="glyphicon glyphicon-pause"></i></button>`;
|
|
} else {
|
|
resumeButtons = `<button id="Resume${id}" class="btn btn-sm btn-success" style="display:none"><i class="glyphicon glyphicon-play"></i></button>
|
|
<button id="Pause${id}" class="btn btn-sm btn-default"><i class="glyphicon glyphicon-pause"></i></button>`;
|
|
}
|
|
return `
|
|
<span class="col-lg-4" id="Panel${id}">
|
|
<div class="panel panel-${panelColor}" role="tab">
|
|
<div class="pull-left panel-heading">
|
|
<button type="button" class="btn btn-default btn-sm" data-target="#Collapse${id}" data-toggle="collapse" aria-expanded="true" aria-controls="#Collapse${id}">
|
|
<i class="glyphicon ${iconClass}"></i> ${name}
|
|
</button>
|
|
</div>
|
|
<div class="panel-heading text-center">
|
|
${resumeButtons}
|
|
<span class="pull-right">${readout}</span>
|
|
</div>
|
|
<div id="Collapse${id}" class="panel-collapse collapse in" style="width:100%; position: relative;" role="tabpanel" aria-expanded="true">
|
|
<div class="panel-body">
|
|
<b>Name:</b>
|
|
<span class="pull-right timer-name">
|
|
${name}
|
|
</span>
|
|
<br />
|
|
${defaultTime}
|
|
<b>Created At:</b>
|
|
<span class="pull-right">
|
|
${getFormattedDate()}
|
|
</span>
|
|
<br />
|
|
</div>
|
|
<div class="panel-footer">
|
|
${generateButtons(id, type)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</span>`;
|
|
}
|
|
|
|
function generateButtons(id, type) {
|
|
var duplicate = '';
|
|
if (type === 'timer') {
|
|
duplicate = `<button id="Duplicate${id}" class="btn btn-sm btn-info"><i class="glyphicon glyphicon-copy"></i></button>`;
|
|
}
|
|
return `
|
|
<button id="Reset${id}" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-refresh"></i></button>
|
|
<span class="pull-right">
|
|
${duplicate}
|
|
<button id="Remove${id}" class="btn btn-sm btn-danger"><i class="glyphicon glyphicon-trash"></i></button>
|
|
<button id="Save${id}" class="btn btn-sm btn-success" onclick="saveTimer('${id}')"><i class="glyphicon glyphicon-save"></i></button>
|
|
</span>
|
|
`;
|
|
}
|
|
|
|
function setupStopwatch(id, currentTime, pausedAt) {
|
|
var interval;
|
|
if ( 0 == pausedAt ) {
|
|
interval = setInterval(() => updateDisplay(id, ++currentTime), 1000);
|
|
} else {
|
|
updateDisplay( id, currentTime );
|
|
}
|
|
setData(id, interval, currentTime);
|
|
|
|
setupControlButtons(id, 'stopwatch', () => updateDisplay(id, ++currentTime));
|
|
}
|
|
|
|
function setupTimer( id, totalTime, currentTime, pausedAt = 0 ) {
|
|
var interval;
|
|
if ( 0 == pausedAt ) {
|
|
interval = setInterval(() => {
|
|
if (currentTime <= 0) {
|
|
clearInterval(interval);
|
|
$('#' + id).html("Time's up!");
|
|
} else {
|
|
updateDisplay(id, --currentTime);
|
|
}
|
|
}, 1000);
|
|
} else {
|
|
updateDisplay( id, currentTime );
|
|
}
|
|
|
|
setData( id, interval, currentTime, totalTime );
|
|
|
|
setupControlButtons(id, 'timer', () => {
|
|
if (currentTime <= 0) {
|
|
clearInterval(interval);
|
|
$('#' + id).html("Time's up!");
|
|
} else {
|
|
updateDisplay(id, --currentTime);
|
|
}
|
|
});
|
|
}
|
|
|
|
function setData( id, interval, elapsed, original = 0 ) {
|
|
$('#' + id).data({ 'interval': interval, 'elapsed': elapsed, 'original': original });
|
|
}
|
|
|
|
function updateDisplay(id, time) {
|
|
$('#' + id).html(`Time: ${formatTime(time)}`);
|
|
$('#' + id).data({ 'elapsed': time });
|
|
}
|
|
|
|
function setupControlButtons(id, type, updateFn) {
|
|
var $pause = $(`#Pause${id}`);
|
|
var $resume = $(`#Resume${id}`);
|
|
var $remove = $(`#Remove${id}`);
|
|
var $reset = $(`#Reset${id}`);
|
|
var $duplicate = $(`#Duplicate${id}`);
|
|
|
|
if (type === 'timer') {
|
|
$duplicate.click(function() {
|
|
var element = $( '#Panel' + id );
|
|
var name = element.find('.timer-name').text();
|
|
createTimer( name + ' Copy', 0, $('#' + id).data('original'), $('#' + id).data('original'), true );
|
|
});
|
|
}
|
|
|
|
$pause.click(function() {
|
|
clearInterval($('#' + id).data('interval'));
|
|
$pause.hide();
|
|
$resume.show();
|
|
});
|
|
|
|
$resume.click(function() {
|
|
var element = $( '#' + id );
|
|
var elapsedTime = element.data('elapsed') || 0;
|
|
if ( type === 'timer') {
|
|
var newInterval = setInterval( function() {
|
|
elapsedTime--;
|
|
updateDisplay( id, elapsedTime );
|
|
element.data('elapsed', elapsedTime );
|
|
}, 1000);
|
|
} else {
|
|
var newInterval = setInterval(function() {
|
|
elapsedTime++;
|
|
updateDisplay( id, elapsedTime );
|
|
element.data( 'elapsed', elapsedTime );
|
|
}, 1000);
|
|
}
|
|
element.data( 'interval', newInterval );
|
|
$resume.hide();
|
|
$pause.show();
|
|
});
|
|
|
|
$remove.click(function() {
|
|
clearInterval($('#' + id).data('interval'));
|
|
$.post('/timers/remove', {
|
|
id: id,
|
|
}).done(function(response) {
|
|
$('#' + id).closest('.panel').remove();
|
|
alert('Timer removed successfully!');
|
|
}).fail(function() {
|
|
alert('Error removing timer.');
|
|
});
|
|
});
|
|
|
|
$reset.click(function() {
|
|
var element = $( '#' + id ); // get the element we are working with
|
|
var originalTime = $( '#' + id ).data('original') || 0; // get the original time
|
|
clearInterval( element.data('interval') ); //stop the countdown
|
|
if ( type === 'timer') {
|
|
element.data( 'elapsed', originalTime ); // set time remaining to original time
|
|
updateDisplay( id, originalTime ); // let the display know things have changed
|
|
|
|
// if its currently ticking, make it keep ticking
|
|
if ( ! $resume.is(":visible") ) {
|
|
var newInterval = setInterval( function() {
|
|
if ( originalTime <= 0 ) {
|
|
clearInterval( newInterval );
|
|
} else {
|
|
originalTime--;
|
|
element.data('elapsed', originalTime );
|
|
}
|
|
updateDisplay( id, originalTime );
|
|
}, 1000);
|
|
element.data( 'interval', newInterval );
|
|
}
|
|
} else {
|
|
var elapsedTime = 0;
|
|
element.data( 'elapsed', elapsedTime );
|
|
updateDisplay( id, elapsedTime );
|
|
var newInterval = setInterval(function() {
|
|
elapsedTime++;
|
|
updateDisplay( id, elapsedTime );
|
|
element.data( 'elapsed', elapsedTime );
|
|
}, 1000);
|
|
element.data( 'interval', newInterval );
|
|
}
|
|
});
|
|
}
|
|
|
|
function getFormattedDate() {
|
|
var date = new Date();
|
|
var options = { year: 'numeric', month: 'long', day: 'numeric' };
|
|
return date.toLocaleDateString('en-US', options);
|
|
}
|
|
|
|
function changeId( currentID, newID ) {
|
|
$(`#${currentID}`).attr('id', newID);
|
|
$(`#Resume${currentID}`).attr('id', `Resume${newID}`);
|
|
$(`#Pause${currentID}`).attr('id', `Pause${newID}`);
|
|
$(`#Panel${currentID}`).attr('id', `Panel${newID}`);
|
|
$(`#Collapse${currentID}`).attr('id', `Collapse${newID}`);
|
|
$(`#Save${currentID}`).attr('id', `Save${newID}`).attr('onclick', `saveTimer('${newID}')`);
|
|
$(`#Remove${currentID}`).attr('id', `Remove${newID}`);
|
|
$(`#Reset${currentID}`).attr('id', `Reset${newID}`);
|
|
$(`#Duplicate${currentID}`).attr('id', `Duplicate${newID}`);
|
|
$(`button[data-target="#Collapse${currentID}"]`).attr('data-target', `#Collapse${newID}`);
|
|
$(`button[aria-controls="#Collapse${currentID}"]`).attr('aria-controls', `#Collapse${newID}`)
|
|
}
|
|
|
|
function formatTime(seconds) {
|
|
var hrs = Math.floor(seconds / 3600);
|
|
var mins = Math.floor((seconds % 3600) / 60);
|
|
var secs = seconds % 60;
|
|
return `${hrs > 0 ? hrs + 'h ' : ''}${mins > 0 ? mins + 'm ' : ''}${secs}s`;
|
|
}
|
|
|
|
$('#addStopwatch').click(function() {
|
|
createStopwatch($('#stopwatchName').val());
|
|
});
|
|
|
|
$('#addTimer').click(function() {
|
|
var name = $('#name').val();
|
|
var hours = parseInt($('#hours').val()) || 0;
|
|
var minutes = parseInt($('#minutes').val()) || 0;
|
|
var seconds = parseInt($('#seconds').val()) || 0;
|
|
var totalTime = hours * 3600 + minutes * 60 + seconds;
|
|
|
|
if ( totalTime > 0 ) {
|
|
createTimer( name, '', totalTime, totalTime ); // for new timers, it starts at max time
|
|
} else {
|
|
alert( 'Please enter a valid number of hours, minutes, or seconds.' );
|
|
}
|
|
});
|
|
|
|
$('.timer-row').each( function() {
|
|
var $row = $(this);
|
|
var name = $row.find('.timer-name').text();
|
|
var currentSeconds = parseInt($row.find('.timer-current').text(), 10);
|
|
var pausedAt = $row.find('.timer-paused').text();
|
|
var hours = parseInt($row.find('.timer-hours').text(), 10);
|
|
var minutes = parseInt($row.find('.timer-minutes').text(), 10);
|
|
var seconds = parseInt($row.find('.timer-seconds').text(), 10);
|
|
var id = $row.find('.timer-id').text();
|
|
var totalTime = hours * 3600 + minutes * 60 + seconds;
|
|
var createdAt = $row.find('.timer-created').text();
|
|
|
|
createTimer( name, id, totalTime, currentSeconds, pausedAt );
|
|
|
|
$row.remove();
|
|
});
|
|
|
|
$('.stopwatch-row').each( function() {
|
|
var $row = $(this);
|
|
var name = $row.find('.timer-name').text();
|
|
var currentSeconds = parseInt($row.find('.timer-current').text(), 10);
|
|
var pausedAt = $row.find('.timer-paused').text();
|
|
var id = $row.find('.timer-id').text();
|
|
var createdAt = $row.find('.timer-created').text();
|
|
|
|
createStopwatch( name, id, currentSeconds, pausedAt );
|
|
|
|
$row.remove();
|
|
});
|
|
|
|
window.saveTimer = function( elementId ) {
|
|
var type;
|
|
if ( elementId.includes('timer') ) {
|
|
type = 'timer';
|
|
} else if ( elementId.includes('stopwatch') ) {
|
|
type = 'stopwatch';
|
|
} else {
|
|
return updateTimer( elementId );
|
|
}
|
|
var element = $( '#Panel' + elementId );
|
|
var name = element.find('.timer-name').text();
|
|
var originalTime = $('#' + elementId).data('original') || 0;
|
|
var totalSeconds = $('#' + elementId).data('elapsed') || 0;
|
|
var hours = Math.floor(originalTime / 3600);
|
|
var minutes = Math.floor((originalTime % 3600) / 60);
|
|
var seconds = originalTime % 60;
|
|
|
|
$.post('/timers/save', {
|
|
name: name.trim(),
|
|
type: type,
|
|
hours: hours,
|
|
minutes: minutes,
|
|
seconds: seconds,
|
|
currentSeconds: totalSeconds,
|
|
}).done(function(response) {
|
|
var responseData = JSON.parse(response);
|
|
var timerId = responseData.data.id;
|
|
alert('Timer saved successfully! ID: ' + timerId);
|
|
}).fail(function() {
|
|
alert('Error saving timer.');
|
|
});
|
|
};
|
|
|
|
function updateTimer( elementId ) {
|
|
var $resume = $(`#Resume${elementId}`);
|
|
var totalSeconds = $('#' + elementId).data('elapsed') || 0;
|
|
var fields = {};
|
|
|
|
if ( $resume.is(":visible") ) {
|
|
fields.paused = true;
|
|
}
|
|
|
|
fields.currentSeconds = totalSeconds;
|
|
|
|
$.post( '/timers/update/' + elementId, fields ).done(function(response) {
|
|
alert('Timer updated successfully!');
|
|
}).fail(function() {
|
|
alert('Error saving timer.');
|
|
});
|
|
}
|
|
});
|