555 lines
23 KiB
JavaScript
555 lines
23 KiB
JavaScript
(() => {
|
|
const SECTIONS = [
|
|
{ id: 'desktop', label: 'Desktop Type' },
|
|
{ id: 'profile', label: 'Benutzerdaten' },
|
|
{ id: 'apps', label: 'Apps' },
|
|
{ id: 'tray', label: 'Tray-Apps' },
|
|
{ id: 'widgets', label: 'Widgets' },
|
|
];
|
|
|
|
const escapeHtml = (value) => String(value)
|
|
.replaceAll('&', '&')
|
|
.replaceAll('<', '<')
|
|
.replaceAll('>', '>')
|
|
.replaceAll('"', '"')
|
|
.replaceAll("'", ''');
|
|
|
|
const clone = (value) => JSON.parse(JSON.stringify(value));
|
|
|
|
const sameSelection = (left, right) => {
|
|
const nextLeft = [...left].sort();
|
|
const nextRight = [...right].sort();
|
|
|
|
return JSON.stringify(nextLeft) === JSON.stringify(nextRight);
|
|
};
|
|
|
|
const summarizeSection = (sectionId) => {
|
|
if (sectionId === 'desktop') {
|
|
return 'Windows-aehnlicher Standard fuer Desktop-Typ und Skin-Auswahl.';
|
|
}
|
|
|
|
if (sectionId === 'profile') {
|
|
return 'Lokales Profil fuer Name, E-Mail, Telefon und spaetere LDAP-/Keycloak-Synchronisierung.';
|
|
}
|
|
|
|
if (sectionId === 'apps') {
|
|
return 'Aktiviert Anwendungen fuer das Startmenue und optional als Desktop-Icon.';
|
|
}
|
|
|
|
if (sectionId === 'tray') {
|
|
return 'Steuert Schnellaktionen und Visualisierungen neben der Uhr, sofern Zugriff besteht.';
|
|
}
|
|
|
|
return 'Kleine Desktop-Bereiche ohne Fensterfunktionen, die separat aktiviert werden koennen.';
|
|
};
|
|
|
|
const renderSkinChoices = (state) => state.bootstrap.options.skins.map((skin) => {
|
|
const isActive = state.draft.desktop.active_skin === skin.skin_id;
|
|
|
|
return `
|
|
<button
|
|
class="window-app-choice usm-choice${isActive ? ' is-active' : ''}"
|
|
type="button"
|
|
data-action="select-skin"
|
|
data-skin-id="${escapeHtml(skin.skin_id)}"
|
|
>
|
|
<strong>${escapeHtml(skin.label)}</strong>
|
|
<p>${escapeHtml(summarizeSkin(skin.skin_id))}</p>
|
|
</button>
|
|
`;
|
|
}).join('');
|
|
|
|
const summarizeSkin = (skinId) => {
|
|
if (skinId === 'apple') {
|
|
return 'Top-Bar, rechte Icon-Anordnung und Finder-nahe Fensterelemente.';
|
|
}
|
|
|
|
if (skinId === 'linux') {
|
|
return 'Klassische Arbeitsflaeche mit neutralem Fensterstil und Linux-Taskbar.';
|
|
}
|
|
|
|
return 'Standardisiertes Control-Panel-Muster mit Windows-naher Einstellungslogik.';
|
|
};
|
|
|
|
const renderAppItems = (state) => state.bootstrap.options.apps.map((app) => {
|
|
const checked = state.draft.apps.enabled_ids.includes(app.app_id);
|
|
const desktopIconChecked = state.draft.apps.desktop_icon_ids.includes(app.app_id);
|
|
|
|
return `
|
|
<div class="window-app-item usm-item usm-item--app">
|
|
<label class="usm-item-toggle">
|
|
<input
|
|
type="checkbox"
|
|
data-app-id="${escapeHtml(app.app_id)}"
|
|
${checked ? 'checked' : ''}
|
|
${app.required ? 'disabled' : ''}
|
|
>
|
|
<span class="window-app-item-main usm-item-main">
|
|
<strong>${escapeHtml(app.title)}</strong>
|
|
<p>${escapeHtml(app.summary || '')}</p>
|
|
<span class="usm-item-meta">${app.required ? 'Pflicht-App im Menue' : 'Im Menue sichtbar'}</span>
|
|
</span>
|
|
</label>
|
|
${app.can_show_on_desktop ? `
|
|
<label class="usm-inline-check">
|
|
<input
|
|
type="checkbox"
|
|
data-app-desktop-icon-id="${escapeHtml(app.app_id)}"
|
|
${desktopIconChecked ? 'checked' : ''}
|
|
${checked ? '' : 'disabled'}
|
|
>
|
|
<span>Desktop-Icon anzeigen</span>
|
|
</label>
|
|
` : ''}
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
const renderTrayItems = (state) => state.bootstrap.options.tray_apps.map((app) => {
|
|
const checked = state.draft.tray.active_ids.includes(app.app_id);
|
|
|
|
return `
|
|
<label class="window-app-item usm-item">
|
|
<input
|
|
type="checkbox"
|
|
data-tray-app-id="${escapeHtml(app.app_id)}"
|
|
${checked ? 'checked' : ''}
|
|
>
|
|
<span class="window-app-item-main usm-item-main">
|
|
<strong>${escapeHtml(app.title)}</strong>
|
|
<p>${escapeHtml(app.summary || '')}</p>
|
|
<span class="usm-item-meta">Im Tray neben der Uhr</span>
|
|
</span>
|
|
</label>
|
|
`;
|
|
}).join('');
|
|
|
|
const renderWidgetItems = (state) => state.bootstrap.options.widgets.map((widget) => {
|
|
const checked = state.draft.widgets.active_ids.includes(widget.widget_id);
|
|
|
|
return `
|
|
<label class="window-app-item usm-item">
|
|
<input
|
|
type="checkbox"
|
|
data-action="toggle-widget"
|
|
data-widget-id="${escapeHtml(widget.widget_id)}"
|
|
${checked ? 'checked' : ''}
|
|
>
|
|
<span class="window-app-item-main usm-item-main">
|
|
<strong>${escapeHtml(widget.title)}</strong>
|
|
<p>${escapeHtml(widget.summary || '')}</p>
|
|
<span class="usm-item-meta">${widget.default_enabled ? 'Standard-Widget' : 'Optionales Widget'}</span>
|
|
</span>
|
|
</label>
|
|
`;
|
|
}).join('');
|
|
|
|
const renderProfileFields = (state) => `
|
|
<div class="window-app-grid usm-grid">
|
|
${renderField('name', 'Name', state.draft.profile.name)}
|
|
${renderField('email', 'E-Mail', state.draft.profile.email, 'email')}
|
|
${renderField('phone', 'Telefon', state.draft.profile.phone, 'tel')}
|
|
${renderField('birthdate', 'Geburtsdatum', state.draft.profile.birthdate, 'date')}
|
|
${renderField('title', 'Titel', state.draft.profile.title)}
|
|
${renderField('department', 'Abteilung', state.draft.profile.department)}
|
|
${renderField('city', 'Ort', state.draft.profile.city)}
|
|
${renderField('website', 'Website', state.draft.profile.website, 'url')}
|
|
</div>
|
|
<div class="window-app-field usm-field">
|
|
<label class="window-app-label usm-label" for="usm-notes">Notizen</label>
|
|
<textarea id="usm-notes" class="window-app-textarea usm-textarea" data-field="profile.notes">${escapeHtml(state.draft.profile.notes || '')}</textarea>
|
|
</div>
|
|
`;
|
|
|
|
const renderField = (fieldId, label, value, type = 'text') => `
|
|
<div class="window-app-field usm-field">
|
|
<label class="window-app-label usm-label" for="usm-${escapeHtml(fieldId)}">${escapeHtml(label)}</label>
|
|
<input
|
|
id="usm-${escapeHtml(fieldId)}"
|
|
class="window-app-input usm-input"
|
|
type="${escapeHtml(type)}"
|
|
data-field="profile.${escapeHtml(fieldId)}"
|
|
value="${escapeHtml(value || '')}"
|
|
>
|
|
</div>
|
|
`;
|
|
|
|
const sectionContent = (state) => {
|
|
if (state.activeSection === 'desktop') {
|
|
return `
|
|
<section class="window-app-card usm-card">
|
|
<p class="window-app-kicker usm-kicker">Desktop Type</p>
|
|
<h2>Skin-Auswahl</h2>
|
|
<p class="window-app-copy usm-copy">Die direkte Skin-Umschaltung liegt jetzt im Setup. Die Auswahl wird pro Benutzer gespeichert.</p>
|
|
<div class="window-app-choice-grid usm-choice-grid">
|
|
${renderSkinChoices(state)}
|
|
</div>
|
|
</section>
|
|
`;
|
|
}
|
|
|
|
if (state.activeSection === 'profile') {
|
|
return `
|
|
<section class="window-app-card usm-card">
|
|
<p class="window-app-kicker usm-kicker">Benutzerdaten</p>
|
|
<h2>Persoenliches Profil</h2>
|
|
<p class="window-app-copy usm-copy">Diese Daten werden zunaechst lokal gespeichert und spaeter an LDAP oder Keycloak angebunden.</p>
|
|
${renderProfileFields(state)}
|
|
</section>
|
|
`;
|
|
}
|
|
|
|
if (state.activeSection === 'apps') {
|
|
return `
|
|
<section class="window-app-card usm-card">
|
|
<p class="window-app-kicker usm-kicker">App-Auswahl</p>
|
|
<h2>Apps im Menue und auf dem Desktop</h2>
|
|
<p class="window-app-copy usm-copy">Eine aktivierte App erscheint standardmaessig im Menue. Fuer geeignete Apps kann zusaetzlich ein Desktop-Icon aktiviert werden.</p>
|
|
<div class="window-app-list usm-list">
|
|
${renderAppItems(state)}
|
|
</div>
|
|
</section>
|
|
`;
|
|
}
|
|
|
|
if (state.activeSection === 'tray') {
|
|
return `
|
|
<section class="window-app-card usm-card">
|
|
<p class="window-app-kicker usm-kicker">Tray-Apps</p>
|
|
<h2>Bereich neben der Uhr</h2>
|
|
<p class="window-app-copy usm-copy">Tray-Apps sind Schnellzugriffe oder Statusanzeigen im Bereich neben der Uhr. Sie koennen eigenstaendig oder zusammen mit der Haupt-App genutzt werden.</p>
|
|
<div class="window-app-list usm-list">
|
|
${renderTrayItems(state)}
|
|
</div>
|
|
</section>
|
|
`;
|
|
}
|
|
|
|
return `
|
|
<section class="window-app-card usm-card">
|
|
<p class="window-app-kicker usm-kicker">Widgets</p>
|
|
<h2>Kleine Desktop-Bereiche</h2>
|
|
<p class="window-app-copy usm-copy">Widgets sind kleine Desktop-Bereiche ohne klassische Fensterfunktionen. Aktivierung und Positionierung werden schrittweise ausgebaut.</p>
|
|
<div class="window-app-list usm-list">
|
|
${renderWidgetItems(state)}
|
|
</div>
|
|
</section>
|
|
`;
|
|
};
|
|
|
|
const renderApp = (root, state) => {
|
|
if (state.loading) {
|
|
root.innerHTML = '<div class="window-app-loading usm-loading"><p class="window-app-copy usm-copy">Einstellungen werden geladen.</p></div>';
|
|
return;
|
|
}
|
|
|
|
if (state.error && !state.bootstrap) {
|
|
root.innerHTML = `<div class="window-app-error-state usm-error-state"><p class="window-app-message usm-message is-error">${escapeHtml(state.error)}</p></div>`;
|
|
return;
|
|
}
|
|
|
|
root.innerHTML = `
|
|
<div class="window-app-shell usm-shell">
|
|
<div class="window-app-frame usm-frame">
|
|
<aside class="window-app-sidebar usm-nav">
|
|
<div class="window-app-brand usm-brand">
|
|
<p class="window-app-kicker usm-kicker">Setup</p>
|
|
<h1>User Self Management</h1>
|
|
<p class="window-app-copy">Ein gemeinsamer Setup-Bereich fuer Desktop-Typ, Benutzerdaten, Apps, Tray-Apps und Widgets.</p>
|
|
</div>
|
|
<div class="window-app-nav-list usm-nav-list">
|
|
${SECTIONS.map((section) => `
|
|
<button
|
|
class="window-app-nav-button usm-nav-button${state.activeSection === section.id ? ' is-active' : ''}"
|
|
type="button"
|
|
data-action="open-section"
|
|
data-section-id="${escapeHtml(section.id)}"
|
|
>
|
|
<strong>${escapeHtml(section.label)}</strong>
|
|
<span class="window-app-meta usm-meta">${escapeHtml(summarizeSection(section.id))}</span>
|
|
</button>
|
|
`).join('')}
|
|
</div>
|
|
</aside>
|
|
<main class="window-app-main usm-main">
|
|
<div class="window-app-panel usm-panel">
|
|
<section class="window-app-hero usm-hero">
|
|
<div>
|
|
<p class="window-app-kicker usm-kicker">Desktop Setup</p>
|
|
<h2 class="window-app-title usm-title">${escapeHtml(sectionTitle(state.activeSection))}</h2>
|
|
<p class="window-app-copy usm-copy">${escapeHtml(summarizeSection(state.activeSection))}</p>
|
|
</div>
|
|
<div class="window-app-pill-row usm-pill-row">
|
|
<span class="window-app-pill usm-pill">LDAP: geplant</span>
|
|
<span class="window-app-pill usm-pill">Keycloak: geplant</span>
|
|
<span class="window-app-pill usm-pill">Scope: ${escapeHtml(state.bootstrap.meta.storage_scope || 'guest')}</span>
|
|
</div>
|
|
</section>
|
|
${sectionContent(state)}
|
|
<section class="window-app-actions usm-actions">
|
|
<div>
|
|
<p class="window-app-note usm-note">Skin- und App-Aenderungen koennen einen Reload ausloesen, damit Fenster, Icons und Menue sauber synchron bleiben.</p>
|
|
<p class="window-app-message usm-message${state.error ? ' is-error' : state.success ? ' is-success' : ''}">${escapeHtml(state.error || state.success || '')}</p>
|
|
</div>
|
|
<button class="window-app-button usm-button" type="button" data-action="save-settings" ${state.saving ? 'disabled' : ''}>
|
|
${state.saving ? 'Speichert ...' : 'Aenderungen speichern'}
|
|
</button>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
`;
|
|
};
|
|
|
|
const sectionTitle = (sectionId) => {
|
|
const current = SECTIONS.find((section) => section.id === sectionId);
|
|
return current ? current.label : 'Setup';
|
|
};
|
|
|
|
const setDraftValue = (draft, path, value) => {
|
|
const segments = path.split('.');
|
|
let cursor = draft;
|
|
|
|
segments.slice(0, -1).forEach((segment) => {
|
|
cursor = cursor[segment];
|
|
});
|
|
|
|
cursor[segments[segments.length - 1]] = value;
|
|
};
|
|
|
|
const toggleSelection = (collection, value) => {
|
|
const next = new Set(collection);
|
|
|
|
if (next.has(value)) {
|
|
next.delete(value);
|
|
} else {
|
|
next.add(value);
|
|
}
|
|
|
|
return Array.from(next);
|
|
};
|
|
|
|
const syncSelectionWithCheckedState = (collection, value, isChecked) => {
|
|
const next = new Set(collection);
|
|
|
|
if (isChecked) {
|
|
next.add(value);
|
|
} else {
|
|
next.delete(value);
|
|
}
|
|
|
|
return Array.from(next);
|
|
};
|
|
|
|
const buildPatch = (state) => ({
|
|
profile: state.draft.profile,
|
|
desktop: {
|
|
active_skin: state.draft.desktop.active_skin,
|
|
},
|
|
apps: {
|
|
enabled_ids: state.draft.apps.enabled_ids,
|
|
desktop_icon_ids: state.draft.apps.desktop_icon_ids,
|
|
},
|
|
tray: {
|
|
active_ids: state.draft.tray.active_ids,
|
|
},
|
|
widgets: {
|
|
active_ids: state.draft.widgets.active_ids,
|
|
},
|
|
});
|
|
|
|
const requiresReload = (before, after) => before.desktop.active_skin !== after.desktop.active_skin
|
|
|| !sameSelection(before.apps.enabled_ids, after.apps.enabled_ids)
|
|
|| !sameSelection(before.apps.desktop_icon_ids, after.apps.desktop_icon_ids)
|
|
|| !sameSelection(before.tray.active_ids, after.tray.active_ids)
|
|
|| !sameSelection(before.widgets.active_ids, after.widgets.active_ids);
|
|
|
|
const attachInteractions = (root, state, options) => {
|
|
root.addEventListener('click', async (event) => {
|
|
const button = event.target instanceof Element ? event.target.closest('[data-action]') : null;
|
|
|
|
if (!button) {
|
|
return;
|
|
}
|
|
|
|
const action = button.dataset.action;
|
|
|
|
if (action === 'open-section') {
|
|
state.activeSection = button.dataset.sectionId || 'desktop';
|
|
renderApp(root, state);
|
|
return;
|
|
}
|
|
|
|
if (action === 'select-skin') {
|
|
state.draft.desktop.active_skin = button.dataset.skinId || state.draft.desktop.active_skin;
|
|
renderApp(root, state);
|
|
return;
|
|
}
|
|
|
|
if (action === 'save-settings') {
|
|
if (!options.apiBase || state.saving) {
|
|
return;
|
|
}
|
|
|
|
state.saving = true;
|
|
state.error = '';
|
|
state.success = '';
|
|
renderApp(root, state);
|
|
|
|
try {
|
|
const before = clone(state.bootstrap.preferences);
|
|
const response = await window.fetch(options.apiBase, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Accept: 'application/json',
|
|
},
|
|
body: JSON.stringify(buildPatch(state)),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`save-failed:${response.status}`);
|
|
}
|
|
|
|
const payload = await response.json();
|
|
const after = payload.preferences;
|
|
const ldapSync = payload.meta?.ldap_profile_sync || null;
|
|
state.bootstrap = payload;
|
|
state.draft = clone(after);
|
|
const baseMessage = payload.meta?.requires_reload
|
|
? 'Gespeichert. Desktop wird fuer Skin- oder App-Aenderungen neu geladen.'
|
|
: 'Einstellungen wurden gespeichert.';
|
|
const ldapMessage = ldapSync && ldapSync.attempted
|
|
? ` LDAP: ${ldapSync.message || (ldapSync.success ? 'Synchronisiert.' : 'Nicht synchronisiert.')}`
|
|
: '';
|
|
state.success = `${baseMessage}${ldapMessage}`;
|
|
state.saving = false;
|
|
renderApp(root, state);
|
|
|
|
if (window.desktopShell?.dispatchUserSettingsUpdate) {
|
|
window.desktopShell.dispatchUserSettingsUpdate({
|
|
preferences: after,
|
|
requiresReload: payload.meta?.requires_reload || requiresReload(before, after),
|
|
});
|
|
}
|
|
|
|
return;
|
|
} catch (error) {
|
|
state.saving = false;
|
|
state.error = 'Speichern fehlgeschlagen. Die lokalen Einstellungen bleiben unveraendert.';
|
|
renderApp(root, state);
|
|
return;
|
|
}
|
|
}
|
|
});
|
|
|
|
root.addEventListener('change', (event) => {
|
|
const target = event.target;
|
|
|
|
if (!(target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)) {
|
|
return;
|
|
}
|
|
|
|
if (target.dataset.field) {
|
|
setDraftValue(state.draft, target.dataset.field, target.value);
|
|
return;
|
|
}
|
|
|
|
if (target.dataset.appId) {
|
|
state.draft.apps.enabled_ids = syncSelectionWithCheckedState(
|
|
state.draft.apps.enabled_ids,
|
|
target.dataset.appId,
|
|
target.checked
|
|
);
|
|
if (!target.checked) {
|
|
state.draft.apps.desktop_icon_ids = state.draft.apps.desktop_icon_ids.filter((appId) => appId !== target.dataset.appId);
|
|
}
|
|
renderApp(root, state);
|
|
return;
|
|
}
|
|
|
|
if (target.dataset.appDesktopIconId) {
|
|
state.draft.apps.desktop_icon_ids = syncSelectionWithCheckedState(
|
|
state.draft.apps.desktop_icon_ids,
|
|
target.dataset.appDesktopIconId,
|
|
target.checked
|
|
);
|
|
renderApp(root, state);
|
|
return;
|
|
}
|
|
|
|
if (target.dataset.trayAppId) {
|
|
state.draft.tray.active_ids = syncSelectionWithCheckedState(
|
|
state.draft.tray.active_ids,
|
|
target.dataset.trayAppId,
|
|
target.checked
|
|
);
|
|
renderApp(root, state);
|
|
return;
|
|
}
|
|
|
|
if (target.dataset.widgetId) {
|
|
state.draft.widgets.active_ids = syncSelectionWithCheckedState(
|
|
state.draft.widgets.active_ids,
|
|
target.dataset.widgetId,
|
|
target.checked
|
|
);
|
|
renderApp(root, state);
|
|
}
|
|
});
|
|
};
|
|
|
|
window.initUserSelfManagementApp = (root, options = {}) => {
|
|
if (!(root instanceof HTMLElement) || root.dataset.usmInitialized === 'true') {
|
|
return;
|
|
}
|
|
|
|
root.dataset.usmInitialized = 'true';
|
|
|
|
const state = {
|
|
loading: true,
|
|
saving: false,
|
|
error: '',
|
|
success: '',
|
|
activeSection: 'desktop',
|
|
bootstrap: null,
|
|
draft: null,
|
|
};
|
|
|
|
attachInteractions(root, state, options);
|
|
renderApp(root, state);
|
|
|
|
if (!options.apiBase) {
|
|
state.loading = false;
|
|
state.error = 'Die Setup-API ist nicht konfiguriert.';
|
|
renderApp(root, state);
|
|
return;
|
|
}
|
|
|
|
window.fetch(options.apiBase, {
|
|
headers: {
|
|
Accept: 'application/json',
|
|
},
|
|
})
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error(`load-failed:${response.status}`);
|
|
}
|
|
|
|
return response.json();
|
|
})
|
|
.then((payload) => {
|
|
state.loading = false;
|
|
state.bootstrap = payload;
|
|
state.draft = clone(payload.preferences);
|
|
renderApp(root, state);
|
|
})
|
|
.catch(() => {
|
|
state.loading = false;
|
|
state.error = 'Die Einstellungen konnten nicht geladen werden.';
|
|
renderApp(root, state);
|
|
});
|
|
};
|
|
})();
|