UI : align overview and todays UI with centered stats #182 (#191)

* Move chart to center * Align css * Align dark-style.css * Add stats title * Removed title : cleaner look * Shorter titles for stats * Shorter title, unique is implicit * Invert Species Total and Today * Re-add left chart * Re-add left chart bis * Adapt css for flexible layout * Align with main css * Restore overview-stats, add center-column * Restore style, add center-column * Restore css * add center-column * Remove useless change * Prevents centering * Prevents centering * Aggregate ajax sqlite * Ensured the 5 sqlite commands are centralized * Load center only after left has completed (to sync values)
2024-10-15 19:52:56 +02:00
parent 305e1813d0
commit 5e70dcabbb
4 changed files with 115 additions and 32 deletions
@@ -272,6 +272,10 @@ button:hover {
  justify-content: center;
 }

+.center-column {
+  display: none;
+}
+
 .left-column {
  flex: 10%;
  padding-left: 10px;
@@ -501,6 +505,10 @@ button:hover {
  .column1,.column2,.column3,.column4 {
    height: 90%
  }
+  .center-column {
+    display: flex;
+    justify-content: center;
+  }
  .left-column {
    display: none;
  }
@@ -515,7 +523,7 @@ button:hover {
    overflow-x: hidden;
  }
  .overview .right-column .chart img {
-    margin-left: 5%;
+    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    opacity: 0.7;
@@ -639,6 +647,10 @@ button:hover {
  .topnav.responsive button {
    display: block;
  }
+  .center-column {
+    display: flex;
+    justify-content: center;
+  }
  .left-column {
    display: none;
  }
@@ -261,6 +261,9 @@ button:hover {
  justify-content: center;
 }

+.center-column {
+  display: none;
+}
 .left-column {
  flex: 10%;
  padding-left: 10px;
@@ -477,6 +480,10 @@ button:hover {
  .column1,.column2,.column3,.column4 {
    height: 90%
  }
+  .center-column {
+    display: flex;
+    justify-content: center;
+  }
  .left-column {
    display: none;
  }
@@ -491,7 +498,7 @@ button:hover {
    overflow-x: hidden;
  }
  .overview .right-column .chart img {
-    margin-left: 5%;
+    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
  }
@@ -608,6 +615,10 @@ button:hover {
  .topnav.responsive button {
    display: block;
  }
+  .center-column {
+    display: flex;
+    justify-content: center;
+  }
  .left-column {
    display: none;
  }
@@ -151,56 +151,103 @@ if(isset($_GET['ajax_detections']) && $_GET['ajax_detections'] == "true" && isse
  die();
 }

+function get_chart_data($db, $force_regen = false) {
+  if ($force_regen || !isset($_SESSION['chart_data'])) {
+    $statement = $db->prepare('SELECT COUNT(*) FROM detections');
+    ensure_db_ok($statement);
+    $result = $statement->execute();
+    $totalcount = $result->fetchArray(SQLITE3_ASSOC);
+
+    $statement2 = $db->prepare('SELECT COUNT(*) FROM detections WHERE Date == DATE(\'now\', \'localtime\')');
+    ensure_db_ok($statement2);
+    $result2 = $statement2->execute();
+    $todaycount = $result2->fetchArray(SQLITE3_ASSOC);
+
+    $statement3 = $db->prepare('SELECT COUNT(*) FROM detections WHERE Date == Date(\'now\', \'localtime\') AND TIME >= TIME(\'now\', \'localtime\', \'-1 hour\')');
+    ensure_db_ok($statement3);
+    $result3 = $statement3->execute();
+    $hourcount = $result3->fetchArray(SQLITE3_ASSOC);
+
+    $statement5 = $db->prepare('SELECT COUNT(DISTINCT(Com_Name)) FROM detections WHERE Date == Date(\'now\',\'localtime\')');
+    ensure_db_ok($statement5);
+    $result5 = $statement5->execute();
+    $speciestally = $result5->fetchArray(SQLITE3_ASSOC);
+
+    $statement6 = $db->prepare('SELECT COUNT(DISTINCT(Com_Name)) FROM detections');
+    ensure_db_ok($statement6);
+    $result6 = $statement6->execute();
+    $totalspeciestally = $result6->fetchArray(SQLITE3_ASSOC);
+
+    // Store the data in session to be reused by other charts
+    $_SESSION['chart_data'] = [
+      'totalcount' => $totalcount,
+      'todaycount' => $todaycount,
+      'hourcount' => $hourcount,
+      'speciestally' => $speciestally,
+      'totalspeciestally' => $totalspeciestally
+    ];
+  }
+
+  return $_SESSION['chart_data'];
+}
+
 if(isset($_GET['ajax_left_chart']) && $_GET['ajax_left_chart'] == "true") {

-$statement = $db->prepare('SELECT COUNT(*) FROM detections');
-ensure_db_ok($statement);
-$result = $statement->execute();
-$totalcount = $result->fetchArray(SQLITE3_ASSOC);
-
-$statement3 = $db->prepare('SELECT COUNT(*) FROM detections WHERE Date == Date(\'now\', \'localtime\') AND TIME >= TIME(\'now\', \'localtime\', \'-1 hour\')');
-ensure_db_ok($statement3);
-$result3 = $statement3->execute();
-$hourcount = $result3->fetchArray(SQLITE3_ASSOC);
-
-$statement5 = $db->prepare('SELECT COUNT(DISTINCT(Com_Name)) FROM detections WHERE Date == Date(\'now\',\'localtime\')');
-ensure_db_ok($statement5);
-$result5 = $statement5->execute();
-$speciestally = $result5->fetchArray(SQLITE3_ASSOC);
-
-$statement6 = $db->prepare('SELECT COUNT(DISTINCT(Com_Name)) FROM detections');
-ensure_db_ok($statement6);
-$result6 = $statement6->execute();
-$totalspeciestally = $result6->fetchArray(SQLITE3_ASSOC);
-  
+  // Force the data to regenerate and store it in session
+  $chart_data = get_chart_data($db, true);
 ?>
 <table>
  <tr>
    <th>Total</th>
-    <td><?php echo $totalcount['COUNT(*)'];?></td>
+    <td><?php echo $chart_data['totalcount']['COUNT(*)'];?></td>
  </tr>
  <tr>
    <th>Today</th>
-    <td><form action="" method="GET"><button type="submit" name="view" value="Todays Detections"><?php echo $todaycount['COUNT(*)'];?></button></td>
+    <td><form action="" method="GET"><button type="submit" name="view" value="Todays Detections"><?php echo $chart_data['todaycount']['COUNT(*)'];?></button></td>
    </form>
  </tr>
  <tr>
    <th>Last Hour</th>
-    <td><?php echo $hourcount['COUNT(*)'];?></td>
+    <td><?php echo $chart_data['hourcount']['COUNT(*)'];?></td>
  </tr>
  <tr>
    <th>Species Detected Today</th>
-    <td><form action="" method="GET"><input type="hidden" name="view" value="Recordings"><button type="submit" name="date" value="<?php echo date('Y-m-d');?>"><?php echo $speciestally['COUNT(DISTINCT(Com_Name))'];?></button></td>
+    <td><form action="" method="GET"><input type="hidden" name="view" value="Recordings"><button type="submit" name="date" value="<?php echo date('Y-m-d');?>"><?php echo $chart_data['speciestally']['COUNT(DISTINCT(Com_Name))'];?></button></td>
    </form>
  </tr>
  <tr>
    <th>Total Number of Species</th>
-    <td><form action="" method="GET"><button type="submit" name="view" value="Species Stats"><?php echo $totalspeciestally['COUNT(DISTINCT(Com_Name))'];?></button></td>
+    <td><form action="" method="GET"><button type="submit" name="view" value="Species Stats"><?php echo $chart_data['totalspeciestally']['COUNT(DISTINCT(Com_Name))'];?></button></td>
    </form>
  </tr>
 </table>
 <?php
-die();
+  die();
+}
+
+if(isset($_GET['ajax_center_chart']) && $_GET['ajax_center_chart'] == "true") {
+
+  // Retrieve the cached data from session without regenerating
+  $chart_data = get_chart_data($db);
+?>
+  <table><tr>
+  <th>Total</th>
+  <th>Today</th>
+  <th>Last Hour</th>
+  <th>Species Total</th>
+  <th>Species Today</th>
+      </tr>
+      <tr>
+      <td><?php echo $chart_data['totalcount']['COUNT(*)'];?></td>
+      <td><form action="" method="GET"><input type="hidden" name="view" value="Todays Detections"><?php echo $chart_data['todaycount']['COUNT(*)'];?></td></form>
+      <td><?php echo $chart_data['hourcount']['COUNT(*)'];?></td>
+      <td><form action="" method="GET"><button type="submit" name="view" value="Species Stats"><?php echo $chart_data['totalspeciestally']['COUNT(DISTINCT(Com_Name))'];?></button></td></form>
+      <td><form action="" method="GET"><input type="hidden" name="view" value="Recordings"><button type="submit" name="date" value="<?php echo date('Y-m-d');?>"><?php echo $chart_data['speciestally']['COUNT(DISTINCT(Com_Name))'];?></button></td></form>
+  </tr>
+  </table>
+
+<?php
+  die();
 }

 if (get_included_files()[0] === __FILE__) {
@@ -263,6 +310,8 @@ if (get_included_files()[0] === __FILE__) {
 <div class="left-column">
 </div>
 <div class="right-column">
+<div class="center-column">
+</div>
 <div class="chart">
 <?php
 $refresh = $config['RECORDING_LENGTH'];
@@ -319,11 +368,22 @@ function loadLeftChart() {
  xhttp.onload = function() {
    if(this.responseText.length > 0 && !this.responseText.includes("Database is busy")) {
      document.getElementsByClassName("left-column")[0].innerHTML = this.responseText;
+      loadCenterChart();
    }
  }
  xhttp.open("GET", "overview.php?ajax_left_chart=true", true);
  xhttp.send();
 }
+function loadCenterChart() {
+  const xhttp = new XMLHttpRequest();
+  xhttp.onload = function() {
+    if(this.responseText.length > 0 && !this.responseText.includes("Database is busy")) {
+      document.getElementsByClassName("center-column")[0].innerHTML = this.responseText;
+    }
+  }
+  xhttp.open("GET", "overview.php?ajax_center_chart=true", true);
+  xhttp.send();
+}
 function refreshTopTen() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
@@ -303,8 +303,8 @@ if(isset($_GET['today_stats'])) {
  <th>Total</th>
  <th>Today</th>
  <th>Last Hour</th>
-  <th>Unique Species Total</th>
-  <th>Unique Species Today</th>
+  <th>Species Total</th>
+  <th>Species Today</th>
      </tr>
      <tr>
      <td><?php echo $totalcount['COUNT(*)'];?></td>
@@ -410,8 +410,8 @@ if (get_included_files()[0] === __FILE__) {
  <th>Total</th>
  <th>Today</th>
  <th>Last Hour</th>
-  <th>Unique Species Total</th>
-  <th>Unique Species Today</th>
+  <th>Species Total</th>
+  <th>Species Today</th>
      </tr>
      <tr>
      <td><?php echo $totalcount['COUNT(*)'];?></td>