Merge pull request #3 from uwcirg/ips-viewer-updates

Ips viewer updates

Dockerfile

@@ -18,8 +18,4 @@ RUN npm run build
 
 RUN cp build/404.html build/index.html
 
-RUN mv build/ips/assets build/assets
-
-RUN mv build/ips/templates build/templates
-
 CMD ["npm", "run", "start"]

src/lib/HealthLink.svelte

@@ -85,7 +85,7 @@
           {#await qrCode then dataUrl}
             <p class="logo">
               <img class="qr" alt="QR Code for SHL" src={dataUrl} />
-              <img class="logo" alt="SMART Logo" src={'/waverifypluslogo.png'} />
+              <img class="logo" alt="WA Verify+ Logo" src='/img/waverifypluslogo.png' />
             </p>
           {/await}
         </CardText>

src/routes/+layout.svelte

@@ -49,7 +49,7 @@
 <Styles />
 <Navbar color="light" light expand="md" style="border-bottom: 1px solid rgb(204, 204, 204);">
   <NavbarBrand>
-    <a href="https://doh.wa.gov/" rel="noreferrer" target="_blank"><Image class="doh_logo_doh-black.png" alt="Washington State Department of Health Logo" width="240" src="/doh_logo_doh-black.png"/></a>
+    <a href="https://doh.wa.gov/" rel="noreferrer" target="_blank"><Image alt="Washington State Department of Health Logo" width="240" src="/img/doh_logo_doh-black.png"/></a>
   </NavbarBrand>
   <NavbarToggler on:click={() => (isOpen = !isOpen)} />
   <Collapse {isOpen} navbar expand="md" on:update={handleUpdate}>
@@ -83,7 +83,7 @@
 </Navbar>
 <Row>
   <Col style="margin-bottom: 20px; border-bottom: 1px solid rgb(204, 204, 204);">
-    <a href="\home"><Image alt="WA Verify Logo" width="200" src="/waverifypluslogo.png" style="align-self: center"></Image></a>
+    <a href="\home"><Image alt="WA Verify Logo" width="200" src="/img/waverifypluslogo.png" style="align-self: center"></Image></a>
     <div style="vertical-align: middle; font-size: 18px; display: inline-block; padding-left: 17px; font-family: Verdana, sans-serif; color: rgb(34, 72, 156);">International Patient Summary</div>
   </Col>
 </Row>

static/ips/assets/css/custom.css

@@ -1,21 +1,84 @@
-.card {
-	margin-bottom: 15px;
-}
-
-.icon-action {
-	margin-top: 5px;
-	float: right;
-	font-size: 80%;
-}
-
-.list-group-item .title {
-	margin-top: 5px;
-	margin-bottom: 12px;
-	font-weight: 600;
-}
-
-.textBody table {
-	table-layout: fixed;
-	width: 100%;
-
-}
+.card {
+	margin-bottom: 20px;
+}
+
+.icon-action {
+	margin-top: 5px;
+	float: right;
+	font-size: 80%;
+}
+
+.list-group-item .title {
+	margin-top: 5px;
+	margin-bottom: 12px;
+	font-weight: 600;
+}
+
+.textBody table {
+	table-layout: fixed;
+	width: 100%;
+
+}
+
+.buttonSpacer {
+  padding-left: 20px;
+  padding-top: 20px;
+}
+
+.tdLeft {
+  text-align: left;
+}
+
+.tdCenter {
+  text-align: center;
+}
+
+.message {
+  color: red;
+  font-size: 1.0rem;
+}
+
+.loader {
+  width: 100%;
+  height: 150px;
+  margin: 40px;
+  display: block;
+  position: relative;
+  background: #FFF;
+  box-sizing: border-box;
+}
+.loader::after {
+  content: '';  
+  width: calc(100% - 30px);
+  height: calc(100% - 30px);
+  top: 15px;
+  left: 15px;
+  position: absolute;
+  background-image: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 80%),
+	linear-gradient(#DDD 56px, transparent 0), /* box 1 */
+	linear-gradient(#DDD 24px, transparent 0), /* box 2 */
+	linear-gradient(#DDD 18px, transparent 0), /* box 3 */
+	linear-gradient(#DDD 66px, transparent 0); /* box 4 */
+  background-repeat: no-repeat;
+  background-size: 75px 130px, /* wave */
+					55px 56px, /* box 1 */
+					160px 30px, /* box 2 */
+					220px 20px, /* box 3 */
+					290px 56px; /* box 4 */
+  background-position: 0% 0, /* box 1 */
+						0px 0px, /* box 1 */
+						70px 5px, /* box 1 */
+						70px 38px, /* box 1 */
+						0px 66px; /* box 1 */
+  box-sizing: border-box;
+  animation: animloader 1s linear infinite;
+}
+
+@keyframes animloader {
+  0% {
+    background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
+  }
+  100% {
+    background-position: 150% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
+  }
+}

static/ips/assets/html-waverify/footer.html

@@ -0,0 +1,11 @@
+<hr/>
+<lead>Originally created by Alejandro Lopez Osornio, Diego Kaminker and Fernando Campos. Modified 2021-2023 by John
+  D'Amore, and 2023 by CIRG</lead>
+<br />
+<lead>Based on <a href="https://salud-ar.github.io/IPS-Argentina/demo.html">prior work</a> from <a
+    href="https://github.com/SALUD-AR/IPS-Argentina">this repository</a></lead>
+<br />
+<lead>Licensed according to Apache 2.0. See <a href="https://github.com/uwcirg/shl-ips">current code
+    repository</a> for details</lead>
+<br />
+<lead>Hosted by the University of Washington's <a href="https://cirg.washington.edu">Clinical Informatics Research Group</a></lead>

static/ips/assets/html-waverify/header.html

@@ -0,0 +1,31 @@
+<div class="headerContainer" style="background-color: rgb(249, 249, 249); border-bottom: 1px solid rgb(204, 204, 204);">
+    <div class="fluid-container">
+        <div class="subheaderContainer">
+            <div style="display: flex; flex-wrap: wrap; justify-content: space-between; min-height: 70px;">
+                <div style="display: flex; align-items: center;">
+                    <div>
+                        <img class="doh_logo_doh-black" alt="Washington State Department of Health Logo" width="240px" src="/img/doh_logo_doh-black.png">
+                    </div>
+                    <!--<div style="vertical-align: middle;">Washington State<br>Department of Health</div>-->
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="logo-nav-container" style="border-bottom: 1px solid rgb(204, 204, 204);">
+    <div class="fluid-container">
+        <div class="vaccineLogo" style="padding: 5px 1.5vw;">
+            <div style="display: flex; align-items: center;">
+                <div>
+                    <img alt="WaVerify+ Logo" width="200px" src="/img/waverifypluslogo.png" style="align-self: center;">
+                </div>
+                <div style="vertical-align: middle; font-size: 18px; display: inline-block; padding-left: 17px; font-family: Verdana, sans-serif; color: rgb(34, 72, 156);">International Patient Summary Viewer</div>
+                </div>
+
+        </div>
+    </div>
+</div>
+<div>
+    <h1 style="padding-left: 17px; font-size: 38px; font-weight: 200; font-family: Verdana, sans-serif; color: rgb(200, 76, 14); margin: 50px 0px;">WA Verify<sup>+</sup> International Patient Summary Viewer</h1>
+</div>
+<textarea id="ipsInput" rows="8" style="display:none"></textarea>

static/ips/assets/html/footer.html

@@ -0,0 +1,11 @@
+<hr/>
+<lead>Originally created by Alejandro Lopez Osornio, Diego Kaminker and Fernando Campos. Modified 2021-2023 by John
+  D'Amore</lead>
+<br />
+<lead>Based on <a href="https://salud-ar.github.io/IPS-Argentina/demo.html">prior work</a> from <a
+    href="https://github.com/SALUD-AR/IPS-Argentina">this repository</a></lead>
+<br />
+<lead>Licensed according to Apache 2.0. See <a href="https://github.com/jddamore/IPSviewer">current code
+    repository</a> for details</lead>
+<br />
+<lead>Hosted by <a href="https://www.moreinformatics.com">More Informatics, Inc.</a></lead>

static/ips/assets/html/header.html

@@ -0,0 +1,47 @@
+<h1>International Patient Summary (IPS) Viewer for Connectathon</h1>
+<div>
+  Links to <a href="https://hl7.org/fhir/uv/ips/">published Implementation Guide</a> and the <a
+    href="http://build.fhir.org/ig/HL7/fhir-ips/">latest CI build</a>
+</div>
+<div>
+  Please note that this tool is an open-source project under development. It only renders the following sections of
+  IPS bundles: Advance Directives, Allergies, Immunizations, Medications, Problems and Results. Rendering of FHIR resources
+  may be incomplete and using the narrative may be necessary in some circumstances. 
+</div>
+<hr>
+<div>
+</div>
+<div style="float:clear"></div>
+<h2>Submit Data</h2>
+<div class="row">
+  <div class="col col-lg-5 col-md-8 col-sm-12 col-12">
+    <form>
+      <div class="form-group">
+        <label for="ipsInput">Paste your IPS in TextBox below:</label>
+        <br>
+        <textarea id="ipsInput" rows="8" style="width: 100%; max-width: 100%;"></textarea>
+      </div>
+    </form>
+  </div>
+  <div class="col col-md-3 col-12">
+    <div class="row buttonSpacer">
+      <button type="button" id="loadSample" class="btn btn-success">Try a sample</button>
+    </div>
+    <div class="row">
+      <a href="https://github.com/jddamore/IPSviewer/tree/main/samples" target="_blank"
+        style="padding-left: 20px">Public Repository of IPS Samples</a>
+    </div>
+    <div class="row buttonSpacer">
+      <button type="button" id="submit" class="btn btn-primary">View IPS from TextBox</button>
+    </div>
+    <div class="row buttonSpacer">
+      <button type="button" id="clearSample" class="btn btn-danger">Clear</button>
+    </div>
+  </div>
+  <div class="col col-lg-4 col-md-12 col-12">
+    <div class="data" id="checksTable">
+
+      </div>
+  </div>
+</div>
+<hr />

static/ips/assets/js/config.js

@@ -0,0 +1,6 @@
+const config = {
+    html_dir: "/ips/assets/html-waverify/",
+    template_dir: "/ips/templates-waverify/"
+}
+
+export default config;