Files
2026-02-08 10:25:39 +01:00

102 lines
3.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typesense Test</title>
<script src="https://cdn.jsdelivr.net/npm/typesense@1/dist/typesense.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 20px auto;
padding: 0 20px;
}
.record {
border: 1px solid #ddd;
padding: 10px;
margin: 10px 0;
border-radius: 4px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>Typesense Test Page</h1>
<button onclick="addRecord()">Add Random Record</button>
<h2>Last 100 Records</h2>
<div id="records"></div>
<script>
// Configuration - Replace these values with your actual Typesense details
const TYPESENSE_HOST = 'typesense-13-8108.app-ranpu.zerops.dev';
const TYPESENSE_PROTOCOL = 'https';
const TYPESENSE_APIKEY = 'BXCkhnEpwW1Kq0nVcvcWDRtZ75aIXtYy';
// Initialize Typesense client
const client = new Typesense.Client({
nodes: [{
host: TYPESENSE_HOST,
protocol: TYPESENSE_PROTOCOL,
}],
apiKey: TYPESENSE_APIKEY,
connectionTimeoutSeconds: 3
});
// Function to add a random record
async function addRecord() {
try {
const record = {
num_employees: Math.floor(Math.random() * 1000) + 1,
created: new Date().toISOString(),
unix: Math.floor(Date.now() / 1000)
};
const response = await client.collections('companies').documents().create(record);
console.log('Record added:', response);
loadRecords(); // Refresh the list
} catch (error) {
console.error('Error adding record:', error);
}
}
// Function to load and display records
async function loadRecords() {
try {
const searchParameters = {
q: '*',
sort_by: 'unix:desc',
per_page: 100
};
const response = await client.collections('companies').documents().search(searchParameters);
const recordsDiv = document.getElementById('records');
recordsDiv.innerHTML = response.hits.map(hit => `
<div class="record">
<div>ID: ${hit.document.id}</div>
<div>Employees: ${hit.document.num_employees}</div>
<div>Created: ${hit.document.created}</div>
<div>Unix Timestamp: ${hit.document.unix}</div>
</div>
`).join('');
} catch (error) {
console.error('Error loading records:', error);
}
}
// Load records when the page loads
loadRecords();
</script>
</body>
</html>