This commit is contained in:
tom.hempel
203
website/js/editor-utils.js
Normal file
203
website/js/editor-utils.js
Normal file
@ -0,0 +1,203 @@
|
||||
export const LAYOUT_TYPES = [
|
||||
{ value: 'radio_question', label: 'Radio (Single Choice)' },
|
||||
{ value: 'multi_check_box_question', label: 'Checkbox (Multiple Choice)' },
|
||||
{ value: 'glass_scale_question', label: 'Glass Scale' },
|
||||
{ value: 'value_spinner', label: 'Value Spinner' },
|
||||
{ value: 'date_spinner', label: 'Date Spinner' },
|
||||
{ value: 'string_spinner', label: 'String Spinner' },
|
||||
{ value: 'client_coach_code_question', label: 'Client / Coach Code' },
|
||||
{ value: 'client_not_signed', label: 'Client Not Signed' },
|
||||
{ value: 'last_page', label: 'Last Page' },
|
||||
];
|
||||
|
||||
export const OPTION_TYPES = new Set(['radio_question', 'multi_check_box_question']);
|
||||
|
||||
export function layoutSelectHTML(selected = 'radio_question', id = '') {
|
||||
return `<select ${id ? `id="${id}"` : ''} class="type-select">
|
||||
${LAYOUT_TYPES.map(t =>
|
||||
`<option value="${t.value}" ${selected === t.value ? 'selected' : ''}>${t.label}</option>`
|
||||
).join('')}
|
||||
</select>`;
|
||||
}
|
||||
|
||||
export function layoutLabel(value) {
|
||||
const t = LAYOUT_TYPES.find(t => t.value === value);
|
||||
return t ? t.label : value || 'unknown';
|
||||
}
|
||||
|
||||
export function parseConfig(q) {
|
||||
try { return JSON.parse(q.configJson || '{}'); } catch { return {}; }
|
||||
}
|
||||
|
||||
export function questionLocalIds(questions) {
|
||||
return questions.map(q => {
|
||||
const parts = q.questionID.split('__');
|
||||
return { questionID: q.questionID, localId: parts[parts.length - 1], defaultText: q.defaultText };
|
||||
});
|
||||
}
|
||||
|
||||
export function esc(s) {
|
||||
const d = document.createElement('div');
|
||||
d.textContent = s ?? '';
|
||||
return d.innerHTML;
|
||||
}
|
||||
|
||||
export function configFormHTML(layout, config, prefix) {
|
||||
let html = '';
|
||||
switch (layout) {
|
||||
case 'radio_question':
|
||||
html = `
|
||||
<div class="form-group">
|
||||
<label>Extra text key (optional)</label>
|
||||
<input type="text" id="${prefix}_textKey" value="${esc(config.textKey || '')}" placeholder="e.g. resilience_reflection_prompt">
|
||||
</div>`;
|
||||
break;
|
||||
case 'multi_check_box_question':
|
||||
html = `
|
||||
<div class="form-group">
|
||||
<label>Min selections</label>
|
||||
<input type="number" id="${prefix}_minSelection" value="${config.minSelection || 0}" min="0">
|
||||
</div>`;
|
||||
break;
|
||||
case 'glass_scale_question':
|
||||
html = `
|
||||
<div class="form-group">
|
||||
<label>Symptom keys (one per line)</label>
|
||||
<textarea id="${prefix}_symptoms" rows="5" style="font-family:monospace;font-size:.85rem">${(config.symptoms || []).join('\n')}</textarea>
|
||||
</div>`;
|
||||
break;
|
||||
case 'value_spinner':
|
||||
html = `
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Min</label>
|
||||
<input type="number" id="${prefix}_rangeMin" value="${config.range?.min ?? 0}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Max</label>
|
||||
<input type="number" id="${prefix}_rangeMax" value="${config.range?.max ?? 100}">
|
||||
</div>
|
||||
</div>`;
|
||||
break;
|
||||
case 'date_spinner': {
|
||||
const notBefore = config.constraints?.notBefore || '';
|
||||
const notAfter = config.constraints?.notAfter || '';
|
||||
html = `
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Not before (question key)</label>
|
||||
<input type="text" id="${prefix}_notBefore" value="${esc(notBefore)}" placeholder="e.g. departure_country">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Not after (question key)</label>
|
||||
<input type="text" id="${prefix}_notAfter" value="${esc(notAfter)}" placeholder="e.g. since_in_germany">
|
||||
</div>
|
||||
</div>`;
|
||||
break;
|
||||
}
|
||||
case 'string_spinner':
|
||||
html = `
|
||||
<div class="form-group">
|
||||
<label>Static options (one per line)</label>
|
||||
<textarea id="${prefix}_stringOptions" rows="4" style="font-family:monospace;font-size:.85rem">${(config.options || []).join('\n')}</textarea>
|
||||
</div>`;
|
||||
break;
|
||||
case 'client_coach_code_question':
|
||||
html = `
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Hint 1 key</label>
|
||||
<input type="text" id="${prefix}_hint1" value="${esc(config.hint1 || '')}" placeholder="client_code">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Hint 2 key</label>
|
||||
<input type="text" id="${prefix}_hint2" value="${esc(config.hint2 || '')}" placeholder="coach_code">
|
||||
</div>
|
||||
</div>`;
|
||||
break;
|
||||
case 'client_not_signed':
|
||||
html = `
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Text key 1</label>
|
||||
<input type="text" id="${prefix}_textKey1" value="${esc(config.textKey1 || '')}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Text key 2</label>
|
||||
<input type="text" id="${prefix}_textKey2" value="${esc(config.textKey2 || '')}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Hint key</label>
|
||||
<input type="text" id="${prefix}_hint" value="${esc(config.hint || '')}">
|
||||
</div>
|
||||
</div>`;
|
||||
break;
|
||||
case 'last_page':
|
||||
html = `
|
||||
<div class="form-group">
|
||||
<label>Text key</label>
|
||||
<input type="text" id="${prefix}_textKey" value="${esc(config.textKey || '')}" placeholder="finish_data_entry">
|
||||
</div>`;
|
||||
break;
|
||||
}
|
||||
return html ? `<div class="config-section">${html}</div>` : '';
|
||||
}
|
||||
|
||||
export function readConfigFromForm(layout, prefix) {
|
||||
const config = {};
|
||||
const val = id => document.getElementById(`${prefix}_${id}`)?.value?.trim() || '';
|
||||
|
||||
switch (layout) {
|
||||
case 'radio_question':
|
||||
if (val('textKey')) config.textKey = val('textKey');
|
||||
break;
|
||||
case 'multi_check_box_question': {
|
||||
const ms = parseInt(val('minSelection') || '0', 10);
|
||||
if (ms > 0) config.minSelection = ms;
|
||||
break;
|
||||
}
|
||||
case 'glass_scale_question': {
|
||||
const raw = val('symptoms');
|
||||
const syms = raw.split('\n').map(s => s.trim()).filter(Boolean);
|
||||
if (syms.length) config.symptoms = syms;
|
||||
break;
|
||||
}
|
||||
case 'value_spinner':
|
||||
config.range = {
|
||||
min: parseInt(val('rangeMin') || '0', 10),
|
||||
max: parseInt(val('rangeMax') || '100', 10),
|
||||
};
|
||||
break;
|
||||
case 'date_spinner': {
|
||||
const nb = val('notBefore');
|
||||
const na = val('notAfter');
|
||||
if (nb || na) {
|
||||
config.constraints = {};
|
||||
if (nb) config.constraints.notBefore = nb;
|
||||
if (na) config.constraints.notAfter = na;
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'string_spinner': {
|
||||
const raw = val('stringOptions');
|
||||
const opts = raw.split('\n').map(s => s.trim()).filter(Boolean);
|
||||
if (opts.length) config.options = opts;
|
||||
break;
|
||||
}
|
||||
case 'client_coach_code_question':
|
||||
if (val('hint1')) config.hint1 = val('hint1');
|
||||
if (val('hint2')) config.hint2 = val('hint2');
|
||||
break;
|
||||
case 'client_not_signed':
|
||||
if (val('textKey1')) config.textKey1 = val('textKey1');
|
||||
if (val('textKey2')) config.textKey2 = val('textKey2');
|
||||
if (val('hint')) config.hint = val('hint');
|
||||
break;
|
||||
case 'last_page':
|
||||
if (val('textKey')) config.textKey = val('textKey');
|
||||
break;
|
||||
}
|
||||
return JSON.stringify(config);
|
||||
}
|
||||
Reference in New Issue
Block a user