Single-Page-Webanwendung (SPA): TWKrankenhaus App mit TypeScript, React und Patternfly

Ziel ist es eine Beispiel SPA TWKrankenhaus zu implementiern die TypeScript, React mit Patternfly nutzt. So das man ein Template für weitere Apps hat.

Entweder man clont das ganze Projekt wie unten beschrieben oder man folgt allen Schritte. So soll es mal mit Mock-Test-Daten aussehen:

1. In einem leern Verzeichnis, ein TypeScript Projekt mit Template anlegen: …

Jetzt ist das Projekt schon lauffähig, man kann es starten mit:
cd twkrankenhaus
npm start

es öffnet sich ein Browser unter http://localhost:3000/ und die Anwendung läuft:

oder für die Produktion bauen mit npm run build

2. nun nicht verwendet Dateien löschen und Referenzen anpassen

Es wird jetzt eine Seite mit TWKrankenhaus angezeigt.

3. Json Testdaten krhs.json in das src Verzeichnis hinzufügen. Kann wie hier beschrieben erzeugt werden oder aus dem Gitlab Projekt kopiert werden.

4. Patternfly hinzufügen

5. CSS Style ergänzen in App.css, damit die Suchzeile etwas blau ist

6. und die App.tsx wie folgt anpassen:

Funktion für die unterschiedlichen Icons, je nach Krankenhaus:

Zuerst die Suchzeile als Input-Feld definieren und dann je nach eingabe im Namen und den Suchbegriffen suchen und alles als eine Gallery anzeigen. Der Titel kann auch über die ClipboardCopy Klasse in das Clipboard kopiert werden. Die Internet Adresse des Krankenhaus wird als Link eingefügt:

Nach einem npm run start, läuf es wie gewünscht (siehe Tag v.0.0.3 im Git-Repo):

7. Patternfly CSS erg. und index.html angepasst damit es etwas schöner aussieht.

Das Ergebnis (siehe Tag v0.0.4):

Das ganze Projekt, kann auch mit

lokal geladen und gestartet werden.