Committing in a bad state...search is half-working

admin/view_message_log.php

@@ -58,7 +58,7 @@ require_once(HESK_PATH . 'inc/show_admin_nav.inc.php');
                             </div>
                         </div>
                     </div>
-                    <button class="btn btn-default">Search</button>
+                    <button class="btn btn-default" id="search-button">Search</button>
                 </div>
             </div>
         </div>
@@ -67,6 +67,21 @@ require_once(HESK_PATH . 'inc/show_admin_nav.inc.php');
                 <div class="panel-heading">
                     Logs
                 </div>
+                <div class="panel-body">
+                    <table class="table table-striped" id="results-table">
+                        <thead>
+                        <tr>
+                            <th>Date</th>
+                            <th>User</th>
+                            <th>Location</th>
+                            <th>Message</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+
+                        </tbody>
+                    </table>
+                </div>
             </div>
         </div>
     </div>

internal-api/js/view-message-log.js

@@ -1,21 +1,64 @@
 $(document).ready(function() {
     // We should show the latest 50 logs when the user first views the page.
+    searchLogs(null, null, null, null);
+
+    $('#search-button').click(function() {
+        var location = getNullableField($('input[name="location"]').val());
+    });
+});
+
+function getNullableField(value) {
+    return value !== "" ? value : null;
+}
+
+function searchLogs(location, fromDate, toDate, severity) {
     var endpoint = getHelpdeskUrl();
     endpoint += '/internal-api/admin/message-log/';
+
     $.ajax({
         url: endpoint,
         data: {
-            location: null,
-            fromDate: null,
-            toDate: null,
-            severityId: null
+            location: location,
+            fromDate: fromDate,
+            toDate: toDate,
+            severityId: severity
         },
         method: 'POST',
-        success: function(data) {
-            console.log(data);
-        },
+        success: displayResults,
         error: function(data) {
             console.error(data);
         }
-    })
-})
+    });
+}
+
+function displayResults(data) {
+    data = $.parseJSON(data);
+    var table = $('#results-table > tbody');
+    table.empty();
+
+    if (data.length === 0) {
+        table.append('<tr><td colspan="4">No results found</td></tr>');
+    } else {
+        for (var index in data) {
+            var result = data[index];
+            table.append('<tr ' + getRowColor(result) + '>' +
+                '<td>' + result.timestamp + '</td>' +
+                '<td>' + result.username + '</td>' +
+                '<td>' + result.location + '</td>' +
+                '<td>' + result.message + '</td>');
+        }
+    }
+}
+
+function getRowColor(result) {
+    switch (result.severity) {
+        case "1":
+            return 'class="info"';
+        case "2":
+            return 'class="warning"';
+        case "3":
+            return 'class="danger"';
+    }
+
+    return '';
+}