Skip to content

Commit

Permalink
refactor: Update user request tiles dynamically
Browse files Browse the repository at this point in the history
This commit updates the `updateUserRequests` function in the `index.html` file. It introduces dynamic updating of user request tiles based on the provided `userRequests` data. The existing tiles are now mapped by `data-task-id` and new request tiles are added if they don't already exist. Additionally, tiles that are no longer present in `userRequests` are removed.
  • Loading branch information
provos committed Oct 25, 2024
1 parent 5c34bd3 commit 2154095
Showing 1 changed file with 46 additions and 22 deletions.
68 changes: 46 additions & 22 deletions src/planai/templates/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -380,35 +380,59 @@ <h4>Input Provenance:</h4>
// User input requests
function updateUserRequests(userRequests) {
const requestsContainer = document.getElementById('user-input-requests');
requestsContainer.innerHTML = ''; // Clear any existing content
const existingTiles = requestsContainer.getElementsByClassName('user-request-tile');

// Map existing tiles by data-task-id
const existingTilesMap = {};
Array.from(existingTiles).forEach(tile => {
const taskId = tile.getAttribute('data-task-id');
existingTilesMap[taskId] = tile;
});

// Set of current user request IDs
const userRequestIds = new Set(userRequests.map(request => request.task_id.toString()));

// Add new request tiles
userRequests.forEach(request => {
const requestTile = document.createElement('div');
requestTile.className = 'user-request-tile';
requestTile.setAttribute('data-task-id', request.task_id);
requestTile.setAttribute('data-accepted-mime-types', request.accepted_mime_types.join(','));

requestTile.innerHTML = `
<p><strong>Instruction:</strong> ${request.instruction}</p>
<p>Drag a file here to upload or</p>
<button class="abort-button">Abort</button>
`;
const taskId = request.task_id.toString();
if (!existingTilesMap[taskId]) {
// Create new tile
const requestTile = document.createElement('div');
requestTile.className = 'user-request-tile';
requestTile.setAttribute('data-task-id', taskId);
requestTile.setAttribute('data-accepted-mime-types', request.accepted_mime_types.join(','));

requestTile.innerHTML = `
<p><strong>Instruction:</strong> ${request.instruction}</p>
<p>Drag a file here to upload or</p>
<button class="abort-button">Abort</button>
`;

requestTile.addEventListener('dragover', function (event) {
event.preventDefault();
requestTile.classList.add('drag-over');
});

requestTile.addEventListener('dragover', function (event) {
event.preventDefault();
requestTile.classList.add('drag-over');
});
requestTile.addEventListener('dragleave', function () {
requestTile.classList.remove('drag-over');
});

requestTile.addEventListener('dragleave', function () {
requestTile.classList.remove('drag-over');
});
requestTile.addEventListener('drop', handleFileDrop);

requestTile.addEventListener('drop', handleFileDrop);
const abortButton = requestTile.querySelector('.abort-button');
abortButton.addEventListener('click', () => abortRequest(request.task_id));

const abortButton = requestTile.querySelector('.abort-button');
abortButton.addEventListener('click', () => abortRequest(request.task_id));
requestsContainer.appendChild(requestTile);
}
// Existing requests are immutable; no updates needed
});

requestsContainer.appendChild(requestTile);
// Remove tiles that are no longer in userRequests
Array.from(existingTiles).forEach(tile => {
const taskId = tile.getAttribute('data-task-id');
if (!userRequestIds.has(taskId)) {
requestsContainer.removeChild(tile);
}
});
}

Expand Down

0 comments on commit 2154095

Please sign in to comment.