client-side index.ejs view engine
This commit is contained in:
272
webui-client/src/views/index.ejs
Normal file
272
webui-client/src/views/index.ejs
Normal file
@@ -0,0 +1,272 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>SceneSense UI</title>
|
||||||
|
<!-- Include Bootstrap CSS -->
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
|
||||||
|
<!-- Include jQuery (Note: Bootstrap relies on jQuery) -->
|
||||||
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
||||||
|
<!-- Include Bootstrap JS -->
|
||||||
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||||
|
<!-- Include Bootstrap-datepicker CSS and JS files -->
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container mt-5">
|
||||||
|
<h1>SceneSense Client App</h1>
|
||||||
|
|
||||||
|
<!-- Input for API Key -->
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="apiKey">API Key:</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
id="apiKey"
|
||||||
|
placeholder="Enter your API Key" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="startDateTime"
|
||||||
|
>Start Date and Time (YYYY-MM-DD HH:MM:SS):</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
id="startDateTime" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="endDateTime"
|
||||||
|
>End Date and Time (YYYY-MM-DD HH:MM:SS):</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
id="endDateTime" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="my-4">
|
||||||
|
<!-- Buttons for API calls (arranged vertically on small screens) -->
|
||||||
|
<div class="d-flex flex-column">
|
||||||
|
<!-- First row with larger buttons -->
|
||||||
|
<div class="btn-group mb-2" role="group">
|
||||||
|
<button class="btn btn-outline-primary btn-lg" onclick="getLastRecord()">
|
||||||
|
Get Last Record
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-outline-primary btn-lg" onclick="getAllRecords()">
|
||||||
|
Get All Records
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Second row with smaller buttons -->
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<button class="btn btn-outline-primary mb-2" onclick="getRecordsSince()">
|
||||||
|
Get Records Since
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-outline-primary mb-2" onclick="getRecordsBetween()">
|
||||||
|
Get Records Between
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-outline-primary mb-2" onclick="getRecordsUntil()">
|
||||||
|
Get Records Until
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table table-bordered">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>ID</th>
|
||||||
|
<th>Timestamp</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="recordTableBody">
|
||||||
|
<!-- Table rows will be dynamically populated here -->
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Function to convert user-inputted date and time to Unix timestamp
|
||||||
|
function convertToUnixTimestamp(dateTimeString) {
|
||||||
|
const unixTimestamp = Math.floor(
|
||||||
|
new Date(dateTimeString).getTime() / 1000
|
||||||
|
);
|
||||||
|
return unixTimestamp;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to update the table with fetched data
|
||||||
|
function updateTable(data) {
|
||||||
|
const tableBody =
|
||||||
|
document.getElementById('recordTableBody');
|
||||||
|
tableBody.innerHTML = ''; // Clear existing rows
|
||||||
|
|
||||||
|
data.forEach((record) => {
|
||||||
|
const row = document.createElement('tr');
|
||||||
|
row.innerHTML = `
|
||||||
|
<td>${record.id}</td>
|
||||||
|
<td>${record.timestamp}</td>
|
||||||
|
<td>${record.description}</td>
|
||||||
|
`;
|
||||||
|
tableBody.appendChild(row);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to handle API errors
|
||||||
|
function handleApiError(error) {
|
||||||
|
console.error(error);
|
||||||
|
const tableBody =
|
||||||
|
document.getElementById('recordTableBody');
|
||||||
|
tableBody.innerHTML =
|
||||||
|
'<tr><td colspan="3">Error fetching data</td></tr>';
|
||||||
|
}
|
||||||
|
|
||||||
|
// JavaScript functions to make API calls
|
||||||
|
async function getLastRecord() {
|
||||||
|
const apiKey =
|
||||||
|
document.getElementById('apiKey').value;
|
||||||
|
if (!apiKey) {
|
||||||
|
alert('Please enter your API Key.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
`/get_last_record?apiKey=${apiKey}`
|
||||||
|
);
|
||||||
|
const record = await response.json();
|
||||||
|
updateTable([record]);
|
||||||
|
} catch (error) {
|
||||||
|
handleApiError(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getAllRecords() {
|
||||||
|
const apiKey =
|
||||||
|
document.getElementById('apiKey').value;
|
||||||
|
if (!apiKey) {
|
||||||
|
alert('Please enter your API Key.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
`/get_all_records?apiKey=${apiKey}`
|
||||||
|
);
|
||||||
|
const records = await response.json();
|
||||||
|
updateTable(records);
|
||||||
|
} catch (error) {
|
||||||
|
handleApiError(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getRecordsSince() {
|
||||||
|
const apiKey =
|
||||||
|
document.getElementById('apiKey').value;
|
||||||
|
if (!apiKey) {
|
||||||
|
alert('Please enter your API Key.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const startDateTime = $('#startDateTime').val();
|
||||||
|
if (!startDateTime) {
|
||||||
|
alert('Please enter a start date and time.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const unixTimestamp =
|
||||||
|
convertToUnixTimestamp(startDateTime);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
`/get_records_since/${unixTimestamp}?apiKey=${apiKey}`
|
||||||
|
);
|
||||||
|
const records = await response.json();
|
||||||
|
updateTable(records);
|
||||||
|
} catch (error) {
|
||||||
|
handleApiError(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getRecordsBetween() {
|
||||||
|
const apiKey =
|
||||||
|
document.getElementById('apiKey').value;
|
||||||
|
if (!apiKey) {
|
||||||
|
alert('Please enter your API Key.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const startDateTime = $('#startDateTime').val();
|
||||||
|
const endDateTime = $('#endDateTime').val();
|
||||||
|
if (!startDateTime || !endDateTime) {
|
||||||
|
alert(
|
||||||
|
'Please enter both start and end dates and times.'
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const startUnixTimestamp =
|
||||||
|
convertToUnixTimestamp(startDateTime);
|
||||||
|
const endUnixTimestamp =
|
||||||
|
convertToUnixTimestamp(endDateTime);
|
||||||
|
|
||||||
|
if (startUnixTimestamp >= endUnixTimestamp) {
|
||||||
|
alert(
|
||||||
|
'Start time should be earlier than end time.'
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
`/get_records_between/${startUnixTimestamp}/${endUnixTimestamp}?apiKey=${apiKey}`
|
||||||
|
);
|
||||||
|
const records = await response.json();
|
||||||
|
updateTable(records);
|
||||||
|
} catch (error) {
|
||||||
|
handleApiError(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getRecordsUntil() {
|
||||||
|
const apiKey =
|
||||||
|
document.getElementById('apiKey').value;
|
||||||
|
if (!apiKey) {
|
||||||
|
alert('Please enter your API Key.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const endDateTime = $('#endDateTime').val();
|
||||||
|
if (!endDateTime) {
|
||||||
|
alert('Please enter an end date and time.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const unixTimestamp =
|
||||||
|
convertToUnixTimestamp(endDateTime);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
`/get_records_until/${unixTimestamp}?apiKey=${apiKey}`
|
||||||
|
);
|
||||||
|
const records = await response.json();
|
||||||
|
updateTable(records);
|
||||||
|
} catch (error) {
|
||||||
|
handleApiError(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user