From 81fc46eb276db56df046a33026124ff81f476d29 Mon Sep 17 00:00:00 2001 From: Justin Karimi Date: Sun, 24 Jan 2021 21:27:57 -0500 Subject: [PATCH] Add Bootstrap Styling and Refactor Webpanel First adjustments which include renaming and re-organizing files, adding Twitter Bootstrap for better mobile-first styling, and finishing first iteration for the passes interface. --- templates/webpanel/Config.php | 7 -- templates/webpanel/Controller/C_predict.php | 6 -- .../webpanel/Controller/C_showDetail.php | 8 -- .../webpanel/Controller/C_showLastImage.php | 6 -- .../webpanel/Controller/C_showLastImages.php | 11 -- templates/webpanel/Model/Conn.php | 82 -------------- templates/webpanel/Model/index.html | 0 templates/webpanel/TODO | 4 + templates/webpanel/Views/V_viewDetail.php | 23 ---- templates/webpanel/Views/V_viewLastImage.php | 24 ----- templates/webpanel/Views/V_viewLastImages.php | 48 --------- templates/webpanel/Views/V_viewPasses.php | 24 ----- templates/webpanel/Views/index.html | 0 .../index.html => assets/web_img/favicon.ico} | 0 .../{ => assets/web_img}/logo-small.png | Bin templates/webpanel/config.php | 7 ++ .../webpanel/controllers/Pass_Controller.php | 6 ++ .../webpanel/controllers/pass_controller.php | 6 ++ templates/webpanel/css/header.css | 17 +++ templates/webpanel/css/pass_list.css | 9 ++ templates/webpanel/detail.php | 7 -- templates/webpanel/footer.php | 6 -- templates/webpanel/header.php | 27 ----- templates/webpanel/{language => i18n}/ar.php | 0 templates/webpanel/{language => i18n}/de.php | 0 templates/webpanel/{language => i18n}/en.php | 0 templates/webpanel/{language => i18n}/es.php | 0 templates/webpanel/{language => i18n}/sr.php | 0 templates/webpanel/index.php | 7 +- templates/webpanel/models/DB_Conn.php | 30 ++++++ templates/webpanel/models/db_conn.php | 30 ++++++ templates/webpanel/passes.php | 5 - templates/webpanel/style.css | 100 ------------------ templates/webpanel/views/PassList.php | 41 +++++++ templates/webpanel/views/footer.php | 14 +++ templates/webpanel/views/header.php | 40 +++++++ templates/webpanel/views/pass_list.php | 41 +++++++ 37 files changed, 248 insertions(+), 388 deletions(-) delete mode 100644 templates/webpanel/Config.php delete mode 100644 templates/webpanel/Controller/C_predict.php delete mode 100644 templates/webpanel/Controller/C_showDetail.php delete mode 100644 templates/webpanel/Controller/C_showLastImage.php delete mode 100644 templates/webpanel/Controller/C_showLastImages.php delete mode 100644 templates/webpanel/Model/Conn.php delete mode 100644 templates/webpanel/Model/index.html create mode 100644 templates/webpanel/TODO delete mode 100644 templates/webpanel/Views/V_viewDetail.php delete mode 100644 templates/webpanel/Views/V_viewLastImage.php delete mode 100644 templates/webpanel/Views/V_viewLastImages.php delete mode 100644 templates/webpanel/Views/V_viewPasses.php delete mode 100644 templates/webpanel/Views/index.html rename templates/webpanel/{Controller/index.html => assets/web_img/favicon.ico} (100%) rename templates/webpanel/{ => assets/web_img}/logo-small.png (100%) create mode 100644 templates/webpanel/config.php create mode 100644 templates/webpanel/controllers/Pass_Controller.php create mode 100644 templates/webpanel/controllers/pass_controller.php create mode 100644 templates/webpanel/css/header.css create mode 100644 templates/webpanel/css/pass_list.css delete mode 100644 templates/webpanel/detail.php delete mode 100644 templates/webpanel/footer.php delete mode 100644 templates/webpanel/header.php rename templates/webpanel/{language => i18n}/ar.php (100%) rename templates/webpanel/{language => i18n}/de.php (100%) rename templates/webpanel/{language => i18n}/en.php (100%) rename templates/webpanel/{language => i18n}/es.php (100%) rename templates/webpanel/{language => i18n}/sr.php (100%) create mode 100644 templates/webpanel/models/DB_Conn.php create mode 100644 templates/webpanel/models/db_conn.php delete mode 100644 templates/webpanel/passes.php delete mode 100644 templates/webpanel/style.css create mode 100644 templates/webpanel/views/PassList.php create mode 100644 templates/webpanel/views/footer.php create mode 100644 templates/webpanel/views/header.php create mode 100644 templates/webpanel/views/pass_list.php diff --git a/templates/webpanel/Config.php b/templates/webpanel/Config.php deleted file mode 100644 index 2279883..0000000 --- a/templates/webpanel/Config.php +++ /dev/null @@ -1,7 +0,0 @@ - '/images/', - 'img_per_page' => 12, - 'lang' => 'es' -); -?> diff --git a/templates/webpanel/Controller/C_predict.php b/templates/webpanel/Controller/C_predict.php deleted file mode 100644 index f5b519e..0000000 --- a/templates/webpanel/Controller/C_predict.php +++ /dev/null @@ -1,6 +0,0 @@ -getPasses(); - require('Views/V_viewPasses.php'); -?> diff --git a/templates/webpanel/Controller/C_showDetail.php b/templates/webpanel/Controller/C_showDetail.php deleted file mode 100644 index 13b378c..0000000 --- a/templates/webpanel/Controller/C_showDetail.php +++ /dev/null @@ -1,8 +0,0 @@ -getEnhacements($pass_id); - $path = $con->getPath($pass_id); - require('Views/V_viewDetail.php'); -?> diff --git a/templates/webpanel/Controller/C_showLastImage.php b/templates/webpanel/Controller/C_showLastImage.php deleted file mode 100644 index 83e6bd6..0000000 --- a/templates/webpanel/Controller/C_showLastImage.php +++ /dev/null @@ -1,6 +0,0 @@ -getLastImage(); - require('Views/V_viewLastImage.php'); -?> diff --git a/templates/webpanel/Controller/C_showLastImages.php b/templates/webpanel/Controller/C_showLastImages.php deleted file mode 100644 index 80084ce..0000000 --- a/templates/webpanel/Controller/C_showLastImages.php +++ /dev/null @@ -1,11 +0,0 @@ -img_per_page; - $page_count = $con->totalPages($img_per_page); - if ($page < 1) $page = 1; - if ($page > $page_count) $page = $page_count; - $images = $con->getImages($page, $img_per_page); - require('Views/V_viewLastImages.php'); -?> diff --git a/templates/webpanel/Model/Conn.php b/templates/webpanel/Model/Conn.php deleted file mode 100644 index 80af475..0000000 --- a/templates/webpanel/Model/Conn.php +++ /dev/null @@ -1,82 +0,0 @@ -con = new SQLite3("/home/pi/raspberry-noaa/panel.db"); - } - - public function getPasses() { - $today = strtotime(date('Y-m-d', time())); - $query = $this->con->query("SELECT sat_name, is_active, - pass_start, pass_end, - max_elev FROM predict_passes - WHERE (pass_start > $today) ORDER BY - pass_start ASC;"); - $passes = []; - $i = 0; - while($row = $query->fetchArray()){ - $passes[$i] = $row; - $i++; - } - return $passes; - } - - public function totalPages($img_per_page) { - $total_pages = $this->con->querySingle("SELECT count() from decoded_passes;"); - return ceil($total_pages/$img_per_page); - } - - public function getImages($page, $img_per_page) { - $query = $this->con->prepare("SELECT decoded_passes.id, predict_passes.pass_start, - file_path, sat_type, predict_passes.sat_name, predict_passes.max_elev - FROM decoded_passes 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)); - $result = $query->execute(); - $images = []; - $i = 0; - while($row = $result->fetchArray()){ - $images[$i] = $row; - $i++; - } - return $images; - } - - public function getEnhacements($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(); - switch($pass['sat_type']) { - case 0: // Meteor-M2 - $enhacements = ['-122-rectified.jpg']; - break; - case 1: // NOAA - if ($pass['daylight_pass'] == 1) { - $enhacements = ['-ZA.jpg','-MCIR.jpg','-MCIR-precip.jpg','-MSA.jpg','-MSA-precip.jpg','-HVC.jpg','-HVC-precip.jpg','-HVCT.jpg','-HVCT-precip.jpg']; - } else { - $enhacements = ['-ZA.jpg','-MCIR.jpg','-MCIR-precip.jpg']; - } - break; - case 2: // ISS - for ($x = 0; $x <= $pass['img_count']-1; $x++) { - $enhacements[] = "-$x.png"; - } - break; - } - return $enhacements; - } - - public function getPath($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']; - } - } -?> diff --git a/templates/webpanel/Model/index.html b/templates/webpanel/Model/index.html deleted file mode 100644 index e69de29..0000000 diff --git a/templates/webpanel/TODO b/templates/webpanel/TODO new file mode 100644 index 0000000..98e0780 --- /dev/null +++ b/templates/webpanel/TODO @@ -0,0 +1,4 @@ +* Change location of database file (sub-directory and ignore in git) +** Update config.php +* Include more details in pass table like "was captured" or not + diff --git a/templates/webpanel/Views/V_viewDetail.php b/templates/webpanel/Views/V_viewDetail.php deleted file mode 100644 index 15172e8..0000000 --- a/templates/webpanel/Views/V_viewDetail.php +++ /dev/null @@ -1,23 +0,0 @@ -
- - base_url; - foreach ($enhacements as $enhacement) { - if($row_count%3==0) { - echo ""; - $col_count=1; - } - echo ""; - } - $row_count++; - $col_count++; - } - ?> -
"; - if($col_count==3) { - echo "
-
- - diff --git a/templates/webpanel/Views/V_viewLastImage.php b/templates/webpanel/Views/V_viewLastImage.php deleted file mode 100644 index 66766bb..0000000 --- a/templates/webpanel/Views/V_viewLastImage.php +++ /dev/null @@ -1,24 +0,0 @@ - - base_url; - foreach ($images as $image) { - if($row_count%3==0) { - echo ""; - $col_count=1; - } - echo ""; - if($col_count==3) { - echo ""; - } - $row_count++; - $col_count++; - } - ?> -
"; - echo "
  • ". $image['sat_name'] ."
    • "; - echo "
  • ". date('d/m/Y H:i:s', $image['pass_start']) ."
- - - diff --git a/templates/webpanel/Views/V_viewLastImages.php b/templates/webpanel/Views/V_viewLastImages.php deleted file mode 100644 index 101a242..0000000 --- a/templates/webpanel/Views/V_viewLastImages.php +++ /dev/null @@ -1,48 +0,0 @@ -
- - 1) { - echo ""; - } else { - echo ""; - } - echo ""; - if ($page < $page_count) { - echo ""; - } else { - echo ""; - } - $row_count=0; - $col_count=0; - $baseurl = $configs->base_url; - foreach ($images as $image) { - if($row_count%3==0) { - echo ""; - $col_count=1; - } - switch($image['sat_type']) { - case 0: // Meteor-M2 - $ending = "-122-rectified.jpg"; - break; - case 1: // NOAA - $ending = "-MCIR.jpg"; - break; - case 2: // ISS - $ending = "-0.png"; - break; - } - echo ""; - if($col_count==3) { - echo ""; - } - $row_count++; - $col_count++; - } - ?> -
" . $lang['prev'] . "
" . $lang['page'] . " $page " . $lang['of'] . " $page_count" . $lang['next'] . "
"; - echo "
  • ". $image['sat_name'] ."
    • "; - echo "
  • " . $lang['elev'] . ": ". $image['max_elev'] ."°
    • "; - echo "
  • ". date('d/m/Y H:i:s', $image['pass_start']) ."
-
- - diff --git a/templates/webpanel/Views/V_viewPasses.php b/templates/webpanel/Views/V_viewPasses.php deleted file mode 100644 index cf8cd2b..0000000 --- a/templates/webpanel/Views/V_viewPasses.php +++ /dev/null @@ -1,24 +0,0 @@ -
- - - - - - - - "; - } else { - echo ""; - } - echo ""; - echo ""; - echo ""; - echo ""; - echo ""; - } - ?> -
". $pass['sat_name'] ."". date('H:i:s', $pass['pass_start']) ."". date('H:i:s', $pass['pass_end']) ."". $pass['max_elev'] ."
-
diff --git a/templates/webpanel/Views/index.html b/templates/webpanel/Views/index.html deleted file mode 100644 index e69de29..0000000 diff --git a/templates/webpanel/Controller/index.html b/templates/webpanel/assets/web_img/favicon.ico similarity index 100% rename from templates/webpanel/Controller/index.html rename to templates/webpanel/assets/web_img/favicon.ico diff --git a/templates/webpanel/logo-small.png b/templates/webpanel/assets/web_img/logo-small.png similarity index 100% rename from templates/webpanel/logo-small.png rename to templates/webpanel/assets/web_img/logo-small.png diff --git a/templates/webpanel/config.php b/templates/webpanel/config.php new file mode 100644 index 0000000..38fa87d --- /dev/null +++ b/templates/webpanel/config.php @@ -0,0 +1,7 @@ + '/home/pi/raspberry-noaa/', # base directory for sqlite database + 'lang' => 'en', # see files in i18n/ directory for available translations + 'timezone' => 'America/New_York' # use https://www.php.net/manual/en/timezones.php + ); +?> diff --git a/templates/webpanel/controllers/Pass_Controller.php b/templates/webpanel/controllers/Pass_Controller.php new file mode 100644 index 0000000..f2c54d9 --- /dev/null +++ b/templates/webpanel/controllers/Pass_Controller.php @@ -0,0 +1,6 @@ +db_dir); + $passes = $db_con->getPasses(); + require('views/PassList.php'); +?> diff --git a/templates/webpanel/controllers/pass_controller.php b/templates/webpanel/controllers/pass_controller.php new file mode 100644 index 0000000..f4498bb --- /dev/null +++ b/templates/webpanel/controllers/pass_controller.php @@ -0,0 +1,6 @@ +db_dir); + $passes = $db_con->getPasses(); + require('views/pass_list.php'); +?> diff --git a/templates/webpanel/css/header.css b/templates/webpanel/css/header.css new file mode 100644 index 0000000..ef21a24 --- /dev/null +++ b/templates/webpanel/css/header.css @@ -0,0 +1,17 @@ +header ul.navbar-nav li { + display: block; + font-weight: 700; +} + +header ul.navbar-nav li a { + display: block; + padding-left: 0 !important; + padding-right: 0 !important; + padding-bottom: 0.2rem; + margin-bottom: 0.3rem; + margin-right: 1.25rem; +} + +header ul.navbar-nav li.active a { + border-bottom: 0.25rem solid white; +} diff --git a/templates/webpanel/css/pass_list.css b/templates/webpanel/css/pass_list.css new file mode 100644 index 0000000..e07ed7b --- /dev/null +++ b/templates/webpanel/css/pass_list.css @@ -0,0 +1,9 @@ +table#passes tr.inactive { + color: lightgray; +} + +table#passes td.no-passes { + text-align: center; + font-weight: bold; + font-style: italic; +} diff --git a/templates/webpanel/detail.php b/templates/webpanel/detail.php deleted file mode 100644 index a11d8d6..0000000 --- a/templates/webpanel/detail.php +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/templates/webpanel/footer.php b/templates/webpanel/footer.php deleted file mode 100644 index 02bc661..0000000 --- a/templates/webpanel/footer.php +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/templates/webpanel/header.php b/templates/webpanel/header.php deleted file mode 100644 index 5efac7e..0000000 --- a/templates/webpanel/header.php +++ /dev/null @@ -1,27 +0,0 @@ -lang; - include_once('language/' . $lang . '.php'); -?> - - - - - - - - <?= isset($PageTitle) ? $PageTitle : "Raspberry NOAA"?> - - -
- " href="passes.php"> - " href="index.php"> -
-
- - diff --git a/templates/webpanel/language/ar.php b/templates/webpanel/i18n/ar.php similarity index 100% rename from templates/webpanel/language/ar.php rename to templates/webpanel/i18n/ar.php diff --git a/templates/webpanel/language/de.php b/templates/webpanel/i18n/de.php similarity index 100% rename from templates/webpanel/language/de.php rename to templates/webpanel/i18n/de.php diff --git a/templates/webpanel/language/en.php b/templates/webpanel/i18n/en.php similarity index 100% rename from templates/webpanel/language/en.php rename to templates/webpanel/i18n/en.php diff --git a/templates/webpanel/language/es.php b/templates/webpanel/i18n/es.php similarity index 100% rename from templates/webpanel/language/es.php rename to templates/webpanel/i18n/es.php diff --git a/templates/webpanel/language/sr.php b/templates/webpanel/i18n/sr.php similarity index 100% rename from templates/webpanel/language/sr.php rename to templates/webpanel/i18n/sr.php diff --git a/templates/webpanel/index.php b/templates/webpanel/index.php index ddaa13c..3a8dfc2 100644 --- a/templates/webpanel/index.php +++ b/templates/webpanel/index.php @@ -1,7 +1,6 @@ diff --git a/templates/webpanel/models/DB_Conn.php b/templates/webpanel/models/DB_Conn.php new file mode 100644 index 0000000..6bb7773 --- /dev/null +++ b/templates/webpanel/models/DB_Conn.php @@ -0,0 +1,30 @@ +con = new SQLite3($db_dir . 'panel.db'); + } + + public function getPasses() { + $today = strtotime(date('Y-m-d', time())); + $query = $this->con->query("SELECT sat_name, + is_active, + pass_start, + pass_end, + max_elev + FROM predict_passes + WHERE (pass_start > $today) + ORDER BY pass_start ASC;"); + $passes = []; + $i = 0; + + while($row = $query->fetchArray()) { + $passes[$i] = $row; + $i++; + } + + return $passes; + } + } +?> diff --git a/templates/webpanel/models/db_conn.php b/templates/webpanel/models/db_conn.php new file mode 100644 index 0000000..6bb7773 --- /dev/null +++ b/templates/webpanel/models/db_conn.php @@ -0,0 +1,30 @@ +con = new SQLite3($db_dir . 'panel.db'); + } + + public function getPasses() { + $today = strtotime(date('Y-m-d', time())); + $query = $this->con->query("SELECT sat_name, + is_active, + pass_start, + pass_end, + max_elev + FROM predict_passes + WHERE (pass_start > $today) + ORDER BY pass_start ASC;"); + $passes = []; + $i = 0; + + while($row = $query->fetchArray()) { + $passes[$i] = $row; + $i++; + } + + return $passes; + } + } +?> diff --git a/templates/webpanel/passes.php b/templates/webpanel/passes.php deleted file mode 100644 index d578e3b..0000000 --- a/templates/webpanel/passes.php +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/templates/webpanel/style.css b/templates/webpanel/style.css deleted file mode 100644 index fd2e170..0000000 --- a/templates/webpanel/style.css +++ /dev/null @@ -1,100 +0,0 @@ -body { - margin: 0; - font-family: Arial, Helvetica, sans-serif; -} - -.container { - margin: 20px auto; - max-width: 800px; -} - -.topnav { - overflow: hidden; - background-color: #333; -} - -.topnav a { - float: left; - color: #f2f2f2; - text-align: center; - padding: 14px 16px; - text-decoration: none; - font-size: 17px; -} - -.topnav a:hover { - background-color: #ddd; - color: black; -} - -.topnav a.active { - background-color: #4CAF50; - color: white; -} - -#passes { - font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; - border-collapse: collapse; - max-width: 500px; - width: 100%; - margin: auto; -} - -#passes.img-grid { - max-width: 700px; -} - -#passes td, -#passes th { - border: 1px solid #ddd; - padding: 8px; -} - -#passes tr:nth-child(even) { - background-color: #f2f2f2; -} - - -/* #passes tr:hover {background-color: #ddd;} */ - -#passes th { - padding-top: 12px; - padding-bottom: 12px; - background-color: #4CAF50; - text-align: center; - color: white; -} - -#passes tr.inactive { - color: lightgray; -} - -#satimg { - max-width: 200px; - max-height: 200px; - width: 100%; - object-fit: cover; -} - -#satimgdiv { - width: 100%; - height: 100%; - max-width: 200px; - background-color: antiquewhite; - /* margin: 10px; */ - display: inline-block; - vertical-align: middle; - text-align: center; -} - -footer { - /* position: absolute; */ - margin: 20px; - bottom: 0; - max-width: 100%; - text-align: center; -} - -img.img-footer { - max-width: 100%; -} diff --git a/templates/webpanel/views/PassList.php b/templates/webpanel/views/PassList.php new file mode 100644 index 0000000..7bcd0da --- /dev/null +++ b/templates/webpanel/views/PassList.php @@ -0,0 +1,41 @@ + + + + + + + + + + + + + "; + } else { + foreach ($passes as $pass) { + $pass_start = date('H:i:s', $pass['pass_start']); + $pass_end = date('H:i:s', $pass['pass_end']); + + # gray out anything that has already run or did not run because there + # was another overlapping capture but is now in the past + if ($pass['is_active'] == false or $pass_end < $now) { + echo ""; + } else { + echo ""; + } + + echo ""; + echo ""; + echo ""; + echo ""; + echo ""; + } + } + ?> + +
0 " . $lang['passes'] . "
". $pass['sat_name'] ."" . $pass_start ."" . $pass_end . "" . $pass['max_elev'] ."
diff --git a/templates/webpanel/views/footer.php b/templates/webpanel/views/footer.php new file mode 100644 index 0000000..806c70e --- /dev/null +++ b/templates/webpanel/views/footer.php @@ -0,0 +1,14 @@ +
+ + + + + + + diff --git a/templates/webpanel/views/header.php b/templates/webpanel/views/header.php new file mode 100644 index 0000000..4c3d20f --- /dev/null +++ b/templates/webpanel/views/header.php @@ -0,0 +1,40 @@ +timezone); + $lang = $configs->lang; + include_once('i18n/' . $lang . '.php'); +?> + + + + + + + + + + + + Raspberry NOAA V2 + + + + +
+
+
    +
  • + +
    • +
  • + +
    • +
+
+
+
diff --git a/templates/webpanel/views/pass_list.php b/templates/webpanel/views/pass_list.php new file mode 100644 index 0000000..7bcd0da --- /dev/null +++ b/templates/webpanel/views/pass_list.php @@ -0,0 +1,41 @@ + + + + + + + + + + + + + "; + } else { + foreach ($passes as $pass) { + $pass_start = date('H:i:s', $pass['pass_start']); + $pass_end = date('H:i:s', $pass['pass_end']); + + # gray out anything that has already run or did not run because there + # was another overlapping capture but is now in the past + if ($pass['is_active'] == false or $pass_end < $now) { + echo ""; + } else { + echo ""; + } + + echo ""; + echo ""; + echo ""; + echo ""; + echo ""; + } + } + ?> + +
0 " . $lang['passes'] . "
". $pass['sat_name'] ."" . $pass_start ."" . $pass_end . "" . $pass['max_elev'] ."