g6
This commit is contained in:
Turtle committed
1 parent
565c1b9911
commit
28490ce8b3
36 files changed
+587
-179
No files matched your search
@@ -0,0 +1,298 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.5">
|
||||
<link rel="stylesheet" href="../lib/basic.css">
|
||||
<script src="../auth.js"></script>
|
||||
<script src="../lib/basic.js"></script>
|
||||
<script src="../other/skills.js"></script>
|
||||
<script src="../other/skilltree.js"></script>
|
||||
<script src="./uebersicht_overlay.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<title>Kurs Anzeige</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header_bar_1">
|
||||
<div>
|
||||
<button onclick="location.href = './uebersicht.html?user=' + userData.name;" class="back">Meine
|
||||
Kurse</button>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<button class="profile" onclick='showOverlay("miniProfile")'>
|
||||
<overlay id="miniProfile" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header_bar_1_placeholder"></div>
|
||||
<div class="course-card">
|
||||
<span style="font-weight: bold;" id="course-name"></span>
|
||||
<span id="course-owner"></span>
|
||||
<br>
|
||||
<span>Bewertungen der Sessions</span>
|
||||
<div id="course-surveys" style="height: 200px; overflow-y: scroll; scrollbar-width: none; ">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const evaluationResults = {};
|
||||
|
||||
const couchDB = new CouchDB();
|
||||
setUserData(couchDB).then(
|
||||
() => {
|
||||
const params = getURLArgsMap();
|
||||
const courseId = params["course"];
|
||||
|
||||
if (courseId) {
|
||||
loadCourse(courseId);
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
async function loadCourse(courseId) {
|
||||
const course = await couchDB.get("course:" + courseId);
|
||||
if (course == undefined) {
|
||||
alert("Kurs existiert nicht!");
|
||||
return;
|
||||
}
|
||||
const results = course.result_history;
|
||||
|
||||
document.getElementById("course-name").innerHTML = course.title;
|
||||
document.getElementById("course-owner").innerHTML = "Ersteller: " + course.owner;
|
||||
|
||||
const courseSurveys = document.getElementById("course-surveys");
|
||||
courseSurveys.innerHTML = "";
|
||||
results.forEach((result, idx) => {
|
||||
evaluationResults[idx] = result;
|
||||
const date = new Date(result.date);
|
||||
const dateStr = `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;
|
||||
courseSurveys.innerHTML += `<div class="session" onclick="evaluationClick(${idx})">${dateStr}</div>`;
|
||||
});
|
||||
}
|
||||
|
||||
function evaluationClick(idx) {
|
||||
const result = evaluationResults[idx];
|
||||
if (!result) return;
|
||||
showEvaluationResult(result);
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style>
|
||||
button.back {
|
||||
font-size: 20px;
|
||||
padding: 15px;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
background-color: var(--accent_color_bg);
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button.back:focus-visible {
|
||||
outline: 2px var(--accent_color_fg_o);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
button.back:hover {
|
||||
background: var(--accent_color_bg_o);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.xp-bar {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
background-color: #dbdfdb;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.xp-bar::-moz-progress-bar {
|
||||
background-color: #31b335;
|
||||
}
|
||||
|
||||
.xp-bar::-webkit-progress-value {
|
||||
background: #31b335;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 1.5rem;
|
||||
align-items: center;
|
||||
height: calc(100vh - 75px);
|
||||
}
|
||||
|
||||
button.survey {
|
||||
font-size: 20px;
|
||||
padding: 15px;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
background-color: var(--accent_color_bg);
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
max-width: 30rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button.survey:focus-visible {
|
||||
outline: 2px var(--accent_color_fg_o);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
button.survey:hover {
|
||||
background: var(--accent_color_bg_o);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.courses-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.level-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.level {
|
||||
font-family: Minecraftia;
|
||||
color: #7bd67e;
|
||||
}
|
||||
|
||||
#courses-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
#courses-list {
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.course-card {
|
||||
position: relative;
|
||||
margin: 1rem;
|
||||
min-height: 300px;
|
||||
padding: 16px;
|
||||
background: var(--accent_color_bg_o);
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--def-shadow);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.course-title {
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.course-description {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.course-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.action {
|
||||
padding: 8px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.action.start {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 70px;
|
||||
font-size: 20px;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--accent_color_bg);
|
||||
}
|
||||
|
||||
.action.start:hover {
|
||||
background: var(--accent_color_bg_o);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.action.delete {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
font-size: 20px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
max-height: 40px;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--accent_color_bg);
|
||||
}
|
||||
|
||||
.action.delete:hover {
|
||||
background: var(--accent_color_bg_o);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
button.new {
|
||||
display: block;
|
||||
margin: 20px auto;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: var(--accent_color_bg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button.new:hover {
|
||||
background-color: var(--accent_color_bg_o);
|
||||
}
|
||||
|
||||
.session {
|
||||
font-size: 20px;
|
||||
padding: 15px;
|
||||
margin: 5px;
|
||||
background-color: var(--accent_color_bg);
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
max-width: 30rem;
|
||||
}
|
||||
|
||||
.session:hover {
|
||||
background: var(--accent_color_bg_o);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in new issue
Block a user