gmci_project/student/uebersicht.html

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=0.8">
  <link rel="stylesheet" href="../lib/basic.css">
  <script src="../auth.js"></script>
  <script src="../lib/basic.js"></script>
  <script src="./uebersicht_overlay.js"></script>
  <script src="../other/skills.js"></script>
  <script src="../other/skilltree.js"></script>
  <title>Übersicht</title>
</head>

<body>
  <div class="header_bar_1">
    <div style="font-weight: bold;">
      Meine Kurse
    </div>
    <div>
      <button class="auswertung" onclick='location.href = "./auswertung.html?user=" + userData.name'>

      </button>
    </div>
    <div>
      <button class="profile" onclick='showOverlay("miniProfile")'>
        <overlay id="miniProfile" />
      </button>
    </div>
  </div>
  <div class="header_bar_1_placeholder"></div>

  <button 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>

    <button onclick="newCourse()">+</button>
  </div>

  <div id="level-display">
    <div>Level <span id="level-number">5</span></div>
    <progress class="xp-bar" id="level-bar" value="0" max="10"></progress>
  </div>

  <!-- Overlays -->
  <overlay id="survey">
    <div>
      <span>Gib den Code der Umfrage ein</span>
      <input id="survey-code" type="text" placeholder="****">
      <button onclick="startSurvey()">Teilnehmen</button>
    </div>
  </overlay>

  <overlay id="add-course">
    <div>
      <input id="survey-code" type="text" placeholder="Kursname">
      <button onclick="addCourse()">Hinzufügen</button>
    </div>
  </overlay>


  <script>

    const couchDB = new CouchDB();
    setUserData(couchDB).then((val) => {
      setCourseView();
      setLevelProgress(userData.xp);
      setLevel(userData.level);
    });

    async function startSurvey() {
      const code = getOverlay("survey").getElementsByTagName("INPUT")[0].value.trim();
      console.log(code);
      var course = await couchDB.get("course:" + code);
      if (course != undefined) {
        location.href = "./umfrage.html?user=" + userData.name + ",course=" + code;
      } else {
        alert("Umfrage nicht gefunden!");
      }
    }

    async function setCourseView() {
      const courseList = document.getElementById("courses-list");
      courseList.innerHTML = "";

      for (const courseId of userData.courses) {
        const course = await couchDB.get("course:" + courseId);

        const card = document.createElement("div");
        card.className = "course-card";
        card.onclick = () => location.href = "./kursAnzeige.html?user=" + userData.name + ",course=" + courseId;

        card.innerHTML = `
            <div class="course-title">${course.title}</div>

            <div class="course-description">
              ${course.description}
            </div>
            
            <button class="action delete" onclick="deleteCourse('${courseId}')">
              🗑
            </button>
            `;
        courseList.appendChild(card);
      }
    }

    async function deleteCourse(courseId) {
      const users = await couchDB.get("users");
      users[userData.name].courses = users[userData.name].courses.filter(id => id !== courseId);
      await couchDB.set("users", users);

      location.reload();
    }

    function participateInSurvey() {
      showOverlay("survey");
    }

    function selectCourse(courseName) {
      console.log("Course selected:", courseName);
      showOverlay("course");
    }

    function newCourse() {
      showOverlay("add-course");
    }

    async function addCourse() {
      const courseName = getOverlay("add-course").getElementsByTagName("INPUT")[0].value.trim();
      const course = await couchDB.get("course:" + courseName);
      if (course == undefined) {
        alert("Kurs existiert nicht!");
        return;
      }

      const users = await couchDB.get("users");
      users[userData.name].courses.push(courseName);
      await couchDB.set("users", users);
      setCourseView();
      location.reload();
    }

    function setLevelProgress(percent) {
      document.getElementById('level-bar').value = percent;
    }

    function setLevel(level) {
      document.getElementById('level-number').textContent = level;
    }

    function addCourseToList(courseName) {
      const coursesList = document.getElementById('courses-list');
      const courseDiv = document.createElement('div');
      courseDiv.className = 'course-item';
      courseDiv.innerHTML = `
                <span>${courseName}</span>
                <button onclick="editCourse('${courseName}')">Edit</button>
            `;
      coursesList.appendChild(courseDiv);
    }

  </script>

  <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;
    }
  </style>
</body>

</html>