329 lines
11 KiB
JavaScript
329 lines
11 KiB
JavaScript
import { apiAction, toast } from './api.js';
|
|
|
|
const state = {
|
|
setup: null,
|
|
loading: false,
|
|
allTables: [],
|
|
selectedTables: [],
|
|
};
|
|
|
|
let form;
|
|
let tablesAllSelect;
|
|
let tablesSelectedSelect;
|
|
let tablesAddBtn;
|
|
let tablesRemoveBtn;
|
|
let modeInputs;
|
|
let directFields;
|
|
let configFields;
|
|
let statusLabel;
|
|
let loadBtn;
|
|
let configExampleBtn;
|
|
let configExampleDialog;
|
|
let bridgeSetupDialog;
|
|
let openBridgeSetupBtn;
|
|
let closeBridgeSetupBtn;
|
|
|
|
export function initBridgeSetupPage() {
|
|
form = document.getElementById('bridgeSetupForm');
|
|
if (!form) return;
|
|
tablesAllSelect = document.getElementById('bridgeTablesAll');
|
|
tablesSelectedSelect = document.getElementById('bridgeTablesSelected');
|
|
tablesAddBtn = document.getElementById('bridgeTablesAdd');
|
|
tablesRemoveBtn = document.getElementById('bridgeTablesRemove');
|
|
directFields = document.getElementById('directFields');
|
|
configFields = document.getElementById('configFields');
|
|
statusLabel = document.getElementById('setupStatus');
|
|
loadBtn = document.getElementById('btn-load-remote');
|
|
configExampleBtn = document.getElementById('btn-config-example');
|
|
configExampleDialog = document.getElementById('configExampleDialog');
|
|
modeInputs = Array.from(form.querySelectorAll('input[name="db_mode"]'));
|
|
bridgeSetupDialog = document.getElementById('bridgeSetupDialog');
|
|
openBridgeSetupBtn = document.getElementById('btn-open-bridge-setup');
|
|
closeBridgeSetupBtn = document.getElementById('btn-close-bridge-setup');
|
|
|
|
form.addEventListener('submit', submitBridgeSetup);
|
|
tablesAddBtn?.addEventListener('click', () => addSelectedTables(getSelectedOptions(tablesAllSelect)));
|
|
tablesRemoveBtn?.addEventListener('click', () => removeSelectedTables(getSelectedOptions(tablesSelectedSelect)));
|
|
loadBtn?.addEventListener('click', loadTablesFromBridge);
|
|
configExampleBtn?.addEventListener('click', () => {
|
|
if (configExampleDialog?.showModal) configExampleDialog.showModal();
|
|
});
|
|
openBridgeSetupBtn?.addEventListener('click', () => {
|
|
if (bridgeSetupDialog?.showModal) bridgeSetupDialog.showModal();
|
|
if (!state.allTables.length) {
|
|
loadTablesFromBridge(null, { preserveSelection: state.selectedTables.length > 0 });
|
|
}
|
|
});
|
|
closeBridgeSetupBtn?.addEventListener('click', () => {
|
|
if (bridgeSetupDialog?.open) bridgeSetupDialog.close();
|
|
});
|
|
modeInputs.forEach(input => {
|
|
input.addEventListener('change', () => applyModeVisibility(input.value));
|
|
});
|
|
|
|
loadBridgeSetup();
|
|
}
|
|
|
|
function defaultSetup() {
|
|
return {
|
|
tables: [],
|
|
mode: 'direct',
|
|
direct: {
|
|
host: '',
|
|
port: 3306,
|
|
database: '',
|
|
user: '',
|
|
password: '',
|
|
charset: 'utf8mb4',
|
|
},
|
|
config: {
|
|
file: '',
|
|
base: '',
|
|
host_key: '',
|
|
port_key: '',
|
|
database_key: '',
|
|
user_key: '',
|
|
password_key: '',
|
|
charset_key: '',
|
|
},
|
|
};
|
|
}
|
|
|
|
async function loadBridgeSetup() {
|
|
state.loading = true;
|
|
try {
|
|
const res = await apiAction('account.bridge.setup.get', { method: 'GET' });
|
|
if (!res?.ok) throw new Error(res?.error || 'Bridge-Setup konnte nicht geladen werden');
|
|
fillForm(res.setup || state.setup || defaultSetup());
|
|
updateStatus('Daten geladen.');
|
|
} catch (err) {
|
|
console.error(err);
|
|
toast(err.message || 'Bridge-Setup konnte nicht geladen werden', false);
|
|
} finally {
|
|
state.loading = false;
|
|
}
|
|
}
|
|
|
|
function fillForm(setup, options = {}) {
|
|
const data = normalizeSetupInput(setup);
|
|
state.setup = data;
|
|
if (!options.skipTables) {
|
|
state.selectedTables = data.tables.slice();
|
|
updateTableSelects();
|
|
}
|
|
const activeMode = (data.mode || 'direct').toLowerCase();
|
|
modeInputs.forEach(input => {
|
|
input.checked = input.value === activeMode;
|
|
});
|
|
applyModeVisibility(activeMode);
|
|
|
|
if (directFields) {
|
|
const directMap = {
|
|
direct_host: data.direct.host || '',
|
|
direct_port: String(data.direct.port || 3306),
|
|
direct_database: data.direct.database || '',
|
|
direct_charset: data.direct.charset || 'utf8mb4',
|
|
direct_user: data.direct.user || '',
|
|
direct_password: data.direct.password || '',
|
|
};
|
|
Object.entries(directMap).forEach(([name, value]) => {
|
|
const input = directFields.querySelector(`[name="${name}"]`);
|
|
if (input) input.value = value;
|
|
});
|
|
}
|
|
|
|
if (configFields) {
|
|
const configMap = {
|
|
config_file: data.config.file || '',
|
|
config_base: data.config.base || '',
|
|
config_host_key: data.config.host_key || '',
|
|
config_port_key: data.config.port_key || '',
|
|
config_database_key: data.config.database_key || '',
|
|
config_user_key: data.config.user_key || '',
|
|
config_password_key: data.config.password_key || '',
|
|
config_charset_key: data.config.charset_key || '',
|
|
};
|
|
Object.entries(configMap).forEach(([name, value]) => {
|
|
const input = configFields.querySelector(`[name="${name}"]`);
|
|
if (input) input.value = value;
|
|
});
|
|
}
|
|
}
|
|
|
|
function applyModeVisibility(mode) {
|
|
const direct = mode === 'config' ? 'add' : 'remove';
|
|
const config = mode === 'config' ? 'remove' : 'add';
|
|
directFields?.classList[direct]('hidden');
|
|
configFields?.classList[config]('hidden');
|
|
}
|
|
|
|
function updateTableSelects() {
|
|
const all = state.allTables || [];
|
|
const selected = state.selectedTables || [];
|
|
const selectedSet = new Set(selected);
|
|
const orderedSelected = all.length ? all.filter(name => selectedSet.has(name)) : selected;
|
|
const available = all.length ? all.filter(name => !selectedSet.has(name)) : [];
|
|
renderSelect(tablesAllSelect, available, 'Noch keine Tabellen geladen.');
|
|
renderSelect(tablesSelectedSelect, orderedSelected, 'Noch keine Tabellen ausgewaehlt.');
|
|
}
|
|
|
|
function renderSelect(selectEl, list, emptyLabel) {
|
|
if (!selectEl) return;
|
|
selectEl.innerHTML = '';
|
|
if (!list.length) {
|
|
const opt = document.createElement('option');
|
|
opt.textContent = emptyLabel;
|
|
opt.disabled = true;
|
|
selectEl.appendChild(opt);
|
|
return;
|
|
}
|
|
list.forEach(name => {
|
|
const opt = document.createElement('option');
|
|
opt.value = name;
|
|
opt.textContent = name;
|
|
selectEl.appendChild(opt);
|
|
});
|
|
}
|
|
|
|
function getSelectedOptions(selectEl) {
|
|
if (!selectEl) return [];
|
|
return Array.from(selectEl.selectedOptions || []).map(opt => opt.value);
|
|
}
|
|
|
|
function addSelectedTables(list) {
|
|
if (!list.length) return;
|
|
state.selectedTables = normalizeTableNames([...state.selectedTables, ...list]);
|
|
updateTableSelects();
|
|
}
|
|
|
|
function removeSelectedTables(list) {
|
|
if (!list.length) return;
|
|
const removeSet = new Set(list);
|
|
state.selectedTables = state.selectedTables.filter(name => !removeSet.has(name));
|
|
updateTableSelects();
|
|
}
|
|
|
|
async function submitBridgeSetup(ev) {
|
|
ev.preventDefault();
|
|
if (!form) return;
|
|
const mode = form.querySelector('input[name="db_mode"]:checked')?.value || 'direct';
|
|
const payload = {
|
|
tables: normalizeTableNames(state.selectedTables),
|
|
mode,
|
|
direct_host: form.direct_host?.value.trim() || '',
|
|
direct_port: Number(form.direct_port?.value || 0) || 3306,
|
|
direct_database: form.direct_database?.value.trim() || '',
|
|
direct_charset: form.direct_charset?.value.trim() || 'utf8mb4',
|
|
direct_user: form.direct_user?.value.trim() || '',
|
|
direct_password: form.direct_password?.value || '',
|
|
config_file: form.config_file?.value.trim() || '',
|
|
config_base: form.config_base?.value.trim() || '',
|
|
config_host_key: form.config_host_key?.value.trim() || '',
|
|
config_port_key: form.config_port_key?.value.trim() || '',
|
|
config_database_key: form.config_database_key?.value.trim() || '',
|
|
config_user_key: form.config_user_key?.value.trim() || '',
|
|
config_password_key: form.config_password_key?.value.trim() || '',
|
|
config_charset_key: form.config_charset_key?.value.trim() || '',
|
|
};
|
|
|
|
try {
|
|
const res = await apiAction('account.bridge.setup.save', { method: 'POST', data: payload });
|
|
if (!res?.ok) throw new Error(res?.error || 'Bridge-Setup konnte nicht gespeichert werden');
|
|
fillForm(res.setup || payload);
|
|
updateStatus('Bridge-Setup gespeichert.');
|
|
toast('Bridge-Setup gespeichert', true);
|
|
if (bridgeSetupDialog?.open) {
|
|
bridgeSetupDialog.close();
|
|
}
|
|
window.dispatchEvent(new CustomEvent('bridge-setup-updated', { detail: res.setup || payload }));
|
|
} catch (err) {
|
|
console.error(err);
|
|
toast(err.message || 'Bridge-Setup konnte nicht gespeichert werden', false);
|
|
}
|
|
}
|
|
|
|
async function loadTablesFromBridge(ev, options = {}) {
|
|
ev?.preventDefault();
|
|
if (!loadBtn) return;
|
|
loadBtn.disabled = true;
|
|
try {
|
|
const res = await apiAction('account.bridge.test', { method: 'POST', data: {} });
|
|
if (!res?.ok) throw new Error(res?.error || 'Bridge konnte nicht abgefragt werden');
|
|
const fetchedTables = normalizeTableNames(res.tables);
|
|
state.allTables = fetchedTables;
|
|
|
|
const preserveSelection = !!options.preserveSelection;
|
|
const hasSelection = state.selectedTables.length > 0;
|
|
if (preserveSelection || hasSelection) {
|
|
state.selectedTables = normalizeTableNames(state.selectedTables);
|
|
} else {
|
|
state.selectedTables = fetchedTables.slice();
|
|
}
|
|
if (fetchedTables.length && state.selectedTables.length) {
|
|
const fetchedSet = new Set(fetchedTables);
|
|
state.selectedTables = state.selectedTables.filter(name => fetchedSet.has(name));
|
|
}
|
|
|
|
if (res.setup_hint) {
|
|
const merged = {
|
|
...(state.setup || {}),
|
|
...(res.setup_hint || {}),
|
|
};
|
|
merged.mode = res.setup_hint.mode || merged.mode;
|
|
merged.direct = { ...(merged.direct || {}), ...(res.setup_hint.direct || {}) };
|
|
merged.config = { ...(merged.config || {}), ...(res.setup_hint.config || {}) };
|
|
fillForm(merged, { skipTables: true });
|
|
}
|
|
|
|
updateTableSelects();
|
|
updateStatus(`Tabellen geladen (${fetchedTables.length}).`);
|
|
toast('Tabellen erfolgreich geladen', true);
|
|
} catch (err) {
|
|
console.error(err);
|
|
toast(err.message || 'Bridge konnte nicht geprüft werden', false);
|
|
} finally {
|
|
loadBtn.disabled = false;
|
|
}
|
|
}
|
|
|
|
function normalizeTableNames(list) {
|
|
if (!Array.isArray(list)) return [];
|
|
const result = [];
|
|
const seen = new Set();
|
|
for (const entry of list) {
|
|
let name = '';
|
|
if (typeof entry === 'string') {
|
|
name = entry;
|
|
} else if (entry && typeof entry === 'object') {
|
|
name = entry.name || entry.table || entry.label || '';
|
|
}
|
|
if (typeof name === 'string') {
|
|
const trimmed = name.trim();
|
|
if (trimmed && !seen.has(trimmed)) {
|
|
seen.add(trimmed);
|
|
result.push(trimmed);
|
|
}
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function updateStatus(msg) {
|
|
if (!statusLabel) return;
|
|
const time = new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
|
statusLabel.textContent = `${msg} (${time})`;
|
|
}
|
|
|
|
function normalizeSetupInput(input) {
|
|
const base = defaultSetup();
|
|
if (!input || typeof input !== 'object') return base;
|
|
const mode = (input.mode || base.mode).toLowerCase();
|
|
const validMode = mode === 'config' ? 'config' : 'direct';
|
|
const tables = normalizeTableNames(input.tables || base.tables);
|
|
const direct = { ...base.direct, ...(input.direct || {}) };
|
|
direct.port = Number(direct.port || 3306) || 3306;
|
|
direct.charset = direct.charset || 'utf8mb4';
|
|
const config = { ...base.config, ...(input.config || {}) };
|
|
return { tables, mode: validMode, direct, config };
|
|
}
|