Self management
This commit is contained in:
449
public/assets/apps/user-self-management/app.js
Normal file
449
public/assets/apps/user-self-management/app.js
Normal file
@@ -0,0 +1,449 @@
|
||||
(() => {
|
||||
const SECTIONS = [
|
||||
{ id: 'desktop', label: 'Desktop Type' },
|
||||
{ id: 'profile', label: 'Benutzerdaten' },
|
||||
{ id: 'apps', label: 'App-Installation' },
|
||||
{ id: 'widgets', label: 'Widget-Installation' },
|
||||
];
|
||||
|
||||
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 'Bestimmt, welche Desktop-Apps fuer diesen Benutzer sichtbar bleiben.';
|
||||
}
|
||||
|
||||
return 'Steuert, welche Widgets in der rechten Leiste des Desktops aktiv sind.';
|
||||
};
|
||||
|
||||
const renderSkinChoices = (state) => state.bootstrap.options.skins.map((skin) => {
|
||||
const isActive = state.draft.desktop.active_skin === skin.skin_id;
|
||||
|
||||
return `
|
||||
<button
|
||||
class="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);
|
||||
|
||||
return `
|
||||
<label class="usm-item">
|
||||
<input
|
||||
type="checkbox"
|
||||
data-action="toggle-app"
|
||||
data-app-id="${escapeHtml(app.app_id)}"
|
||||
${checked ? 'checked' : ''}
|
||||
${app.required ? 'disabled' : ''}
|
||||
>
|
||||
<span class="usm-item-main">
|
||||
<strong>${escapeHtml(app.title)}</strong>
|
||||
<p>${escapeHtml(app.summary || '')}</p>
|
||||
<span class="usm-item-meta">${app.required ? 'Pflicht-App' : 'Optional sichtbar'}</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="usm-item">
|
||||
<input
|
||||
type="checkbox"
|
||||
data-action="toggle-widget"
|
||||
data-widget-id="${escapeHtml(widget.widget_id)}"
|
||||
${checked ? 'checked' : ''}
|
||||
>
|
||||
<span class="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="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="usm-field">
|
||||
<label class="usm-label" for="usm-notes">Notizen</label>
|
||||
<textarea id="usm-notes" class="usm-textarea" data-field="profile.notes">${escapeHtml(state.draft.profile.notes || '')}</textarea>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const renderField = (fieldId, label, value, type = 'text') => `
|
||||
<div class="usm-field">
|
||||
<label class="usm-label" for="usm-${escapeHtml(fieldId)}">${escapeHtml(label)}</label>
|
||||
<input
|
||||
id="usm-${escapeHtml(fieldId)}"
|
||||
class="usm-input"
|
||||
type="${escapeHtml(type)}"
|
||||
data-field="profile.${escapeHtml(fieldId)}"
|
||||
value="${escapeHtml(value || '')}"
|
||||
>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const sectionContent = (state) => {
|
||||
if (state.activeSection === 'desktop') {
|
||||
return `
|
||||
<section class="usm-card">
|
||||
<p class="usm-kicker">Desktop Type</p>
|
||||
<h2>Skin-Auswahl</h2>
|
||||
<p class="usm-copy">Die direkte Skin-Umschaltung liegt jetzt im Setup. Die Auswahl wird pro Benutzer gespeichert.</p>
|
||||
<div class="usm-choice-grid">
|
||||
${renderSkinChoices(state)}
|
||||
</div>
|
||||
</section>
|
||||
`;
|
||||
}
|
||||
|
||||
if (state.activeSection === 'profile') {
|
||||
return `
|
||||
<section class="usm-card">
|
||||
<p class="usm-kicker">Benutzerdaten</p>
|
||||
<h2>Persoenliches Profil</h2>
|
||||
<p class="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="usm-card">
|
||||
<p class="usm-kicker">App-Auswahl</p>
|
||||
<h2>Sichtbare Desktop-Apps</h2>
|
||||
<p class="usm-copy">Aenderungen an der App-Auswahl werden nach dem Speichern mit einem Desktop-Reload sauber uebernommen.</p>
|
||||
<div class="usm-list">
|
||||
${renderAppItems(state)}
|
||||
</div>
|
||||
</section>
|
||||
`;
|
||||
}
|
||||
|
||||
return `
|
||||
<section class="usm-card">
|
||||
<p class="usm-kicker">Widget-Auswahl</p>
|
||||
<h2>Aktive Widget-Leiste</h2>
|
||||
<p class="usm-copy">Widgets bleiben Teil der Desktop-Mechanik und werden hier nur benutzerbezogen ein- oder ausgeblendet.</p>
|
||||
<div class="usm-list">
|
||||
${renderWidgetItems(state)}
|
||||
</div>
|
||||
</section>
|
||||
`;
|
||||
};
|
||||
|
||||
const renderApp = (root, state) => {
|
||||
if (state.loading) {
|
||||
root.innerHTML = '<div class="usm-loading"><p class="usm-copy">Einstellungen werden geladen.</p></div>';
|
||||
return;
|
||||
}
|
||||
|
||||
if (state.error && !state.bootstrap) {
|
||||
root.innerHTML = `<div class="usm-error-state"><p class="usm-message is-error">${escapeHtml(state.error)}</p></div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
root.innerHTML = `
|
||||
<div class="usm-shell">
|
||||
<div class="usm-frame">
|
||||
<aside class="usm-nav">
|
||||
<div class="usm-brand">
|
||||
<p class="usm-kicker">Setup</p>
|
||||
<h1>User Self Management</h1>
|
||||
<p>Ein gemeinsamer Setup-Bereich fuer Desktop-Typ, Benutzerdaten, Apps und Widgets.</p>
|
||||
</div>
|
||||
<div class="usm-nav-list">
|
||||
${SECTIONS.map((section) => `
|
||||
<button
|
||||
class="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="usm-meta">${escapeHtml(summarizeSection(section.id))}</span>
|
||||
</button>
|
||||
`).join('')}
|
||||
</div>
|
||||
</aside>
|
||||
<main class="usm-main">
|
||||
<div class="usm-panel">
|
||||
<section class="usm-hero">
|
||||
<div>
|
||||
<p class="usm-kicker">Desktop Setup</p>
|
||||
<h2 class="usm-title">${escapeHtml(sectionTitle(state.activeSection))}</h2>
|
||||
<p class="usm-copy">${escapeHtml(summarizeSection(state.activeSection))}</p>
|
||||
</div>
|
||||
<div class="usm-pill-row">
|
||||
<span class="usm-pill">LDAP: geplant</span>
|
||||
<span class="usm-pill">Keycloak: geplant</span>
|
||||
<span class="usm-pill">Scope: ${escapeHtml(state.bootstrap.meta.storage_scope || 'guest')}</span>
|
||||
</div>
|
||||
</section>
|
||||
${sectionContent(state)}
|
||||
<section class="usm-actions">
|
||||
<div>
|
||||
<p class="usm-note">Skin- und App-Aenderungen koennen einen Reload ausloesen, damit Fenster, Icons und Menue sauber synchron bleiben.</p>
|
||||
<p class="usm-message${state.error ? ' is-error' : state.success ? ' is-success' : ''}">${escapeHtml(state.error || state.success || '')}</p>
|
||||
</div>
|
||||
<button class="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 buildPatch = (state) => ({
|
||||
profile: state.draft.profile,
|
||||
desktop: {
|
||||
active_skin: state.draft.desktop.active_skin,
|
||||
},
|
||||
apps: {
|
||||
enabled_ids: state.draft.apps.enabled_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);
|
||||
|
||||
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;
|
||||
state.bootstrap = payload;
|
||||
state.draft = clone(after);
|
||||
state.success = payload.meta?.requires_reload
|
||||
? 'Gespeichert. Desktop wird fuer Skin- oder App-Aenderungen neu geladen.'
|
||||
: 'Einstellungen wurden gespeichert.';
|
||||
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 = toggleSelection(state.draft.apps.enabled_ids, target.dataset.appId);
|
||||
renderApp(root, state);
|
||||
return;
|
||||
}
|
||||
|
||||
if (target.dataset.widgetId) {
|
||||
state.draft.widgets.active_ids = toggleSelection(state.draft.widgets.active_ids, target.dataset.widgetId);
|
||||
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);
|
||||
});
|
||||
};
|
||||
})();
|
||||
Reference in New Issue
Block a user