TelemetryDataIntegrationProject/device_table.php at main · kaiquan1/TelemetryDataIntegrationProject · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Device Table with Status Indicators</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="search-container">
        <input type="text" id="searchBar" placeholder="Search for site number..">
    </div>

    <table id="dataTable">
        <thead>
            <tr>
                <th>Site Number</th>
                <th>Metering 1 (m<sup>3</sup>)</th>
                <th>Metering 2 (m<sup>3</sup>)</th>
                <th>Metering 3 (m<sup>3</sup>)</th>
                <th>Flowrate (m<sup>3</sup>/h)</th>
                <th colspan="2">Meter Remaining Battery</th>
                <th>Logger Remaining Battery (Days)</th>
                <th>Last Updated</th>
            </tr>
        </thead>
        <tbody id="data-body">
            <!-- Table rows will be inserted here -->
        </tbody>
    </table>

    <script>
        /**
         * Fetches data from the server and updates the table.
         */
        async function fetchData() {
            try {
                const response = await fetch('fetch_table_data.php');
                const data = await response.json();
                updateTable(data);
                updateChartData(data); // If you have a chart, update it here
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        }

        /**
         * Updates the table with fetched data.
         * @param {Array} data - Array of data objects fetched from the server.
         */
        function updateTable(data) {
            const tableBody = document.getElementById('data-body');
            tableBody.innerHTML = ''; // Clear existing data

            data.forEach(row => {
                const tr = document.createElement('tr');

                // Determine if the site is online or offline
                const isOnline = checkIfOnline(row.LastUpdated);
                const statusClass = isOnline ? 'online' : 'offline';
                const statusDot = `<span class="status-dot ${statusClass}" aria-label="${isOnline ? 'Online' : 'Offline'}"></span>`;

                const batteryPercentage = row.MeterBattery ?? 0;

                tr.innerHTML = `
                    <td class="site-number">${statusDot}${row.STA_Label ?? ''}</td>
                    <td>${(row.Metering1 ?? 0).toFixed(2)}</td>
                    <td>${(row.Metering2 ?? 0).toFixed(2)}</td>
                    <td>${(row.Metering3 ?? 0).toFixed(2)}</td>
                    <td>${(row.Flowrate ?? 0).toFixed(2)}</td>
                    <td id="battery1">${batteryPercentage}%</td>
                    <td id="battery2">
                        <div class="battery-container">
                            <div class="battery-level ${getBatteryClass(batteryPercentage)}" style="width: ${batteryPercentage}%;"></div>
                            <div class="battery-head"></div>
                        </div>
                    </td>
                    <td>${row.LoggerBattery ?? 0}</td>
                    <td>${formatDate(row.LastUpdated) ?? ''}</td>
                `;

                tableBody.appendChild(tr);
            });
        }

        /**
         * Checks if the provided date is today's date.
         * @param {string} dateString - The date string to check.
         * @returns {boolean} - True if the date is today, false otherwise.
         */
        function checkIfOnline(dateString) {
            if (!dateString) return false;

            const lastUpdatedDate = new Date(dateString);
            if (isNaN(lastUpdatedDate)) return false;

            const today = new Date();
            return (
                lastUpdatedDate.getDate() === today.getDate() &&
                lastUpdatedDate.getMonth() === today.getMonth() &&
                lastUpdatedDate.getFullYear() === today.getFullYear()
            );
        }

        /**
         * Formats a date string into 'MM/DD/YYYY' format.
         * @param {string} dateString - The date string to format.
         * @returns {string} - Formatted date string.
         */
        function formatDate(dateString) {
            if (!dateString) return '';

            const dateObj = new Date(dateString);
            if (isNaN(dateObj)) return '';

            const month = String(dateObj.getMonth() + 1).padStart(2, '0');
            const day = String(dateObj.getDate()).padStart(2, '0');
            const year = dateObj.getFullYear();

            return `${month}/${day}/${year}`;
        }

        /**
         * Determines the battery class based on the percentage.
         * @param {number} batteryPercentage - The battery percentage.
         * @returns {string} - The battery class name.
         */
        function getBatteryClass(batteryPercentage) {
            if (batteryPercentage <= 20) {
                return 'low-battery';
            } else if (batteryPercentage <= 50) {
                return 'medium-battery';
            } else {
                return 'high-battery';
            }
        }

        /**
         * Initializes event listeners after the DOM is fully loaded.
         */
        document.addEventListener('DOMContentLoaded', () => {
            fetchData(); // Initial data fetch

            // Add search bar functionality
            const searchBar = document.getElementById('searchBar');
            searchBar.addEventListener('input', filterTable);

            // Optionally, set up periodic data fetching
            // setInterval(fetchData, 10000); // Fetch data every 10 seconds
        });

        /**
         * Filters the table rows based on the search input.
         */
        function filterTable() {
            const filter = document.getElementById('searchBar').value.toUpperCase();
            const table = document.getElementById('dataTable');
            const tr = table.getElementsByTagName('tr');

            for (let i = 1; i < tr.length; i++) { // Start from 1 to skip the header row
                const td = tr[i].getElementsByTagName('td')[0]; // Site Number column
                if (td) {
                    const txtValue = td.textContent || td.innerText;
                    // Remove the status dot symbols from the text
                    const siteNumber = txtValue.replace(/[\u25CF\u25CB]/g, '').trim(); // Removes ● and ○ if present
                    if (siteNumber.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = '';
                    } else {
                        tr[i].style.display = 'none';
                    }
                }
            }
        }
    </script>
</body>
</html>