44 lines
3.5 KiB
JavaScript
44 lines
3.5 KiB
JavaScript
// Mehr: Konto, Team, Einstellungen, Weboberfläche, Abmelden.
|
|
import { h, clear, icon, toast, errText } from '../lib/dom.js';
|
|
import { apiCall, getSettings, setSettings, openWeb, AVAILABILITY } from '../lib/core.js';
|
|
import { spinner, segmented, avatar } from '../lib/ui.js';
|
|
|
|
const toggle = (label, hint, checked, onChange) => h('label', { class: 'listrow', style: { fontWeight: 500 } },
|
|
h('span', { class: 'grow' }, h('div', {}, label), hint ? h('div', { class: 'muted' }, hint) : null),
|
|
h('span', { class: 'switch' }, h('input', { type: 'checkbox', checked, onchange: (ev) => onChange(ev.target.checked) })));
|
|
|
|
export async function renderMore(host, ctx) {
|
|
const settings = await getSettings();
|
|
const s = ctx.session.staff || {};
|
|
const save = async (patch) => { Object.assign(settings, patch); await setSettings(settings); ctx.applyTheme(settings.theme); };
|
|
const team = h('div', {}, spinner());
|
|
|
|
host.append(h('div', { class: 'stack' },
|
|
h('div', { class: 'card', style: { display: 'flex', gap: '12px', alignItems: 'center' } }, avatar(s.name), h('div', { class: 'grow' }, h('div', { style: { fontWeight: 700 } }, s.name), h('div', { class: 'muted' }, `${s.email || ''} · ${s.role === 'admin' ? 'Administrator' : 'Mitarbeiter'}`), h('div', { class: 'muted' }, new URL(ctx.session.serverUrl).host))),
|
|
|
|
h('div', { class: 'card' }, h('h2', {}, 'Benachrichtigungen'),
|
|
toggle('Meldungen anzeigen', 'Chrome-Benachrichtigung bei Neuem', settings.notifications, (v) => save({ notifications: v })),
|
|
toggle('Neue, nicht zugewiesene Tickets', null, settings.notifyUnassigned, (v) => save({ notifyUnassigned: v })),
|
|
toggle('Aktualisierungen bei meinen Tickets', null, settings.notifyMine, (v) => save({ notifyMine: v }))),
|
|
|
|
h('div', { class: 'card' }, h('h2', {}, 'Darstellung'),
|
|
segmented([['auto', 'Automatisch'], ['light', 'Hell'], ['dark', 'Dunkel']], settings.theme, async (v) => { await save({ theme: v }); clear(host); renderMore(host, ctx); })),
|
|
|
|
h('div', { class: 'card' }, h('h2', {}, 'Fenster'),
|
|
h('div', { class: 'actions' },
|
|
!ctx.isPanel ? h('button', { class: 'btn', onclick: ctx.openPanel }, icon('panel', 15), 'Seitenleiste') : null,
|
|
!ctx.isWindow ? h('button', { class: 'btn', onclick: ctx.openWindow }, icon('external', 15), 'Eigenes Fenster') : null,
|
|
h('button', { class: 'btn', onclick: () => openWeb('/staff/dashboard.php').catch((e) => toast(errText(e), 'err')) }, icon('home', 15), 'Weboberfläche')),
|
|
h('div', { class: 'muted', style: { marginTop: '8px' } }, 'Tastenkürzel: Alt+Shift+N neues Ticket, Alt+Shift+D Seitenleiste. In der Adressleiste: „dh“ + Leertaste + Ticketnummer oder Suchbegriff.')),
|
|
|
|
h('div', { class: 'card' }, h('h2', {}, 'Team'), team),
|
|
h('button', { class: 'btn danger', onclick: async () => { await ctx.logout(); } }, icon('logout', 15), 'Abmelden'),
|
|
h('div', { class: 'muted', style: { textAlign: 'center' } }, `DeskHub-Erweiterung ${chrome.runtime.getManifest().version}`)));
|
|
|
|
try {
|
|
const { data } = await apiCall('availability.php');
|
|
clear(team).append(...(data.team || []).map((m) => h('div', { class: 'listrow' }, h('span', { class: `statusdot ${m.status}`, style: { boxShadow: 'none' } }), h('span', { class: 'grow' }, m.name, m.note ? h('span', { class: 'muted' }, ` · ${m.note}`) : null), h('span', { class: 'muted' }, AVAILABILITY[m.status] || m.status))));
|
|
if (!data.team?.length) clear(team).append(h('div', { class: 'muted' }, 'Keine Daten.'));
|
|
} catch { clear(team).append(h('div', { class: 'muted' }, 'Team konnte nicht geladen werden.')); }
|
|
}
|