forked from mcjustin/sof_public_app_testing_2023Q2
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
211 lines (196 loc) · 12.6 KB
/
Copy pathindex.html
File metadata and controls
211 lines (196 loc) · 12.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>USCDI Viewer - SMART on FHIR App</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- script src="https://raw.githubusercontent.com/smart-on-fhir/client-js/master/dist/build/fhir-client.js"></script -->
<!-- script src="fhir-client.js"></script -->
<script src="https://cdn.jsdelivr.net/npm/fhirclient/build/fhir-client.js"></script>
<script src="app.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" href="favicon.png">
<style>
body {
font-family: 'Lato', sans-serif;
background-color: #f5f5f5;
color: #333;
}
h1 {
font-weight: 700;
color: #001F5B;
}
.endpoint-group {
display: flex;
flex-direction: column;
}
.endpoint-group label {
margin-left: 20px;
margin-bottom: 5px;
input[type=radio] {
margin-right: 8px;
}
input[type=text] {
margin-left: 20px
}
}
.endpoint-group h3 {
+ .description {
margin-bottom: 15px;
font-style: italic;
}
margin-bottom: 1px;
}
.note {
margin-left: 20px;
font-weight: 400 !important;
font-style: italic;
margin-left: 20px;
}
.hidden {
display:none;
}
button {
background-color: #0072CE;
color: #fff;
border: none;
padding: 12px 20px;
text-align: center;
font-size: 14px;
font-weight: 700;
cursor: pointer;
margin: 5px;
}
button:hover {
background-color: #005fa3;
}
input[type="text"], input[type="radio"] {
margin: 5px;
}
label {
font-weight: 700;
}
.loader {
width: 360px;
height: 100px;
display: block;
background-image: linear-gradient(100deg, transparent, rgba(38, 50, 56, 0.5) 50%, transparent 80%), linear-gradient(#FFF 100px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0);
background-repeat: no-repeat;
background-size: 75px 100px, 100px 100px, 125px 20px, 260px 20px, 260px 20px;
background-position: -50% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
box-sizing: border-box;
animation: animloader 1s linear infinite;
}
@keyframes animloader {
0% {
background-position: 0% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
}
100% {
background-position: 100% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
}
}
</style>
</head>
<body>
<h1>Patient History</h1>
<!-- <p>This is a SMART on FHIR app for patient use. It performs a <a href="https://hl7.org/fhir/smart-app-launch/app-launch.html#app-launch-launch-and-authorization" target="_blank">"standalone" launch</a>, during which the EMR will ask you to present patient credentials; note that this app is never given access to those credentials. During the launch you'll also be asked whether you want this app to be able to access certain information from your health record; this app only reads this information in order to display it to you, and does not otherwise share it, nor store it.</p> -->
<p>If you have a MyChart account with a health care provider, this app allows you log in and electronically view your health information. Select or enter the endpoint of your choice, then use MyChart to log in and grant access to the information you would like to view. Note that this app displays your health information to you but does not store that information or share it elsewhere, and does not have access to your MyChart username or password. <span id="show-more"><a href="#">More...</a></span></p>
<div id="more" class="hidden">
<p><strong>Why did we write this?</strong></p>
<p>This application demonstrates the use of SMART patient-mediated access to provide a registered, third-party application with limited access to a patient's electronic health record. In this case, the set of resources requested are those included in the <a href="https://international-patient-summary.net" target="_blank">International Patient Summary (IPS)</a>, a standardized format for sharing commonly requested health information including allergies, medications, conditions, lab results, and more. While this application <em>only displays</em> the health data it receives, patient-mediated access could be used by applications like <a href="https://smart-health-links-ips.cirg.washington.edu/home" target="_blank">WA Verify+</a> to perform more complicated functions, construct an IPS from the retreived data, and provide methods for users to share their Summary with others (e.g. SMART Health Links).</p>
<p><strong>How private is it?</strong></p>
<p>This app communicates with the USCDI server of your choosing via well-established, secure SMART authentication protocols. It:</p>
<ul>
<li>does not store any of the information it displays</li>
<li>has no access to MyChart login information</li>
<li>only requests resources the user approves</li>
</ul>
<p>Additionally, all access to user health information is revoked after one hour.</p>
<p id="show-less"><a href="#">Show less</a></p>
</div>
<p>You first need to identify your health care provider. Select one of the options below, or select "Other EPIC FHIR R4 Endpoint" and copy a URL from <a href="https://open.epic.com/MyApps/Endpoints" target="_blank">this national list</a> (replace the ending with “R4” if necessary) into the text box below.</p>
<div>
<form class="endpoint-group">
<h3>Production Endpoints</h3>
<span class="description">Securely view your own data using your MyChart login</span>
<label><input type="radio" class="cerner production" id="childrens_sea" name="environment" value="https://fhir-myrecord.cerner.com/r4/449052b2-b4e6-4960-bed6-39119385345b">Seattle Children's Hospital</label>
<label><input type="radio" class="epic production" id="uw" name="environment" value="https://fhir.epic.medical.washington.edu/FHIR-Proxy/api/FHIR/R4">UW Medicine (Washington State)</label>
<label><input type="radio" class="epic production" id="providence_wa" name="environment" value="https://haikuwa.providence.org/fhirproxy/api/FHIR/R4">Providence Health (WA, MT)</label>
<label><input type="radio" class="epic production" id="providence_or" name="environment" value="https://haikuor.providence.org/fhirproxy/api/FHIR/R4">Providence Health (CA, OR)</label>
<label><input type="radio" class="epic production" id="providence_ak" name="environment" value="https://haikuak.providence.org/fhirproxy/api/FHIR/R4">Providence Health (AK)</label>
<label><input type="radio" class="epic production" id="skagit" name="environment" value="https://epicproxy.et1005.epichosted.com/FHIRProxy/api/FHIR/R4">Skagit Regional Health</label>
<label><input type="radio" class="epic production" id="ochin" name="environment" value="https://webprd.ochin.org/prd-fhir/api/FHIR/R4">OCHIN</label>
<label><input type="radio" class="epic production" id="multicare" name="environment" value="https://soapprod.multicare.org/FHIRProxy/api/FHIR/R4">MultiCare Heath</label>
<label><input type="radio" class="epic production" id="confluence" name="environment" value="https://epicproxy.et0764.epichosted.com/FHIRProxy/api/FHIR/R4">Confluence Health</label>
<label><input type="radio" class="epic production" id="other" name="environment" value="">Other FHIR R4 endpoint:<br/>
<input type="text" id="fhir-base-url" size="80" placeholder='URL ending in "/FHIR/R4"'/><br/>
<span class="note"><a href="https://open.epic.com/MyApps/Endpoints" target="_blank">List of national EPIC production endpoints</a></span>
</label>
<h3>Non-Production Endpoints</h3>
<span class="description">View test patient data using provided credentials</span>
<label><input type="radio" class="smit non-production" id="smit" name="environment" value="https://launch.smarthealthit.org/v/r4/sim/WzMsIiIsIiIsIkFVVE8iLDAsMCwwLCIiLCIiLCIiLCIiLCIiLCIiLCIiLDAsMF0/fhir" checked>SMART Health IT <br/>
<span class="note">Credentials pre-populated for Abdul Koepp</span>
</label>
<label><input type="radio" class="epic non-production" id="epic" name="environment" value="https://fhir.epic.com/interconnect-fhir-oauth/api/FHIR/R4">EPIC <br/>
<span class="note">Credentials: fhirdesiree / epicepic1</span><br/>
<span class="note">Other EPIC test patient credentials can be found <a href="https://fhir.epic.com/Documentation?docId=testpatients" target="_blank">here</a>.</span>
</label>
<label><input type="radio" class="cerner non-production" id="cerner" name="environment" value="https://fhir-myrecord.cerner.com/r4/ec2458f2-1e24-41c8-b71b-0e701af7583d">Oracle Health (Cerner)</label>
<span class="note">Credentials: iqh4smart / Cerner*01</span><br/>
<span class="note">Other Cerner test patient credentials can be found <a href="https://docs.google.com/document/u/1/d/e/2PACX-1vQwyX3px4qi5t1O6_El6022zYt4ymKAWCrcgxcX5NvYGUJAkJ4WFwOnLoikow6rEccpFZzDWBdcBqsQ/pub" target="_blank">here</a>.</span>
</form>
</div>
<button id="start-app-button">LAUNCH</button>
<br/>
<span class="loader" style="display:none"></span>
<div id="content" style="display:none">
<div id="PatientContent"></div>
<div id="toc">
<h2>Contents</h2>
<div style="margin-left:20px">
<a id="PatientTOC" href="#PatientContent"></a>
<a id="ImmunizationTOC" href="#ImmunizationContent"></a>
<a id="AllergyIntoleranceTOC" href="#AllergyIntoleranceContent"></a>
<a id="MedicationStatementTOC" href="#MedicationStatementContent"></a>
<a id="MedicationRequestTOC" href="#MedicationRequestContent"></a>
<a id="MedicationTOC" href="#MedicationContent"></a>
<a id="ConditionTOC" href="#ConditionContent"></a>
<a id="ObservationTOC" href="#ObservationContent"></a>
<a id="OrganizationTOC" href="#OrganizationContent"></a>
<a id="DeviceTOC" href="#DeviceContent"></a>
<a id="DeviceUseStatementTOC" href="#DeviceUseStatementContent"></a>
<a id="DiagnosticReportTOC" href="#DiagnosticReportContent"></a>
<a id="ImagingStudyTOC" href="#ImagingStudyContent"></a>
<a id="MediaTOC" href="#MediaContent"></a>
<a id="PractitionerTOC" href="#PractitionerContent"></a>
<a id="PractitionerRoleTOC" href="#PractitionerRoleContent"></a>
<a id="ProcedureTOC" href="#ProcedureContent"></a>
<a id="SpecimenTOC" href="#SpecimenContent"></a>
</div>
</div>
<br/>
<div id="ImmunizationContent"></div>
<div id="AllergyIntoleranceContent"></div>
<div id="MedicationStatementContent"></div>
<div id="MedicationRequestContent"></div>
<div id="MedicationContent"></div>
<div id="ConditionContent"></div>
<div id="ObservationContent"></div>
<div id="OrganizationContent"></div>
<div id="DeviceContent"></div>
<div id="DeviceUseStatementContent"></div>
<div id="DiagnosticReportContent"></div>
<div id="ImagingStudyContent"></div>
<div id="MediaContent"></div>
<div id="PractitionerContent"></div>
<div id="PractitionerRoleContent"></div>
<div id="ProcedureContent"></div>
<div id="SpecimenContent"></div>
<div id="EmptyContent"></div>
</div>
<br/>
<br/>
<p><i><a href="https://github.com/uwcirg" target="_blank">© UW Clinical Informatics Research Group</a>, 2023</i></p>
</body>
</html>