kevinsivic/dawarich
1
0
Fork 0
mirror of https://github.com/Freika/dawarich.git synced 2026-01-10 17:21:38 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix some of the issues with the bulk delete points feature

Browse source
This commit is contained in:
Eugene Burmakin 2025-11-05 00:03:16 +01:00
parent 282441db0b
commit bf96acf92e
3 changed files with 139 additions and 175 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
app/javascript/maps/visits.js
View file

@ -227,7 +227,8 @@ export class VisitsManager {
this.toggleDrawer(); this.toggleDrawer();
} }
// Add cancel selection button to the drawer // Add cancel selection button to the drawer AFTER displayVisits
// This needs to be after because displayVisits sets innerHTML which would wipe out the buttons
this.addSelectionCancelButton(); this.addSelectionCancelButton();
} catch (error) { } catch (error) {
@ -390,42 +391,53 @@ export class VisitsManager {
*/ */
addSelectionCancelButton() { addSelectionCancelButton() {
const container = document.getElementById('visits-list'); const container = document.getElementById('visits-list');
if (!container) return; if (!container) {
console.warn('addSelectionCancelButton: visits-list container not found');
// Add buttons at the top of the drawer if they don't exist return;
if (!document.getElementById('cancel-selection-button')) {
// Create a button container
const buttonContainer = document.createElement('div');
buttonContainer.className = 'flex gap-2 mb-4';
// Cancel button
const cancelButton = document.createElement('button');
cancelButton.id = 'cancel-selection-button';
cancelButton.className = 'btn btn-sm btn-warning flex-1';
cancelButton.textContent = 'Cancel Selection';
cancelButton.onclick = () => this.clearSelection();
// Delete all selected points button
const deleteButton = document.createElement('button');
deleteButton.id = 'delete-selection-button';
deleteButton.className = 'btn btn-sm btn-error flex-1';
deleteButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline mr-1"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path></svg>Delete Points';
deleteButton.onclick = () => this.deleteSelectedPoints();
// Add count badge if we have selected points
if (this.selectedPoints && this.selectedPoints.length > 0) {
const badge = document.createElement('span');
badge.className = 'badge badge-sm ml-1';
badge.textContent = this.selectedPoints.length;
deleteButton.appendChild(badge);
}
buttonContainer.appendChild(cancelButton);
buttonContainer.appendChild(deleteButton);
// Insert at the beginning of the container
container.insertBefore(buttonContainer, container.firstChild);
} }
// Remove any existing button container first to avoid duplicates
const existingButtonContainer = container.querySelector('.flex.gap-2.mb-4');
if (existingButtonContainer) {
existingButtonContainer.remove();
}
// Create a button container
const buttonContainer = document.createElement('div');
buttonContainer.className = 'flex gap-2 mb-4';
buttonContainer.id = 'selection-button-container';
// Cancel button
const cancelButton = document.createElement('button');
cancelButton.id = 'cancel-selection-button';
cancelButton.className = 'btn btn-sm btn-warning flex-1';
cancelButton.textContent = 'Cancel Selection';
cancelButton.onclick = () => this.clearSelection();
// Delete all selected points button
const deleteButton = document.createElement('button');
deleteButton.id = 'delete-selection-button';
deleteButton.className = 'btn btn-sm btn-error flex-1';
deleteButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline mr-1"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path></svg>Delete Points';
deleteButton.onclick = () => this.deleteSelectedPoints();
// Add count badge if we have selected points
if (this.selectedPoints && this.selectedPoints.length > 0) {
const badge = document.createElement('span');
badge.className = 'badge badge-sm ml-1';
badge.textContent = this.selectedPoints.length;
deleteButton.appendChild(badge);
console.log(`addSelectionCancelButton: Added button with badge showing ${this.selectedPoints.length} points`);
} else {
console.warn('addSelectionCancelButton: No selected points found');
}
buttonContainer.appendChild(cancelButton);
buttonContainer.appendChild(deleteButton);
// Insert at the beginning of the container
container.insertBefore(buttonContainer, container.firstChild);
console.log('addSelectionCancelButton: Buttons added successfully');
} }
/** /**

228
e2e/bulk-delete-points.spec.js
View file

@ -1,5 +1,38 @@
const { test, expect } = require('@playwright/test'); const { test, expect } = require('@playwright/test');
// Helper function to draw selection rectangle and wait for delete button
async function drawSelectionRectangle(page) {
// Click area selection tool
const selectionButton = page.locator('#selection-tool-button');
await selectionButton.click();
await page.waitForTimeout(500);
// Draw a rectangle on the map to select points
const mapContainer = page.locator('#map [data-maps-target="container"]');
const bbox = await mapContainer.boundingBox();
// Draw rectangle covering most of the map to ensure we select points
const startX = bbox.x + bbox.width * 0.2;
const startY = bbox.y + bbox.height * 0.2;
const endX = bbox.x + bbox.width * 0.8;
const endY = bbox.y + bbox.height * 0.8;
await page.mouse.move(startX, startY);
await page.mouse.down();
await page.mouse.move(endX, endY, { steps: 10 }); // Add steps for smoother drag
await page.mouse.up();
// Wait longer for API calls and drawer animations
await page.waitForTimeout(2000);
// Wait for drawer to open (it should open automatically after selection)
await page.waitForSelector('#visits-drawer.open', { timeout: 15000 });
// Wait for delete button to appear in the drawer (indicates selection is complete)
await page.waitForSelector('#delete-selection-button', { timeout: 15000 });
await page.waitForTimeout(500); // Brief wait for UI to stabilize
}
test.describe('Bulk Delete Points', () => { test.describe('Bulk Delete Points', () => {
test.beforeEach(async ({ page }) => { test.beforeEach(async ({ page }) => {
// Navigate to map page // Navigate to map page
@ -72,54 +105,18 @@ test.describe('Bulk Delete Points', () => {
}); });
test('should select points in drawn area and show delete button', async ({ page }) => { test('should select points in drawn area and show delete button', async ({ page }) => {
// Click area selection tool await drawSelectionRectangle(page);
const selectionButton = page.locator('#selection-tool-button');
await selectionButton.click();
await page.waitForTimeout(500);
// Draw a rectangle on the map to select points
const mapContainer = page.locator('#map [data-maps-target="container"]');
const bbox = await mapContainer.boundingBox();
// Draw rectangle from top-left to bottom-right
const startX = bbox.x + bbox.width * 0.3;
const startY = bbox.y + bbox.height * 0.3;
const endX = bbox.x + bbox.width * 0.7;
const endY = bbox.y + bbox.height * 0.7;
await page.mouse.move(startX, startY);
await page.mouse.down();
await page.mouse.move(endX, endY);
await page.mouse.up();
await page.waitForTimeout(1000);
// Check that delete button appears // Check that delete button appears
const deleteButton = page.locator('#delete-selection-button'); const deleteButton = page.locator('#delete-selection-button');
await expect(deleteButton).toBeVisible(); await expect(deleteButton).toBeVisible({ timeout: 10000 });
// Check button has text "Delete Points" // Check button has text "Delete Points"
await expect(deleteButton).toContainText('Delete Points'); await expect(deleteButton).toContainText('Delete Points');
}); });
test('should show point count badge on delete button', async ({ page }) => { test('should show point count badge on delete button', async ({ page }) => {
// Click area selection tool await drawSelectionRectangle(page);
const selectionButton = page.locator('#selection-tool-button');
await selectionButton.click();
await page.waitForTimeout(500);
// Draw rectangle
const mapContainer = page.locator('#map [data-maps-target="container"]');
const bbox = await mapContainer.boundingBox();
const startX = bbox.x + bbox.width * 0.3;
const startY = bbox.y + bbox.height * 0.3;
const endX = bbox.x + bbox.width * 0.7;
const endY = bbox.y + bbox.height * 0.7;
await page.mouse.move(startX, startY);
await page.mouse.down();
await page.mouse.move(endX, endY);
await page.mouse.up();
await page.waitForTimeout(1000); await page.waitForTimeout(1000);
// Check for badge with count // Check for badge with count
@ -132,24 +129,7 @@ test.describe('Bulk Delete Points', () => {
}); });
test('should show cancel button alongside delete button', async ({ page }) => { test('should show cancel button alongside delete button', async ({ page }) => {
// Click area selection tool await drawSelectionRectangle(page);
const selectionButton = page.locator('#selection-tool-button');
await selectionButton.click();
await page.waitForTimeout(500);
// Draw rectangle
const mapContainer = page.locator('#map [data-maps-target="container"]');
const bbox = await mapContainer.boundingBox();
const startX = bbox.x + bbox.width * 0.3;
const startY = bbox.y + bbox.height * 0.3;
const endX = bbox.x + bbox.width * 0.7;
const endY = bbox.y + bbox.height * 0.7;
await page.mouse.move(startX, startY);
await page.mouse.down();
await page.mouse.move(endX, endY);
await page.mouse.up();
await page.waitForTimeout(1000); await page.waitForTimeout(1000);
// Check both buttons exist // Check both buttons exist
@ -162,23 +142,7 @@ test.describe('Bulk Delete Points', () => {
}); });
test('should cancel selection when cancel button is clicked', async ({ page }) => { test('should cancel selection when cancel button is clicked', async ({ page }) => {
// Click area selection tool and draw rectangle await drawSelectionRectangle(page);
const selectionButton = page.locator('#selection-tool-button');
await selectionButton.click();
await page.waitForTimeout(500);
const mapContainer = page.locator('#map [data-maps-target="container"]');
const bbox = await mapContainer.boundingBox();
const startX = bbox.x + bbox.width * 0.3;
const startY = bbox.y + bbox.height * 0.3;
const endX = bbox.x + bbox.width * 0.7;
const endY = bbox.y + bbox.height * 0.7;
await page.mouse.move(startX, startY);
await page.mouse.down();
await page.mouse.move(endX, endY);
await page.mouse.up();
await page.waitForTimeout(1000); await page.waitForTimeout(1000);
// Click cancel button // Click cancel button
@ -207,23 +171,7 @@ test.describe('Bulk Delete Points', () => {
await dialog.dismiss(); // Dismiss to prevent actual deletion await dialog.dismiss(); // Dismiss to prevent actual deletion
}); });
// Click area selection tool and draw rectangle await drawSelectionRectangle(page);
const selectionButton = page.locator('#selection-tool-button');
await selectionButton.click();
await page.waitForTimeout(500);
const mapContainer = page.locator('#map [data-maps-target="container"]');
const bbox = await mapContainer.boundingBox();
const startX = bbox.x + bbox.width * 0.3;
const startY = bbox.y + bbox.height * 0.3;
const endX = bbox.x + bbox.width * 0.7;
const endY = bbox.y + bbox.height * 0.7;
await page.mouse.move(startX, startY);
await page.mouse.down();
await page.mouse.move(endX, endY);
await page.mouse.up();
await page.waitForTimeout(1000); await page.waitForTimeout(1000);
// Click delete button // Click delete button
@ -249,23 +197,7 @@ test.describe('Bulk Delete Points', () => {
return controller?.markers?.length || 0; return controller?.markers?.length || 0;
}); });
// Click area selection tool and draw rectangle await drawSelectionRectangle(page);
const selectionButton = page.locator('#selection-tool-button');
await selectionButton.click();
await page.waitForTimeout(500);
const mapContainer = page.locator('#map [data-maps-target="container"]');
const bbox = await mapContainer.boundingBox();
const startX = bbox.x + bbox.width * 0.3;
const startY = bbox.y + bbox.height * 0.3;
const endX = bbox.x + bbox.width * 0.7;
const endY = bbox.y + bbox.height * 0.7;
await page.mouse.move(startX, startY);
await page.mouse.down();
await page.mouse.move(endX, endY);
await page.mouse.up();
await page.waitForTimeout(1000); await page.waitForTimeout(1000);
// Click delete button // Click delete button
@ -273,8 +205,8 @@ test.describe('Bulk Delete Points', () => {
await deleteButton.click(); await deleteButton.click();
await page.waitForTimeout(2000); // Wait for deletion to complete await page.waitForTimeout(2000); // Wait for deletion to complete
// Check for success flash message // Check for success flash message with specific text
const flashMessage = page.locator('#flash-messages [role="alert"]'); const flashMessage = page.locator('#flash-messages [role="alert"]:has-text("Successfully deleted")');
await expect(flashMessage).toBeVisible({ timeout: 5000 }); await expect(flashMessage).toBeVisible({ timeout: 5000 });
const messageText = await flashMessage.textContent(); const messageText = await flashMessage.textContent();
@ -306,7 +238,7 @@ test.describe('Bulk Delete Points', () => {
await dialog.accept(); await dialog.accept();
}); });
// Perform deletion // Perform deletion using same selection logic as helper
const selectionButton = page.locator('#selection-tool-button'); const selectionButton = page.locator('#selection-tool-button');
await selectionButton.click(); await selectionButton.click();
await page.waitForTimeout(500); await page.waitForTimeout(500);
@ -314,16 +246,21 @@ test.describe('Bulk Delete Points', () => {
const mapContainer = page.locator('#map [data-maps-target="container"]'); const mapContainer = page.locator('#map [data-maps-target="container"]');
const bbox = await mapContainer.boundingBox(); const bbox = await mapContainer.boundingBox();
const startX = bbox.x + bbox.width * 0.4; // Use larger selection area to ensure we select points
const startY = bbox.y + bbox.height * 0.4; const startX = bbox.x + bbox.width * 0.2;
const endX = bbox.x + bbox.width * 0.6; const startY = bbox.y + bbox.height * 0.2;
const endY = bbox.y + bbox.height * 0.6; const endX = bbox.x + bbox.width * 0.8;
const endY = bbox.y + bbox.height * 0.8;
await page.mouse.move(startX, startY); await page.mouse.move(startX, startY);
await page.mouse.down(); await page.mouse.down();
await page.mouse.move(endX, endY); await page.mouse.move(endX, endY, { steps: 10 });
await page.mouse.up(); await page.mouse.up();
await page.waitForTimeout(1000); await page.waitForTimeout(2000);
// Wait for drawer and button to appear
await page.waitForSelector('#visits-drawer.open', { timeout: 15000 });
await page.waitForSelector('#delete-selection-button', { timeout: 15000 });
const deleteButton = page.locator('#delete-selection-button'); const deleteButton = page.locator('#delete-selection-button');
await deleteButton.click(); await deleteButton.click();
@ -355,7 +292,7 @@ test.describe('Bulk Delete Points', () => {
await dialog.accept(); await dialog.accept();
}); });
// Perform deletion // Perform deletion using same selection logic as helper
const selectionButton = page.locator('#selection-tool-button'); const selectionButton = page.locator('#selection-tool-button');
await selectionButton.click(); await selectionButton.click();
await page.waitForTimeout(500); await page.waitForTimeout(500);
@ -363,16 +300,21 @@ test.describe('Bulk Delete Points', () => {
const mapContainer = page.locator('#map [data-maps-target="container"]'); const mapContainer = page.locator('#map [data-maps-target="container"]');
const bbox = await mapContainer.boundingBox(); const bbox = await mapContainer.boundingBox();
const startX = bbox.x + bbox.width * 0.4; // Use larger selection area to ensure we select points
const startY = bbox.y + bbox.height * 0.4; const startX = bbox.x + bbox.width * 0.2;
const endX = bbox.x + bbox.width * 0.6; const startY = bbox.y + bbox.height * 0.2;
const endY = bbox.y + bbox.height * 0.6; const endX = bbox.x + bbox.width * 0.8;
const endY = bbox.y + bbox.height * 0.8;
await page.mouse.move(startX, startY); await page.mouse.move(startX, startY);
await page.mouse.down(); await page.mouse.down();
await page.mouse.move(endX, endY); await page.mouse.move(endX, endY, { steps: 10 });
await page.mouse.up(); await page.mouse.up();
await page.waitForTimeout(1000); await page.waitForTimeout(2000);
// Wait for drawer and button to appear
await page.waitForSelector('#visits-drawer.open', { timeout: 15000 });
await page.waitForSelector('#delete-selection-button', { timeout: 15000 });
const deleteButton = page.locator('#delete-selection-button'); const deleteButton = page.locator('#delete-selection-button');
await deleteButton.click(); await deleteButton.click();
@ -410,7 +352,7 @@ test.describe('Bulk Delete Points', () => {
await dialog.accept(); await dialog.accept();
}); });
// Perform deletion // Perform deletion using same selection logic as helper
const selectionButton = page.locator('#selection-tool-button'); const selectionButton = page.locator('#selection-tool-button');
await selectionButton.click(); await selectionButton.click();
await page.waitForTimeout(500); await page.waitForTimeout(500);
@ -418,16 +360,21 @@ test.describe('Bulk Delete Points', () => {
const mapContainer = page.locator('#map [data-maps-target="container"]'); const mapContainer = page.locator('#map [data-maps-target="container"]');
const bbox = await mapContainer.boundingBox(); const bbox = await mapContainer.boundingBox();
const startX = bbox.x + bbox.width * 0.3; // Use larger selection area to ensure we select points
const startY = bbox.y + bbox.height * 0.3; const startX = bbox.x + bbox.width * 0.2;
const endX = bbox.x + bbox.width * 0.7; const startY = bbox.y + bbox.height * 0.2;
const endY = bbox.y + bbox.height * 0.7; const endX = bbox.x + bbox.width * 0.8;
const endY = bbox.y + bbox.height * 0.8;
await page.mouse.move(startX, startY); await page.mouse.move(startX, startY);
await page.mouse.down(); await page.mouse.down();
await page.mouse.move(endX, endY); await page.mouse.move(endX, endY, { steps: 10 });
await page.mouse.up(); await page.mouse.up();
await page.waitForTimeout(1000); await page.waitForTimeout(2000);
// Wait for drawer and button to appear
await page.waitForSelector('#visits-drawer.open', { timeout: 15000 });
await page.waitForSelector('#delete-selection-button', { timeout: 15000 });
const deleteButton = page.locator('#delete-selection-button'); const deleteButton = page.locator('#delete-selection-button');
await deleteButton.click(); await deleteButton.click();
@ -448,7 +395,7 @@ test.describe('Bulk Delete Points', () => {
await dialog.accept(); await dialog.accept();
}); });
// Perform deletion // Perform deletion using same selection logic as helper
const selectionButton = page.locator('#selection-tool-button'); const selectionButton = page.locator('#selection-tool-button');
await selectionButton.click(); await selectionButton.click();
await page.waitForTimeout(500); await page.waitForTimeout(500);
@ -456,16 +403,21 @@ test.describe('Bulk Delete Points', () => {
const mapContainer = page.locator('#map [data-maps-target="container"]'); const mapContainer = page.locator('#map [data-maps-target="container"]');
const bbox = await mapContainer.boundingBox(); const bbox = await mapContainer.boundingBox();
const startX = bbox.x + bbox.width * 0.3; // Use larger selection area to ensure we select points
const startY = bbox.y + bbox.height * 0.3; const startX = bbox.x + bbox.width * 0.2;
const endX = bbox.x + bbox.width * 0.7; const startY = bbox.y + bbox.height * 0.2;
const endY = bbox.y + bbox.height * 0.7; const endX = bbox.x + bbox.width * 0.8;
const endY = bbox.y + bbox.height * 0.8;
await page.mouse.move(startX, startY); await page.mouse.move(startX, startY);
await page.mouse.down(); await page.mouse.down();
await page.mouse.move(endX, endY); await page.mouse.move(endX, endY, { steps: 10 });
await page.mouse.up(); await page.mouse.up();
await page.waitForTimeout(1000); await page.waitForTimeout(2000);
// Wait for drawer and button to appear
await page.waitForSelector('#visits-drawer.open', { timeout: 15000 });
await page.waitForSelector('#delete-selection-button', { timeout: 15000 });
const deleteButton = page.locator('#delete-selection-button'); const deleteButton = page.locator('#delete-selection-button');
await deleteButton.click(); await deleteButton.click();

2
e2e/temp/.auth/user.json
View file

@ -2,7 +2,7 @@
"cookies": [ "cookies": [
{ {
"name": "_dawarich_session", "name": "_dawarich_session",
"value": "EpVyt%2F73ZRFf3PGkUELvrrnllSZ7fNY8oLGYvmO0STevmBL9bT9XZb9JK4NE6KSDMYqDLPFSRrZTNAlmyOuYi7kett2QE3TjNcAVVtE8%2BRhUweTPTcFs9wwAbf%2FlKYqQkMLF4NYz%2FA0Mr39M2fLxx0qAiqAo0Cg4y1jHQlWS1Slrp%2FkXkHt3obK5z6biG8gqXk9ldBqa6Uh3ymuBJOe%2BQE0rvhnsGRfD%2FIFbsgUzCuU3BEHw%2BUaO%2FYR%2BrlASj4sNiBr6%2FBRLlI0pecI4G8avHHSasFigpw2JEslgP12ifFtoLd5yw7uqO0K7eUF9oGAWV3KWvj7xScfDi4mYagFDpu8q5msipd6Wo6e5D7i8GjnxhoGDLuBRHqIxS76EhxTHl%2FE%2FkV146ZFH--YqOqiWcq7Oafo4bF--F2LpPqfUyhiln%2B9dabKFxQ%3D%3D", "value": "uSq%2BCBWS9YujuNhicVcBHgR62tcYRgXVobd6flpFfMCPEGldb7vMuvaYDitf%2Fr%2FRMXC2Vb4VKE0dHz00pXp1S%2F6gBJuXHZ05is2zoZPGQ5gRaGVRbEG%2F%2FfKVSKgOb3B87WmmrB4I%2B1jq10hT0MI%2FKzeAhIR%2BI1hVmGYeozx%2BNttmWjIgtYk%2FN9JnsN7jzmYvON65mrRgJQyPftaIEpOYpMCdbPl1uosRoQpO6WroGxQ4J89lFvoSbyTspqJje8A0i5JNJThSfRkyPcIPXNtIFGHUUBX376%2BOLZds7sLor6%2BMu%2FQs%2FnjQl2xWFxejo6lSp%2BZrplztjPwquQtjm1BmnWN1PPvFsrphEw2scIk%2BQUyk2F3ZQcVwBUExB0dm5qA9M3uSbvR%2BV8OU--8oAuBe0ygLxh0x4N--STVFL7XMmRGm17xka6AU3A%3D%3D",
"domain": "localhost", "domain": "localhost",
"path": "/", "path": "/",
"expires": -1, "expires": -1,