{"id":19060,"date":"2022-01-30T04:40:11","date_gmt":"2022-01-30T03:40:11","guid":{"rendered":"http:\/\/blog.wenzlaff.de\/?p=19060"},"modified":"2023-08-20T14:55:19","modified_gmt":"2023-08-20T12:55:19","slug":"single-page-webanwendung-spa-twkrankenhaus-app-mit-typescript-react-und-patternfly","status":"publish","type":"post","link":"http:\/\/blog.wenzlaff.de\/?p=19060","title":{"rendered":"Single-Page-Webanwendung (SPA): TWKrankenhaus App mit TypeScript, React und Patternfly"},"content":{"rendered":"

Ziel ist es eine Beispiel SPA<\/a> TWKrankenhaus zu implementiern die TypeScript<\/a>, React<\/a> mit Patternfly<\/a> nutzt. So das man ein Template f\u00fcr weitere Apps hat. <\/p>\n

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

\"\"<\/p>\n

1. In einem leern Verzeichnis, ein TypeScript Projekt mit Template anlegen: …<\/p>\n

\r\nnpx create-react-app twkrankenhaus --template typescript<\/pre>\n
Jetzt ist das Projekt schon lauff\u00e4hig, man kann es starten mit:
\ncd twkrankenhaus <\/strong>
\nnpm start<\/strong><\/p>\n
es \u00f6ffnet sich ein Browser unter http:\/\/localhost:3000\/<\/strong> und die Anwendung l\u00e4uft:<\/p>\n
\"\"<\/p>\n
oder f\u00fcr die Produktion bauen mit npm run build<\/strong><\/p>\n
2. nun nicht verwendet Dateien l\u00f6schen und Referenzen anpassen<\/p>\n
rm public\/favicon.ico public\/logo192.png public\/logo512.png public\/robots.txt public\/manifest.json src\/logo.svg src\/App.test.tsx src\/reportWebVitals.ts src\/setupTests.ts src\/react-app-env.d.ts<\/pre>\n
Es wird jetzt eine Seite mit TWKrankenhaus angezeigt.<\/p>\n
3. Json Testdaten krhs.json<\/strong> in das src<\/strong> Verzeichnis hinzuf\u00fcgen. Kann wie hier<\/a> beschrieben erzeugt werden oder aus dem Gitlab Projekt<\/a> kopiert werden.<\/p>\n
4. Patternfly hinzuf\u00fcgen<\/p>\n
\r\nnpm install @patternfly\/react-core --save\r\nnpm install @patternfly\/patternfly --save<\/pre>\n
5. CSS Style erg\u00e4nzen in App.css<\/strong>, damit die Suchzeile etwas blau ist<\/p>\n
.sucheleiste {\r\n  background: linear-gradient(to bottom, #5e1dec, #0298d5);\r\n  min-height: 10px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: calc(10px + 2vmin);\r\n  color: white;\r\n}\r\n<\/pre>\n
6. und die App.tsx<\/strong> wie folgt anpassen:<\/p>\n
Funktion f\u00fcr die unterschiedlichen Icons, je nach Krankenhaus:<\/p>\n
function isKooperativ(wert:boolean){\r\n  if (wert){ \r\n    return <CheckCircleIcon color=\"var(--pf-global--success-color--100)\" \/>\r\n  }else{\r\n    return <TimesCircleIcon color=\"var(--pf-global--danger-color--100)\" \/>\r\n  }\r\n}<\/pre>\n
Zuerst die Suchzeile als Input-Feld definieren und dann je nach eingabe im Namen und den Suchbegriffen suchen und alles als eine Gallery<\/a> anzeigen. Der Titel kann auch \u00fcber die ClipboardCopy Klasse in das Clipboard kopiert werden. Die Internet Adresse des Krankenhaus wird als Link eingef\u00fcgt:<\/p>\n
export default function App() {\r\n  const [query, setQuery] = useState(\"\");\r\n  return (\r\n    <>\r\n      <div className=\"sucheleiste\">\r\n      <p>Krankenhaus Suche<\/p>\r\n      <input\r\n        placeholder=\"Suchbegriff eingeben\"\r\n        onChange={(event) => setQuery(event.target.value)}\r\n      \/>\r\n      <\/div>\r\n     <Gallery>\r\n        {Data.filter((post) => {\r\n          if (query === \"\") {\r\n            return post;\r\n          } else if (post.krhsName.toLowerCase().includes(query.toLowerCase()) || post.krhsSuchbegriffe.toLowerCase().includes(query.toLowerCase()) ) {\r\n            return post;\r\n          }\r\n        }).map((post, index) => (\r\n          <div key={index}>\r\n            <Card>\r\n              <CardTitle>{post.krhsId}. {<ClipboardCopy hoverTip=\"Kopieren\" clickTip=\"Kopiert\" variant=\"inline-compact\">{post.krhsName}<\/ClipboardCopy>}<\/CardTitle>\r\n              <CardBody>\r\n                <DescriptionList>\r\n                  <DescriptionListGroup>  \r\n                   <DescriptionListTerm>\r\n                    <Flex flexWrap={{ default: 'nowrap' }}>\r\n                      <FlexItem>                       \r\n                        {isKooperativ(post.krhsKooperativ)} {post.krhsFachgebiete}\r\n                      <\/FlexItem>\r\n                    <\/Flex>\r\n                    <\/DescriptionListTerm>\r\n                  <\/DescriptionListGroup>  \r\n                  <Divider \/>\r\n                  <DescriptionListGroup>               \r\n                    <DescriptionListTerm>{post.krhsStr}<\/DescriptionListTerm>\r\n                    <DescriptionListTerm>{post.krhsPlz} {post.krhsOrt}<\/DescriptionListTerm>                  \r\n                    <DescriptionListDescription><a href={post.krhsUrl}>Link ...<\/a><\/DescriptionListDescription>\r\n                  <\/DescriptionListGroup>\r\n                <\/\u00a0DescriptionList>\r\n              <\/CardBody>\r\n              <Divider \/>\r\n              <CardFooter>{post.krhsSuchbegriffe}<\/CardFooter>\r\n            <\/Card>\r\n          <\/div>\r\n        ))}\r\n      <\/Gallery>\r\n    <\/>\r\n  );\r\n}<\/pre>\n
Nach einem npm run start<\/strong>, l\u00e4uf es wie gew\u00fcnscht (siehe Tag v.0.0.3 im Git-Repo):<\/p>\n
7. Patternfly CSS erg. und index.html angepasst damit es etwas sch\u00f6ner aussieht.<\/p>\n
Das Ergebnis (siehe Tag v0.0.4):<\/p>\n
\"\"<\/p>\n
Das ganze Projekt, kann auch mit<\/p>\n
git clone https:\/\/gitlab.com\/IT-Berater\/twkrankenhaus.git\r\ncd twkrankenhaus\r\nnpm install @patternfly\/react-core\r\nnpm install @patternfly\/patternfly \r\nnpm run start\r\n<\/pre>\n
lokal geladen und gestartet werden.<\/p>\n","protected":false},"excerpt":{"rendered":"
Ziel ist es eine Beispiel SPA TWKrankenhaus zu implementiern die TypeScript, React mit Patternfly nutzt. So das man ein Template f\u00fcr 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 … <\/p>\n
\u201eSingle-Page-Webanwendung (SPA): TWKrankenhaus App mit TypeScript, React und Patternfly\u201c <\/span>weiterlesen<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[220,3137,5176,79],"tags":[2074,4947,5260],"class_list":["post-19060","post","type-post","status-publish","format-standard","hentry","category-anleitung","category-javascript","category-patternfly","category-programmierung","tag-krankenhaus","tag-spa","tag-twkrankenhaus"],"_links":{"self":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts\/19060","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=19060"}],"version-history":[{"count":0,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts\/19060\/revisions"}],"wp:attachment":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=19060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=19060"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=19060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}