Expanded UI
This commit is contained in:
51
js/main.js
51
js/main.js
@@ -27,11 +27,13 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
if (!state.currentImageInfo) return;
|
||||
|
||||
card.classList.add(`swipe-${direction}`);
|
||||
lastActionText.textContent = `Last action: Swiped ${direction}`;
|
||||
const actionNameMap = { left: 'Discard', right: 'Keep', up: 'Favorite', down: 'Review' };
|
||||
const actionName = actionNameMap[direction] || direction;
|
||||
lastActionText.textContent = `Last action: ${actionName}`;
|
||||
const toastMap = { left: 'Discarded', right: 'Kept', up: 'Favorited', down: 'Marked for review' };
|
||||
showToast(toastMap[direction] || 'Action');
|
||||
|
||||
recordSelection(state.currentImageInfo, direction);
|
||||
recordSelection(state.currentImageInfo, actionName);
|
||||
|
||||
setTimeout(() => {
|
||||
card.classList.remove(`swipe-${direction}`);
|
||||
@@ -39,16 +41,25 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}, 500);
|
||||
};
|
||||
|
||||
const recordSelection = (imageInfo, action) => {
|
||||
fetch('/selection', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
image_path: imageInfo.path,
|
||||
resolution: imageInfo.resolution,
|
||||
action,
|
||||
}),
|
||||
}).catch(error => console.error('Error recording selection:', error));
|
||||
const recordSelection = async (imageInfo, action) => {
|
||||
try {
|
||||
const response = await fetch('/selection', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
image_path: imageInfo.path,
|
||||
action,
|
||||
}),
|
||||
});
|
||||
if (!response.ok) {
|
||||
console.error('Error recording selection. Status:', response.status);
|
||||
} else {
|
||||
const data = await response.json();
|
||||
console.log('Selection recorded:', data);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error recording selection:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const loadNewImage = () => {
|
||||
@@ -60,16 +71,26 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
state.isLoading = false;
|
||||
card.classList.remove('loading');
|
||||
// card.classList.remove('loading'); // moved to image load handler
|
||||
if (data && data.path) {
|
||||
state.currentImageInfo = data;
|
||||
const cardImage = card.querySelector('img');
|
||||
// Use load event to ensure indicator hides after image fully loads
|
||||
cardImage.onload = () => {
|
||||
card.classList.remove('loading');
|
||||
};
|
||||
cardImage.src = data.path;
|
||||
updateImageInfo(data);
|
||||
adjustContainerToImage(data.orientation);
|
||||
} else {
|
||||
card.innerHTML = `<div class="no-images-message">${data.message || 'No more images.'}</div>`;
|
||||
state.currentImageInfo = null;
|
||||
const placeholder = 'static/no-image.png';
|
||||
const imgEl = card.querySelector('img');
|
||||
if (imgEl) {
|
||||
imgEl.onload = () => card.classList.remove('loading');
|
||||
imgEl.src = placeholder;
|
||||
}
|
||||
updateImageInfo({ filename:'No image', creation_date:'', resolution:'', prompt_data:''});
|
||||
state.currentImageInfo = null; // disables swipe actions
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
Reference in New Issue
Block a user