gmci_project/prof/uebersicht.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../lib/basic.css">
<script src="../auth.js"></script>
<script src="../lib/basic.js"></script>
<script>
const couchDB = new CouchDB();
setUserData(couchDB);
</script>
<title>Übersicht</title>
</head>
<body>

	
<!--Implementiere hier dein Zeugs-->
	
	
<style>
.edit_course {
	min-width: 70% !important;
}
.edit_course input {
	width: 100%;
	font-size: 18px;
	padding: 4px;
	background: none;
	border: 1px solid black;
	border-radius: var(--border-radius);
}
.edit_course textarea {
	width: 100%;
	font-size: 18px;
	resize: none;
	padding: 4px;
	background: none;
	border: 1px solid black;
	height: 100px;
	border-radius: var(--border-radius);
}
.edit_course .evaluations {
	overflow-y: auto;
	text-align: center;
	max-height: 300px;
	border: 2px solid grey;
	padding: 10px;
	border-radius: var(--border-radius);
}
.edit_course .evaluations .evaluation {
	display: inline-block;
	width: 100%;
	border-radius: var(--border-radius);
	border: 1px solid black;
	padding: 10px;
	text-align: center;
	margin-bottom: 10px;
	position: relative;
}
.edit_course .evaluation input {
	display: inline-block;
	font-size: 20px !important;
	width: calc(100% - 80px);
}
.edit_course .evaluation > select {
	width: 90%;
	font-size: 18px;
	margin-top: 15px;
}
.edit_course .evaluation > button {
	width: 40px;
	height: 40px;
	font-size: 28px;
	position: absolute;
	top: 5px;
	right: 5px;
	overflow: hidden;
}
.edit_course > button {
	width: 100%;
	font-size: 18px;
	border-radius: var(--border-radius);
	padding: 4px;
	font-weight: normal;
}
</style>

<button onclick="showEditCourse('bucket')">Open Course:Bucket</button>

<overlay id="edit_course">
<input placeholder="Kursname" style="width: calc(100% - 50px);"><br><br>
Beschreibung:
<textarea placeholder="Beschreibung"></textarea><br><br>
Feedback-Fragen:
<div class="evaluations">
<div></div>
<button class="add_button" onclick="createNewEvaluation()">+</button>
</div><br>
Start-Termin: <input type="date" style="margin-bottom: 5px;"><br>
Abgabe-Termin: <input type="date"><br><br>
<button onclick="saveEditCourse()">Speichern</button>
</overlay>

<script>

async function showEditCourse(name) {
	const data = await couchDB.get("course:" + name);
	if (data.owner != userData.name) {
		console.error("User is not author");
		return;
	}
	
	showOverlay("edit_course");
	
	const elm = getOverlay("edit_course");
	
	const inputs = elm.getElementsByTagName("input");
	const description = elm.getElementsByTagName("textarea")[0];
	
	inputs[0].value = data.title;
	inputs[0].setAttribute("oldID", name);
	description.value = data.description;
	inputs[1].value = data["start_date"] ?? "";
	inputs[2].value = data["expire_date"] ?? "";
	
	const evaluations = elm.querySelector(".evaluations > div");
	
	for (var i of data.questions) {
		evaluations.innerHTML += createEvaluation(i);
	}
}
function createNewEvaluation() {
	const elm = getOverlay("edit_course");
	if (elm == null) return;
	
	const evaluations = elm.querySelector(".evaluations > div");
	evaluations.innerHTML += createEvaluation({
		"title": "", "type": "text"
	});
}
function createEvaluation(question) {
	return `
<div class="evaluation">
	<button onclick="this.parentElement.remove();">🗑</button>
	<input value="${question.title}">
	<select>
		<option value="text" ${question.type == "text" ? "selected": ""}>Text</option>
		<option value="scala" ${question.type == "scala" ? "selected": ""}>Scala</option>
		<option value="emoji" ${question.type == "emoji" ? "selected": ""}>Emoji</option>
	</select>
</div>
	`;
}
async function saveEditCourse() {
	const elm = getOverlay("edit_course");
	const inputs = elm.getElementsByTagName("input");
	const description = elm.getElementsByTagName("textarea")[0];
	
	const oldID = inputs[0].getAttribute("oldID");
	const data = await couchDB.get("course:" + oldID);
	
	data["title"] = inputs[0].value;
	data["description"] = description.value;
	
	const evaluations = elm.querySelector(".evaluations > div");
	const questions = [];
	for (var i of evaluations.getElementsByClassName("evaluation")) {
		const inpE = i.querySelector("input");
		const selE = i.querySelector("select");
		if (inpE.value.length == 0) continue;
		
		questions.push({
			"title": inpE.value,
			"type": selE.value
		});
	}
	data["questions"] = questions;
	evaluations.remove();
	
	if (inputs[1].value.length > 0) {
		let dateObject = new Date(inputs[1].value);
		let dateString = dateObject.toISOString().split('T')[0];
		data["start_date"] = dateString;
	} if (inputs[2].value.length > 0) {
		let dateObject = new Date(inputs[2].value);
		let dateString = dateObject.toISOString().split('T')[0];
		data["expire_date"] = dateString;
	}
	
	await couchDB.delete("course:" + oldID);
	await couchDB.set("course:" + inputs[0].value.toLowerCase(), data);
	
	hideOverlay("edit_course");
}


</script>
	
</body>
</html>