Major Refactor for Mobile Compatibility

Major refactor of webpanel components to include support for mobile web
browsers and a more streamlined navigation. Includes reorganization of
files.

templates/webpanel/capture.php

@@ -0,0 +1,7 @@
+<?php
+  # "Capture" showing list of all images for a particular capture
+  include_once('views/header.php');
+  $pass_id = isset($_GET['id']) ? intval($_GET['id']) : 1;
+  require('controllers/capture_controller.php');
+  include_once('views/footer.php') 
+?>

templates/webpanel/captures.php

@@ -1,7 +1,7 @@
 <?php
-  $configs = include('config.php');
+  # "Captures" showing grid of all captured images
   include_once('views/header.php');
   $page = isset($_GET['page']) ? intval($_GET['page']) : 1;
-  require('controllers/images_controller.php');
+  require('controllers/captures_controller.php');
   include_once('views/footer.php') 
 ?>

templates/webpanel/controllers/capture_controller.php

@@ -0,0 +1,9 @@
+<?php
+  $configs = include('config.php');
+  require('models/db_conn.php');
+  $db_conn = new Conn($configs->db_dir);
+  if ($pass_id < 1) $pass_id = 1;
+  $enhancements = $db_conn->getEnhancements($pass_id);
+  $path = $db_conn->getImagePath($pass_id);
+  require('views/capture.php');
+?>

templates/webpanel/controllers/captures_controller.php

@@ -1,11 +1,15 @@
 <?php
   $img_per_page = 18;
 
+  $configs = include('config.php');
   require('models/db_conn.php');
   $db_conn = new Conn($configs->db_dir);
   $page_count = $db_conn->totalPages($img_per_page);
+
+  # adjust for under/over paging
   if ($page < 1) $page = 1;
   if ($page > $page_count) $page = $page_count;
+
   $images = $db_conn->getImages($page, $img_per_page);
-  require('views/all_images.php');
+  require('views/all_captures.php');
 ?>

templates/webpanel/controllers/pass_controller.php

@@ -1,4 +1,5 @@
 <?php
+  $configs = include('config.php');
   require('models/db_conn.php');
   $db_conn = new Conn($configs->db_dir);
   $passes = $db_conn->getPasses();

templates/webpanel/css/captures.css

@@ -1,6 +1,33 @@
+ul.pagination li.page-item {
+  width: 100%;
+  text-align: center;
+}
+
+ul.pagination li.page-item a {
+  color: white;
+  background-color: #4CAF50;
+  opacity: 0.85;
+}
+
+ul.pagination li.page-item.disabled a {
+  color: white;
+  background-color: #6c757d;
+}
+
+div.page-count-summary {
+  text-align: center;
+}
+
 div.card-group.capture-image-cards div.image-card {
   display: block;
   text-align: center;
+  border: 1px solid rgba(0,0,0,.125);
+  border-radius: 0.25rem;
+}
+
+div.card-group.capture-image-cards a {
+  display: block;
+  height: 180px;
 }
 
 div.card-group.capture-image-cards div.image-card img.card-img-top {

templates/webpanel/css/header.css

@@ -15,3 +15,9 @@ header ul.navbar-nav li a {
 header ul.navbar-nav li.active a {
   border-bottom: 0.25rem solid white;
 }
+
+header span.navbar-text.timezone {
+  font-size: 0.75rem;
+  text-align: right;
+  line-height: 0.95rem;
+}

templates/webpanel/index.php

@@ -1,5 +1,5 @@
 <?php
-  $configs = include('config.php');
+  # "Passes" showing table of all scheduled passes (and landing page)
   include_once('views/header.php');
   $page = isset($_GET['page']) ? intval($_GET['page']) : 1;
   require('controllers/pass_controller.php');

templates/webpanel/models/db_conn.php

@@ -32,8 +32,9 @@
     # get total number of pages to display images given the
     # passed number of images per page
     public function totalPages($img_per_page) {
-      $total_pages = $this->con->querySingle("SELECT count() from decoded_passes;");
-      return ceil($total_pages/$img_per_page);
+      $decoded_passes = $this->con->querySingle("SELECT count()
+                                                 FROM decoded_passes;");
+      return ceil($decoded_passes/$img_per_page);
     }
 
     # get a list of images for the given page and total number
@@ -46,8 +47,8 @@
                                            predict_passes.sat_name,
                                            predict_passes.max_elev
                                            FROM decoded_passes
-                                             INNER JOIN predict_passes
-                                              ON predict_passes.pass_start = decoded_passes.pass_start
+                                           INNER JOIN predict_passes
+                                             ON predict_passes.pass_start = decoded_passes.pass_start
                                            ORDER BY decoded_passes.pass_start DESC LIMIT ? OFFSET ?;");
       $query->bindValue(1, $img_per_page);
       $query->bindValue(2, $img_per_page * ($page-1));
@@ -62,5 +63,48 @@
 
       return $images;
     }
+
+    # get the enhancements for the particular capture
+    public function getEnhancements($id) {
+      $query = $this->con->prepare('SELECT daylight_pass,
+                                           sat_type,
+                                           img_count
+                                    FROM decoded_passes
+                                    WHERE id = ?;');
+      $query->bindValue(1, $id);
+      $result = $query->execute();
+      $pass = $result->fetchArray();
+
+      # build enhancement paths based on satellite type
+      switch($pass['sat_type']) {
+        case 0: // Meteor-M2
+          $enhancements = ['-122-rectified.jpg'];
+          break;
+        case 1: // NOAA
+          if ($pass['daylight_pass'] == 1) {
+            $enhancements = ['-ZA.jpg','-MCIR.jpg','-MCIR-precip.jpg','-MSA.jpg','-MSA-precip.jpg','-HVC.jpg','-HVC-precip.jpg','-HVCT.jpg','-HVCT-precip.jpg'];
+          } else {
+            $enhancements = ['-ZA.jpg','-MCIR.jpg','-MCIR-precip.jpg'];
+          }
+          break;
+        case 2: // ISS
+          for ($x = 0; $x <= $pass['img_count']-1; $x++) {
+            $enhancements[] = "-$x.png";
+          }
+          break;
+      }
+      return $enhancements;
+    }
+
+    # get the image path for the specific image
+    public function getImagePath($id) {
+      $query = $this->con->prepare('SELECT file_path
+                                    FROM decoded_passes
+                                    WHERE id = ?;');
+      $query->bindValue(1, $id);
+      $result = $query->execute();
+      $image = $result->fetchArray();
+      return $image['file_path'];
+    }
   }
 ?>

templates/webpanel/views/all_captures.php

@@ -1,12 +1,12 @@
-      <link rel="stylesheet" type="text/css" href="css/images.css">
+      <link rel="stylesheet" type="text/css" href="css/captures.css">
 
-      <div class="pagination">
-        <?php
-          if ($page < 1) {
-            echo "<a href=\"?page=" . ($page-1) . "\">" . $lang['prev'] . "</a>";
-          }
-        ?>
-      </div> 
+      <nav aria-label="page" id="pagination" class="mb-0">
+        <?php include('views/pagination.php'); ?>
+      </nav>
+
+      <div class="page-count-summary mb-0 mx-2 my-1">
+        <?php echo $lang['page'] . " " . $page . " " . $lang['of'] . " " . $page_count; ?>
+      </div>
 
       <?php
         $col_count=0;
@@ -36,11 +36,11 @@
 
           // output image and details, with link to respective enhancement images
           echo "<div class=\"card bg-light m-2 p-2 image-card\">";
-          echo "  <a href=\"detail.php?id=" . $image['id'] . "\"><img class=\"card-img-top\" src=\"" . $img_path . "\" alt=\"img\"></a>";
+          echo "  <a href=\"capture.php?id=" . $image['id'] . "\"><img class=\"card-img-top\" src=\"" . $img_path . "\" alt=\"img\"></a>";
           echo "  <div class=\"card-body\">";
           echo "    <h5 class=\"card-title\">" . $image['sat_name'] . "</h5>";
           echo "    <p class=\"card-text\">";
-          echo "      <strong>" . $lang['elev'] . ":</strong> " . $image['max_elev'] . "<br>";
+          echo "      <strong>" . $lang['elev'] . ":</strong> " . $image['max_elev'] . "&#176;<br>";
           echo "      <strong>" . $lang['pass_start'] . ":</strong> " . date('m/d/Y H:i:s', $image['pass_start']);
           echo "    </p>";
           echo "  </div>";
@@ -54,3 +54,7 @@
           }
         }
       ?>
+
+      <nav aria-label="page" id="pagination" class="d-md-none mb-0">
+        <?php include('views/pagination.php'); ?>
+      </nav>

templates/webpanel/views/capture.php

@@ -0,0 +1,39 @@
+      <link rel="stylesheet" type="text/css" href="css/captures.css">
+
+      <?php
+        $col_count=0;
+        $i = 0;
+        $img_count = count($enhancements);
+
+        foreach ($enhancements as $enhancement) {
+          if ($col_count % 3 == 0) {
+            echo "<div class=\"card-group capture-image-cards\">";
+          }
+
+          # build image path and enhancement text
+          $img_path = "/images/" . $path . $enhancement;
+          $thumb_path = "/images/thumb/" . $path . $enhancement;
+          $enhancement_text = "Unknown";
+          preg_match("/-(.*).jpg/", $enhancement, $m);
+          if (isset($m[1])) {
+            $enhancement_text = $m[1];
+          }
+
+          // output image and details, with link to respective enhancement images
+          echo "<div class=\"card bg-light m-2 p-2 image-card\">";
+          echo "  <a href=\"" . $img_path . "\"><img class=\"card-img-top\" src=\"" . $thumb_path . "\" alt=\"img\"></a>";
+          echo "  <div class=\"card-body\">";
+          echo "    <p class=\"card-text\">";
+          echo "      <strong>Enhancement: </strong>" . $enhancement_text;
+          echo "    </p>";
+          echo "  </div>";
+          echo "</div>";
+
+          $i++;
+          $col_count++; 
+
+          if ($col_count % 3 == 0 or $i >= $img_count) {
+            echo "</div>";
+          }
+        }
+      ?>

templates/webpanel/views/footer.php

@@ -2,7 +2,7 @@
 
     <footer class="footer text-center">
       <div class="contaienr">
-        <a href="https://github.com/jekhokie/raspberry-noaa-v2"><img class="img-footer" src="assets/web_img/logo-small.png"></a>
+        <a href="https://github.com/jekhokie/raspberry-noaa-v2"><img class="img-footer" src="assets/web_img/logo-small-v2.png"></a>
       </div>
     </footer>
 

templates/webpanel/views/header.php

@@ -28,14 +28,20 @@
   <body>
     <header class="mb-3">
       <div class="navbar navbar-expand navbar-dark bg-dark">
-        <ul class="navbar-nav">
+        <ul class="navbar-nav mr-auto">
           <li class="nav-item <?php if($page == 'index.php'){ echo 'active'; }?>">
             <a class="nav-link" href="index.php"><?php echo $lang['passes']; ?></a>
           </li>
-          <li class="nav-item <?php if($page == 'images.php'){ echo 'active'; }?>">
-            <a class="nav-link" href="images.php"><?php echo $lang['images']; ?></a>
+          <li class="nav-item <?php if($page == 'captures.php' or $page == 'capture.php'){ echo 'active'; }?>">
+            <a class="nav-link" href="captures.php"><?php echo $lang['captures']; ?></a>
           </li>
         </ul>
+        <span class="navbar-text timezone">
+          <em>
+            <?php echo $configs->timezone; ?><br>
+            (UTC<?php echo date('P'); ?>)
+          </em>
+        </span>
       </div>
     </header>
     <div class="container">

templates/webpanel/views/pagination.php

@@ -0,0 +1,17 @@
+      <nav aria-label="page" id="pagination" class="mb-0">
+        <ul class="pagination pagination-sm justify-content-center mb-0 mx-2">
+          <li class="page-item<?php if ($page <= 1) { echo " disabled"; } ?>">
+            <a class="page-link" href="<?php echo "?page=" . ($page-1); ?>" aria-label="<?php echo $lang['prev']; ?>">
+              <span aria-hiden="true">&laquo;</span>
+              <span><?php echo $lang['prev']; ?></span>
+            </a>
+          </li>
+
+          <li class="page-item<?php if ($page >= $page_count) { echo " disabled"; } ?>">
+            <a class="page-link" href="<?php echo "?page=" . ($page+1); ?>" aria-label="<?php echo $lang['next']; ?>">
+              <span><?php echo $lang['next']; ?></span>
+              <span aria-hiden="true">&raquo;</span>
+            </a>
+          </li>
+        </ul>
+      </nav>

templates/webpanel/views/pass_list.php

@@ -32,7 +32,7 @@
           echo "<td scope=\"row\">". $pass['sat_name'] ."</td>";
           echo "<td scope=\"row\" class=\"text-center\">" . $pass_start ."</td>";
           echo "<td scope=\"row\" class=\"text-center\">" . $pass_end . "</td>";
-          echo "<td scope=\"row\" class=\"text-center\">" . $pass['max_elev'] ."</td>";
+          echo "<td scope=\"row\" class=\"text-center\">" . $pass['max_elev'] ."&#176;</td>";
           echo "</tr>";
         }
       }