158 lines
3.4 KiB
HTML
158 lines
3.4 KiB
HTML
<!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> |