im creating a speedcube timer with django, basically it shows a way to scramble my cube and i can time how long it takes me to solve it. At the moment ive just implemented the timer function with js, after i stop the timer it sends me the time trough an ajax request to a view that creates a solve object wich one of its atributes is the time, the problem being that i get a broken pipe error in the console in the place of the post request even though the function is called and the object is created, also when in the developer tools the fetch request appears as cancelled.
This is my first solo project im not following any tutorial, and i dont know js so please if you have any advice to optimize anything id apreciatte it.
HTML:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<title>TimerJS</title>
</head>
<body>
<div class="container">
<div class="clock">
<input class="number" type="text" maxlength="2" value="00" readonly><span>:</span><input class="number" type="text" maxlength="2" value="00" readonly><span>:</span><input class="number" type="text" maxlength="2" value="00" readonly>
</div>
<div class="buttons">
<button id="play" onclick="startTimer()"></button>
<button id="stop" onclick="stopTimer()"></button>
</div>
</div>
<script src="{% static 'js/timer.js' %}"></script>
</body>
</html>
JS:
let inputs, clock, alarm, minutes = 0, seconds = 0, decseconds = 0,repeater; /* Declaro todas las variables que necesito */
window.addEventListener('load', () => { /* Espero a que cargue el documento */
clock = document.querySelector('.clock'); /* Busco el reloj */
});
/* Funcion principal */
function startTimer() {
setTimer(); /* Seteo el timer visualmente */
countdown() /* Arranco el contador */
}
/* Funcion para cambiar el timer en la pantalla y en la pestaña */
function setTimer() {
/* Cambio la hora en pantalla */
clock.innerHTML = `<p class="number">${minutes > 9 ? minutes : ('0' + minutes)}</p><span>:</span><p class="number">${seconds > 9 ? seconds : ('0' + seconds)}</p><span>:</span><p class="number">${decseconds > 9 ? decseconds : ('0' + decseconds)}`;
}
/* Funcion que arranca el contador */
function countdown() {
repeater = setInterval(runner,10);
}
/* Funcion que cuenta */
function runner() {
/* Si tengo más de 0 segundos, restá segundos */
/* Si tengo 0 segundos pero tengo más de 0 minutos, poné segundos en 59 y restale 1 a minutos */
/* Si tengo 0 segundos, 0 minutos pero tengo más de 0 horas, poné segundos en 59, minutos en 59 y restale 1 a horas */
/* Sino arranca la alarma */
decseconds++
if (decseconds%100 == 0) {
seconds++;
decseconds = 0
} else {
if (seconds == 60) {
seconds = 0
minutes++;
}
}
setTimer();
}
/* Funcion para detener el timer */
function stopTimer(){
clearInterval(repeater);
location.reload();
sentTime();
}
function sentTime(){
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
const url = "save_solve/";
var options = {
method: 'POST',
headers: {'X-CSRFToken': getCookie('csrftoken')},
// mode: 'same-origin'
}
var formData = new FormData();
formData.append('minutes', minutes);
formData.append('seconds', seconds);
formData.append('decseconds', decseconds);
options['body'] = formData;
fetch(url, options)
};
view de python:
def save_time(request):
ms = int(request.POST.get('decseconds'))*10
s = int(request.POST.get('seconds'))
m = int(request.POST.get('minutes'))
print(f'{m}:{s}:{ms}')
solve = Solve()
solve.solve_time = datetime.timedelta(minutes=m, seconds=s, milliseconds=ms)
solve.save()
return HttpResponse('Sí se ejecutó la petición')
I tried to remove some code because i think, something is taking too long, but it didnt work im considering taking the part that creates the object and put it in a asynchronous task perhaps with celery.