Notification Report page rewrite v0.1📩

front/report.php

@@ -30,20 +30,145 @@
     <!-- Main content ---------------------------------------------------------- -->
     <section class="content">	
 
-<?php
-// Check if the page exists
-if (file_exists("api/notification_text.html")) {
-    // Load the page
-    include("api/notification_text.html");
-} else {
-    // Display an error message
-    echo "<h2>Error</h2>";
-    echo lang('REPORT_ERROR');
-}
-?>
+    <div class="col-sm-2">
+      <!-- Display data and navigation buttons -->
+      <div id="notificationContainer">
+        <div id="navigationButtons">
+              <button class="btn btn-default text-gray50" id="prevButton">
+                <i class="fa fa-chevron-left"></i>
+              </button>
+              <span id="notificationOutOff"></span>
+              <button class="btn btn-default text-gray50" id="nextButton">
+                <i class="fa fa-chevron-right"></i>
+              </button>
+        </div>
+      </div>
+    </div>
 
-</div>
-</section>
+    <!-- Select format -->
+    <div class="col-sm-2 ">
+      <label for="formatSelect">
+        <?= lang('report_select_format') ;?>
+      </label>
+      <select id="formatSelect" class="pointer">
+          <option value="HTML">HTML</option>
+          <option value="JSON">JSON</option>
+          <option value="Text">Text</option>        
+      </select>
+    </div>
+
+
+    <div class="col-sm-8">
+      <label><?= lang('report_time') ;?></label>
+      <span id="timestamp">Timestamp</span>
+    </div>
+
+
+    <div class="col-sm-12" id="notificationData">
+        <!-- Data will be displayed here -->
+    </div>
+
+  </div>
+  </section>
+
+  <!-- JavaScript to fetch and display data based on selected format -->
+  <script>
+      // JavaScript to fetch and display data based on selected format
+      document.addEventListener('DOMContentLoaded', function() {
+    const notificationData = document.getElementById('notificationData');
+    const timestamp = document.getElementById('timestamp');
+    const prevButton = document.getElementById('prevButton');
+    const nextButton = document.getElementById('nextButton');
+    const formatSelect = document.getElementById('formatSelect');
+    
+    let currentIndex = -1; // Current report index
+
+    // Function to update the displayed data and timestamp based on the selected format and index
+    function updateData(format, index) {
+        // Fetch data from the API endpoint
+        fetch('/api/table_notifications.json')
+            .then(response => response.json())
+            .then(data => {
+                if (index < 0) {
+                    index = data.data.length - 1;
+                } else if (index >= data.data.length) {
+                    index = 0;
+                }
+
+                const notification = data.data[index];
+                const formatData = notification[format];
+
+                // Display the selected format data and update timestamp
+                switch (format) {
+                    case 'HTML':
+                        notificationData.innerHTML = formatData;
+                        break;
+                    case 'JSON':
+                        notificationData.innerHTML = `<pre class="logs" cols="70" rows="10" wrap="off" readonly="">
+                                                      ${jsonSyntaxHighlight(JSON.stringify(JSON.parse(formatData), undefined, 4))}
+                                                    </pre>`;
+                        break;
+                    case 'Text':
+                        notificationData.innerHTML = `<pre class="logs" cols="70" rows="10" wrap="off" readonly">${formatData}</pre>`;
+                        break;
+                }
+
+                timestamp.textContent = notification.DateTimeCreated;
+                currentIndex = index;
+
+                $("#notificationOutOff").html(`${currentIndex + 1}/${data.data.length}`);
+            })
+            .catch(error => {
+                console.error('Error:', error);
+            });
+    }
+
+    // Function to find the index of a notification by GUID
+    function findIndexByGUID(data, guid) {
+        return data.findIndex(notification => notification.GUID === guid);
+    }
+
+    // Listen for format selection changes
+    formatSelect.addEventListener('change', () => {
+        updateData(formatSelect.value, currentIndex);
+    });
+
+    // Listen for previous button click
+    prevButton.addEventListener('click', () => {
+        updateData(formatSelect.value, currentIndex - 1);
+    });
+
+    // Listen for next button click
+    nextButton.addEventListener('click', () => {
+        updateData(formatSelect.value, currentIndex + 1);
+    });
+
+    // Check if there is a GUID query parameter
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.has('guid')) {
+        const guid = urlParams.get('guid');
+        fetch('/api/table_notifications.json')
+            .then(response => response.json())
+            .then(data => {
+                const index = findIndexByGUID(data.data, guid);
+                if (index !== -1) {
+                    // Load the notification with the specified GUID
+                    updateData(formatSelect.value, index);
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+            });
+    } else {        
+
+        // Initial data load
+        updateData('HTML', -1); // Default format to HTML and load the latest report
+    }
+});
+
+
+
+  </script>
 
     <!-- /.content -->
     <?php