forked from DrMikeyS/COVIDVaccinePatientSlips
-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
231 lines (208 loc) · 11.2 KB
/
index.html
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
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!DOCTYPE html>
<html lang="en">
<head>
<title>Patient List</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Libraries-->
<link rel="stylesheet" href="scripts/libraries/css/bootstrap.min.css">
<script src="scripts/libraries/js/jquery-3.6.0.min.js"></script>
<script src="scripts/libraries/js/bootstrap.bundle.min.js"></script>
<script src="scripts/libraries/js/jquery.csv.min.js"></script>
<script src="scripts/libraries/js/jquery.qrcode.min.js"></script>
<!--Custom scripts-->
<link rel="stylesheet" href="scripts/style.css">
</head>
<body>
<div id="input-modal" class="container mt-5">
<div id="page-1">
<h1>COVID Vaccine QR Generator 3.16</h1>
<p>An open-source tool that allows you to convert a CSV list of patients into a printable pack of patient
slips to
make using Pinnacle a breeze.</p>
<div class="alert alert-warning" role="alert">
<h4>What's New</h4>
<p>This new release contains some changes you need to know about:</p>
<ul>
<li>Initial Support for National Booking Service appointments</li>
</ul>
</div>
<p><button type="button" class="btn btn-primary btn-block my-4" id="get-started">Get Started</button></p>
<div class="card">
<div class="card-body">
<h3>More Information</h3>
<hr>
<h4>Sticker Sizes</h4>
<p>To print at the right size, use Google Chrome and 18 per sheet stickers (e.g. <a
href="https://www.aosonline.co.uk/office-supplies-equipment/avery-labels-printer-labels/multipurpose-printer-labels/q-connect-multi-purpose-label-63-5x46-5mm-18-per-a4-sheet-pk-100-white">Qconnect
KF26052</a>)</p>
<h4>Browser Compatibility</h4>
<p>The system requires Google Chrome. Other web browsers probably will not work.</p>
<h4>Zebra QR Scanners Setup</h4>
<p>The Zebra QR scanners supplied by the NHS to vaccination sites can be progammed for how they
process the QR code information. You can also change the volume and tone of the beeps. <br>
<a href="zebraSetup.html">Click here for setup instructions</a></small>
<h4>Updates and download</h4>
<p>The latest version can be downloaded from the <a
href="https://github.com/DrMikeyS/COVIDVaccinePatientSlips">GitHub repo.</a></p>
<h4>Video Guide</h4>
<p><a href="https://www.youtube.com/watch?v=pA-5K7eZB7Q" rel="nofollow">See this
video</a> for how the process works in detail.</p>
<h4>IG and Security</h4>
<p>No data is transferred anywhere when using this tool, all the process is done in your web
browser. The tool uses some open source libraries to work. Using the tool is entirely at
your
own risk. It is provided under an MIT License.</p>
<h4>Credits</h4>
<p>The project was developed originally by Mike Smith, but has been contributed to by others,
including: <a href="https://github.com/Richard1793">Richard1793</a>, <a
href="https://github.com/bunit17">bunit17</a>, <a
href="https://github.com/tfechtner">tfechtner</a> and <a
href="https://github.com/IsaacWoods">Isaac Woods</a></p>
</div>
</div>
</div>
<div id="page-2">
<div class="progress mb-3">
<div class="progress-bar progress-bar-striped " role="progressbar" style="width: 33%;"
aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h2>How do you want the list to look?</h2>
<div class="row text-center">
<div class="col">
<p><img src="img/SampleSticker.png" id="sample-sticker" /></p>
<p><button type="button" class="btn btn-primary" id="sticker">Patient Stickers</button><br>
<i>To use on patient vaccine record cards.</i>
</p>
</div>
</div>
<h3>Other Options</h3>
<p><button type="button" class="btn btn-primary" id="full-page">Full Page Form</button></p>
</div>
<div id="page-2a">
<div class="progress mb-3">
<div class="progress-bar progress-bar-striped " role="progressbar" style="width: 66%;"
aria-valuenow="66" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p></p>
<h2>Information for the cards</h2>
<div class="alert alert-info" role="alert">
These fields can be left blank if desired.
</div>
<p><label for="vaccine-type">Vaccine Type</label><select class="form-control" id="vaccine-type">
<option></option>
<option>Pfizer-BioNTech</option>
<option>AstraZeneca</option>
<option>Moderna</option>
</select></p>
<p><label for="batch-number">Batch Number</label><input type="text" class="form-control" id="batch-number"
placeholder="Batch Number"></p>
<p>
</p>
<p><button type="button" class="btn btn-primary btn-block" id="continue">Continue</button></p>
</div>
<div id="page-2b">
<div class="progress mb-3">
<div class="progress-bar progress-bar-striped " role="progressbar" style="width: 66%;"
aria-valuenow="66" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p></p>
<h2>Information for the labels</h2>
<div class="alert alert-info" role="alert">
These fields can be left blank if desired.
<br>
The system is designed to fit <a
href="https://www.amazon.co.uk/gp/product/B000J6D39U/ref=ppx_yo_dt_b_asin_title_o01_s00?ie=UTF8&psc=1">these
Avery J8658-25 tiny labels</a>.
</div>
<p><label for="batch-number-2b">Batch Number</label><input type="text" class="form-control"
id="batch-number-2b" placeholder="Batch Number"></p>
<p><label for="session-date">Session Date</label><input type="text" class="form-control" id="session-date"
placeholder="Session Date"></p>
<p><button type="button" class="btn btn-primary btn-block" id="continue-2b">Continue</button></p>
</div>
<div id="page-3">
<div class="progress mb-3">
<div class="progress-bar progress-bar-striped " role="progressbar" style="width: 66%;"
aria-valuenow="66" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p></p>
<h2>How do you want to sort the results?</h2>
<div class="alert alert-info" role="alert">
<strong>Accubook Users:</strong> Choosing the "No Sorting" option will print the records in order of
appointment time.
</div>
<p><button type="button" class="btn btn-primary btn-block" id="sort-alphabetical">Sort
Alphabetically</button></p>
<p><button type="button" class="btn btn-primary btn-block" id="no-sort">No Sorting</button>
</p>
</div>
<div id="page-4">
<div class="progress mb-3">
<div class="progress-bar progress-bar-striped " role="progressbar" style="width: 66%;"
aria-valuenow="66" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p></p>
<h2>Which Point of Care System Are You Using?</h2>
<p><button type="button" class="btn btn-primary btn-block" id="outcomes4health">Outcomes4Health</button></p>
<p><button type="button" class="btn btn-primary btn-block" id="evacc">eVacc</button>
</p>
</div>
<div id="page-5">
<div class="progress mb-3">
<div class="progress-bar progress-bar-striped " role="progressbar" style="width: 100%;"
aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h2>Add your CSV File</h2>
<p>For this final step, add your CSV file containing your patient list. The file is not uploaded anywhere
and is processed entirely within your web browser.</p>
<label class="btn btn-primary btn-block my-4">
Choose File <input type="file" name="filenamea" id="filenamea" type="file" hidden>
</label>
<div class="card">
<div class="card-body">
<h3>What should the .csv file Look Like?</h3>
<p>
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>NHS Number</th>
<th>Date Of Birth</th>
<th>bookingNumber*</th>
<th>StartTime*</th>
<th>SessionDate*</th>
<th>VaccineDose*</th>
</tr>
<tr>
<td>Bloggs, Joe</td>
<td>123 456 1234</td>
<td>12/01/1956</td>
<td>123456</td>
<td>18:30</td>
<td>08/01/2021</td>
<td>Second</td>
</tr>
</table>
</p>
<p>*Optional</p>
<p>All fields except "Name", "StartTime", "SessionDate", "bookingNumber" and "VaccineDose" will be
soft matched.
This means the column names or date formats do not need to be exactly as above. Dates can be in
any format.</p>
<p>Additional fields can be included but will be ignored.</p>
<p>If you are manually creating a CSV file rather than exporting from Accubook, it is best to use
the dummy CSV file from the ZIP as a starting point.</p>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="patient-list">
</div>
<script src="scripts/helperFunctions.js"></script>
<script src="scripts/template.form.js"></script>
<script src="scripts/template.stickers.js"></script>
<script src="scripts/coreFunctions.js"></script>
<script src="scripts/navigation.js"></script>
</body>
</html>