No topics selected.
"; + } + const items = sources.map(function (source) { + const topics = source.categories.map(formatTopic).join(", "); + return "" + (SESSION_MODE_LABELS[mode] || mode) + "
", + true + ); + if (selection.theory.enabled) { + html += renderReviewCard( + "theory", + "Theory", + "Questions: " + selection.theory.question_count + "
" + + "Timer: " + + formatTimer(selection.theory.task_time_limit_seconds) + "
" + + "Topics:
" + + renderSectionSources(selection.theory.sources), + true + ); + } + if (selection.coding.enabled) { + html += renderReviewCard( + "coding", + "Coding", + "Tasks: " + selection.coding.question_count + "
" + + "Timer: " + + formatTimer(selection.coding.task_time_limit_seconds) + "
" + + "Topics:
" + + renderSectionSources(selection.coding.sources), + true + ); + } + html += renderReviewCard( + "mode", + "Interview language", + "" + localeLabel + "
" + + "Change in Configuration.
", + false + ); + reviewSummary.innerHTML = html; + reviewSummary.querySelectorAll(".setup-review-edit").forEach(function (button) { + button.addEventListener("click", function () { + showStep(button.dataset.editStep); + }); + }); + submitBtn.disabled = !validateStep("review"); + } + + function goNext() { + const sequence = getStepSequence(); + const index = sequence.indexOf(currentStepId); + if (index === -1 || index >= sequence.length - 1) { + return; + } + if (!validateStep(currentStepId)) { + return; + } + showStep(sequence[index + 1]); + } + + function goBack() { + const sequence = getStepSequence(); + const index = sequence.indexOf(currentStepId); + if (index <= 0) { + return; + } + showStep(sequence[index - 1]); + } + + function collectBranchState(prefix, enableClass, levelClass, topicClass) { + const tracks = {}; + document.querySelectorAll("." + prefix + "-track-block").forEach(function (block) { + const track = block.dataset.track; + const enable = block.querySelector("." + enableClass); + const levelSelect = block.querySelector("." + levelClass); + const categories = []; + block.querySelectorAll("." + topicClass + ":checked").forEach(function (cb) { + categories.push(cb.value); + }); + tracks[track] = { + enabled: Boolean(enable && enable.checked), + level: levelSelect ? levelSelect.value : "", + categories: categories, + }; + }); + return tracks; + } + + function saveWizardState() { + const state = { + sessionMode: selectedSessionMode(), + theoryTracks: collectBranchState("theory", "track-enable", "track-level", "topic-checkbox"), + codingTracks: collectBranchState( + "coding", + "coding-track-enable", + "coding-track-level", + "coding-topic-checkbox" + ), + questionCount: questionCountInput.value, + codingQuestionCount: codingCountInput.value, + theoryTimerEnabled: Boolean(timerCheckbox && timerCheckbox.checked), + theoryTimerMinutes: document.getElementById("question_time_minutes").value, + codingTimerEnabled: Boolean(codingTimerCheckbox && codingTimerCheckbox.checked), + codingTimerMinutes: document.getElementById("coding_time_minutes").value, + currentStepId: currentStepId, + }; + try { + sessionStorage.setItem(STORAGE_KEY, JSON.stringify(state)); + } catch (_error) { + /* ignore quota errors */ + } + } + + function clearWizardState() { + try { + sessionStorage.removeItem(STORAGE_KEY); + } catch (_error) { + /* ignore quota errors */ + } + } + + function markWizardSubmitted() { + try { + sessionStorage.setItem(SUBMITTED_KEY, "1"); + } catch (_error) { + /* ignore quota errors */ + } + } + + function clearWizardSubmitted() { + try { + sessionStorage.removeItem(SUBMITTED_KEY); + } catch (_error) { + /* ignore quota errors */ + } + } + + function wasWizardSubmitted() { + try { + return sessionStorage.getItem(SUBMITTED_KEY) === "1"; + } catch (_error) { + return false; + } + } + + async function restoreBranchState(prefix, tracks, enableClass, levelClass, topicClass, loadTopics) { + for (const block of document.querySelectorAll("." + prefix + "-track-block")) { + const track = block.dataset.track; + const saved = tracks[track]; + if (!saved) { + continue; + } + const enable = block.querySelector("." + enableClass); + const body = block.querySelector(".setup-track-body"); + const levelSelect = block.querySelector("." + levelClass); + if (enable) { + enable.checked = saved.enabled; + } + if (body) { + body.hidden = !saved.enabled; + } + if (levelSelect && saved.level) { + levelSelect.value = saved.level; + } + if (saved.enabled && typeof loadTopics === "function") { + await loadTopics(block); + } + const wanted = new Set(saved.categories || []); + block.querySelectorAll("." + topicClass).forEach(function (cb) { + cb.checked = wanted.has(cb.value); + }); + } + } + + async function restoreWizardState() { + let raw; + try { + raw = sessionStorage.getItem(STORAGE_KEY); + } catch (_error) { + return false; + } + if (!raw) { + return false; + } + let state; + try { + state = JSON.parse(raw); + } catch (_error) { + return false; + } + const modeRadio = document.querySelector( + ".session-mode-radio[value=\"" + state.sessionMode + "\"]" + ); + if (modeRadio && !modeRadio.disabled) { + modeRadio.checked = true; + } + await restoreBranchState( + "theory", + state.theoryTracks || {}, + "track-enable", + "track-level", + "topic-checkbox", + loadTheoryTopics + ); + await restoreBranchState( + "coding", + state.codingTracks || {}, + "coding-track-enable", + "coding-track-level", + "coding-topic-checkbox", + loadCodingTopics + ); + if (state.questionCount) { + questionCountInput.value = state.questionCount; + } + if (state.codingQuestionCount) { + codingCountInput.value = state.codingQuestionCount; + } + if (timerCheckbox) { + timerCheckbox.checked = Boolean(state.theoryTimerEnabled); + } + if (state.theoryTimerMinutes) { + document.getElementById("question_time_minutes").value = state.theoryTimerMinutes; + } + if (codingTimerCheckbox) { + codingTimerCheckbox.checked = Boolean(state.codingTimerEnabled); + } + if (state.codingTimerMinutes) { + document.getElementById("coding_time_minutes").value = state.codingTimerMinutes; + } + syncTimerFields(); + syncCodingTimerFields(); + syncTheoryCountMin(); + syncCodingCountMin(); + return true; + } + + async function loadTheoryTopics(block) { + const track = block.dataset.track; + const levelSelect = block.querySelector(".track-level"); + const topicList = block.querySelector(".setup-topic-list"); + if (!levelSelect || !topicList) { + return; + } + const level = levelSelect.value; + const url = "/setup/options?track=" + encodeURIComponent(track) + + "&level=" + encodeURIComponent(level); + const response = await fetch(url); + if (!response.ok) { + return; + } + const data = await response.json(); + const categories = data.categories || []; + const checked = new Set(); + topicList.querySelectorAll(".topic-checkbox:checked").forEach(function (cb) { + checked.add(cb.value); + }); + topicList.innerHTML = ""; + categories.forEach(function (cat) { + const label = document.createElement("label"); + label.className = "setup-topic-item"; + const input = document.createElement("input"); + input.type = "checkbox"; + input.className = "topic-checkbox"; + input.value = cat; + input.dataset.track = track; + if (checked.has(cat)) { + input.checked = true; + } + input.addEventListener("change", onFormChange); + label.appendChild(input); + label.appendChild(document.createTextNode(" " + formatTopic(cat))); + topicList.appendChild(label); + }); + } + + async function loadCodingTopics(block) { + const track = block.dataset.track; + const levelSelect = block.querySelector(".coding-track-level"); + const topicList = block.querySelector(".coding-topic-list"); + if (!levelSelect || !topicList) { + return; + } + const level = levelSelect.value; + const url = "/setup/coding-options?track=" + encodeURIComponent(track) + + "&level=" + encodeURIComponent(level); + const response = await fetch(url); + if (!response.ok) { + return; + } + const data = await response.json(); + const categories = data.categories || []; + const checked = new Set(); + topicList.querySelectorAll(".coding-topic-checkbox:checked").forEach(function (cb) { + checked.add(cb.value); + }); + topicList.innerHTML = ""; + categories.forEach(function (cat) { + const label = document.createElement("label"); + label.className = "setup-topic-item"; + const input = document.createElement("input"); + input.type = "checkbox"; + input.className = "coding-topic-checkbox"; + input.value = cat; + input.dataset.track = track; + if (checked.has(cat)) { + input.checked = true; + } + input.addEventListener("change", onFormChange); + label.appendChild(input); + label.appendChild(document.createTextNode(" " + formatTopic(cat))); + topicList.appendChild(label); + }); + } + + function onFormChange() { + syncTheoryCountMin(); + syncCodingCountMin(); + updateNavButtons(); + if (currentStepId === "review") { + renderReviewSummary(); + } else { + saveWizardState(); + } + } + + function bindTrackBlocks() { + document.querySelectorAll(".theory-track-block").forEach(function (block) { + const enable = block.querySelector(".track-enable"); + const body = block.querySelector(".setup-track-body"); + const levelSelect = block.querySelector(".track-level"); + if (enable && body) { + enable.addEventListener("change", function () { + body.hidden = !enable.checked; + onFormChange(); + }); + } + if (levelSelect) { + levelSelect.addEventListener("change", function () { + loadTheoryTopics(block).then(onFormChange); + }); + } + block.querySelectorAll(".topic-checkbox").forEach(function (cb) { + cb.addEventListener("change", onFormChange); + }); + }); + + document.querySelectorAll(".coding-track-block").forEach(function (block) { + const enable = block.querySelector(".coding-track-enable"); + const body = block.querySelector(".setup-track-body"); + const levelSelect = block.querySelector(".coding-track-level"); + if (enable && body) { + enable.addEventListener("change", function () { + body.hidden = !enable.checked; + onFormChange(); + }); + } + if (levelSelect) { + levelSelect.addEventListener("change", function () { + loadCodingTopics(block).then(onFormChange); + }); + } + block.querySelectorAll(".coding-topic-checkbox").forEach(function (cb) { + cb.addEventListener("change", onFormChange); + }); + }); + + document.querySelectorAll(".session-mode-radio").forEach(function (radio) { + radio.addEventListener("change", function () { + const sequence = getStepSequence(); + if (sequence.indexOf(currentStepId) === -1) { + showStep("mode"); + } else { + renderStepper(); + updateNavButtons(); + } + onFormChange(); + }); + }); + } + + function bindControls() { + questionCountInput.addEventListener("input", onFormChange); + codingCountInput.addEventListener("input", onFormChange); + if (timerCheckbox) { + timerCheckbox.addEventListener("change", function () { + syncTimerFields(); + onFormChange(); + }); + } + if (codingTimerCheckbox) { + codingTimerCheckbox.addEventListener("change", function () { + syncCodingTimerFields(); + onFormChange(); + }); + } + document.getElementById("question_time_minutes").addEventListener("input", onFormChange); + document.getElementById("coding_time_minutes").addEventListener("input", onFormChange); + + nextBtn.addEventListener("click", goNext); + backBtn.addEventListener("click", goBack); + + form.addEventListener("submit", function (event) { + const selection = buildSelection(); + if (!theoryValid(selection) || !codingValid(selection)) { + event.preventDefault(); + showStep("review"); + renderReviewSummary(); + return; + } + selectionInput.value = JSON.stringify(selection); + saveWizardState(); + markWizardSubmitted(); + }); + } + + async function init() { + bindTrackBlocks(); + bindControls(); + syncTimerFields(); + syncCodingTimerFields(); + + let restored = false; + if (hasServerError) { + clearWizardSubmitted(); + restored = await restoreWizardState(); + } else if (wasWizardSubmitted()) { + clearWizardSubmitted(); + clearWizardState(); + } else { + restored = await restoreWizardState(); + } + let startStep = initialStep; + if (restored && hasServerError) { + startStep = "review"; + } else if (restored) { + try { + const state = JSON.parse(sessionStorage.getItem(STORAGE_KEY)); + if (state.currentStepId && getStepSequence().includes(state.currentStepId)) { + startStep = state.currentStepId; + } + } catch (_error) { + /* use initialStep */ + } + } + showStep(startStep); + onFormChange(); + } + + init(); +})(); diff --git a/templates/interview.html b/templates/interview.html index 86fb1be..a812277 100644 --- a/templates/interview.html +++ b/templates/interview.html @@ -70,8 +70,8 @@