Update Shiny app

- Refactor data upload and sample data
- Create custom data upload button
- Create script.js
- Change Shiny notification colour
- Bug fix: ensure the case counts in bulk data that have only one row are treated as a data frame, by wrapping them in 'data.frame' before passing to 'apply'

3 files changed, 44 insertions, 12 deletions

diff --git a/inst/app/templates/content/data/enter-data.html b/inst/app/templates/content/data/enter-data.html
index 621c785..f4d5e75 100644
--- a/inst/app/templates/content/data/enter-data.html
+++ b/inst/app/templates/content/data/enter-data.html
@@ -8,6 +8,10 @@
   </div>
 </div>
 <hr>
-<form>
+<form class="mb-5">
   {{ htmlTemplate("templates/content/data/enter-data/bulk-entry.html") }}
 </form>
+<hr>
+<form>
+  {{ htmlTemplate("templates/content/data/enter-data/load-samples.html") }}
+</form>
diff --git a/inst/app/templates/content/data/enter-data/bulk-entry.html b/inst/app/templates/content/data/enter-data/bulk-entry.html
index 82a3ccf..30fab06 100644
--- a/inst/app/templates/content/data/enter-data/bulk-entry.html
+++ b/inst/app/templates/content/data/enter-data/bulk-entry.html
@@ -1,13 +1,11 @@
 <h4 class="mb-3">Bulk entry</h4>
 <!-- Button to toggle help text. -->
 <button type="button" class="btn btn-outline-primary btn-sm" id="bulk-help-toggle"
-        data-bs-toggle="collapse" data-bs-target="#bulk-help">
-    Show required format
-</button>
+        data-bs-toggle="collapse" data-bs-target="#bulk-help">Show required format</button>
 <!-- Help text for bulk input format. -->
 <div class="collapse mt-2" id="bulk-help">
   <div class="card card-body border-primary">
-    <p>Enter one or more rows in the following format:</p>
+    <p>Manually enter rows or upload a CSV file in the following format:</p>
     <p class="overflow-x-scroll text-nowrap font-monospace">
       <u>Dataset name</u>,<u>Time units</u>,<u>Case counts</u>
     </p>
@@ -27,11 +25,24 @@
   </div>
 </div>
 <!-- Data input area. -->
-<div>
-  <textarea id="data_area" class="form-control shiny-input-textarea my-3" rows="3" wrap="off"></textarea>
-  <small id="data_area_warn" class="form-text text-primary shiny-html-output"></small>
+<div class="my-4">
+  <label class="form-label" for="data_area">Enter manually</label>
+  <textarea id="data_area" class="form-control" rows="3" wrap="off"></textarea>
+  <div>
+    <small id="data_area_warn" class="form-text text-primary shiny-html-output"></small>
+  </div>
+  <button id="data_bulk" type="button" class="btn btn-outline-primary btn-sm action-button mt-3">
+    <span class="glyphicon glyphicon-plus"></span> Add
+  </button>
+</div>
+<!-- File input for data upload (hidden). -->
+<input class="form-control" type="file" id="data_upload" accept="text/csv,text/comma-separated-values,text/plain,.csv">
+<!-- Custom button to trigger file selector for data upload (visible). -->
+<label class="form-label" for="data-upload-select">Upload a CSV file</label>
+<div class="input-group">
+  <button id="data-upload-select" type="button" class="btn btn-outline-primary btn-sm">
+    <span class="glyphicon glyphicon-file"></span> Select file
+  </button>
+  <input type="text" id="data-upload-name" class="form-control" placeholder="No file selected" disabled>
 </div>
-<!-- Submit data. -->
-<button id="data_bulk" type="button" class="btn btn-outline-primary btn-sm action-button">
-  <span class="glyphicon glyphicon-plus"></span> Add
-</button>
+<small id="data_upload_warn" class="form-text text-primary shiny-html-output"></small>
diff --git a/inst/app/templates/content/data/enter-data/load-samples.html b/inst/app/templates/content/data/enter-data/load-samples.html
new file mode 100644
index 0000000..a42a8c8
--- /dev/null
+++ b/inst/app/templates/content/data/enter-data/load-samples.html
@@ -0,0 +1,17 @@
+<h4 class="mb-3">Load samples</h4>
+{{
+  checkboxInput(inputId = "covid_canada", label = "COVID-19 Canada, 2020/03/03 - 2020/03/31 (Weekly)",
+    value = FALSE, width = "100%"
+  )
+}}
+{{
+  checkboxInput(inputId = "covid_ontario", label = "COVID-19 Ontario, 2020/03/03 - 2020/03/31 (Weekly)",
+    value = FALSE, width = "100%"
+  )
+}}
+<div>
+  <small id="data_samples_warn" class="form-text text-primary shiny-text-output"></small>
+</div>
+<button id="data_samples" type="button" class="btn btn-outline-primary btn-sm action-button mt-3">
+  <span class="glyphicon glyphicon-plus"></span> Add
+</button>