Studentenübersicht und Studentenkursansicht

student/kursAnzeige.html

@@ -9,6 +9,7 @@
   <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>
   <title>Kurs Anzeige</title>
 </head>
@@ -16,13 +17,11 @@
 <body>
   <div class="header_bar_1">
     <div>
-      <button onclick="location.href = './uebersicht.html?user=' + userData.name;" class="navigation">Meine
+      <button onclick="location.href = './uebersicht.html?user=' + userData.name;" class="back">Meine
         Kurse</button>
     </div>
     <div>
-      <button class="auswertung" onclick='location.href = "./auswertung.html?user=" + userData.name'>
 
-      </button>
     </div>
     <div>
       <button class="profile" onclick='showOverlay("miniProfile")'>
@@ -31,27 +30,19 @@
     </div>
   </div>
   <div class="header_bar_1_placeholder"></div>
-  <input id="tester" type="text">
+  <div class="course-card">
-  <div>
+    <span style="font-weight: bold;" id="course-name"></span>
-    <span id="course-name">Kurs SWT</span>
+    <span id="course-owner"></span>
-    <span id="course-owner">Prof. Dr. Kurt Schneider</span>
     <br>
-    <span>Termine</span>
+    <span>Bewertungen der Sessions</span>
-    <div style="height: 200px; overflow-y: scroll; border: 1px solid black;">
+    <div id="course-surveys" style="height: 200px; overflow-y: scroll; scrollbar-width: none; ">
-      <span>Di 01.01.2023, 13:00 - 15:00 Uhr</span>
-      <br>
-      <span>Raum 023, Gebäude 2323</span>
     </div>
-    <span>Bewertungen</span>
-    <div id="course-surveys" style="height: 200px; overflow-y: scroll; border: 1px solid black;">
-      <div>Di, 01.01.2023</div>
-      <div>Di, 01.01.2023</div>
-      <div>Di, 01.01.2023</div>
 
   </div>
 
-  </div>
   <script>
+    const evaluationResults = {};
+
     const couchDB = new CouchDB();
     setUserData(couchDB).then(
       () => {
@@ -73,20 +64,234 @@
       const results = course.result_history;
 
       document.getElementById("course-name").innerHTML = course.title;
-      document.getElementById("course-owner").innerHTML = course.owner;
+      document.getElementById("course-owner").innerHTML = "Ersteller: " + course.owner;
 
       const courseSurveys = document.getElementById("course-surveys");
       courseSurveys.innerHTML = "";
-      for (const result of results) {
+      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>Di, ${dateStr}</div>`;
+        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>

student/uebersicht.html

@@ -19,9 +19,7 @@
       Meine Kurse
     </div>
     <div>
-      <button class="auswertung" onclick='location.href = "./auswertung.html?user=" + userData.name'>
 
-      </button>
     </div>
     <div>
       <button class="profile" onclick='showOverlay("miniProfile")'>
@@ -30,37 +28,38 @@
     </div>
   </div>
   <div class="header_bar_1_placeholder"></div>
-
+  <div class="main-container">
-  <button onclick="participateInSurvey()">An Umfrage teilnehmen</button>
+    <button class="survey" onclick="participateInSurvey()">An Umfrage teilnehmen</button>
 
     <div id="courses-container">
-    <h2>Courses</h2>
 
-    <div id="courses-list" style="height: 300px; overflow-y: scroll; border: 1px solid black;">
+      <div id="courses-list">
 
       </div>
 
-    <button onclick="newCourse()">+</button>
+      <button class="new" onclick="newCourse()">+</button>
     </div>
 
-  <div id="level-display">
+    <div id="level-display" class="level-container">
-    <div>Level <span id="level-number">5</span></div>
+      <div class="level">Level <span id="level-number">5</span></div>
       <progress class="xp-bar" id="level-bar" value="0" max="10"></progress>
     </div>
+  </div>
 
   <!-- Overlays -->
   <overlay id="survey">
-    <div>
+    <div style="text-align: center; padding: 15px; margin-right: 2rem;">
-      <span>Gib den Code der Umfrage ein</span>
+      <input id="survey-code" type="text" placeholder="Umfrage-Code">
-      <input id="survey-code" type="text" placeholder="****">
+      <br>
-      <button onclick="startSurvey()">Teilnehmen</button>
+      <button style="margin-top: 1rem;" onclick="startSurvey()">Teilnehmen</button>
     </div>
   </overlay>
 
   <overlay id="add-course">
-    <div>
+    <div style="text-align: center; padding: 15px; margin-right: 2rem;">
       <input id="survey-code" type="text" placeholder="Kursname">
-      <button onclick="addCourse()">Hinzufügen</button>
+      <br>
+      <button class="" style="margin-top: 1rem;" onclick="addCourse()">Hinzufügen</button>
     </div>
   </overlay>
 
@@ -79,6 +78,12 @@
       console.log(code);
       var course = await couchDB.get("course:" + code);
       if (course != undefined) {
+        const users = await couchDB.get("users");
+        users[userData.name].courses ??= [];
+        if (!users[userData.name].courses.includes(code)) {
+          users[userData.name].courses.push(code);
+        }
+        await couchDB.set("users", users);
         location.href = "./umfrage.html?user=" + userData.name + ",course=" + code;
       } else {
         alert("Umfrage nicht gefunden!");
@@ -94,8 +99,12 @@
 
         const card = document.createElement("div");
         card.className = "course-card";
-        card.onclick = () => location.href = "./kursAnzeige.html?user=" + userData.name + ",course=" + courseId;
+        card.addEventListener("click", (e) => {
+          if (e.target.closest("button")) return;
+          location.href = "./kursAnzeige.html?user=" + userData.name + ",course=" + courseId;
+        });
 
+        const surveyUrl =
           card.innerHTML = `
             <div class="course-title">${course.title}</div>
 
@@ -103,6 +112,10 @@
               ${course.description}
             </div>
 
+            <button class="action start" onclick='location.href = "./umfrage.html?user=${userData.name},course=${courseId.trim()}";'>
+			        Umfrage Starten
+		        </button>
+            
             <button class="action delete" onclick="deleteCourse('${courseId}')">
               🗑
             </button>
@@ -147,8 +160,9 @@
       location.reload();
     }
 
-    function setLevelProgress(percent) {
+    function setLevelProgress(xp) {
-      document.getElementById('level-bar').value = percent;
+      document.getElementById('level-bar').value = xp;
+      document.getElementById('level-bar').max = userData.level + 1;
     }
 
     function setLevel(level) {
@@ -185,6 +199,165 @@
     .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);
+    }
+
+    .course-card:hover {
+      background: #b9d5e1;
+    }
+
+    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);
+    }
+
+    @font-face {
+      font-family: Minecraftia;
+      src: url(data:font/truetype;base64,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gICAAQD/AAAABQAAAAACAAOAAAMABwALAA8AEwAAITUhFSU1MxUlETMZATUzFT0BIRUBAAEA/oCA/wCAgAEAgICAgICAAYD+gAGAgICAgIAABQAAAAACAAOAAAMABwALAA8AEwAAMTUhFT0BMxU1ETMRATUzFSU1IRUBAICA/wCA/oABAICAgICAgAGA/oABgICAgICAAAAABQAAAQACAAKAAAMABwALAA8AEwAAETUzFSE1MxUlNSEVJTUzFSE1MxWAAQCA/oABAP6AgAEAgAEAgICAgICAgICAgICAAAAAAQAAAIACgAMAAAsAACURITUhETMRIRUhEQEA/wABAIABAP8AgAEAgAEA/wCA/wAAAQAA/4AAgAEAAAMAABURMxGAgAGA/oAAAQAAAYACgAIAAAMAABE1IRUCgAGAgIAAAQAAAAAAgAEAAAMAADERMxGAAQD/AAAABQAAAAACgAOAAAMABwALAA8AEwAAMTUzFTURMxkBNTMVNREzGQE1MxWAgICAgICAgAEA/wABAICAgAEA/wABAICAAAAFAAAAAAKAA4AAAwAHAA8AFwAbAAAzNSEVATUzFQERMxEzFSMVIREjNTM1MxEBNSEVgAGA/wCA/oCAgIABgICAgP4AAYCAgAGAgID/AAKA/oCAgAGAgID9gAKAgIAAAAABAAAAAAKAA4AACwAAMTUhESM1MzUzESEVAQCAgIABAIACAICA/QCAAAAAAAYAAAAAAoADgAAHAAsADwATABcAGwAAMREzFSE1MxEBNTMVPQEhFQE1MxUFETMRATUhFYABgID+AIABAP4AgAGAgP4AAYABAICA/wABAICAgICAAQCAgIABAP8AAQCAgAAAAAAHAAAAAAKAA4AAAwAHAAsADwATABcAGwAAMzUhFSU1MxUhETMRATUhFQE1MxUFETMRATUhFYABgP4AgAGAgP6AAQD+AIABgID+AAGAgICAgIABAP8AAQCAgAEAgICAAQD/AAEAgIAAAAMAAAAAAoADgAADAAcAEwAAEzUzFT0BMxUTESERMxUhESM1IRGAgICA/gCAAYCAAQACAICAgICA/YABAAEAgAGAgPyAAAAAAAQAAAAAAoADgAADAAcACwATAAAzNSEVJTUzFSERMxEBESEVIRUhFYABgP4AgAGAgP2AAoD+AAGAgICAgIABgP6AAYABgICAgAAAAAAFAAAAAAKAA4AAAwAHAA8AEwAXAAAzNSEVNREzESERMxUhFSEZATUzFT0BIRWAAYCA/YCAAYD+gIABAICAgAEA/wACAICA/wACAICAgICAAAMAAAAAAoADgAADAAcADwAAIREzGQE1MxU1ESEVIxEhEQLine truncated
+    }
   </style>
 </body>