ui: objective: remember selections & quick navigation

packages/ui-default/pages/problem_detail.page.jsx

@@ -2,7 +2,7 @@ import { getScoreColor } from '@hydrooj/utils/lib/status';
 import $ from 'jquery';
 import yaml from 'js-yaml';
 import React from 'react';
-import { createRoot } from 'react-dom/client';
+import ReactDOM from 'react-dom/client';
 import Notification from 'vj/components/notification';
 import { downloadProblemSet } from 'vj/components/zipDownloader';
 import { NamedPage } from 'vj/misc/Page';
@@ -186,6 +186,7 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
   async function loadObjective() {
     $('.outer-loader-container').show();
     const ans = {};
+    const pids = [];
     let cnt = 0;
     const reg = /{{ (input|select|multiselect|textarea)\(\d+(-\d+)?\) }}/g;
     $('.problem-content .typo').children().each((i, e) => {
@@ -196,15 +197,16 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
       for (const [info, type] of questions) {
         cnt++;
         const id = info.replace(/{{ (input|select|multiselect|textarea)\((\d+(-\d+)?)\) }}/, '$2');
+        pids.push(id);
         if (type === 'input') {
           $(e).html($(e).html().replace(info, tpl`
-            <div class="objective_${id} medium-3" style="display: inline-block;">
+            <div class="objective_${id} medium-3" id="p${id}" style="display: inline-block;">
               <input type="text" name="${id}" class="textbox objective-input">
             </div>
           `));
         } else if (type === 'textarea') {
           $(e).html($(e).html().replace(info, tpl`
-            <div class="objective_${id} medium-6">
+            <div class="objective_${id} medium-6" id="p${id}">
               <textarea name="${id}" class="textbox objective-input"></textarea>
             </div>
           `));
@@ -216,7 +218,7 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
           $(e).html($(e).html().replace(info, ''));
           $(e).next('ul').children().each((j, ele) => {
             $(ele).after(tpl`
-              <label class="objective_${id} radiobox">
+              <label class="objective_${id} radiobox" id="p${id}">
                 <input type="${type === 'select' ? 'radio' : 'checkbox'}" name="${id}" class="objective-input" value="${String.fromCharCode(65 + j)}">
                 ${String.fromCharCode(65 + j)}. ${{ templateRaw: true, html: ele.innerHTML }}
               </label>
@@ -226,12 +228,46 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
         }
       }
     });
+
+    let setUpdate;
+    function ProblemNavigation() {
+      [, setUpdate] = React.useState(0);
+      return <div className="contest-problems" style={{ margin: '1em' }}>
+        {pids.map((i) => <a href={`#p${i}`} className={ans[i] ? 'pass ' : ''}>
+          <span class="id">{i}</span>
+          {ans[i] && <span class="icon icon-check"></span>}
+        </a>)}
+      </div>;
+    }
+
+    function saveAns() {
+      localStorage.setItem(`objective_${UiContext.domain._id}#${UiContext.pdoc.docId}`, JSON.stringify(ans));
+      setUpdate?.((i) => i + 1);
+    }
+    function loadAns() {
+      const saved = localStorage.getItem(`objective_${UiContext.domain._id}#${UiContext.pdoc.docId}`);
+      if (saved) {
+        Object.assign(ans, JSON.parse(saved));
+        for (const [id, val] of Object.entries(ans)) {
+          if (Array.isArray(val)) {
+            for (const v of val) {
+              $(`.objective_${id} input[value=${v}]`).prop('checked', true);
+            }
+          }
+          $(`.objective_${id} input[type=text], .objective_${id} textarea`).val(val);
+          $(`.objective_${id}.radiobox [value="${val}"]`).prop('checked', true);
+        }
+      }
+    }
+
     if (cnt) {
+      loadAns();
       $('.problem-content .typo').append(document.getElementsByClassName('nav__item--round').length
         ? `<input type="submit" disabled class="button rounded primary disabled" value="${i18n('Login to Submit')}" />`
         : `<input type="submit" class="button rounded primary" value="${i18n('Submit')}" />`);
       $('.objective-input[type!=checkbox]').on('input', (e) => {
         ans[e.target.name] = e.target.value;
+        saveAns();
       });
       $('input.objective-input[type=checkbox]').on('input', (e) => {
         if (e.target.checked) {
@@ -240,6 +276,7 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
         } else {
           ans[e.target.name] = ans[e.target.name].filter((v) => v !== e.target.value);
         }
+        saveAns();
       });
       $('input[type="submit"]').on('click', (e) => {
         e.preventDefault();
@@ -256,8 +293,11 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
           });
       });
     }
-    $('.scratchpad--hide').hide();
+    const ele = document.createElement('div');
+    $(ele).insertBefore($('.scratchpad--hide').get(0));
+    ReactDOM.createRoot(ele).render(<ProblemNavigation />);
     $('.non-scratchpad--hide').hide();
+    $('.scratchpad--hide').hide();
     $('.outer-loader-container').hide();
   }
 
@@ -309,6 +349,7 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
       statusChart.resize();
       scoreChart.resize();
     };
+    if (UiContext.pdoc.config?.type === 'objective') $($status).hide();
   }
 
   $(document).on('click', '[name="problem-sidebar__open-scratchpad"]', (ev) => {