fixes empty line parsing and styles

opentecr · Jun 29, 2024 · 3e7b298 · 3e7b298
1 parent 374946d
commit 3e7b298
Showing 1 changed file with 68 additions and 8 deletions.
diff --git a/public/index.html b/public/index.html
@@ -4,10 +4,14 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>openTECR</title>
+    <title>TECRDB simple search</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link href="https://cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css" />
     <script src="https://cdn.muicss.com/mui-0.10.3//js/mui.min.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" crossorigin="anonymous"> 
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.4/css/buttons.dataTables.min.css" />
 
     <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
     <script type="text/javascript" src="https://unpkg.com/papaparse@5.3.0/papaparse.min.js"></script>
@@ -25,13 +29,12 @@
       }
 
       const URL_CSV = 'https://opentecr.github.io/TECRDB-data/data.csv';
-      // https://docs.google.com/spreadsheets/d/1jLIxEXVzE2SAzIB0UxBfcFoHrzjzf9euB6ART2VDE8c/export?format=csv&gid=1025642996'
 
       document.addEventListener('DOMContentLoaded', function() { 
 
       Papa.parsePromise = function(file) {
           return new Promise(function(complete, error) {
-              Papa.parse(file, {download: true, complete, skipEmptyLines: true})
+              Papa.parse(file, {download: true, complete, skipEmptyLines: 'greedy'})
           });
       };
 
@@ -88,10 +91,6 @@
           let div_height = $('.container').height()
           $('#data-table').dataTable({
               data: jsonData,
-              columnDefs: [{
-                  "defaultContent": "-",
-                  "targets": "_all"
-                }],
               scrollX: true,
               scrollY: false, /*div_height*/
               scrollCollapse: true,
@@ -174,6 +173,67 @@
         padding-top: 15px;
 
       }
+
+      /**
+      * DataTable CSS
+      */
+      #data-preview {
+        height: 100%;
+        box-sizing: inherit;
+        overflow: auto;
+      }
+      #data-preview table {
+        overflow: auto;
+        max-height: 50%;
+      }
+      .loader,
+      .loader:before,
+      .loader:after {
+        background: #333333;
+        -webkit-animation: load1 1s infinite ease-in-out;
+        animation: load1 1s infinite ease-in-out;
+        width: 1em;
+        height: 2em;
+      }
+      .loader {
+      display: block;
+        color: #333333;
+        text-indent: -9999em;
+        margin: 88px auto;
+        position: relative;
+        font-size: 11px;
+        -webkit-transform: translateZ(0);
+        -ms-transform: translateZ(0);
+        transform: translateZ(0);
+        -webkit-animation-delay: -0.16s;
+        animation-delay: -0.16s;
+      }
+      .loader:before,
+      .loader:after {
+        position: absolute;
+        top: 0;
+        content: '';
+      }
+      .loader:before {
+        left: -1.5em;
+        -webkit-animation-delay: -0.32s;
+        animation-delay: -0.32s;
+      }
+      .loader:after {
+        left: 1.5em;
+      }
+
+      /**
+      * Element-specific CSS
+      */
+      #imprintlink {
+        color:blue;
+      }
+      #imprintlink:hover {
+          text-decoration:underline;
+          cursor: pointer;
+      }
+
     </style>
   </head>
   <body>
@@ -200,7 +260,7 @@
     </div>
     <footer>
       <div class="mui-container mui--text-center mui--text-bottom">
-        <div><a onclick="toggle_visibility('imprint')">Imprint / Impressum</a></div>
+        <div><a id="imprintlink" onclick="toggle_visibility('imprint')">Imprint / Impressum</a></div>
         <div id="imprint" style="display: none;">
             <br>
             Robert Giessmann <br>