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

Make visit popup look nicer

Browse source
This commit is contained in:
Eugene Burmakin 2025-08-21 19:48:32 +02:00
parent e68bbc9220
commit 6f842e8143
2 changed files with 84 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1326,30 +1326,38 @@ export class VisitsManager {
// Create popup content with form and dropdown
const defaultName = visit.name;
const popupContent = `
<div class="p-3">
<div class="mb-3">
<div class="text-sm mb-1">
<div class="p-4 bg-base-100 text-base-content rounded-lg shadow-lg">
<div class="mb-4">
<div class="text-sm mb-2 text-base-content/80 font-medium">
${dateTimeDisplay.trim()}
</div>
<div>
<span class="text-sm text-gray-500">
Duration: ${durationText},
</span>
<span class="text-sm mb-1 ${statusColorClass} font-semibold">
status: ${visit.status.charAt(0).toUpperCase() + visit.status.slice(1)}
</span>
<span>${visit.place.latitude}, ${visit.place.longitude}</span>
<div class="space-y-1">
<div class="text-sm text-base-content/60">
Duration: ${durationText}
</div>
<div class="text-sm ${statusColorClass} font-semibold">
Status: ${visit.status.charAt(0).toUpperCase() + visit.status.slice(1)}
</div>
<div class="text-xs text-base-content/50 font-mono">
${visit.place.latitude}, ${visit.place.longitude}
</div>
</div>
</div>
<form class="visit-name-form" data-visit-id="${visit.id}">
<form class="visit-name-form space-y-3" data-visit-id="${visit.id}">
<div class="form-control">
<label class="label">
<span class="label-text text-sm font-medium">Visit Name</span>
</label>
<input type="text"
class="input input-bordered input-sm w-full text-neutral-content"
class="input input-bordered input-sm w-full bg-base-200 text-base-content placeholder:text-base-content/50"
value="${defaultName}"
placeholder="Enter visit name">
</div>
<div class="form-control mt-2">
<select class="select text-neutral-content select-bordered select-sm w-full h-fit" name="place">
<div class="form-control">
<label class="label">
<span class="label-text text-sm font-medium">Location</span>
</label>
<select class="select select-bordered select-sm w-full bg-base-200 text-base-content" name="place">
${possiblePlaces.map(place => `
<option value="${place.id}" ${place.id === visit.place.id ? 'selected' : ''}>
${place.name}
@ -1357,11 +1365,26 @@ export class VisitsManager {
`).join('')}
</select>
</div>
<div class="flex gap-2 mt-2">
<button type="submit" class="btn btn-xs btn-primary">Save</button>
<div class="flex gap-2 mt-4 pt-2 border-t border-base-300">
<button type="submit" class="btn btn-sm btn-primary flex-1">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Save
</button>
${visit.status !== 'confirmed' ? `
<button type="button" class="btn btn-xs btn-success confirm-visit" data-id="${visit.id}">Confirm</button>
<button type="button" class="btn btn-xs btn-error decline-visit" data-id="${visit.id}">Decline</button>
<button type="button" class="btn btn-sm btn-success confirm-visit" data-id="${visit.id}">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4"></path>
</svg>
Confirm
</button>
<button type="button" class="btn btn-sm btn-error decline-visit" data-id="${visit.id}">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
Decline
</button>
` : ''}
</div>
</form>
@ -1374,8 +1397,9 @@ export class VisitsManager {
closeOnClick: true,
autoClose: true,
closeOnEscapeKey: true,
maxWidth: 450, // Set maximum width
minWidth: 300 // Set minimum width
maxWidth: 420, // Set maximum width
minWidth: 320, // Set minimum width
className: 'visit-popup' // Add custom class for additional styling
})
.setLatLng([visit.place.latitude, visit.place.longitude])
.setContent(popupContent);

39
app/javascript/styles/visits.css
View file

@ -15,3 +15,42 @@
.merge-visits-button {
margin: 8px 0;
}
/* Visit popup styling */
.visit-popup .leaflet-popup-content-wrapper {
border-radius: 0.5rem;
border: none;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
padding: 0;
overflow: hidden;
}
.visit-popup .leaflet-popup-content {
margin: 0;
line-height: 1.5;
}
.visit-popup .leaflet-popup-tip {
border-top-color: hsl(var(--b1));
}
.visit-popup .leaflet-popup-close-button {
color: hsl(var(--bc)) !important;
font-size: 18px !important;
font-weight: bold !important;
top: 8px !important;
right: 8px !important;
width: 24px !important;
height: 24px !important;
text-align: center !important;
line-height: 24px !important;
background: hsl(var(--b2)) !important;
border-radius: 50% !important;
border: none !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
.visit-popup .leaflet-popup-close-button:hover {
background: hsl(var(--b3)) !important;
color: hsl(var(--bc)) !important;
}