starting internationalBatchCodeTables.html

2022-02-19 14:56:21 +01:00
parent 4b854aa937
commit b2d4e93df6
15 changed files with 138 additions and 4 deletions
--- a/internationalBatchCodeTables.html
+++ b/internationalBatchCodeTables.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>International Batch Codes</title>
+  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.css">
+  <link rel="stylesheet" type="text/css" href="batchCodeTable.css">
+  <link rel="stylesheet" type="text/css" href="forkMeOnGitHub.css">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+  <script type="text/javascript" charset="utf8"
+    src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
+  <script>
+    function createEmptyBatchCodeTable() {
+      const columnIndex = {
+        'VAX_LOT': 0,
+        'Total Number of Adverse Reaction Reports': 1,
+        'Deaths': 2,
+        'Disabilities': 3,
+        'Life Threatening Illnesses': 4,
+        'Severe reports (%)': 5,
+      };
+      return $('#batchCodeTable').DataTable(
+        {
+          language:
+          {
+            searchPlaceholder: "Enter Batch Code"
+          },
+          search:
+          {
+            return: false
+          },
+          processing: true,
+          deferRender: true,
+          order: [[columnIndex['Total Number of Adverse Reaction Reports'], "desc"]],
+          columnDefs:
+            [
+              {
+                searchable: false,
+                targets: [
+                  columnIndex['Total Number of Adverse Reaction Reports'],
+                  columnIndex['Deaths'],
+                  columnIndex['Disabilities'],
+                  columnIndex['Life Threatening Illnesses'],
+                  columnIndex['Severe reports (%)']
+                ]
+              },
+              {
+                render: (data, type, row) => {
+                  const lethality = parseFloat(data);
+                  return !isNaN(lethality) ? lethality.toFixed(2) + " %" : '';
+                },
+                targets: [columnIndex['Lethality']]
+              }
+            ]
+        });
+    }
+
+    function selectInput() {
+      const input = document.querySelector(".dataTables_filter input");
+      input.focus();
+      input.select();
+    }
+
+    $(document).ready(function () {
+      const batchCodeTable = createEmptyBatchCodeTable();
+      document.querySelector('#country').addEventListener(
+        'change',
+        event => {
+          const country = event.target.value;
+          const result = document.querySelector('.result');
+          result.textContent = `Batch Codes for ${country}`;
+          batchCodeTable.ajax.url(`data/${country}.json`).load();
+          selectInput();
+        });
+    });
+  </script>
+</head>
+
+<body>
+  <span id="forkongithub"><a href="https://github.com/KnollFrank/HowBadIsMyBatch">Fork me on GitHub</a></span>
+  <h1>International Batch Codes</h1>
+  <p>
+    <label>Select country:
+      <select id="country" name="country">
+        <option value="">Select One …</option>
+        <option value="United Kingdom">United Kingdom</option>
+        <option value="France">France</option>
+        <option value="Germany">Germany</option>
+        <option value="Japan">Japan</option>
+        <option value="Italy">Italy</option>
+        <option value="Austria">Austria</option>
+        <option value="Netherlands">Netherlands</option>
+        <option value="Spain">Spain</option>
+        <option value="Belgium">Belgium</option>
+        <option value="Sweden">Sweden</option>
+        <option value="Portugal">Portugal</option>
+        <option value="Australia">Australia</option>
+      </select>
+    </label>
+  <h2 class="result"></h2>
+  <p>
+    <b>Check out your batch code</b> (last updated 16th February 2022)
+  </p>
+  <p>
+  <table class="display" id="batchCodeTable">
+    <thead>
+      <tr>
+        <th>VAX_LOT</th>
+        <th>Total Number of Adverse Reaction Reports</th>
+        <th>Deaths</th>
+        <th>Disabilities</th>
+        <th>Life Threatening Illnesses</th>
+        <th>Severe reports (%)</th>
+      </tr>
+    </thead>
+  </table>
+  </p>
+</body>
+
+</html>