Skip to content

Commit 2930289

Browse files
surfdocsurfdoc
authored
Merge pull request #75 from the-commons-project/develop
Develop
2 parents 909a495 + 5e8c776 commit 2930289

File tree

14 files changed

+26895
-147
lines changed

14 files changed

+26895
-147
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Getting Started
22

3+
Note: A deep dive into this code for developers can be found at https://shutdownhook.com/2023/09/09/anatomy-of-a-smart-health-card-link-viewer/
4+
35
shc-web-reader is a create-react-app web application that can run standalone or
46
as a provider-launch SMART-on-FHIR application. It scans Smart Health Card QR
57
Codes sourced from barcode scanners, copy/paste, connected cameras or by

‎public/captureQR.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
</head>
1010
<body>
1111

12-
<video id='video' style='width: 400px; height: 225px;'></video>
12+
<video id='video' style='width: 100%; max-width: 400px; height: auto;'></video>
1313
<div id='switchCamera' style='display: none; margin-top: 8px;'>
1414
<button onclick='sc.switchCameraClick()'>Switch Camera</button>
1515
</div>

‎public/codes-snomed-sct.json‎

Lines changed: 26434 additions & 77 deletions
Large diffs are not rendered by default.

‎src/About.module.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,14 @@
2222
grid-row: 2;
2323
font-size: smaller;
2424
}
25+
26+
@media (max-width: 800px) {
27+
28+
.container {
29+
display: block;
30+
}
31+
32+
.cardImg {
33+
display: none;
34+
}
35+
}

‎src/App.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,12 @@ export default function App() {
5151

5252
<div className={styles.nav}>
5353

54-
<Tabs value={tabValue} onChange={handleTabChange} orientation='horizontal'>
54+
<Tabs
55+
value={tabValue}
56+
onChange={handleTabChange}
57+
orientation='horizontal'
58+
variant='scrollable'>
59+
5560
<Tab label='About' value={TabValue.About} />
5661
{ config("showScan") && <Tab label='Scan Card' value={TabValue.Scan} /> }
5762
{ config("showPhoto") && <Tab label='Take Photo' value={TabValue.Photo} /> }

‎src/PatientSummary.js‎

Lines changed: 26 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -10,44 +10,42 @@ export default function PatientSummary({ organized, dcr }) {
1010
// +----------------+
1111

1212
const renderSections = () => {
13-
return(comp.section.map((s) => {
14-
return(
15-
<tr key={ s.title }>
16-
<th>{ s.title }</th>
17-
<td><PatientSummarySection s={s} rmap={rmap} dcr={dcr} /></td>
18-
</tr>
19-
);
20-
}));
13+
return comp.section.flatMap((s) => {
14+
return [
15+
<div key={`${s.title}-title`} className={styles.sectionTitle}>
16+
{s.title}
17+
</div>,
18+
<div key={`${s.title}-content`} className={styles.sectionContent}>
19+
<PatientSummarySection s={s} rmap={rmap} dcr={dcr} />
20+
</div>
21+
];
22+
});
2123
}
2224

25+
2326
// +-------------+
2427
// | Main Render |
2528
// +-------------+
26-
29+
2730
const comp = organized.byType.Composition[0];
2831
const rmap = organized.byId;
2932

3033
const authors = comp.author.map((a) => futil.renderOrgOrPerson(a, rmap));
31-
32-
return(
33-
<div className={styles.container}>
34-
<h2>{comp.title}</h2>
35-
<table className={styles.dataTable}>
36-
<tbody>
37-
<tr>
38-
<th>Patient</th>
39-
<td className={styles.patCell}>{ futil.renderPerson(comp.subject, rmap) }</td>
40-
</tr>
41-
<tr>
42-
<th>Summary prepared by</th>
43-
<td>{ authors }</td>
44-
</tr>
45-
{ renderSections() }
46-
</tbody>
47-
</table>
48-
</div>
49-
);
5034

35+
return (
36+
<div className={styles.container}>
37+
<h2>{comp.title}</h2>
38+
<div className={styles.dataTable}>
39+
<div className={styles.sectionTitle}>Patient</div>
40+
<div className={styles.patCell}>{futil.renderPerson(comp.subject, rmap)}</div>
41+
42+
<div className={styles.sectionTitle}>Summary prepared by</div>
43+
<div>{authors}</div>
44+
45+
{renderSections()}
46+
</div>
47+
</div>
48+
);
5149
}
5250

5351

‎src/PatientSummary.module.css‎

Lines changed: 59 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,89 @@
11

22
.container {
3-
margin-top: 12px;
3+
margin-left: 0;
4+
margin-top: 12px;
45
}
56

67
.dataTable {
7-
margin-top: 24px;
8-
margin-bottom: 24px;
8+
display: grid;
9+
grid-template-columns: max(200px) 1fr;
10+
gap: 0px;
11+
border: 1px solid #e0e0e0;
12+
}
13+
14+
@media only screen and (max-width: 600px) {
15+
.dataTable {
16+
display: block;
17+
}
18+
}
19+
20+
.dataTable > * {
21+
padding: 8px;
22+
font-size: smaller;
23+
border: 1px solid #e0e0e0;
924
border-collapse: collapse;
1025
}
1126

12-
.dataTable th, .dataTable td {
13-
min-width: 100px;
14-
text-align: left;
15-
vertical-align: top;
16-
border: 1px solid black;
17-
padding: 8px 8px 8px 8px;
18-
font-size: smaller;
27+
.sectionTitle {
28+
background-color: #f5f5f5;
29+
font-weight: bold;
1930
}
2031

32+
2133
.fhirTable {
22-
border-collapse: collapse;
23-
width: 100%;
34+
border-collapse: collapse;
35+
width: 100%;
2436
}
2537

2638
.fhirTable td, .fhirTable th {
27-
text-align: left;
28-
vertical-align: middle;
29-
padding: 2px 8px 2px 2px;
30-
font-size: 100%;
31-
border-top: none;
32-
border-left: none;
33-
border-right: none;
34-
border-bottom: none;
39+
text-align: left;
40+
vertical-align: middle;
41+
padding: 2px 8px 2px 2px;
42+
font-size: 100%;
43+
border-top: 1px solid lightgray;
3544
}
3645

3746
.fhirTable th {
38-
color: gray;
39-
}
40-
41-
.fhirTable td {
42-
border-top: 1px solid lightgray;
47+
border-top: none;
4348
}
4449

4550
.narrative {
46-
background-color: whitesmoke;
47-
padding: 8px 8px 8px 8px;
51+
background-color: whitesmoke;
52+
padding: 8px;
4853
}
4954

5055
.narrative table {
51-
border-collapse: collapse;
52-
width: 100%;
56+
border-collapse: collapse;
57+
width: 100%;
5358
}
5459

5560
.narrative th, .narrative td {
56-
padding: 4px 4px 4px 4px;
57-
font-size: unset;
61+
padding: 4px;
62+
font-size: unset;
63+
border: 1px solid lightgray;
64+
}
65+
66+
.narrative th {
67+
background-color: #f7f7f7;
68+
border-bottom: 2px solid #d0d0d0;
5869
}
5970

6071
.patCell {
61-
font-weight: bold;
72+
font-weight: bold;
73+
}
74+
75+
.toggleButton {
76+
float: right;
77+
margin-top: 6px;
78+
}
79+
80+
@media only screen and (max-width: 600px) {
81+
.toggleButton {
82+
display: flex;
83+
width: 100%;
84+
height: 100%;
85+
justify-content: right;
86+
float: none;
87+
margin-top: 0px;
88+
}
6289
}

‎src/PatientSummarySection.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,15 +58,16 @@ export default function PatientSummarySection({ s, rmap, dcr }) {
5858
const renderToggle = () => {
5959

6060
return(
61+
<div className={styles.toggleButton}>
6162
<Button
6263
data-html2canvas-ignore="true"
63-
sx={{ float: "right", marginTop: "10px;" }}
6464
size="small"
6565
onClick={ () => setViewState(viewState === NTOGGLE ? STOGGLE : NTOGGLE) }
6666
startIcon={ <RemoveRedEyeOutlinedIcon /> }>
6767
Toggle view
6868
</Button>
69-
);
69+
</div>
70+
);
7071
}
7172

7273
// +-----------------+

‎src/Photo.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export default function Photo({ viewData }) {
7878

7979
{ haveCamera &&
8080
<>
81-
<video id='video' style={{ width: '400px', height: '225px' }}></video>
81+
<video id='video' style={{ width: '100%', maxWidth: '400px', height: 'auto' }}></video>
8282
<div id='switchCamera' style={{ display: 'none' }}>
8383
<Button variant='text' onClick={ window.sc.switchCameraClick }>
8484
Change Camera

‎src/lib/SHX.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -283,7 +283,7 @@ export async function resolveSHL(shl, passcode, resolved) {
283283

284284
if (shlJson.resourceType === "Bundle") {
285285
// already a bundle
286-
resolved.rawBundles.push = shlJson;
286+
resolved.rawBundles.push(shlJson);
287287
}
288288
else {
289289
// put it into a bundle

0 commit comments

Comments
 (0)