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

Make area popup look a bit nicer

Browse source
This commit is contained in:
Eugene Burmakin 2024-07-21 20:26:45 +02:00
parent 151e5cf042
commit 254c28ae1d
3 changed files with 35 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/builds/tailwind.css
View file

File diff suppressed because one or more lines are too long

43
app/javascript/controllers/maps_controller.js
View file

@ -44,6 +44,15 @@ export default class extends Controller {
Areas: this.areasLayer // Add the areas layer to the controls
};
L.control
.scale({
position: "bottomright",
metric: true,
imperial: false,
maxWidth: 120,
})
.addTo(this.map);
L.control.layers(this.baseMaps(), controlsLayer).addTo(this.map);
// Fetch and draw areas when the map is loaded
@ -384,17 +393,33 @@ export default class extends Controller {
const center = layer.getLatLng();
const formHtml = `
<form id="circle-form">
<label for="circle-name">Name:</label>
<input type="text" id="circle-name" name="area[name]" required>
<input type="hidden" name="area[latitude]" value="${center.lat}">
<input type="hidden" name="area[longitude]" value="${center.lng}">
<input type="hidden" name="area[radius]" value="${radius}">
<button type="submit">Save</button>
</form>
<div class="card w-96 max-w-sm bg-content-100 shadow-xl">
<div class="card-body">
<h2 class="card-title">New Area</h2>
<form id="circle-form">
<div class="form-control">
<label for="circle-name" class="label">
<span class="label-text">Name</span>
</label>
<input type="text" id="circle-name" name="area[name]" class="input input-bordered input-ghost focus:input-ghost w-full max-w-xs" required>
</div>
<input type="hidden" name="area[latitude]" value="${center.lat}">
<input type="hidden" name="area[longitude]" value="${center.lng}">
<input type="hidden" name="area[radius]" value="${radius}">
<div class="card-actions justify-end mt-4">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
`;
layer.bindPopup(formHtml).openPopup();
layer.bindPopup(
formHtml, {
maxWidth: "auto",
minWidth: 300
}
).openPopup();
layer.on('popupopen', () => {
const form = document.getElementById('circle-form');

1
app/views/layouts/application.html.erb
View file

@ -10,7 +10,6 @@
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>