g2.4

prof/uebersicht.html

@@ -0,0 +1,158 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<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: 400px;
+	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 span {
+	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>
+<textarea placeholder="Beschreibung"></textarea><br><br>
+<div class="evaluations">
+<div></div>
+<button class="add_button">+</button>
+</div><br>
+<button onclick="saveEditCourse()">Speichern</button>
+</overlay>
+
+<script>
+
+async function showEditCourse(name) {
+	const data = await couchDB.get("course:" + name);
+	if (data.owner != userData.name) return;
+	
+	showOverlay("edit_course");
+	
+	const elm = getOverlay("edit_course");
+	
+	const title = elm.getElementsByTagName("input")[0];
+	const description = elm.getElementsByTagName("textarea")[0];
+	
+	title.value = data.title;
+	title.setAttribute("oldID", name);
+	description.value = data.description;
+	
+	const evaluations = elm.querySelector(".evaluations > div");
+	
+	for (var i of data.questions) {
+		evaluations.innerHTML += createEvaluation(i);
+	}
+}
+function createEvaluation(question) {
+	return `
+	<div class="evaluation">
+	<button>🗑</button>
+	<span>${question.title}</span>
+	<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 title = elm.getElementsByTagName("input")[0];
+	const description = elm.getElementsByTagName("textarea")[0];
+	
+	const oldID = title.getAttribute("oldID");
+	const data = await couchDB.get("course:" + oldID);
+	
+	data["title"] = title.value;
+	data["description"] = description.value;
+	
+	await couchDB.delete("course:" + oldID);
+	await couchDB.set("course:" + title.value.toLowerCase(), data);
+	
+	hideOverlay("edit_course");
+}
+
+
+</script>
+	
+</body>
+</html>