`).join('');
}
// Helper: Convert country code to flag emoji
function getFlagEmoji(countryCode) {
const codePoints = countryCode
.toUpperCase()
.split('')
.map(char => 127397 + char.charCodeAt());
return String.fromCodePoint(...codePoints);
}
```
### 2. Import Data with Progress Bar
```javascript
async function importPerformersWithProgress() {
const progressBar = document.getElementById('progress-bar');
const statusText = document.getElementById('status-text');
const eventSource = new EventSource(
'http://localhost:8080/api/import/all-performers/progress'
);
eventSource.onmessage = function(event) {
const update = JSON.parse(event.data);
if (update.error) {
statusText.textContent = `Error: ${update.error}`;
progressBar.style.width = '100%';
progressBar.classList.add('bg-danger');
eventSource.close();
return;
}
if (update.complete) {
statusText.textContent =
`Complete! Imported ${update.result.imported}/${update.result.total}`;
progressBar.style.width = '100%';
progressBar.classList.add('bg-success');
eventSource.close();
return;
}
// Update progress
const percent = (update.current / update.total) * 100;
progressBar.style.width = `${percent}%`;
statusText.textContent =
`Importing ${update.name} (${update.current}/${update.total})`;
};
eventSource.onerror = function(error) {
statusText.textContent = 'Connection error';
progressBar.classList.add('bg-danger');
eventSource.close();
};
}
```
### 3. Sync Data
```javascript
async function syncAllData(forceSync = false) {
const response = await fetch('http://localhost:8080/api/sync', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ force: forceSync })
});
const result = await response.json();
if (result.success) {
console.log('Sync completed:', result.data);
return result.data;
}
throw new Error(result.message);
}
// Check last sync status
async function checkSyncStatus() {
const response = await fetch('http://localhost:8080/api/sync/status');
const result = await response.json();
if (result.success) {
console.log('Last sync times:', result.data);
return result.data;
}
throw new Error(result.message);
}
```
### 4. Search and Import New Performer
```javascript
async function importNewPerformer(performerName) {
const response = await fetch('http://localhost:8080/api/import/performer', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query: performerName })
});
const result = await response.json();
if (result.success) {
alert(`Successfully imported ${result.data.imported} performer(s)`);
return result.data;
}
alert(`Failed: ${result.message}`);
throw new Error(result.message);
}
// Usage with a form
document.getElementById('import-form').addEventListener('submit', async (e) => {
e.preventDefault();
const performerName = document.getElementById('performer-name').value;
await importNewPerformer(performerName);
// Refresh the performer list
location.reload();
});
```
---
## Error Handling
### Best Practices
Always check the `success` field in the response:
```javascript
async function safeApiCall(url, options = {}) {
try {
const response = await fetch(url, options);
// Check HTTP status
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
const result = await response.json();
// Check API success field
if (!result.success) {
throw new Error(result.message);
}
return result.data;
} catch (error) {
console.error('API Error:', error);
throw error;
}
}
// Usage
try {
const performers = await safeApiCall('http://localhost:8080/api/search?q=jane');
console.log('Performers:', performers);
} catch (error) {
alert(`Error: ${error.message}`);
}
```
### Common Error Responses
**API Key Not Configured:**
```javascript
{
"success": false,
"message": "TPDB_API_KEY not configured"
}
```
**No Results Found:**
```javascript
{
"success": false,
"message": "No performers found"
}
```
**Search Failed:**
```javascript
{
"success": false,
"message": "Search failed: connection timeout"
}
```
---
## Complete Examples
### Example 1: Search Form with Results
```html
Goondex Search
Search Goondex
```
### Example 2: Import Progress with Bootstrap
```html
Import Performers
Import All Performers
0%
```
---
## Tips for Frontend Developers
### 1. Always Use `encodeURIComponent` for Query Parameters
```javascript
// Good
const query = 'Jane Doe & Associates';
fetch(`/api/search?q=${encodeURIComponent(query)}`);
// Bad - will break with special characters
fetch(`/api/search?q=${query}`);
```
### 2. Handle Image Loading Errors
```javascript
```
### 3. Use Bootstrap Classes for Quick Styling
```html
Success!
Error!
Warning!
Loading...
75%
```
### 4. Debounce Search Input
```javascript
function debounce(func, wait) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
// Usage
const searchInput = document.getElementById('search');
const debouncedSearch = debounce(performSearch, 300);
searchInput.addEventListener('input', (e) => debouncedSearch(e.target.value));
```
### 5. Format Dates for Display
```javascript
function formatDate(dateString) {
if (!dateString) return 'Unknown';
const date = new Date(dateString);
return date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
}
// Usage
console.log(formatDate('2024-01-15')); // "January 15, 2024"
```
### 6. Calculate Age from Birthday
```javascript
function calculateAge(birthday) {
if (!birthday) return null;
const birthDate = new Date(birthday);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
return age;
}
// Usage
const age = calculateAge('1995-03-15');
console.log(`Age: ${age}`);
```
---
## Need Help?
If you have questions about the API or need clarification:
1. Check the data model structures above
2. Look at the complete examples
3. Test endpoints using browser DevTools Network tab
4. Consult your backend developer if you need custom endpoints
Happy coding!