Segment building flow

faisalnjs · Dec 28, 2024 · d2ac4b0 · d2ac4b0
2 parents 4b8030b + d27647f
commit d2ac4b0
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 6 deletions.
diff --git a/admin/index.html b/admin/index.html
@@ -145,6 +145,10 @@ <h1>Segments</h1>
       <i class="bi bi-circle"></i>
       <i class="bi bi-x"></i>
     </button>
+    <button class="icon" data-speed data-modal-view="speedMode">
+      <i class="bi bi-lightning-charge"></i>
+      <i class="bi bi-lightning-charge-fill" style="display: none;"></i>
+    </button>
     <!-- <button class="pill" data-modal-view="settings/code">
         <span class="code">000</span>
       </button>
@@ -326,6 +330,13 @@ <h1 class="text-placeholder">000</h1>
       <a href="mailto:contact@faisaln.com" class="icon"><i class="bi bi-envelope-fill"></i></a>
     </div>
   </dialog>
+  <dialog data-modal-page="speed" data-page-title="Speed Mode">
+    <p>
+      Rapidly add questions to a segment by pasting or uploading images - one for each. Images will be saved to a new integer numbered question. To quit, close the popup.
+    </p>
+    <select id="speed-mode-segments"></select>
+    <button id="enable-speed-mode-button">Start</button>
+  </dialog>
   <script src="../src/admin.js" type="module"></script>
 </body>
 

diff --git a/admin/questions.html b/admin/questions.html
@@ -120,6 +120,10 @@ <h1>Questions</h1>
       <i class="bi bi-circle"></i>
       <i class="bi bi-x"></i>
     </button>
+    <button class="icon" data-speed data-modal-view="speedMode">
+      <i class="bi bi-lightning-charge"></i>
+      <i class="bi bi-lightning-charge-fill" style="display: none;"></i>
+    </button>
     <!-- <button class="pill" data-modal-view="settings/code">
         <span class="code">000</span>
       </button>
@@ -301,6 +305,13 @@ <h1 class="text-placeholder">000</h1>
       <a href="mailto:contact@faisaln.com" class="icon"><i class="bi bi-envelope-fill"></i></a>
     </div>
   </dialog>
+  <dialog data-modal-page="speed" data-page-title="Speed Mode">
+    <p>
+      Rapidly add questions to a segment by pasting or uploading images - one for each. Images will be saved to a new integer numbered question. To quit, close the popup.
+    </p>
+    <select id="speed-mode-segments"></select>
+    <button id="enable-speed-mode-button">Start</button>
+  </dialog>
   <script src="../src/admin.js" type="module"></script>
 </body>
 

diff --git a/admin/upload.html b/admin/upload.html
@@ -23,18 +23,20 @@
         const urlParams = new URLSearchParams(window.location.search);
         const question = urlParams.get('question');
         const syllabus = urlParams.get('syllabus');
-        if (!question && !syllabus) window.location.href = '/admin';
+        const segment = urlParams.get('segment');
+        if (!question && !syllabus && !segment) window.location.href = '/admin';
         const inputElement = document.querySelector('input[type="file"]');
         const domain = ((window.location.hostname.search('check') != -1) || (window.location.hostname.search('127') != -1)) ? 'https://api.check.vssfalcons.com' : 'http://localhost:5000';
         FilePond.registerPlugin(FilePondPluginFileValidateType);
         const pond = FilePond.create(inputElement, {
-            server: domain + ((question) ? '/upload' : '/syllabus'),
+            server: domain + ((question) ? '/upload' : (segment) ? '/speedModeUpload' : '/syllabus'),
             credits: false,
             allowMultiple: (question) ? true : false,
-            acceptedFileTypes: (question) ? ['image/*'] : ['image/*', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],
+            acceptedFileTypes: (question || segment) ? ['image/*'] : ['image/*', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],
         });
         pond.on('initfile', (item) => {
             if (question) item.setMetadata('question', question);
+            if (segment) item.setMetadata('segment', segment);
             if (syllabus) item.setMetadata('course', syllabus);
         });
         pond.on('processfile', (error, file) => {

diff --git a/src/checker/admin.js b/src/checker/admin.js
@@ -1,8 +1,5 @@
 import * as ui from "/src/modules/ui.js";
 
-import { convertLatexToAsciiMath, convertLatexToMarkup, renderMathInElement } from "mathlive";
-``;
-
 const domain = ((window.location.hostname.search('check') != -1) || (window.location.hostname.search('127') != -1)) ? 'https://api.check.vssfalcons.com' : 'http://localhost:5000';
 if (window.location.pathname.split('?')[0].endsWith('/admin')) window.location.pathname = '/admin/';
 
@@ -16,6 +13,7 @@ var formData = new FormData();
 var polling = false;
 var active = false;
 var timestamps = false;
+var speed = false;
 
 async function init() {
   formData = new FormData();
@@ -79,6 +77,7 @@ async function init() {
         .then(async c => {
           segments = c;
           if (document.getElementById("course-period-input")) updateSegments();
+          if (document.getElementById("speed-mode-segments")) updateSpeedModeSegments();
           await fetch(domain + '/questions', {
             method: "GET",
             headers: {
@@ -159,6 +158,8 @@ if (document.querySelector('[data-select]')) document.querySelector('[data-selec
 if (document.querySelector('[data-select]')) document.querySelector('[data-delete-multiple]').addEventListener("click", deleteMultiple);
 if (document.querySelector('[data-polling]')) document.querySelector('[data-polling]').addEventListener("click", togglePolling);
 if (document.querySelector('[data-timestamps]')) document.querySelector('[data-timestamps]').addEventListener("click", toggleTimestamps);
+if (document.querySelector('[data-speed]')) document.querySelector('[data-speed]').addEventListener("click", toggleSpeedMode);
+if (document.getElementById('enable-speed-mode-button')) document.getElementById('enable-speed-mode-button').addEventListener("click", enableSpeedMode);
 
 function toggleSelecting() {
   if (!active) return;
@@ -1096,4 +1097,72 @@ function editReason() {
       },
     ],
   });
+}
+
+function toggleSpeedMode() {
+  if (!active) return;
+  if (!speed) return ui.view("speed");
+  speed = false;
+  document.querySelector('[data-speed] .bi-lightning-charge').style.display = "block";
+  document.querySelector('[data-speed] .bi-lightning-charge-fill').style.display = "none";
+}
+
+function updateSpeedModeSegments() {
+  document.getElementById("speed-mode-segments").innerHTML = '';
+  segments.forEach(segment => {
+    var option = document.createElement('option');
+    option.value = segment.number;
+    option.innerHTML = segment.name;
+    document.getElementById("speed-mode-segments").appendChild(option);
+  });
+}
+
+function enableSpeedMode() {
+  document.querySelector(`[data-modal-page="speed"]`).removeAttribute('open');
+  document.querySelector(`[data-modal-page="speed"]`).removeAttribute('data-open');
+  document.querySelector(`[data-modal-page="speed"]`).removeAttribute('style');
+  speed = true;
+  document.querySelector('[data-speed] .bi-lightning-charge').style.display = "none";
+  document.querySelector('[data-speed] .bi-lightning-charge-fill').style.display = "block";
+  var segmentId = document.getElementById("speed-mode-segments").value;
+  renderSpeedPond(segmentId);
+}
+
+function disableSpeedMode() {
+  document.querySelector(`[data-modal-page="speed"]`).removeAttribute('open');
+  document.querySelector(`[data-modal-page="speed"]`).removeAttribute('data-open');
+  document.querySelector(`[data-modal-page="speed"]`).removeAttribute('style');
+  speed = false;
+  document.querySelector('[data-speed] .bi-lightning-charge').style.display = "block";
+  document.querySelector('[data-speed] .bi-lightning-charge-fill').style.display = "none";
+  ui.modeless(`<i class="bi bi-check2-circle"></i>`, "Speed Mode Ended");
+  window.location.reload();
+}
+
+async function renderSpeedPond(segment) {
+  if (!active) return;
+  const url = '/admin/upload.html?segment=' + segment;
+  const width = 600;
+  const height = 150;
+  const left = (window.screen.width / 2) - (width / 2);
+  const top = (window.screen.height / 2) - (height / 2);
+  const windowFeatures = `width=${width},height=${height},resizable=no,scrollbars=no,status=yes,left=${left},top=${top}`;
+  const newWindow = window.open(url, '_blank', windowFeatures);
+  let uploadSuccessful = false;
+  window.addEventListener('message', (event) => {
+    if (event.origin !== (window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : ''))) return;
+    if (event.data === 'uploadSuccess') uploadSuccessful = true;
+  }, false);
+  const checkWindowClosed = setInterval(function () {
+    if (newWindow && newWindow.closed) {
+      clearInterval(checkWindowClosed);
+      if (uploadSuccessful) {
+        ui.modeless(`<i class="bi bi-cloud-upload"></i>`, "Uploaded");
+        renderSpeedPond(segment);
+      } else {
+        disableSpeedMode();
+      }
+      init();
+    }
+  }, 1000);
 }
diff --git a/src/design.css b/src/design.css
@@ -618,6 +618,10 @@ body:has(.selecting) #controls-container .bi-x {
   display: block;
 }
 
+body:has(.selecting) #controls-container button:has(.bi-lightning-charge) {
+  display: none;
+}
+
 body:has(.selecting) #controls-container [data-delete-multiple] {
   display: block;
 }

diff --git a/src/modules/ui.js b/src/modules/ui.js
@@ -260,6 +260,7 @@ export function view(path) {
   }
   const pages = path.split("/");
   const target = document.querySelector(`[data-modal-page="${pages[pages.length - 1]}"]`);
+  if (!target) return;
   const title = target.getAttribute("data-page-title") || path;
   for (let i = 0; i < pages.length; i++) {
     const query = pages