import { LitElement, html, nothing } from 'lit';
|
import { customElement, query, state } from 'lit/decorators.js';
|
import type { DhInput, DhSelect } from '@dh-software/dh-components';
|
import { EINSTUFUNGEN, type Einstufung, type Software } from 'bibliothek-types';
|
import { ladeKatalog, ladeUmgebung, softwareLoeschen, abgleichen, alleAbgleichen, downloadUrl, downloadMehrereUrl } from '../api-client';
|
import { gemerkterModus, setzeTheme, type ThemeModus } from '../theme';
|
import './bibliothek-zeile';
|
import './bibliothek-formular';
|
import './bibliothek-einstellungen';
|
|
function themeOptionen(aktuell: ThemeModus) {
|
// Frische Kopie je dh-select (die Komponente mutiert die Options-Objekte).
|
return [
|
{ dataId: 'system', showContent: 'System', selected: aktuell === 'system' },
|
{ dataId: 'hell', showContent: 'Hell', selected: aktuell === 'hell' },
|
{ dataId: 'dunkel', showContent: 'Dunkel', selected: aktuell === 'dunkel' },
|
];
|
}
|
|
/** Wurzel-Komponente: Katalog als kompakte, durchsuchbare Liste; Verwaltung + Abgleich nur lokal. */
|
@customElement('bibliothek-app')
|
export class BibliothekApp extends LitElement {
|
@query('#theme-select') private themeSelect?: DhSelect;
|
|
@state() private katalog: Software[] = [];
|
@state() private lokal = false;
|
@state() private ladefehler = '';
|
@state() private formularOffen = false;
|
@state() private einstellungenOffen = false;
|
@state() private zuBearbeiten?: Software;
|
@state() private suchbegriff = '';
|
@state() private beschaeftigt = false;
|
@state() private themeModus: ThemeModus = gemerkterModus();
|
@state() private aktiveEinstufung: Einstufung = 'lizenzfrei';
|
/** Ids der für den Sammel-Download angehakten Einträge — bleibt über Reiter hinweg bestehen. */
|
@state() private auswahl: ReadonlySet<number> = new Set();
|
|
// Light DOM, damit die globalen dh-components-Theme-Regeln greifen.
|
createRenderRoot() {
|
return this;
|
}
|
|
connectedCallback(): void {
|
super.connectedCallback();
|
this.datenLaden();
|
}
|
|
protected firstUpdated(): void {
|
if (this.themeSelect) {
|
(this.themeSelect as unknown as { selectOptions: ReturnType<typeof themeOptionen> }).selectOptions = themeOptionen(this.themeModus);
|
}
|
}
|
|
render() {
|
return html`
|
<div class="bibliothek-app-rahmen">
|
<header class="kopf">
|
<h1>Software-Bibliothek</h1>
|
<div class="kopf-aktionen">
|
<dh-select
|
id="theme-select"
|
class="theme-select"
|
withoutEmptyDefault
|
notSearchable
|
@changeSelectOption=${this.beiThemeWechsel}
|
></dh-select>
|
${this.lokal && !this.formularOffen && !this.einstellungenOffen
|
? html`
|
<dh-button buttonText="Alle prüfen" variant="standard" ?disabled=${this.beschaeftigt} @click=${this.allePruefen}></dh-button>
|
<dh-button buttonText="+ Neue Software" variant="filled" @click=${this.neuAnlegen}></dh-button>
|
<dh-button icon-button title="Einstellungen" variant="standard" @click=${this.einstellungenOeffnen}>
|
<span slot="img" class="fv-icon-settings"></span>
|
</dh-button>
|
`
|
: nothing}
|
</div>
|
</header>
|
${this.beschaeftigt ? html`<p class="hinweis">Bezugsquellen werden geprüft …</p>` : nothing}
|
${this.rendereProblemleiste()}
|
${this.auswahl.size > 0 && !this.formularOffen
|
? html`<div class="auswahl-leiste">
|
<dh-button icon-button variant="standard" title="Auswahl aufheben" @click=${this.auswahlAufheben}>
|
<span slot="img" class="fv-icon-close"></span>
|
</dh-button>
|
<span class="auswahl-anzahl">${this.auswahl.size} ausgewählt</span>
|
<dh-button buttonText="Herunterladen" variant="filled" @click=${this.auswahlHerunterladen}></dh-button>
|
</div>`
|
: nothing}
|
${this.ladefehler ? html`<p class="fehler">${this.ladefehler}</p>` : nothing}
|
${this.einstellungenOffen
|
? html`<bibliothek-einstellungen
|
@geschlossen=${this.einstellungenSchliessen}
|
@umzugAbgeschlossen=${this.datenLaden}
|
></bibliothek-einstellungen>`
|
: this.formularOffen
|
? html`<bibliothek-formular
|
.software=${this.zuBearbeiten}
|
.moeglicheEltern=${this.hauptEintraege()}
|
@gespeichert=${this.beiGespeichert}
|
@abgebrochen=${this.formularSchliessen}
|
></bibliothek-formular>`
|
: this.rendereKatalog()}
|
</div>
|
`;
|
}
|
|
/**
|
* Weist auf Einträge hin, deren letzter Abgleich fehlgeschlagen ist — sonst
|
* fällt ein toter Bezugslink nur auf, wenn jemand gezielt in die Liste schaut.
|
*/
|
private rendereProblemleiste() {
|
const betroffene = this.katalog.filter((software) => software.letzterAbgleich && !software.abgleichErfolg);
|
if (betroffene.length === 0) {
|
return nothing;
|
}
|
const namen = betroffene.slice(0, 3).map((software) => software.name).join(', ');
|
const weitere = betroffene.length > 3 ? ` und ${betroffene.length - 3} weitere` : '';
|
// Der Hinweis auf den erhaltenen Stand ergibt nur Sinn, wenn es überhaupt einen gibt.
|
const mitBisherigerDatei = betroffene.some((software) => software.dateiname);
|
return html`<p class="warnung">
|
<strong>${betroffene.length} Eintrag${betroffene.length === 1 ? '' : 'e'} mit Problemen beim Abgleich:</strong>
|
${namen}${weitere}.${mitBisherigerDatei ? ' Die zuletzt bereitgestellte Datei bleibt dabei erhalten.' : ''}
|
</p>`;
|
}
|
|
private rendereKatalog() {
|
if (this.katalog.length === 0) {
|
return html`<p>Noch keine Software im Katalog.</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.eintraegeMitEinstufung(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.gefilterterKatalog();
|
if (gefiltert.length === 0) {
|
return html`<p class="leer">
|
${this.suchbegriff ? html`Keine Treffer für „${this.suchbegriff}".` : 'In dieser Einstufung ist noch nichts hinterlegt.'}
|
</p>`;
|
}
|
return html`
|
${this.aktiveEinstufung === 'lizenzpflichtig'
|
? html`<p class="hinweis">Für diese Programme kommt der Lizenzschlüssel über den Support.</p>`
|
: nothing}
|
<div class="liste ${this.lokal ? 'verwaltung' : ''}">
|
${gefiltert.map(
|
(software) => html`<bibliothek-zeile
|
.software=${software}
|
.zusatzinhalte=${this.zusatzinhalteVon(software.id)}
|
.auswahl=${this.auswahl}
|
?gewaehlt=${this.auswahl.has(software.id)}
|
?lokal=${this.lokal}
|
@auswahlGeaendert=${this.beiAuswahlGeaendert}
|
@herunterladen=${this.beiHerunterladen}
|
@pruefen=${this.beiPruefen}
|
@bearbeiten=${this.beiBearbeiten}
|
@loeschen=${this.beiLoeschen}
|
></bibliothek-zeile>`
|
)}
|
</div>`;
|
}
|
|
private beiAuswahlGeaendert(ereignis: CustomEvent<{ software: Software; gewaehlt: boolean }>): void {
|
const { software, gewaehlt } = ereignis.detail;
|
const neueAuswahl = new Set(this.auswahl);
|
if (gewaehlt) {
|
neueAuswahl.add(software.id);
|
} else {
|
neueAuswahl.delete(software.id);
|
}
|
this.auswahl = neueAuswahl;
|
}
|
|
private auswahlAufheben(): void {
|
this.auswahl = new Set();
|
}
|
|
private auswahlHerunterladen(): void {
|
const angegebenerName = this.namenErfragen();
|
if (angegebenerName === null) {
|
return;
|
}
|
window.location.href = downloadMehrereUrl([...this.auswahl], angegebenerName);
|
}
|
|
/** Fragt im Netzwerk-Betrieb nach dem Namen fürs Protokoll; lokal nicht nötig. */
|
private namenErfragen(): string | undefined | null {
|
if (this.lokal) {
|
return undefined;
|
}
|
return prompt('Bitte deinen Namen angeben (wird protokolliert):');
|
}
|
|
private beiReiterWechsel(ereignis: CustomEvent<string>): void {
|
this.aktiveEinstufung = ereignis.detail as Einstufung;
|
}
|
|
/** Eigenständige Tools einer Einstufung (Grundlage für die Zähler an den Reitern). */
|
private eintraegeMitEinstufung(einstufung: Einstufung): Software[] {
|
return this.hauptEintraege().filter((software) => software.einstufung === einstufung);
|
}
|
|
/** Eigenständige Tools (ohne die Zusatzinhalte, die unter ihrem Tool erscheinen). */
|
private hauptEintraege(): Software[] {
|
return this.katalog.filter((software) => !software.elternId);
|
}
|
|
private zusatzinhalteVon(elternId: number): Software[] {
|
return this.katalog.filter((software) => software.elternId === elternId);
|
}
|
|
/** Einträge des aktiven Reiters, zusätzlich nach dem Suchbegriff gefiltert. */
|
private gefilterterKatalog(): Software[] {
|
const eintraege = this.eintraegeMitEinstufung(this.aktiveEinstufung);
|
const begriff = this.suchbegriff.trim().toLowerCase();
|
if (!begriff) {
|
return eintraege;
|
}
|
return eintraege.filter(
|
(software) => software.name.toLowerCase().includes(begriff) || software.beschreibung.toLowerCase().includes(begriff)
|
);
|
}
|
|
private beiSuche(ereignis: Event): void {
|
this.suchbegriff = (ereignis.target as DhInput).value;
|
}
|
|
private beiThemeWechsel(ereignis: CustomEvent<{ selectedOption: { dataId: string } }>): void {
|
this.themeModus = ereignis.detail.selectedOption.dataId as ThemeModus;
|
setzeTheme(this.themeModus);
|
}
|
|
public async datenLaden(): Promise<void> {
|
try {
|
const [umgebung, katalog] = await Promise.all([ladeUmgebung(), ladeKatalog()]);
|
this.lokal = umgebung.lokal;
|
this.katalog = katalog;
|
this.ladefehler = '';
|
} catch (fehler) {
|
this.ladefehler = fehler instanceof Error ? fehler.message : 'Daten konnten nicht geladen werden.';
|
}
|
}
|
|
private neuAnlegen(): void {
|
this.zuBearbeiten = undefined;
|
this.formularOffen = true;
|
}
|
|
private einstellungenOeffnen(): void {
|
this.einstellungenOffen = true;
|
}
|
|
private einstellungenSchliessen(): void {
|
this.einstellungenOffen = false;
|
}
|
|
private beiBearbeiten(ereignis: CustomEvent<Software>): void {
|
this.zuBearbeiten = ereignis.detail;
|
this.formularOffen = true;
|
}
|
|
private formularSchliessen(): void {
|
this.formularOffen = false;
|
this.zuBearbeiten = undefined;
|
}
|
|
private beiGespeichert(): void {
|
this.formularSchliessen();
|
this.datenLaden();
|
}
|
|
private beiHerunterladen(ereignis: CustomEvent<Software>): void {
|
const angegebenerName = this.namenErfragen();
|
if (angegebenerName === null) {
|
return;
|
}
|
window.location.href = downloadUrl(ereignis.detail.id, angegebenerName);
|
}
|
|
private async beiPruefen(ereignis: CustomEvent<Software>): Promise<void> {
|
await this.mitBeschaeftigt(() => abgleichen(ereignis.detail.id));
|
this.datenLaden();
|
}
|
|
private async allePruefen(): Promise<void> {
|
await this.mitBeschaeftigt(() => alleAbgleichen());
|
this.datenLaden();
|
}
|
|
private async beiLoeschen(ereignis: CustomEvent<Software>): Promise<void> {
|
const software = ereignis.detail;
|
const anzahlZusatzinhalte = this.zusatzinhalteVon(software.id).length;
|
const zusatz = anzahlZusatzinhalte > 0 ? ` Die ${anzahlZusatzinhalte} zugehörigen Zusatzinhalte werden mitgelöscht.` : '';
|
if (!confirm(`„${software.name}" wirklich löschen?${zusatz}`)) {
|
return;
|
}
|
try {
|
await softwareLoeschen(software.id);
|
this.datenLaden();
|
} catch (fehler) {
|
this.ladefehler = fehler instanceof Error ? fehler.message : 'Löschen fehlgeschlagen.';
|
}
|
}
|
|
private async mitBeschaeftigt(aktion: () => Promise<unknown>): Promise<void> {
|
this.beschaeftigt = true;
|
this.ladefehler = '';
|
try {
|
await aktion();
|
} catch (fehler) {
|
this.ladefehler = fehler instanceof Error ? fehler.message : 'Abgleich fehlgeschlagen.';
|
} finally {
|
this.beschaeftigt = false;
|
}
|
}
|
}
|
|
declare global {
|
interface HTMLElementTagNameMap {
|
'bibliothek-app': BibliothekApp;
|
}
|
}
|
