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