143 lines
4.3 KiB
HTML
143 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Model Dropdown Test</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; padding: 20px; }
|
|
.test-container { max-width: 600px; margin: 0 auto; }
|
|
.model-select {
|
|
position: relative;
|
|
display: inline-flex;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
background: white;
|
|
}
|
|
.model-select-dropdown {
|
|
position: absolute;
|
|
top: calc(100% + 8px);
|
|
left: 0;
|
|
background: white;
|
|
border: 1px solid #ccc;
|
|
border-radius: 8px;
|
|
padding: 8px;
|
|
display: none;
|
|
min-width: 280px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
}
|
|
.model-option {
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
.model-option:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
.model-option.selected {
|
|
background: #e0f0ff;
|
|
}
|
|
.model-icon { width: 20px; height: 20px; }
|
|
.model-text { flex: 1; }
|
|
.status { margin-top: 20px; padding: 10px; background: #f0f0f0; border-radius: 4px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-container">
|
|
<h1>Model Dropdown Test</h1>
|
|
<p>Testing the model selector dropdown functionality</p>
|
|
|
|
<div style="position: relative;">
|
|
<div id="model-select-btn" class="model-select">
|
|
<span id="model-select-text">Select model</span>
|
|
<span style="margin-left: 8px;">▼</span>
|
|
</div>
|
|
|
|
<div id="model-select-dropdown" class="model-select-dropdown">
|
|
<div id="model-select-options"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status">
|
|
<strong>Status:</strong> <span id="status">Loading models...</span>
|
|
</div>
|
|
|
|
<div class="status">
|
|
<strong>Selected:</strong> <span id="selected">None</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const btn = document.getElementById('model-select-btn');
|
|
const dropdown = document.getElementById('model-select-dropdown');
|
|
const options = document.getElementById('model-select-options');
|
|
const textSpan = document.getElementById('model-select-text');
|
|
const status = document.getElementById('status');
|
|
const selected = document.getElementById('selected');
|
|
|
|
let isOpen = false;
|
|
|
|
// Toggle dropdown
|
|
btn.addEventListener('click', () => {
|
|
isOpen = !isOpen;
|
|
dropdown.style.display = isOpen ? 'block' : 'none';
|
|
});
|
|
|
|
// Close when clicking outside
|
|
document.addEventListener('click', (e) => {
|
|
if (!btn.contains(e.target) && !dropdown.contains(e.target)) {
|
|
isOpen = false;
|
|
dropdown.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// Fetch models from API
|
|
fetch('http://localhost:4000/api/models')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.models && data.models.length > 0) {
|
|
status.textContent = `Loaded ${data.models.length} models`;
|
|
|
|
// Render options
|
|
data.models.forEach(model => {
|
|
const option = document.createElement('div');
|
|
option.className = 'model-option';
|
|
option.innerHTML = `
|
|
<span class="model-text">${model.label || model.name}</span>
|
|
<span style="color: #666; font-size: 12px;">${model.multiplier || 1}x</span>
|
|
`;
|
|
|
|
option.addEventListener('click', () => {
|
|
textSpan.textContent = model.label || model.name;
|
|
selected.textContent = model.name;
|
|
isOpen = false;
|
|
dropdown.style.display = 'none';
|
|
|
|
// Mark as selected
|
|
options.querySelectorAll('.model-option').forEach(opt => {
|
|
opt.classList.remove('selected');
|
|
});
|
|
option.classList.add('selected');
|
|
});
|
|
|
|
options.appendChild(option);
|
|
});
|
|
} else {
|
|
status.textContent = 'No models configured';
|
|
const placeholder = document.createElement('div');
|
|
placeholder.className = 'model-option';
|
|
placeholder.style.cursor = 'default';
|
|
placeholder.textContent = 'No models available';
|
|
options.appendChild(placeholder);
|
|
}
|
|
})
|
|
.catch(err => {
|
|
status.textContent = `Error: ${err.message}`;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|