From 1c67a395a9d2fe0ddd2a8265e9d686bdbe3fef06 Mon Sep 17 00:00:00 2001
From: 07lodgeT <50887090+07lodgeT@users.noreply.github.com>
Date: Thu, 25 Mar 2021 10:45:31 +0000
Subject: [PATCH 1/3] Dropdown for selecting value in column

Using the datatables API, added a dropdown to be able to select a specific value in each column.
Useful for getting data for a certain car or track without having to flick through table
https://www.datatables.net/examples/api/multi_filter_select.html
---
 frontend/index.php | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
diff --git a/frontend/index.php b/frontend/index.php
index 256f954..fda29fb 100644
--- a/frontend/index.php
+++ b/frontend/index.php
@@ -113,6 +113,29 @@
     $(document).ready( function () {
     $('#motecData').DataTable({ pageLength: 25 });
 } );
+	
+$(document).ready(function() {
+    $('#motecData').DataTable( {
+        initComplete: function () {
+            this.api().columns().every( function () {
+                var column = this;
+                var select = $('<select><option value=""></option></select>')
+                    .appendTo( $(column.footer()).empty() )
+                    .on( 'change', function () {
+                        var val = $.fn.dataTable.util.escapeRegex(
+                            $(this).val()
+                        );
+                        column
+                            .search( val ? '^'+val+'$' : '', true, false )
+                            .draw();
+                    } );
+                column.data().unique().sort().each( function ( d, j ) {
+                    select.append( '<option value="'+d+'">'+d+'</option>' )
+                } );
+            } );
+        }
+    } );
+} );
 
 $(document).ready(function(){
     $('.progress').hide();

From 270285e05760dc95039b9e1d45ca59835345b566 Mon Sep 17 00:00:00 2001
From: 07lodgeT <50887090+07lodgeT@users.noreply.github.com>
Date: Thu, 25 Mar 2021 10:50:33 +0000
Subject: [PATCH 2/3] Added column selector into line 120

---
 frontend/index.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/index.php b/frontend/index.php
index fda29fb..aff3297 100644
--- a/frontend/index.php
+++ b/frontend/index.php
@@ -117,7 +117,7 @@
 $(document).ready(function() {
     $('#motecData').DataTable( {
         initComplete: function () {
-            this.api().columns().every( function () {
+            this.api().columns([0, 1]).every( function () {
                 var column = this;
                 var select = $('<select><option value=""></option></select>')
                     .appendTo( $(column.footer()).empty() )

From 5b4783a7699395fcbcc0567a15059c6659e83da1 Mon Sep 17 00:00:00 2001
From: 07lodgeT <50887090+07lodgeT@users.noreply.github.com>
Date: Thu, 8 Apr 2021 08:58:03 +0100
Subject: [PATCH 3/3] Update to latest with working JS

Can change line 97 to column.footer if wanted filter at the bottom
---
 frontend/index.php | 148 ++++++++++-----------------------------------
 1 file changed, 33 insertions(+), 115 deletions(-)

diff --git a/frontend/index.php b/frontend/index.php
index aff3297..98a7410 100644
--- a/frontend/index.php
+++ b/frontend/index.php
@@ -1,18 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <link rel="stylesheet" href="style.css" >
-    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" >
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>ArisDrives Motec Server</title>
+    <link rel="apple-touch-icon" sizes="180x180" href="icon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="icon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="icon/favicon-16x16.png">
+    <link rel="manifest" href="icon/site.webmanifest">
 
+    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" >
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" >
     <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css" >
+    <link rel="stylesheet" href="css/style.css" >
 </head>
 <body>
     <div id="container" class="jumbotron">
-    <div class="logo-bg clearfix"><img src="https://www.assettocorsa.it/competizione/wp-content/themes/fosfostrap/_style/build/img/gtwc.png" width="140" height="80" class="logo-bg pos-left"> <span class="motec">ArisDrives Motec Server</span>
+    <div class="logo-bg clearfix"><img src="https://www.assettocorsa.it/competizione/wp-content/themes/fosfostrap/_style/build/img/gtwc.png" width="140" height="80" class="logo-bg pos-left"> <span class="motec">ArisDrives Motec Server</span><img src="icon/icon.png" width="60" height="56" alt="track report" title="Track Report">
     <img src="https://www.assettocorsa.it/competizione/wp-content/themes/fosfostrap/_style/build/img/logo-acc-gtwc.png" width="250" height="80"  class="logo-bg pos-right"></div>
 <p>
-    This is an effort to build an extensive collection of motec data for as many car/track combinations as possible.    
+    This is an effort to build an extensive collection of motec data for as many car/track combinations as possible.
 </p>
 <p>
     If you would like to contribute, just zip your motec folder and upload it using the button below. <br>
@@ -22,10 +29,18 @@
 </p>
 <form action="upload.php" method="post" enctype="multipart/form-data" id="uploadForm">
 Select .zip file to upload:
-<input type="file" class="btn btn-success" name="fileToUpload" id="fileToUpload">
-<input type="submit" class="btn btn-primary" value="Start Upload" name="submit" >
-</form><!-- Display upload status -->
+<input type="file"  accept=".zip" class="btn btn-success" name="fileToUpload" id="fileToUpload">
+<span>
+    <input type="submit" class="btn btn-primary" value="Start Upload" name="submit" id="startBtn">
+    <span class="spinner-border spinner-border-sm text-primary" role="status" aria-hidden="true" id="startSpinner"></span>
+</span>
+</form>
+<!-- Display upload status -->
 <div id="uploadStatus"></div>
+<!-- The DataTable Update -->
+<span id="refreshStatus">
+    The table has been refreshed...
+</span>
 </div>  <!-- div id=container -->
 <!-- Progress bar -->
 <div class="progress">
@@ -35,10 +50,10 @@
 <div id="donate">
     <form action="https://www.paypal.com/donate" method="post" target="_top">
         Donations go towards hosting and maintenance. And ACC DLC. <input type="hidden" name="hosted_button_id" value="RCTKH7F9FU77L" />
-    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
-    <img alt="" border="0" src="https://www.paypal.com/en_DE/i/scr/pixel.gif" width="1" height="1" />
+    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
     </form>
 </div> <!-- div id=donate -->
+<p>Use the Download button to retrieve the specific ld and ldx in zip format.</p>
 <table id="motecData" class="table is-striped table-bordered" style="width:100%">
     <thead>
       <tr> 
@@ -50,48 +65,9 @@
           <td> Best Laptime </td> 
           <td> Best Lap </td>
           <td> Motec Download </td>
-          <td> LDX Download </td>
       </tr>
     </thead>
-    <tbody>
-<?php 
-$username = "motec"; 
-$password = "motec4thepeople"; 
-$database = "motec_db"; 
-$mysqli = new mysqli("db", $username, $password, $database); 
-$query = "SELECT * FROM telemetry ORDER BY track";
-
-if ($result = $mysqli->query($query)) {
-    while ($row = $result->fetch_assoc()) {
-        $field1name = $row["track"];
-        $field2name = $row["car"];
-        $field3name = $row["date"];
-        $field4name = $row["time"];
-
-        $whole = intval($row["best_time"]); 
-        $decimal1 = $row["best_time"] - $whole; 
-        $decimal = substr($decimal1, 1, 3);
 
-        $field5name = gmdate("i:s", $row["best_time"]) . $decimal; 
-        $field6name = $row["best_lap"];
-        $field7name = $row["filename"] . '.ld';
-        $field8name = $row["filename"] . '.ldx';
-
-        echo '<tr> 
-                  <td>'.$field1name.'</td> 
-                  <td>'.$field2name.'</td> 
-                  <td>'.$field3name.'</td> 
-                  <td>'.$field4name.'</td> 
-                  <td><b>'.$field5name.'</b></td> 
-                  <td>'.$field6name.'</td> 
-                  <td><a class="btn btn-info" href="download.php?file='.$field7name.'">Download</a></td>
-                  <td><a class="btn btn-info" href="download.php?file='.$field8name.'">Download</a></td>
-              </tr>';
-    }
-    $result->free();
-} 
-?>
-</tbody>
 <tfoot>
       <tr> 
           
@@ -102,33 +78,33 @@
           <td> Best Laptime </td> 
           <td> Best Lap </td>
           <td> Motec Download </td>
-          <td> LDX Download </td>
       </tr>
 </tfoot>
 </table>
 <!-- This is where the jQuery should be placed  -->
 <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
-<script>
-    $(document).ready( function () {
-    $('#motecData').DataTable({ pageLength: 25 });
-} );
+<script src="js/app.js"></script>
 	
+<script>
 $(document).ready(function() {
     $('#motecData').DataTable( {
         initComplete: function () {
-            this.api().columns([0, 1]).every( function () {
+            this.api().columns([0,1]).every( function () {
                 var column = this;
-                var select = $('<select><option value=""></option></select>')
-                    .appendTo( $(column.footer()).empty() )
+                var select = $('<select><option value="">Show All</option></select>')
+                    .appendTo( $(column.header()))
                     .on( 'change', function () {
                         var val = $.fn.dataTable.util.escapeRegex(
                             $(this).val()
                         );
+
                         column
                             .search( val ? '^'+val+'$' : '', true, false )
                             .draw();
                     } );
+
                 column.data().unique().sort().each( function ( d, j ) {
                     select.append( '<option value="'+d+'">'+d+'</option>' )
                 } );
@@ -136,65 +112,7 @@
         }
     } );
 } );
-
-$(document).ready(function(){
-    $('.progress').hide();
-    $('#uploadStatus').empty();
-    // File upload via Ajax
-    $("#uploadForm").on('submit', function(e){
-        e.preventDefault();
-        $('.progress').show();
-        $('#uploadStatus').empty();
-        $.ajax({
-            xhr: function() {
-                var xhr = new window.XMLHttpRequest();
-                xhr.upload.addEventListener("progress", function(evt) {
-                    if (evt.lengthComputable) {
-                        var percentComplete = Math.round(((evt.loaded / evt.total) * 100));
-                        $(".progress-bar").width(percentComplete + '%');
-                        $(".progress-bar").html(percentComplete+'%');
-                    }
-                }, false);
-                return xhr;
-            },
-            type: 'POST',
-            url: 'upload.php',
-            data: new FormData(this),
-            contentType: false,
-            cache: false,
-            processData:false,
-            dataType: "json",
-            beforeSend: function(){
-                $(".progress-bar").width('0%');
-            },
-            error:function(){
-                $('#uploadStatus').html('<p style="color:#EA4335;">File upload failed, please try again.</p>');
-            },
-            success: function(data){
-                if(data.response == 'ok'){
-                    $('#uploadForm')[0].reset();
-                    $('#uploadStatus').html('<p style="color:#28A74B;">' + data.message + '</p>');
-                    $('.progress').hide();
-                }else if(data.response == 'err'){
-                    $('#uploadStatus').html('<p style="color:#EA4335;">' + data.message + '</p>');
-                }
-            }
-        });
-    });
-	
-    // File type validation
-    $("#fileToUpload").change(function(){
-	var allowedTypes = ['application/zip', 'application/x-zip-compressed'];
-        var file = this.files[0];
-	var fileType = file.type;
-	console.log(fileType);
-        if(!allowedTypes.includes(fileType)){
-            alert('Filetype not supported: ' + fileType);
-            $("#fileToUpload").val('');
-            return false;
-        }
-    });
-});
 </script>
+
 </body>
 </html>

Best Laptime	Best Lap	Motec Download	LDX Download
'.$field1name.'	'.$field2name.'	'.$field3name.'	'.$field4name.'	'.$field5name.'	'.$field6name.'	Download	Download
Best Laptime	Best Lap	Motec Download	LDX Download