import { LitElement, html, nothing } from 'lit';
|
import { customElement, property } from 'lit/decorators.js';
|
import { event, type EventRef } from '@dh-software/lit-extensions';
|
import type { EintragMitBefund, LokalerZustand } from '../bruecke';
|
|
/** Was der jeweilige Zustand für den Nutzer bedeutet. */
|
const ZUSTAND_TEXT: Record<LokalerZustand, string> = {
|
fehlt: 'nicht auf diesem Rechner',
|
aktuell: 'aktuell',
|
veraltet: 'veraltet',
|
fremd: 'von Hand verändert',
|
};
|
|
const ZUSTAND_KLASSE: Record<LokalerZustand, string> = {
|
fehlt: 'zustand-fehlt',
|
aktuell: 'zustand-aktuell',
|
veraltet: 'zustand-veraltet',
|
fremd: 'zustand-fremd',
|
};
|
|
/**
|
* Eine Zeile des Katalogs im Client. Anders als in der Weboberfläche steht hier,
|
* was auf diesem Rechner liegt — das ist der ganze Unterschied.
|
*/
|
@customElement('client-zeile')
|
export class ClientZeile extends LitElement {
|
@property({ attribute: false }) eintrag!: EintragMitBefund;
|
@property({ type: Boolean }) laeuft = false;
|
|
@event({ bubbles: true, composed: true }, 'holen')
|
private holen!: EventRef<EintragMitBefund>;
|
|
@event({ bubbles: true, composed: true }, 'verknuepfen')
|
private verknuepfen!: EventRef<EintragMitBefund>;
|
|
// Light DOM, damit das globale dh-components-Theme greift.
|
createRenderRoot() {
|
return this;
|
}
|
|
render() {
|
const eintrag = this.eintrag;
|
return html`
|
<div class="zeile">
|
<div class="zeile-info">
|
<span class="zeile-name">
|
${eintrag.name}
|
${eintrag.einstufung === 'lizenzpflichtig'
|
? html`<span class="marke lizenz-marke">lizenzpflichtig</span>`
|
: nothing}
|
${eintrag.einstufung === 'intern' ? html`<span class="marke intern-marke">intern</span>` : nothing}
|
</span>
|
<span class="zeile-meta">${this.rendereStand()}${this.rendereZustand()}</span>
|
${eintrag.hinweis ? html`<span class="zeile-hinweis">${eintrag.hinweis}</span>` : nothing}
|
</div>
|
<div class="zeile-aktionen">${this.rendereAktion()}${this.rendereVerknuepfung()}</div>
|
</div>
|
`;
|
}
|
|
private rendereStand() {
|
const zeitpunkt = this.eintrag.veroeffentlichtAm || this.eintrag.dateiStandVom;
|
if (!zeitpunkt) {
|
return nothing;
|
}
|
const datum = new Date(zeitpunkt);
|
if (Number.isNaN(datum.getTime())) {
|
return nothing;
|
}
|
return html`Stand ${datum.toLocaleDateString('de-DE')}`;
|
}
|
|
/** Nur bei eigenständigen Programmen aussagekräftig — Installer verraten hier nichts. */
|
private rendereZustand() {
|
const befund = this.eintrag.lokal;
|
if (!befund) {
|
return nothing;
|
}
|
return html` ·
|
<span class=${ZUSTAND_KLASSE[befund.zustand]}>${ZUSTAND_TEXT[befund.zustand]}</span>`;
|
}
|
|
/**
|
* Ein rundes Symbol wie in der Weboberfläche. Was der Klick bewirkt, steht
|
* ohnehin schon als Zustand in der Zeile — die Beschriftung wäre eine
|
* Wiederholung. Steht ein Update an, ist der Knopf gefüllt statt flach.
|
*/
|
private rendereAktion() {
|
const eintrag = this.eintrag;
|
if (!eintrag.dateiname) {
|
return html`<span class="zeile-hinweis">keine Datei hinterlegt</span>`;
|
}
|
const zustand = eintrag.lokal?.zustand;
|
const stehtAn = zustand === 'veraltet' || zustand === 'fremd';
|
const zweck = stehtAn ? 'aktualisieren' : zustand === 'aktuell' ? 'erneut holen' : 'holen';
|
return html`<dh-button
|
icon-button
|
variant=${stehtAn ? 'filled' : 'standard'}
|
title=${`${eintrag.name} ${zweck}`}
|
?disabled=${this.laeuft}
|
@click=${this.beiHolen}
|
>
|
<span slot="img" class="fv-icon-download"></span>
|
</dh-button>`;
|
}
|
|
private rendereVerknuepfung() {
|
const befund = this.eintrag.lokal;
|
if (!befund || befund.zustand === 'fehlt') {
|
return nothing;
|
}
|
return html`<dh-button
|
icon-button
|
variant="standard"
|
title="Verknüpfung auf dem Desktop anlegen"
|
@click=${this.beiVerknuepfen}
|
>
|
<span slot="img" class="fv-icon-link"></span>
|
</dh-button>`;
|
}
|
|
private beiHolen(): void {
|
this.holen.dispatch(this.eintrag);
|
}
|
|
private beiVerknuepfen(): void {
|
this.verknuepfen.dispatch(this.eintrag);
|
}
|
}
|
|
declare global {
|
interface HTMLElementTagNameMap {
|
'client-zeile': ClientZeile;
|
}
|
}
|
