g2.7

lib/basic.js

@@ -331,9 +331,22 @@ 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"];
-	if (!username) return null;
+	let username = getURLArgsMap()["user"];
+	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];
@@ -351,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");
 }