46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import { CONFIG, type DataMode } from "../config";
|
|
import { getDataMode, setDataMode } from "../lib/mockData";
|
|
|
|
const LABELS: Record<DataMode, string> = {
|
|
mock: "Mock Data",
|
|
live: "Live API",
|
|
};
|
|
|
|
export function initDataModeToggle(onChange: () => void): void {
|
|
const container = document.querySelector<HTMLDivElement>("[data-role='data-mode-toggle']");
|
|
if (!container) {
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = renderControls(getDataMode());
|
|
|
|
const select = container.querySelector<HTMLSelectElement>("select[data-mode-select]");
|
|
if (!select) {
|
|
return;
|
|
}
|
|
|
|
select.value = getDataMode();
|
|
select.addEventListener("change", (event) => {
|
|
const value = (event.target as HTMLSelectElement).value as DataMode;
|
|
setDataMode(value);
|
|
document.documentElement.dataset.mode = value;
|
|
onChange();
|
|
});
|
|
}
|
|
|
|
function renderControls(mode: DataMode): string {
|
|
const options = (Object.keys(LABELS) as DataMode[])
|
|
.map((id) => `<option value="${id}" ${id === mode ? "selected" : ""}>${LABELS[id]}</option>`)
|
|
.join("");
|
|
|
|
return `
|
|
<label class="data-mode-toggle">
|
|
<span>Data Mode</span>
|
|
<select data-mode-select>
|
|
${options}
|
|
</select>
|
|
<small>${mode === "mock" ? "Static JSON samples" : `Coordinator API (${CONFIG.apiBaseUrl})`}</small>
|
|
</label>
|
|
`;
|
|
}
|