Adds widget to components page

public_html/pages/components.php

@@ -48,14 +48,12 @@ try {
 
 
 // list of all component events (default)
-//if ($jitsi_component) {
+$component = new Component($db);
-    try {
-        $component = new Component($db);
 
-        // prepare the result
+// prepare the result
-        $search = $component->jitsiComponents($jitsi_component, $component_id, $from_time, $until_time);
+$search = $component->jitsiComponents($jitsi_component, $component_id, $from_time, $until_time);
 
-        if (!empty($search)) {
+if (!empty($search)) {
     $components = array();
     $components['records'] = array();
 
@@ -73,78 +71,31 @@ try {
         // populate the result array
         array_push($components['records'], $component_record);
     }
-        }
+}
 
-    } catch (Exception $e) {
+// prepare the widget
-        $error = 'Error: ' . $e->getMessage();
+$widget['full'] = false;
-        include 'templates/message.php';
+$widget['name'] = 'AllComponents';
-        exit();
+$widget['collapsible'] = false;
-    }
+$widget['collapsed'] = false;
+$widget['filter'] = true;
 
-    // display the result
+// widget title
+if (isset($_REQUEST['name']) && $_REQUEST['name'] != '') {
+    $widget['title'] = 'Jitsi events for component <strong>' . $_REQUEST['name'] . '</strong>';
+} elseif (isset($_REQUEST['id']) && $_REQUEST['id'] != '') {
+    $widget['title'] = 'Jitsi events for component ID <br /><strong>' . $_REQUEST['id'] . '</strong>';
+} else {
+    $widget['title'] = 'Jitsi events for <strong>all components</strong>';
+}
+// widget records
+if (!empty($components['records'])) {
+    $widget['full'] = true;
+    $widget['table_headers'] = array_keys($components['records'][0]);
+    $widget['table_records'] = $components['records'];
+}
 
-    // format the header message
+// display the widget
-    echo "<div class=\"results-header\">\n";
+include('templates/widget.php');
-    if (isset($_REQUEST['name']) && $_REQUEST['name'] != '') {
-        echo "<div class=\"results-message\">Jitsi events for component <strong>" . $_REQUEST['name'] . "</strong>";
-    } elseif (isset($_REQUEST['id']) && $_REQUEST['id'] != '') {
-        echo "<div class=\"results-message\">Jitsi events for component ID <br /><strong>" . $_REQUEST['id'] . "</strong>";
-    } else {
-        echo "<div class=\"results-message\">Jitsi events for <strong>all components</strong>";
-    }
-    if ($time_range_specified) {
-        echo "<br />for the time period <strong>$from_time - $until_time</strong>";
-    }
-    echo "</div>\n\n";
-
-    // filters - time selection and sorting dropdowns
-    include 'templates/results-filter.php';
-
-    echo "</div>\n\n";
-
-    // results table
-    echo "<div class=\"mb-5\">\n";
-
-    if (!empty($components['records'])) {
-
-        echo "\t<table class=\"table table-striped table-hover table-bordered\">\n";
-
-        echo "\t\t<thead class=\"table-secondary\">\n";
-        echo "\t\t\t<tr>\n";
-
-        // table headers
-        foreach (array_keys($components['records'][0]) as $header) {
-            echo "\t\t\t\t<th scope=\"col\">" . htmlspecialchars($header) . "</th>\n";
-        }
-        echo "\t\t\t</tr>\n";
-        echo "\t\t</thead>\n";
-
-        echo "\t\t<tbody>\n";
-
-        //table rows
-        foreach ($components['records'] as $row) {
-            echo "\t\t\t<tr>\n";
-            // sometimes $column is empty, we make it '' then
-            foreach ($row as $key => $column) {
-                if ($key === 'component ID') {
-                    echo "\t\t\t\t<td><a href=\"$app_root?page=components&id=" . htmlspecialchars($column ?? '') . "\">" . htmlspecialchars($column ?? '') . "</a></td>\n";
-                } elseif ($key === 'component') {
-                    echo "\t\t\t\t<td><a href=\"$app_root?page=components&name=" . htmlspecialchars($column ?? '') . "\">" . htmlspecialchars($column ?? '') . "</a></td>\n";
-                } else {
-                    echo "\t\t\t\t<td>" . htmlspecialchars($column ?? '') . "</td>\n";
-                }
-            }
-            echo "\t\t\t</tr>\n";
-        }
-
-        echo "\t\t</tbody>\n";
-        echo "\t</table>\n";
-
-    } else {
-        echo '<p class="m-3">No matching Jitsi component events found.</p>';
-    }
-    echo "\n</div>\n";
-
-//}
 
 ?>

public_html/pages/front.php

@@ -68,6 +68,9 @@ try {
 $widget['full'] = false;
 $widget['name'] = 'LastDays';
 $widget['title'] = 'Conferences for the last 2 days';
+$widget['collapsible'] = true;
+$widget['collapsed'] = false;
+$widget['filter'] = false;
 if (!empty($conferences['records'])) {
     $widget['full'] = true;
     $widget['table_headers'] = array_keys($conferences['records'][0]);
@@ -138,6 +141,10 @@ try {
 $widget['full'] = false;
 $widget['name'] = 'LastConferences';
 $widget['title'] = 'The last ' . $conference_number . ' conferences';
+$widget['collapsible'] = true;
+$widget['collapsed'] = false;
+$widget['filter'] = false;
+
 if (!empty($conferences['records'])) {
     $widget['full'] = true;
     $widget['table_headers'] = array_keys($conferences['records'][0]);

public_html/templates/results-filter.php

@@ -1,5 +1,5 @@
 
-    <div class="results-filter">
+    <div class="card w-auto bg-light card-body text-right">
 
         <form method="POST" id="filter_form" action="?page=<?= $page ?>">
 
@@ -17,16 +17,10 @@
             <input type="text" name="ip" placeholder="ip address"<?php if (isset($_REQUEST['ip'])) echo " value=\"" . $_REQUEST['ip'] . "\"" ?> maxlength="15" size="15" />
 <?php } ?>
 
-            <br />
-
-            <div class="float-end pt-3">
-
             <input type="button" onclick="clearFilter()" value="clear" />
 
             <input type="submit" value="search" />
 
-            </div>
-
         </form>
 
         <script>

public_html/templates/widget.php

@@ -1,13 +1,25 @@
 
-<a style="text-decoration: none;" data-toggle="collapse" href="#collapse<?= $widget['name'] ?>" role="button" aria-expanded="true" aria-controls="collapse<?= $widget['name'] ?>">
+<div class="row">
-<div class="card bg-light card-body"><?= $widget['title'] ?></div></a>
+
+<?php if ($widget['collapsible'] === true) { ?>
+    <a style="text-decoration: none;" data-toggle="collapse" href="#collapse<?= $widget['name'] ?>" role="button" aria-expanded="true" aria-controls="collapse<?= $widget['name'] ?>">
+<?php } ?>
+    <div class="card w-25 bg-light card-body"><?= $widget['title'] ?></div>
+<?php if ($widget['filter'] === true) {
+    include('templates/results-filter.php');
+} ?>
+<?php if ($widget['collapsible'] === true) { ?>
+    </a>
+<?php } ?>
+
+</div>
 
 <div class="collapse show" id="collapse<?= $widget['name'] ?>">
 <?php if ($time_range_specified) { ?>
     <p class="m-3">time period: <strong><?= $from_time ?> - <?= $until_time ?></strong></p>
 <?php } ?>
     <div class="mb-5">
-<?php if ($widget['full'] == true) { ?>
+<?php if ($widget['full'] === true) { ?>
         <table class="table table-striped table-hover table-bordered">
             <thead class="thead-dark">
                 <tr>
@@ -24,6 +36,10 @@
                     <td><a href="<?= $app_root ?>?page=conferences&id=<?= htmlspecialchars($column ?? '') ?>"><?= htmlspecialchars($column ?? '') ?></a></td>
 <?php               } elseif ($key === 'conference name') { ?>
                     <td><a href="<?= $app_root ?>?page=conferences&name=<?= htmlspecialchars($column ?? '') ?>"><?= htmlspecialchars($column ?? '') ?></a></td>
+<?php               } elseif ($key === 'component ID') { ?>
+                    <td><a href="<?= $app_root ?>?page=components&id=<?= htmlspecialchars($column ?? '') ?>"><?= htmlspecialchars($column ?? '') ?></a></td>
+<?php               } elseif ($key === 'component') { ?>
+                    <td><a href="<?= $app_root ?>?page=components&name=<?= htmlspecialchars($column ?? '') ?>"><?= htmlspecialchars($column ?? '') ?></a></td>
 <?php               } else { ?>
                     <td><?= htmlspecialchars($column ?? '') ?></td>
 <?php               }