AP: Add proper error handling in JS when communicating with TA API

[Jayden876212]

It is not clear when developing or using the product what has gone wrong when the API is down or unable to be connected to. Therefore, this already has caused issues and will cause even more issues in the future when debugging, so this is certainly an issue that will make the product more robust when completed.

It is to my understanding that error handling should be placed in this JS file:

absense-planner/ap_src/ap_app/static/js/teams.js

Lines 1 to 112 in 9cb1ab0

	var apiURL = document.currentScript.getAttribute("apiURL");
	function JoinTeam(e, user, redirect) {
	var data = JSON.stringify({"username": user, "team": e.id})
	fetch(apiURL + 'api/manage/?method=join', {
	method: "post",
	body: data,
	headers: {
	"Content-Type": "application/json",
	},
	})
	.then(() => {
	if (redirect) {
	location.replace(location.origin + "/teams/api-calendar/" + e.id)
	} else {
	location.reload()
	}
	})
	.catch(err => {
	console.log(err)
	})
	}
	function starHover(e) {
	if (e.dataset.star == 'false'){
	e.innerHTML="<i class='fas fa-star'></i>"
	e.dataset.star = 'true'
	}
	}
	function removeHover(e) {
	if (e.dataset.star == 'true'){
	e.innerHTML="<i class='far fa-star'></i>"
	e.dataset.star = 'false'
	}
	}
	function favouriteTeam(e, user, id) {
	var data = {"username": user, "team": id}
	fetch(apiURL + 'api/manage/?method=favourite', {
	method:"post",
	headers: {
	"Content-Type": "application/json",
	},
	body: JSON.stringify(data),
	})
	.then(() => {
	location.reload()
	})
	.catch(err => {
	console.log(err)
	})
	}
	/*
	Leaves team but also checks for lingering permissions and removes them
	*/
	async function LeaveTeamAndRemovePermissions(e, username, token) {
	const headers = {
	"Content-Type": "application/json",
	"X-CSRFToken": token,
	};
	var data = JSON.stringify({ username: username, team: e.id });
	const leaveResponse = await fetch(apiURL + "api/manage/?method=leave", {
	method: "post",
	body: data,
	headers: headers,
	});
	if (!leaveResponse.ok)
	throw new Error(`Leave request failed with status ${leaveResponse.status}`);
	const leaveData = await leaveResponse.json();
	if (leaveData.message === "success") {
	const permissionsResponse = await fetch(
	window.location.origin + "/remove_lingering_perms",
	{
	method: "get",
	headers: headers,
	},
	);
	if (!permissionsResponse.ok)
	throw new Error(
	`Permissions check request failed with status ${permissionsResponse.status}`,
	);
	const permissionsData = await permissionsResponse.json();
	location.replace(location.origin + "/teams")
	}
	}
	function DeleteTeam(e) {
	var data = JSON.stringify({"id": e.id})
	fetch(apiURL + 'api/teams/?method=delete&format=json', {
	method: "post",
	body: data,
	headers: {
	"Content-Type": "application/json",
	},
	})
	.then(() => {
	location.replace(location.origin + "/teams")
	})
	.catch(err => {
	console.log(err)
	})
	}