import { LitElement, html, nothing } from 'lit';
|
import { customElement, state } from 'lit/decorators.js';
|
import { EINSTUFUNGEN, type Einstufung } from 'bibliothek-types';
|
import { bruecke, type EintragMitBefund, type Einstellungen } from '../bruecke';
|
import { gemerkterModus, setzeTheme, type ThemeModus } from '../theme';
|
import './client-zeile';
|
|
interface Auswahloption {
|
dataId: string;
|
showContent: string;
|
selected?: boolean;
|
}
|
|
const THEME_OPTIONEN: Array<{ id: ThemeModus; text: string }> = [
|
{ id: 'system', text: 'System' },
|
{ id: 'hell', text: 'Hell' },
|
{ id: 'dunkel', text: 'Dunkel' },
|
];
|
|
/** Wurzel-Komponente des Clients. */
|
@customElement('client-app')
|
export class ClientApp extends LitElement {
|
@state() private eintraege: EintragMitBefund[] = [];
|
@state() private aktiveEinstufung: Einstufung = 'lizenzfrei';
|
@state() private suchbegriff = '';
|
@state() private ladefehler = '';
|
@state() private meldung = '';
|
@state() private laeuftFuer = 0;
|
@state() private einstellungenOffen = false;
|
@state() private einstellungen?: Einstellungen;
|
@state() private serverAdresse = '';
|
@state() private werkzeugOrdner = '';
|
@state() private themeOptionen: Auswahloption[] = [];
|
|
// Light DOM, damit das globale dh-components-Theme greift.
|
createRenderRoot() {
|
return this;
|
}
|
|
connectedCallback(): void {
|
super.connectedCallback();
|
const modus = gemerkterModus();
|
this.themeOptionen = THEME_OPTIONEN.map((eintrag) => ({
|
dataId: eintrag.id,
|
showContent: eintrag.text,
|
selected: eintrag.id === modus,
|
}));
|
void this.alesLaden();
|
}
|
|
render() {
|
return html`
|
<div class="rahmen">
|
<header class="kopf">
|
<h1>Software-Bibliothek</h1>
|
<div class="kopf-aktionen">
|
<dh-select
|
class="theme-select"
|
withoutEmptyDefault
|
notSearchable
|
.selectOptions=${this.themeOptionen}
|
@changeSelectOption=${this.beiTheme}
|
></dh-select>
|
<dh-button icon-button variant="standard" title="Werkzeug-Ordner öffnen" @click=${this.beiOrdnerOeffnen}>
|
<span slot="img" class="fv-icon-folder"></span>
|
</dh-button>
|
<dh-button icon-button variant="standard" title="Einstellungen" @click=${this.beiEinstellungenOeffnen}>
|
<span slot="img" class="fv-icon-settings"></span>
|
</dh-button>
|
</div>
|
</header>
|
|
${this.ladefehler ? html`<p class="warnung">${this.ladefehler}</p>` : nothing}
|
${this.meldung ? html`<p class="hinweis">${this.meldung}</p>` : nothing}
|
${this.rendereUpdateHinweis()}
|
${this.einstellungenOffen ? this.rendereEinstellungen() : this.rendereKatalog()}
|
</div>
|
`;
|
}
|
|
// --- Teilansichten ---
|
|
/** Der Grund, warum es diesen Client gibt: ungefragt sagen, was veraltet ist. */
|
private rendereUpdateHinweis() {
|
const veraltet = this.eintraege.filter(
|
(eintrag) => eintrag.ueberwacht && (eintrag.lokal?.zustand === 'veraltet' || eintrag.lokal?.zustand === 'fremd')
|
);
|
if (veraltet.length === 0) {
|
return nothing;
|
}
|
return html`<p class="update-hinweis">
|
${veraltet.length === 1 ? 'Ein Werkzeug ist nicht auf dem neuesten Stand' : `${veraltet.length} Werkzeuge sind nicht auf dem neuesten Stand`}:
|
${veraltet.map((eintrag) => eintrag.name).join(', ')}.
|
</p>`;
|
}
|
|
private rendereKatalog() {
|
if (this.eintraege.length === 0) {
|
return html`<p class="leer">${this.ladefehler ? '' : 'Katalog wird geladen …'}</p>`;
|
}
|
return html`
|
<dh-input class="suche" type="text" placeholder="Suchen" .value=${this.suchbegriff} @input=${this.beiSuche}></dh-input>
|
<dh-tab stretch @clickTab=${this.beiReiterWechsel}>
|
${EINSTUFUNGEN.map(
|
(eintrag) => html`<div
|
slot="tab-head"
|
content=${eintrag.id}
|
class=${eintrag.id === this.aktiveEinstufung ? 'selected' : ''}
|
>
|
${eintrag.text} (${this.mitEinstufung(eintrag.id).length})
|
</div>`
|
)}
|
${EINSTUFUNGEN.map(
|
(eintrag) => html`<div
|
slot="tab-content"
|
tab=${eintrag.id}
|
class=${eintrag.id === this.aktiveEinstufung ? '' : 'hidden'}
|
>
|
${eintrag.id === this.aktiveEinstufung ? this.rendereListe() : nothing}
|
</div>`
|
)}
|
</dh-tab>
|
`;
|
}
|
|
private rendereListe() {
|
const gefiltert = this.gefiltert();
|
if (gefiltert.length === 0) {
|
return html`<p class="leer">
|
${this.suchbegriff ? html`Keine Treffer für „${this.suchbegriff}".` : 'In dieser Einstufung ist nichts hinterlegt.'}
|
</p>`;
|
}
|
return html`<div class="liste">
|
${gefiltert.map(
|
(eintrag) => html`<client-zeile
|
.eintrag=${eintrag}
|
?laeuft=${this.laeuftFuer === eintrag.id}
|
@holen=${this.beiHolen}
|
@verknuepfen=${this.beiVerknuepfen}
|
></client-zeile>`
|
)}
|
</div>`;
|
}
|
|
private rendereEinstellungen() {
|
return html`
|
<dh-card variant="outlined" no-hover-effect no-click-effect>
|
<span slot="header">Einstellungen</span>
|
<dh-form-grid slot="content">
|
<dh-form-field label="Adresse der Bibliothek">
|
<dh-input type="text" .value=${this.serverAdresse} @input=${this.beiServerAdresse}></dh-input>
|
<span class="feldhinweis">
|
Rechnername statt IP-Adresse ist die bessere Wahl — er überlebt einen Wechsel der Adresse.
|
</span>
|
</dh-form-field>
|
<dh-form-field label="Werkzeug-Ordner">
|
<dh-input type="text" .value=${this.werkzeugOrdner} @input=${this.beiWerkzeugOrdner}></dh-input>
|
<span class="feldhinweis">
|
Hierhin kommen eigenständige Programme; Installationsprogramme in den Unterordner
|
„Installationsprogramme".
|
</span>
|
</dh-form-field>
|
</dh-form-grid>
|
<div slot="actions">
|
<dh-button buttonText="Speichern" variant="filled" @click=${this.beiEinstellungenSpeichern}></dh-button>
|
<dh-button buttonText="Abbrechen" variant="standard" @click=${this.beiEinstellungenSchliessen}></dh-button>
|
</div>
|
</dh-card>
|
`;
|
}
|
|
// --- Daten ---
|
|
private async alesLaden(): Promise<void> {
|
const api = await bruecke();
|
const stand = await api.einstellungen();
|
this.einstellungen = stand.einstellungen;
|
this.serverAdresse = stand.einstellungen.serverAdresse;
|
this.werkzeugOrdner = stand.einstellungen.werkzeugOrdner;
|
await this.katalogLaden();
|
}
|
|
private async katalogLaden(): Promise<void> {
|
const api = await bruecke();
|
const antwort = await api.katalog();
|
if (!antwort.ok) {
|
this.ladefehler = `${antwort.meldung} — Adresse in den Einstellungen prüfen.`;
|
this.eintraege = [];
|
return;
|
}
|
this.ladefehler = '';
|
this.eintraege = antwort.eintraege;
|
}
|
|
private mitEinstufung(einstufung: Einstufung): EintragMitBefund[] {
|
return this.eintraege.filter((eintrag) => eintrag.einstufung === einstufung && !eintrag.elternId);
|
}
|
|
private gefiltert(): EintragMitBefund[] {
|
const suche = this.suchbegriff.trim().toLowerCase();
|
const inDerEinstufung = this.mitEinstufung(this.aktiveEinstufung);
|
if (!suche) {
|
return inDerEinstufung;
|
}
|
return inDerEinstufung.filter(
|
(eintrag) =>
|
eintrag.name.toLowerCase().includes(suche) || eintrag.beschreibung.toLowerCase().includes(suche)
|
);
|
}
|
|
// --- Ereignisse ---
|
|
private beiTheme(ereignis: CustomEvent<{ selectedOption: { dataId: string } }>): void {
|
setzeTheme(ereignis.detail.selectedOption.dataId as ThemeModus);
|
}
|
|
private beiSuche(ereignis: CustomEvent<string>): void {
|
this.suchbegriff = ereignis.detail;
|
}
|
|
/** dh-tab liefert die Kennung des Reiters unmittelbar als `detail`. */
|
private beiReiterWechsel(ereignis: CustomEvent<string>): void {
|
this.aktiveEinstufung = ereignis.detail as Einstufung;
|
}
|
|
private async beiHolen(ereignis: CustomEvent<EintragMitBefund>): Promise<void> {
|
const eintrag = ereignis.detail;
|
this.laeuftFuer = eintrag.id;
|
this.meldung = `${eintrag.name} wird geholt …`;
|
const api = await bruecke();
|
const ergebnis = await api.herunterladen(eintrag.id, eintrag.dateiname, eintrag.version, eintrag.programmart);
|
this.meldung = ergebnis.meldung;
|
this.laeuftFuer = 0;
|
await this.katalogLaden();
|
}
|
|
private async beiVerknuepfen(ereignis: CustomEvent<EintragMitBefund>): Promise<void> {
|
const eintrag = ereignis.detail;
|
if (!eintrag.lokal?.pfad) {
|
return;
|
}
|
const api = await bruecke();
|
const ergebnis = await api.verknuepfung_anlegen(eintrag.lokal.pfad, eintrag.name);
|
this.meldung = ergebnis.meldung ?? '';
|
}
|
|
private async beiOrdnerOeffnen(): Promise<void> {
|
const api = await bruecke();
|
await api.ordner_oeffnen();
|
}
|
|
private beiEinstellungenOeffnen(): void {
|
this.serverAdresse = this.einstellungen?.serverAdresse ?? '';
|
this.werkzeugOrdner = this.einstellungen?.werkzeugOrdner ?? '';
|
this.einstellungenOffen = true;
|
}
|
|
private beiEinstellungenSchliessen(): void {
|
this.einstellungenOffen = false;
|
}
|
|
private beiServerAdresse(ereignis: CustomEvent<string>): void {
|
this.serverAdresse = ereignis.detail;
|
}
|
|
private beiWerkzeugOrdner(ereignis: CustomEvent<string>): void {
|
this.werkzeugOrdner = ereignis.detail;
|
}
|
|
private async beiEinstellungenSpeichern(): Promise<void> {
|
const api = await bruecke();
|
const ergebnis = await api.einstellungen_speichern(this.serverAdresse, this.werkzeugOrdner);
|
this.einstellungen = ergebnis.einstellungen;
|
this.einstellungenOffen = false;
|
this.meldung = 'Einstellungen gespeichert.';
|
await this.katalogLaden();
|
}
|
}
|
|
declare global {
|
interface HTMLElementTagNameMap {
|
'client-app': ClientApp;
|
}
|
}
|
