list segments

faisalnjs · Sep 27, 2024 · 8ebadad · 8ebadad
1 parent dd3f6cb
commit 8ebadad
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 8 deletions.
diff --git a/admin/index.html b/admin/index.html
@@ -91,6 +91,43 @@ <h1>Courses</h1>
           </div>
         </div>
       </div>
+      <div class="section segments">
+        <h1>Segments</h1>
+        <div class="section">
+          <div class="button-grid inputs">
+            <div class="input-group small">
+              <label for="segment-number-input">Number</label>
+              <div class="space" id="question-container">
+                <input type="text" autocomplete="off" id="segment-0-number-input" value="" />
+              </div>
+            </div>
+            <div class="input-group">
+              <label for="segment-name-input">Name</label>
+              <div class="space" id="question-container">
+                <input type="text" autocomplete="off" id="segment-0-name-input" value="" />
+              </div>
+            </div>
+            <button square data-add-segment-input><i class="bi bi-plus"></i></button>
+            <button square data-remove-segment-input><i class="bi bi-dash"></i></button>
+          </div>
+          <div class="questions">
+            <div class="button-grid inputs">
+              <div class="input-group small">
+                <label>Name</label>
+                <label>ID</label>
+              </div>
+              <div class="input-group">
+                <input type="text" autocomplete="off" id="segment-0-question-1-name-input" value="1a" />
+                <input type="text" autocomplete="off" id="segment-0-question-1-id-input" value="1" />
+              </div>
+              <div class="input-group fit">
+                <button square data-add-segment-question-input><i class="bi bi-plus"></i></button>
+                <button square data-remove-segment-question-input><i class="bi bi-dash"></i></button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       <button class="space" id="save-button">Save</button>
     </div>
     <!-- Controls -->

diff --git a/index.html b/index.html
@@ -118,8 +118,8 @@ <h1><span class="code" data-modal-view="settings/code">000</span></h1>
             <div id="question-container">
               <input type="text" autocomplete="off" id="set-input" data-set-input="1" />
             </div>
-            <button square data-add-set-input>+</button>
-            <button square data-remove-set-input>-</button>
+            <button square data-add-set-input><i class="bi bi-plus"></i></button>
+            <button square data-remove-set-input disabled><i class="bi bi-dash"></i></button>
           </div>
         </div>
       </div>

diff --git a/src/checker/admin.js b/src/checker/admin.js
@@ -45,14 +45,50 @@ let draggedItem = null;
       item.addEventListener('dragover', handleDragOver);
       item.addEventListener('drop', handleDrop);
     });
+    updateSegments();
   });
   document.querySelector('.course-reorder').style.display = 'none';
 }
 
-document.getElementById("period-input").addEventListener("change", (e) => {
-  const course = courses.find(c => c.id == e.target.value);
+document.getElementById("period-input").addEventListener("change", updateSegments);
+
+function updateSegments() {
+  const course = courses.find(c => c.id == document.getElementById("period-input").value);
   document.getElementById("course-input").value = course.name;
-});
+  fetch(domain + '/segments?course=' + course.id, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    }
+  })
+  .then(c => c.json())
+  .then(c => {
+    console.log(c)
+    if (c.length > 0) {
+      document.querySelector('.segments .section').innerHTML = '';
+      c.forEach(s => {
+        var segment = document.createElement('div');
+        segment.className = "section";
+        var buttonGrid = document.createElement('div');
+        buttonGrid.className = "button-grid inputs";
+        buttonGrid.innerHTML = `<div class="input-group small"><label for="segment-number-input">Number</label><div class="space" id="question-container"><input type="text" autocomplete="off" id="segment-${s.number}-number-input" value="${s.number}" /></div></div><div class="input-group"><label for="segment-name-input">Name</label><div class="space" id="question-container"><input type="text" autocomplete="off" id="segment-${s.number}-name-input" value="${s.name}" /></div></div><button square data-add-segment-input><i class="bi bi-plus"></i></button><button square data-remove-segment-input><i class="bi bi-dash"></i></button>`;
+        segment.appendChild(buttonGrid);
+        var questionsString = "";
+        var questions = document.createElement('div');
+        questions.classList = "questions";
+        JSON.parse(s.question_ids).forEach(q => {
+          questionsString += `<div class="input-group"><input type="text" autocomplete="off" id="segment-${s.number}-question-${q.id}-name-input" value="${q.name}" /><input type="text" autocomplete="off" id="segment-${s.number}-question-${q.id}-id-input" value="${q.id}" /></div>`;
+        });
+        questions.innerHTML = `<div class="button-grid inputs"><div class="input-group small"><label>Name</label><label>ID</label></div>${questionsString}<div class="input-group fit"><button square data-add-segment-question-input><i class="bi bi-plus"></i></button><button square data-remove-segment-question-input><i class="bi bi-dash"></i></button></div></div>`;
+        segment.appendChild(questions);
+        document.querySelector('.segments .section').appendChild(segment);
+      });
+    } else {
+      document.querySelector('.segments .section').innerHTML = '<button data-add-segment-input>Add Segment</button>';
+    }
+    document.querySelectorAll('[data-add-segment-input]').forEach(a => a.addEventListener('click', addSegment));
+  });
+}
 
 document.getElementById("reorder-courses-button").addEventListener("click", () => {
   const current = document.querySelector('.course-selector');
@@ -245,4 +281,11 @@ function handleDrop(e) {
   const parent = document.querySelector('.reorder');
   newOrder.forEach(item => parent.appendChild(item));
   return false;
+}
+
+function addSegment() {
+  var group = document.createElement('div');
+  group.classList = "input-group";
+  group.innerHTML = `<input type="text" autocomplete="off" id="segment-${s.number}-question-${q.id}-name-input" value="${q.name}" /><input type="text" autocomplete="off" id="segment-${s.number}-question-${q.id}-id-input" value="${q.id}" /></div>`;
+  this.parentElement.parentElement.querySelector('.questions .button-grid').insertBefore(group, this.parentElement.parentElement.querySelector('.questions .button-grid').children)
 }
diff --git a/src/checker/checker.js b/src/checker/checker.js
@@ -656,7 +656,7 @@ document.getElementById("answer-mode-selector").addEventListener("input", (e) =>
   }
 });
 
-var setInputs = document.querySelectorAll('[data-set-input]');
+setInputs = document.querySelectorAll('[data-set-input]');
 
 // Add set input
 document.querySelector("[data-add-set-input]").addEventListener("click", () => {
@@ -682,11 +682,12 @@ document.querySelector("[data-add-set-input]").addEventListener("click", () => {
     }
     document.querySelector('[data-answer-mode="set"] .button-grid').style.flexWrap = (setInputs.length > 2) ? 'wrap' : 'nowrap';
     newSetInputInput.focus();
+    document.querySelector("[data-remove-set-input]").disabled = false;
   }
 });
 
 // Remove set input
-document.querySelector("[data-remove-set-input]").addEventListener("click", () => {
+document.querySelector("[data-remove-set-input]").addEventListener("click", (e) => {
   setInputs = document.querySelectorAll('[data-set-input]');
   if (setInputs.length > 1) {
     let highestDataElement = null;
@@ -695,5 +696,6 @@ document.querySelector("[data-remove-set-input]").addEventListener("click", () =
     });
     if (highestDataElement !== null) highestDataElement.parentElement.remove();
   }
+  if (setInputs.length === 2) e.target.disabled = true;
   document.querySelector('[data-answer-mode="set"] .button-grid').style.flexWrap = (setInputs.length < 5) ? 'nowrap' : 'wrap';
 });
diff --git a/src/design.css b/src/design.css
@@ -390,7 +390,7 @@ img {
 }
 
 button[square] {
-  width: min-content !important;
+  width: 2.25em !important;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -418,4 +418,27 @@ button[square] {
 
 [data-answer-mode="set"] input {
   text-align: center;
+}
+
+.segments .section:has(.questions) * {
+  gap: 8px !important;
+}
+
+.questions {
+  width: -webkit-fill-available;
+}
+
+.questions label {
+  justify-content: center;
+  padding: 0 0.5em;
+  text-align: right;
+  height: 2.25em;
+}
+
+.small {
+  max-width: 75px;
+}
+
+.fit {
+  width: fit-content;
 }