63 lines
1.9 KiB
HTML
63 lines
1.9 KiB
HTML
<!--INCLUDE MASTER-->
|
|
<div class="row">
|
|
<label id="chrono-label"><a id="chrono">00:00.000</a> ± 0.002s</label>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<button id="btn-start" class="btn btn-success" type="button" onmousedown="startManual()">Inicia</button>
|
|
</div>
|
|
<div class="col">
|
|
<button id="btn-stop" class="btn btn-danger" type="button" onmousedown="stopManual()">Atura</button>
|
|
</div>
|
|
<div class="col">
|
|
<button id="btn-reset" class="btn btn-secondary" type="button" onmousedown="restartManual()">Reinicia</button>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
/* Solicitar JSON desde una URL con JavaScript nativo */
|
|
var getJSON = function (url, callback) {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('GET', url, true);
|
|
xhr.responseType = 'json';
|
|
xhr.onload = function () {
|
|
var status = xhr.status;
|
|
if (status === 200) {
|
|
callback(null, xhr.response);
|
|
} else {
|
|
callback(status, xhr.response);
|
|
}
|
|
};
|
|
xhr.send();
|
|
};
|
|
|
|
function API_CALL(url) {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('GET', url, true);
|
|
xhr.send();
|
|
}
|
|
|
|
var chrono = document.getElementById("chrono");
|
|
function startManual() {
|
|
API_CALL("/api/start")
|
|
}
|
|
function stopManual() {
|
|
API_CALL("/api/stop")
|
|
}
|
|
function restartManual() {
|
|
API_CALL("/api/reset");
|
|
}
|
|
|
|
function updateTimerHandler() {
|
|
getJSON('/api/getElapsedTime',
|
|
function (err, data) {
|
|
if (err !== null) {
|
|
console.log("Error getting elapsed time");
|
|
} else {
|
|
var ms = data["elapsed"];
|
|
chrono.textContent = String(Math.round(ms / 1000)).padStart(2, '0') + '.' + String(ms % 1000).padEnd(3, '0');
|
|
}
|
|
});
|
|
}
|
|
|
|
var updateTimer = setInterval(updateTimerHandler, 100);
|
|
</script> |