Merge branch 'main' of https://github.com/CodingTurtle2/gmci_project

auth.js

@@ -3,4 +3,6 @@ const couchdb_password = "admin";
 
 const couchdb_name = "sassy";
 
+const debug_username = "dumble-door"; //set a default user when not logged in
+
 //http://127.0.0.1:5984/_utils/#_config/couchdb@127.0.0.1

help/Example.html

@@ -39,22 +39,23 @@ test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
 
 showOverlay("overlay1");
 
-//setTimeout(() => hideOverlay("overlay1"), 3000);
+const couchDB = new CouchDB();
 
 async function main() {
-	const couchDB = new CouchDB();
 	await couchDB.set("xample", {
 		"my_data": 1,
 		"more_data": "bla"
 	});
 
-	const data = await couchDB.get("login");
+	const data = await couchDB.get("xample");
 	console.log(JSON.stringify(data));
-	//Gibt { "username": "bla", "password": "bla" } wieder
+	//Gibt { "my_data": 1, "more_data": "bla" } wieder
 }
 
 main();
-createTemp();
+createTemp().then((v) => {
+	setUserData(couchDB);
+});
 
 </script>
 

help/data_xample.js

@@ -58,7 +58,22 @@ async function createTemp() {
 		"result": [
 			["YES", "YES", 5, 2],
 			["YES", "YES", 1, 3]
-		]
+		],
+		"result_history": [
+			{
+				"date": "2025-12-27",
+				"questions": [
+					{ "title": "1", "type": "text" },
+					{ "title": "2", "type": "scala" }
+				],
+				"result": [
+					["Gut, aber ...", 5],
+					["Schlecht", 1]
+				]
+			}
+		],
+		"start_date": "2025-12-23",
+		"expire_date": "2025-12-27"
 	});
 	await couchDB.set("course:weiche_ware", {
 		"title": "Weiche Ware",
@@ -77,6 +92,21 @@ async function createTemp() {
 		"result": [
 			["Gut, aber ...", 5],
 			["Schlecht", 1]
-		]
+		],
+		"result_history": [
+			{
+				"date": "2025-12-27",
+				"questions": [
+					{ "title": "1", "type": "text" },
+					{ "title": "2", "type": "scala" }
+				],
+				"result": [
+					["Gut, aber ...", 5],
+					["Schlecht", 1]
+				]
+			}
+		],
+		"start_date": "2025-12-23",
+		"expire_date": "2025-12-27"
 	});
 }

help/documentation.md

@@ -70,3 +70,10 @@ async function getUserData(couchDB) -> Map?;
 //Setze den Nutzer, welcher unter der Variable userData verfügbar sein wird
 async function setUserData(couchDB) -> bool;
 ```
+
+##Nützliche CSS-Klassen
+- .profile = Runde Profilbox
+- overlay = Overlay
+- .header_bar_1 = Headerbar
+- .header_bar_1_placeholder = Platzhalter für Headerbar
+- .add_button = Runder "Hinzufügen"-Knopf

lib/basic.css

@@ -1,11 +1,14 @@
 :root {
-	--accent_color_fg: #007bff;
+	--accent_color_fg: rgba(0, 123, 255, 1);
+	--accent_color_fg_o: rgba(0, 123, 255, 0.5);
 	--accent_color_bg: rgba(137, 197, 221, 1);
 	--accent_color_bg_o: rgba(137, 197, 221, 0.5);
+	--accent_color_bg_o2: rgba(137, 197, 221, 0.25);
 	--main_color_fg: white;
 	--main_color_bg: black;
 	--border-radius: 10px;
 	--def-shadow: 10px 20px 20px rgb(128, 128, 128, 0.5);
+	--reversed_def_shadow: inset 1px 2.5px 2.5px rgb(128, 128, 128, 0.5);
 }
 * {
 	box-sizing: border-box;
@@ -24,10 +27,10 @@ body, html {
 	font-size: 20px;
 }
 ::selection {
-	background-color: var(--accent_color_fg);
+	background-color: var(--accent_color_fg_o);
 	color: black;
 }
-selectable {
+.selectable {
 	-webkit-user-select: text;
 	-moz-user-select: text;
 	-ms-user-select: text;
@@ -42,6 +45,14 @@ selectable {
 	border-radius: 50%;
 	background: var(--accent_color_bg);
 	border: none;
+	background-size: 58px 58px;
+}
+input {
+	font-size: 18px;
+	background: none;
+	border: 1px solid black;
+	border-radius: var(--border-radius);
+	padding: 4px;
 }
 
 /* ----------- overlay ----------- */
@@ -72,6 +83,8 @@ overlay {
 	left: 50%;
 	min-width: 250px;
 	min-height: 150px;
+	max-height: 95%;
+	max-width: 95%;
 	transform: translate(-50%, -50%);
 	background: var(--accent_color_bg_o);
 	backdrop-filter: blur(10px);
@@ -117,6 +130,7 @@ overlay {
 }
 .header_bar_1 > div:nth-child(1) {
 	text-align: left;
+	width: 100%;
 }
 .header_bar_1 > div:nth-child(2) {
 	text-align: center;
@@ -124,6 +138,7 @@ overlay {
 }
 .header_bar_1 > div:nth-child(3) {
 	text-align: right;
+	width: 100%;
 }
 
 .header_bar_1_placeholder {
@@ -184,4 +199,64 @@ content {
 .add_button:hover {
 	border: 2px solid grey;
 	background-color: lightgray;
+}
+
+
+
+dropdown {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: none;
+	z-index: 300;
+}
+dropdown > div:first-child {
+	width: 100%;
+	height: 100%;
+	background: none;
+}
+dropdown > div:last-child {
+	position: absolute;
+	background: var(--accent_color_bg_o);
+	backdrop-filter: blur(10px);
+	border-radius: var(--border-radius);
+	transform: translate(calc(-100% + 50px), 5px);
+	width: 200px;
+	display: flex;
+	flex-direction:column;
+	box-shadow: var(--def-shadow);
+}
+dropdown > div:last-child label {
+	background: none;
+	font-size: 20px;
+	border: none;
+	border-bottom: 1px solid black;
+	padding-top: 8px;
+	padding-bottom: 8px;
+	font-weight: normal;
+	text-align: center;
+}
+dropdown > div:last-child button {
+	background: none;
+	font-size: 20px;
+	border: none;
+	border-bottom: 1px solid black;
+	padding-top: 8px;
+	padding-bottom: 8px;
+	font-weight: normal;
+	text-align: center;
+}
+dropdown > div:last-child button:hover {
+	background: var(--accent_color_fg_o);
+}
+dropdown > div:last-child button:first-child {
+	border-top-left-radius: var(--border-radius);
+	border-top-right-radius: var(--border-radius);
+}
+dropdown > div:last-child button:last-child {
+	border-bottom: none;
+	border-bottom-left-radius: var(--border-radius);
+	border-bottom-right-radius: var(--border-radius);
 }

lib/basic.js

@@ -330,9 +330,23 @@ function getURLArgsMap() {
 	}
 	return res;
 }
+
+
+function form1(string) {
+    if (!string) return string;
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+
 async function getUserData(couchDB) {
-	const username = getURLArgsMap()["user"];
+	let username = getURLArgsMap()["user"];
-	if (!username) return null;
+	if (!username) {
+		if (typeof (debug_username) == "string") {
+			username = debug_username;
+		} else {
+			return null;
+		}
+	}
 	const res = await couchDB.get("users");
 	if (!res) return null;
 	const data = res[username];
@@ -341,6 +355,7 @@ async function getUserData(couchDB) {
 		"name": username
 	};
 }
+
 var userData = null;
 async function setUserData(couchDB) {
 	const res = await getUserData(couchDB);
@@ -349,5 +364,92 @@ async function setUserData(couchDB) {
 		return false;
 	}
 	userData = res;
+	updateAllProfiles(res);
 	return true;
+}
+
+function updateAllProfiles(user) {
+	const profiles = document.getElementsByClassName("profile");
+	for (var i of profiles) {
+		i.style.backgroundImage = `url("${user.avatar}")`;
+		i.onclick = _onProfileClick;
+	}
+}
+function _onProfileClick(event) {
+	var buttonRect = this.getBoundingClientRect();
+	
+	var dropdown = document.createElement("dropdown");
+	dropdown.addEventListener("click", dropdown.remove);
+	
+	var bg = document.createElement("div");
+	dropdown.appendChild(bg);
+	
+	var div = document.createElement("div");
+	
+	const _1 = window.innerHeight - buttonRect.y - 200;
+	if (_1 < 0) {
+		div.style.transform = "translate(calc(-100% + 58px), calc(-100% - 30px))";
+	}
+	
+	div.style.top = (buttonRect.bottom) + 'px';
+	div.style.left = (buttonRect.left) + 'px';
+	div.innerHTML = `
+<label><b>${form1(userData.name)}</b></label>
+<button onclick='_onProfilClickOnProfil()'>Profil</button>
+<button onclick='location.href = "../login.html";'>Abmelden</button>
+	`;
+	dropdown.appendChild(div);
+	
+	document.body.appendChild(dropdown);
+}
+function _onProfilClickOnProfil() {
+	if (typeof(showProfile) == "function") {
+		showProfile(userData);
+	} else {
+		_showProfile(userData);
+	}
+}
+function _showProfile(user) {
+	let elm = getId("profile_overlay");
+	if (!elm) {
+		elm = document.createElement("overlay");
+		elm.setAttribute("id", "profile_overlay");
+		document.body.appendChild(elm);
+	}
+	elm.innerHTML = `
+<div style="height: 40px; margin-top: 5px; margin-right: 50px;"><b>Profil-Übersicht</b></div>
+<span style="display: inline-block; width: 100%; text-align: center;">
+<div style="border-radius: 50%; width: 80px; height: 80px; display: inline-block; margin-bottom: 10px; background-color: var(--accent_color_bg); background-size: 80px 80px; background-image: url('${user.avatar}');"></div>
+<br>
+<u>${!user.title ? "": user.title+" "}${form1(user.name)}</u>
+<br><br>
+</span>
+<span class="selectable">
+Level: ${user.level ?? 0}<br>
+Rolle: ${form1(user.role ?? "Student")}
+</span><br>
+Avatar: <input style="" value="${user.avatar}"><br><br>
+<button style="font-size: 18px; width: 100%; border-radius: var(--border-radius); font-weight: normal;" onclick="_showProfileSave(this);">Speichern</button>
+	`;
+	showOverlay("profile_overlay");
+}
+async function _showProfileSave(elm) {
+	if (!userData) return;
+	
+	let couchDB = new CouchDB();
+	const res = await couchDB.get("users");
+	
+	const avatar = elm.parentElement.querySelector("input");
+	
+	userData.avatar = avatar.value;
+	
+	const user = {...userData};
+	delete user["name"];
+	res[userData.name] = user;
+	
+	await couchDB.set("users", res);
+	
+	updateAllProfiles(userData);
+	
+	hideOverlay("profile_overlay");
 }

login.html

@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <html>
 <head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Login</title>
 <link rel="stylesheet" href="./lib/basic.css">
 <script src="./auth.js"></script>

prof/auswertung.html

@@ -0,0 +1,225 @@
+<!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>
+</head>
+<body>
+<style>
+.header_bar_1 > div:first-child > div {
+	display: inline;
+	padding: 10px;
+	padding-right: 30px;
+}
+.header_bar_1 > div:first-child > div:hover {
+	background: rgba(127, 127, 127, 0.4);
+	border-radius: var(--border-radius);
+}
+
+.content-table {
+	height: calc(100% - 75px);
+	max-height: calc(100% - 75px);
+	min-height: calc(100% - 75px);
+	width: 100%;
+	position: fixed;
+	top: 75px;
+	left: 0;
+}
+.content-table > tbody > tr:first-child > td:first-child {
+	width: 35%;
+	vertical-align: top;
+	padding: 20px;
+	padding-right: 10px;
+	height: 100%;
+}
+.content-table > tbody > tr:first-child > td > div {
+	display: inline-block;
+	width: 100%;
+	border: 3px solid var(--accent_color_bg);
+	border-radius: var(--border-radius);
+	padding: 10px;
+	box-shadow: var(--reversed_def_shadow);
+	background: var(--accent_color_bg_o2);
+	min-height: 150px;
+}
+.content-table > tbody > tr:first-child > td:last-child {
+	width: 65%;
+	height: 100px;
+	vertical-align: top;
+	padding: 20px;
+	padding-left: 10px !important;
+}
+.content-table > tbody > tr:first-child > td:last-child > div {
+	height: 100%;
+	max-height: 100%;
+	padding: 15px;
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+#umfrage_list > div {
+	padding: 10px;
+	border: 2px solid var(--accent_color_bg);
+	border-radius: var(--border-radius);
+	width: 100%;
+	min-height: 100px;
+	margin-bottom: 10px;
+}
+</style>
+
+<div class="header_bar_1">
+	<div>
+		<div onclick="location.href = './uebersicht.html?user=' + userData.name;">
+			<div style="border-radius: 50%; border: 1px solid black; display: inline-block; text-align: center; width: 32px; font-size: 25px;">⇦</div>
+			&nbsp;&nbsp;Meine Kurse
+		</div>
+	</div>
+	<div><b>Auswertungen</b></div>
+	<div>
+		<button class="profile"></button>
+	</div>
+</div>
+<div class="header_bar_1_placeholder"></div>
+
+<table class="content-table"><tr>
+	<td><div>
+		<div id="gesamt" class="selectable"></div>
+	</div></td>
+	<td><div>
+		<div id="umfrage_list"></div>
+	</div></td>
+</tr></table>
+
+<script>
+
+const couchDB = new CouchDB();
+setUserData(couchDB).then(init);
+
+var gesamtAuswertung = [0,0,0, []];
+
+async function loadStats() {
+	const gdiv = getId("gesamt");
+	const udiv = getId("umfrage_list");
+	
+	udiv.innerHTML = "";
+	gesamtAuswertung = [0,0,0, []];
+	for (var i of userData.courses) {
+		const course = await couchDB.get("course:" + i);
+		if (course == null) continue;
+		
+		for (var i2 of (course["result_history"] ?? [])) {
+			udiv.innerHTML +=	_createElement1(course, i2);
+		}
+		udiv.innerHTML +=	_createElement1(course, {
+			"date": course.expire_date,
+			"questions": course.questions ?? [],
+			"result": course.result ?? []
+		});
+	}
+	
+	let studenten = gesamtAuswertung[3].reduce((acc, val) => acc + val, 0) / gesamtAuswertung[3].length;
+
+	
+	gdiv.innerHTML = `
+<b>Gesamtbewertung:</b><br><br>
+Positiv bewertet: ${gesamtAuswertung[0]}<br>
+Neutral bewertet: ${gesamtAuswertung[1]}<br>
+Negativ bewertet: ${gesamtAuswertung[2]}<br><br>
+<i>Studenten im Durchschnitt:</i> ${studenten}
+	`;
+}
+
+function _createElement1(course, data) {
+	const startDate = data.date;
+	const title = course.title;
+	
+	var startD = "Unbekannt";
+	if (startDate) {
+		startD = new Date(startDate).toLocaleDateString('de-DE', {year: 'numeric', month: 'long', day: 'numeric'});
+	}
+	
+	var statCount = [0,0,0];
+	for (var i in data.result) {
+		const result = data.result[i];
+		
+		for (var i2 in result) {
+			const question = data.questions[i2];
+			const answer = result[i2];
+			
+			if (question.type == "text") {
+				continue;
+			} else if (question.type == "scala") {
+				if (answer == 5 || answer == 4) {
+					statCount[0] ++;
+				} else if (answer == 3) {
+					statCount[1] ++;
+				} else if (answer == 1 || answer == 2) {
+					statCount[2] ++;
+				}
+			} else if (question.type == "emoji") {
+				if (answer == 3) {
+					statCount[0] ++;
+				} else if (answer == 2) {
+					statCount[1] ++;
+				} else if (answer == 1) {
+					statCount[2] ++;
+				}
+			}
+		}
+		gesamtAuswertung[3].push(result.length);
+	}
+		
+	var total = statCount.reduce((acc, val) => acc + val, 0);
+	var percentages;
+	if (total > 0) {
+		percentages = statCount.map(value => (value / total) * 100);
+	} else {
+		percentages = [0, 0, 0];
+	}
+	
+	var endNote;
+	if (percentages[0] > percentages[1] && percentages[0] > percentages[2]) {
+		endNote = "Überwiegend positiv";
+		gesamtAuswertung[0] ++;
+	} else if (percentages[2] > percentages[0] && percentages[2] > percentages[1]) {
+		endNote = "Überwiegend negativ";
+		gesamtAuswertung[2] ++;
+	} else {
+		endNote = "Gemischt";
+		gesamtAuswertung[1] ++;
+	}
+
+	
+	return `<div>
+<table style="width: 100%; border-collapse:collapse; " class="selectable">
+<tr>
+<td style="vertical-align: top; width: 60%; border-bottom: 1px solid black;">
+	Umfrage vom ${startD}
+</td>
+<td style="vertical-align: top; text-align: right; width: 40%; border-bottom: 1px solid black;">
+	&nbsp;&nbsp;Kurs: ${title}
+</td>
+</tr>
+<tr>
+<td style="padding-left: 15px; display: inline-block; padding-top: 10px; vertical-align: top;">
+	Positive: ${percentages[0]}%<br>
+	Negative: ${percentages[2]}%<br>
+	Neutral: ${percentages[1]}%<br>
+</td>
+<td style="padding-top: 10px; vertical-align: top;">
+	<u>Endnote</u>: ${endNote}
+</td>
+</tr>
+</table>
+	</div>`;
+}
+
+async function init() {
+	await loadStats();
+}
+
+</script>
+</body>
+</html>

prof/uebersicht.html

@@ -2,13 +2,13 @@
 <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>
@@ -62,7 +62,7 @@ setUserData(couchDB);
 .edit_course .evaluations {
 	overflow-y: auto;
 	text-align: center;
-	max-height: 400px;
+	max-height: 300px;
 	border: 2px solid grey;
 	padding: 10px;
 	border-radius: var(--border-radius);
@@ -109,11 +109,15 @@ setUserData(couchDB);
 
 <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>
 
@@ -121,21 +125,23 @@ setUserData(couchDB);
 
 async function showEditCourse(name) {  // 
 	const data = await couchDB.get("course:" + name);
-	if (data.owner != userData.name) {
+	/*if (data.owner != userData.name) {
 		console.error("User is not author");
 		return;
-	}
+	}*/
 	
 	showOverlay("edit_course");
 	
 	const elm = getOverlay("edit_course");
 	
-	const title = elm.getElementsByTagName("input")[0];
+	const inputs = elm.getElementsByTagName("input");
 	const description = elm.getElementsByTagName("textarea")[0];
 	
-	title.value = data.title;
+	inputs[0].value = data.title;
-	title.setAttribute("oldID", name);
+	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");
 	
@@ -167,13 +173,13 @@ function createEvaluation(question) {
 }
 async function saveEditCourse() {
 	const elm = getOverlay("edit_course");
-	const title = elm.getElementsByTagName("input")[0];
+	const inputs = elm.getElementsByTagName("input");
 	const description = elm.getElementsByTagName("textarea")[0];
 	
-	const oldID = title.getAttribute("oldID");
+	const oldID = inputs[0].getAttribute("oldID");
 	const data = await couchDB.get("course:" + oldID);
 	
-	data["title"] = title.value;
+	data["title"] = inputs[0].value;
 	data["description"] = description.value;
 	
 	const evaluations = elm.querySelector(".evaluations > div");
@@ -189,9 +195,20 @@ async function saveEditCourse() {
 		});
 	}
 	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:" + title.value.toLowerCase(), data);
+	await couchDB.set("course:" + inputs[0].value.toLowerCase(), data);
 	
 	hideOverlay("edit_course");
 }