path: root/cockpit/js/cockpit.js

import {
	fetchSubjectsMock as fetchSubjects,
	fetchProgressMock as fetchProgress,
} from "../../js/mock.js";

import {
	GraduationChange,
	fetchGraduation,
	submitGraduationChange
} from "../../js/graduation-ENV.js";

import { Student, fetchStudent, fetchStudents } from "../../js/student-ENV.js";
import { isTeacher as getIsTeacher } from "../../js/utils-ENV.js";
import { initSelection } from "../../js/selection.js";

let isTeacher;
let firstname;
let lastname;
let student;

function initCurrentName() {
	const autoNameDiv = document.getElementById("auto-name");
	firstname = autoNameDiv.children[0].innerHTML;
	lastname = autoNameDiv.children[1].innerHTML;
	autoNameDiv.remove();
}

async function loadNewStudent(id, name) {
	if (isTeacher) {
		student = await fetchStudent(id, name);
	} else {
		student = new Student(id, name);
	}
	await loadStudent(student);
}

async function loadStudent(studentToLoad) {
	student = studentToLoad;
	fetchAndUpdateStudentInfo();
	updateStudentCalendar();
	updateStudentProgress();
	updateStudentGraduation();
}

function initStudentSelection() {
	initSelection(
		"student-selection",
		fetchStudents,
		(student) => `${student.name} ${student.group}`,
		loadStudent
	);
}

function pointClickHandler(color) {
	const textareaDiv = document.getElementById("student-info-point-reason-container");
	const textarea = document.getElementById("student-info-point-reason");
	const submitBtn = document.getElementById("student-info-point-reason-submit");

	// TODO(muhq): Prefill the textarea with common reasons
	switch (color) {
	case "green":
		textarea.style.background = "rgb(from green r g b / 20%)"
		textarea.value = "";
		break;
	case "orange":
		textarea.style.background = "rgb(from orange r g b / 20%)"
		textarea.value = "";
		break;
	case "red":
		textarea.style.background = "rgb(from red r g b / 20%)"
		textarea.value = "";
		break;
	}
	textareaDiv.style.display = "block";
	textarea.focus();

	// Can not use string interpolation because of Moodle's firstname filter.
	const coach = firstname + " " + lastname;

	let submit = function() {
		let change;
		switch (color) {
		case "green":
			change = GraduationChange.newGreenPointChange(student, textarea.value, coach);
			break;
		case "orange":
			change = GraduationChange.newOrangePointChange(student, textarea.value, coach);
			break;
		case "red":
			change = GraduationChange.newRedPointChange(student, textarea.value, coach);
			break;
		default:
			alert("Invalid color");
			break;
		}
		submitGraduationChange(student, change);
		textareaDiv.style.display = "none";
		updateStudentInfo();
	}
	// Use onEVENT to override any previous handler
	textarea.onkeydown = function(e) {
		if (e.shiftKey && e.key === "Enter") {
			submit();
		}
		if (e.key === "Escape") {
			textareaDiv.style.display = "none";
		}
	};
	submitBtn.onclick = submit;
}

async function fetchAndUpdateStudentInfo() {
	student.graduation = await fetchGraduation(student);
	updateStudentInfo();
}

let DEFAULT_STUDENT_ICON;

function updateStudentInfo() {
	// Reset the student icon
	document.getElementById("student-info-icon").src = DEFAULT_STUDENT_ICON;

	// Try to replace the generic icon with the user's icon
	var img = document.createElement('img');
	img.onload = function() {
		document.getElementById("student-info-icon").src = img.src;
		img = img.onload = null;
	};
	student.getIconUrl().then( (url) => img.src = url );

	document.getElementById("student-info-name").innerHTML = `${student.name}`;

	if (student.graduation) {
		const tag = document.getElementById("student-info-tag");
		tag.innerHTML = student.graduation.level;
		tag.style.display = "block";

		document.getElementById("student-info-points-green").innerHTML = student.graduation.green;
		document.getElementById("student-info-points-orange").innerHTML = student.graduation.orange;
		document.getElementById("student-info-points-red").innerHTML = student.graduation.red;

		if (isTeacher) {
			document.getElementById("student-info-green").addEventListener('click',
				() => pointClickHandler("green"));
			document.getElementById("student-info-orange").addEventListener('click',
				() => pointClickHandler("orange"));
			document.getElementById("student-info-red").addEventListener('click',
				() => pointClickHandler("red"));
		}

		renderGraduationLevel(student.graduation, document.getElementById("student-info-level"));

		renderGraduationStickers(student.graduation, document.getElementById("student-info-stickers"));
		renderGraduationBonus(student.graduation, document.getElementById("student-info-stickers"));
	}

	document.getElementById("student-content").style.display = "block";
}

function renderGraduationLevel(graduation, node) {
	node.innerHTML = graduation.level;
}

function renderGraduationStickers(graduation, node) {
}

function renderGraduationBonus(graduation, node) {
}

function newProgressBar(subject) {
	let bar = document.createElement("div");
	fetchProgress(subject).then((progress) => {
		bar.progress = progress;
	});

	let s1 = document.createElement("div");
	s1.onhover

	bar.appendChild(s1);
	let s2 = document.createElement("div");
	bar.appendChild(s2);
	let s3 = document.createElement("div");
	bar.appendChild(s3);
	return bar;
}

let selectedSubjects;
async function updateStudentProgress() {
	selectedSubjects = await fetchSubjects(student);

	let prog = document.getElementById("progress");
	for(const subj of selectedSubjects) {
		let subjDiv = document.createElement("div");
		subjDiv.innerHTML = subj;
		subjDiv.appendChild(newProgressBar(subj))
		prog.appendChild(subjDiv);
	}
}

async function updateStudentCalendar() {
	let cal = document.getElementById("calendar");
}

async function updateStudentGraduation() {
	let graduation = document.getElementById("graduation");
}

async function initCockpit() {
	if (isTeacher) {
		initStudentSelection();
		const params = new URLSearchParams(location.search);
		const userId = params.get("userToLoad");
		if (userId)
			loadNewStudent(userId);
	} else {
		loadNewStudent(null, firstname + " " + lastname);
	}
	return;
}

window.onload = function() {
	isTeacher = getIsTeacher();
	DEFAULT_STUDENT_ICON = document.getElementById("student-info-icon").src;
	initCurrentName();
	initCockpit(isTeacher);
}