Revamp Shiny app

4 files changed, 108 insertions, 0 deletions

diff --git a/inst/app/templates/content/data/enter-data.html b/inst/app/templates/content/data/enter-data.html
new file mode 100644
index 0000000..621c785
--- /dev/null
+++ b/inst/app/templates/content/data/enter-data.html
@@ -0,0 +1,13 @@
+<div class="row mb-5">
+  <form class="col-md">
+    {{ htmlTemplate("templates/content/data/enter-data/single-entry.html") }}
+  </form>
+  <div class="col-md mt-5 mt-md-0 d-flex flex-column align-items-center">
+    <h5>Data plot</h5>
+    {{ plotOutput(outputId = "data_plot") }}
+  </div>
+</div>
+<hr>
+<form>
+  {{ htmlTemplate("templates/content/data/enter-data/bulk-entry.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
new file mode 100644
index 0000000..82a3ccf
--- /dev/null
+++ b/inst/app/templates/content/data/enter-data/bulk-entry.html
@@ -0,0 +1,37 @@
+<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>
+<!-- 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 class="overflow-x-scroll text-nowrap font-monospace">
+      <u>Dataset name</u>,<u>Time units</u>,<u>Case counts</u>
+    </p>
+    <p>
+      <u class="font-monospace">Time units</u> must be one of
+      <u class="font-monospace">Days</u> or 
+      <u class="font-monospace">Weeks</u>, and
+      <u class="font-monospace">Case counts</u>
+      must be a comma-separated list of one or more non-negative integers.
+    </p>
+    <p>Example:</p>
+    <p class="overflow-x-scroll text-nowrap font-monospace lh-sm">
+      Montreal,Days,1,2,3,4,5,6,7,8,9,19<br>
+      Ottawa,Weeks,1,2,3,4,5,6,7,8,9,19<br>
+      Toronto,Days,1,2,3,4,5,6,7,8,9,19
+    </p>
+  </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>
+<!-- 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>
diff --git a/inst/app/templates/content/data/enter-data/single-entry.html b/inst/app/templates/content/data/enter-data/single-entry.html
new file mode 100644
index 0000000..9f249d9
--- /dev/null
+++ b/inst/app/templates/content/data/enter-data/single-entry.html
@@ -0,0 +1,39 @@
+<h4>Single entry</h4>
+<!-- Dataset name. -->
+<div class="my-3">
+  <label class="form-label" for="data_name">Dataset name</label>
+  <input name="data_name" class="form-control" type="text">
+  <small id="data_name_warn" class="form-text text-primary shiny-text-output"></small>
+</div>
+<!-- Case counts. -->
+<div class="mb-3">
+  <label class="form-label" for="data_counts">
+    Case counts
+    <sup data-bs-toggle="tooltip" data-bs-placement="right"
+         data-bs-title="Enter as a comma-separated list of non-negative integers (example: 0,1,1,2,3,5,8,13).">
+      [?]
+    </sup>
+  </label>
+  <input name="data_counts" class="form-control" type="text">
+  <small id="data_counts_warn" class="form-text text-primary shiny-text-output"></small>
+</div>
+<!-- Time units. -->
+<div class="mb-3">
+  <label class="form-label" for="data_units">Time units</label>
+  <div class="shiny-input-radiogroup" id="data_units">
+    <div class="form-check form-check-inline">
+      <label class="form-check-label">
+        <input type="radio" class="form-check-input me-2" name="data_units" value="Days">Days
+      </label>
+    </div>
+    <div class="form-check form-check-inline">
+      <label class="form-check-label">
+        <input type="radio" class="form-check-input me-2" name="data_units" value="Weeks" checked>Weeks
+      </label>
+    </div>
+  </div>
+</div>
+<!-- Submit data. -->
+<button id="data_single" type="button" class="btn btn-outline-primary btn-sm action-button">
+  <span class="glyphicon glyphicon-plus"></span> Add
+</button>
diff --git a/inst/app/templates/content/data/view-data.html b/inst/app/templates/content/data/view-data.html
new file mode 100644
index 0000000..52f1e85
--- /dev/null
+++ b/inst/app/templates/content/data/view-data.html
@@ -0,0 +1,19 @@
+<h4>Data table</h4>
+<!-- Data table. -->
+<div class="my-3">
+  {{ DT::dataTableOutput(outputId = "data_table") }}
+</div>
+<!-- Display inactive delete button when no rows are selected. -->
+<button type="button" class="btn btn-primary btn-sm text-white" disabled
+        data-display-if="'data_table_rows_selected' in input && input.data_table_rows_selected.length == 0">
+  <span class="glyphicon glyphicon-remove"></span> Delete row(s)
+</button>
+<!-- Display active delete button when at least one row is selected. -->
+<button id="data_delete" type="button" class="btn btn-primary btn-sm action-button text-white"
+        data-display-if="'data_table_rows_selected' in input && input.data_table_rows_selected.length != 0">
+  <span class="glyphicon glyphicon-remove"></span> Delete row(s)
+</button>
+<!-- Button to export data table as a CSV file. -->
+<a id="data_export" type="button" class="btn btn-outline-primary btn-sm shiny-download-link">
+  <span class="glyphicon glyphicon-download-alt"></span> Export table
+</a>