Workflow: Basically I want to update number of Pomodoro using this code:
backButton.addEventListener("click", async () => {
remainingPomodoro = Math.max(0, noPomodoros - (pomoCount - 1)); // Result clamped to 0
try {
const response = await fetch("/updatetask", {
method: "POST",
headers: {
"Content-type": "application/json"
},
body: JSON.stringify({
taskId,
updatedpomoCount: remainingPomodoro
})
});
const rawText = await response.text();
try { // Read the response once
result = JSON.parse(rawText);
if (result.success) {
window.location.href = "/task-tracker";
}
else {
alert("Failed to update task.");
}
} catch (e) {
const text = await response.text();
console.error("Failed to parse JSON. Raw response:", text);
alert("Server error. Check console for details.");
return;
}
}
catch (error) {
console.error("Error updating task:", error);
alert("Error contacting server.");
}
This code will be transferred to flask backend to be processed:
@app.route("/updatetask", methods=["POST"])
def updatetask():
if request.method == "POST":
data = request.get_json()
updated_pomocount = data.get("updatedpomoCount")
id = data.get("taskId")
db = get_db_connection()
cursor = db.cursor()
updated_task = cursor.execute("UPDATE tasks SET pomocount = ? WHERE id = ?", (updated_pomocount, id))
db.commit()
cursor.close()
db.close()
if updated_pomocount is None or id is None:
return jsonify({"success": False, "error": "Missing data"}), 400
return jsonify({"success": True})
However, I got this error:
Error updating task: TypeError: Failed to execute ‘text’ on ‘Response’: body stream already read
at HTMLButtonElement. (pomodoro.js:451:41)
(anonymous) @ pomodoro.js:459
Could somebody please help me to identify the root cause of the problem, why did I trigger the problem in the first place and the steps needed to fix this code.
The values are initialized in the following blocks of code
function addTask(taskName, noPomodoros, selectedDayIndex, taskId) {
console.log(taskName, noPomodoros, selectedDayIndex, taskId)
// Create a new task div
const taskDiv = document.createElement("div");
taskDiv.className = "task-div";
taskDiv.innerHTML =
`<span>${taskName}</span>
<p> Pomodoros: ${noPomodoros}</p>
<button class="deleteTaskButton">delete</button>`;
const deleteTaskButton = taskDiv.querySelector(".deleteTaskButton");
// Initially hide the button via CSS (not with inline style)
deleteTaskButton.style.opacity = "0";
deleteTaskButton.style.visibility = "hidden";
deleteTaskButton.style.transition = "all 0.3s ease;";
// Show button on hover (only for this taskDiv)
taskDiv.addEventListener("mouseenter", () => {
deleteTaskButton.style.opacity = "1";
deleteTaskButton.style.visibility = "visible";
});
taskDiv.addEventListener("mouseleave", () => {
deleteTaskButton.style.opacity = "0";
deleteTaskButton.style.visibility = "hidden";
});
// Add event listener to delete button
deleteTaskButton.addEventListener("click", async (e) => {
e.stopPropagation();
new Audio('/static/button-click.mp3').play()
try {
const response = await fetch ('/deletetask', {
method: 'DELETE',
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
task_id : taskId,
}),
});
const result = await response.json();
if (result.success) {
taskDiv.remove();
alert("Task deleted successfully.");
} else {
alert("Failed to delete task.");
}}
catch (error) {
console.error("Error deleting task:", error);
alert("An error occurred.");
}
})
// Insert the task div into the correct column above the add task button
const targetColumn = document.querySelector(`.day-column[data-index="${selectedDayIndex}"]`)
const addButton = targetColumn.querySelector(".add-task");
targetColumn.insertBefore(taskDiv, addButton);
taskDiv.addEventListener("click", async () => {
const form = document.createElement("form");
form.method = "POST";
form.action = "/view-task";
const data = {
task_name: taskName,
no_pomodoros: noPomodoros,
day_idx: selectedDayIndex + 1,
};
for (const key in data) {
const input = document.createElement("input");
input.type = "hidden";
input.name = key;
input.value = data[key];
form.appendChild(input);
}
localStorage.setItem("currentTask", JSON.stringify({
taskName,
noPomodoros,
taskId,
day_idx: selectedDayIndex
}));
document.body.appendChild(form);
form.submit();
})
// Clear inputs and close popup
document.getElementById('taskNameInput').value = '';
document.getElementById('pomoCountInput').value = 1;
closeTaskPopup();
}
taskFormPopup.addEventListener("submit", async function (e) {
e.preventDefault(); // Prevent the form from submitting normally
const taskName = document.getElementById("taskNameInput").value.trim();
const noPomodoros = document.getElementById("pomoCountInput").value;
const taskDayIdx = parseInt(document.getElementById("dayIndexInput").value);
// Create a json object to send to flask serverside
const response = await fetch('/addtask', {
method: 'POST',
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
task_name: taskName,
pomodoro_count: noPomodoros,
day_index: taskDayIdx,
}),
});
const data = await response.json();
console.log(data);
if (data.success) {
taskId = data.task_id;
addTask(taskName, noPomodoros, taskDayIdx, taskId);
alert("Task added successfully!");
}
else {
alert("Failed to add task. Please try again.")
}
})
The other javascript file then receives the information here
const currentTask = JSON.parse(localStorage.getItem("currentTask"));
if (currentTask) {
taskId = currentTask.taskId;
noPomodoros = parseInt(currentTask.noPomodoros);
taskName = currentTask.taskName;
day_idx = currentTask.day_idx;
}
Any sort of guide and help is appreciated! Let me know if you still need any more information.