Browse Source

Place a map next to the region with the entries from that region

tags/0.3.0^2
Bèr Kessels 1 year ago
parent
commit
84d334dc9b

+ 3
- 0
app/assets/stylesheets/application.scss View File

@@ -6,3 +6,6 @@
#map {
height: 400px;
}
#map.full {
height: 800px;
}

+ 1
- 1
app/views/layout.erb View File

@@ -11,7 +11,7 @@
<title>Openingstijden</title>
</head>
<body>
<div class="container">
<div class="container-fluid">
<h1 class="title">Openingstijden</h1>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">

+ 56
- 17
app/views/region.erb View File

@@ -1,20 +1,59 @@
<%-
@place = @region.first
js = "var map = L.map('map').setView([#{@place.location.y}, #{@place.location.x}], 16);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors'
}).addTo(map);"
js += "var openedIcon = L.icon({
iconUrl: '/images/marker-icon-opened.png',
iconSize: [31, 41],
iconAnchor: [15, 41],
popupAnchor: [-3, -76],
shadowUrl: '/images/marker-shadow.png',
shadowSize: [41, 41],
shadowAnchor: [14, 41]
});"
js += "var closedIcon = L.icon({
iconUrl: '/images/marker-icon-closed.png',
iconSize: [31, 41],
iconAnchor: [15, 41],
popupAnchor: [-3, -76],
shadowUrl: '/images/marker-shadow.png',
shadowSize: [41, 41],
shadowAnchor: [14, 41]
});"

@region.each do |place|
if place.status
js += "L.marker([#{place.location.y}, #{place.location.x}], {icon: openedIcon}).addTo(map);"
else
js += "L.marker([#{place.location.y}, #{place.location.x}], {icon: closedIcon}).addTo(map);"
end
end
set_content_for(:closing_js, js)
%>
<h2>Openingstijden in <%= @region.name %></h2>

<div class="list-group">
<%- @region.each do |place| %>
<a href="/places/<%= place.id %>" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h3 class="mb-1"><%= place.name %></h3>
<small><%= place.id %></small>
</div>
<p class="mb-1"><%= place.address.street %>, <%= place.address.city %></p>
<p class="mb-1">
<span class="badge badge-<%= place.status ? 'success' : 'danger' %>">
<%= place.status ? 'Open' : 'Gesloten' %>
</span>
<%= place.opening_hours %>
</p>
</a>
<% end %>
<%== pagy_bootstrap_nav(@region.paginator) %>
<section class="row">
<div class="col-3 list-group">
<%- @region.each do |place| %>
<a href="/places/<%= place.id %>" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h3 class="mb-1"><%= place.name %></h3>
<small><%= place.id %></small>
</div>
<p class="mb-1"><%= place.address.street %>, <%= place.address.city %></p>
<p class="mb-1">
<span class="badge badge-<%= place.status ? 'success' : 'danger' %>">
<%= place.status ? 'Open' : 'Gesloten' %>
</span>
<%= place.opening_hours %>
</p>
</a>
<% end %>
<%== pagy_bootstrap_nav(@region.paginator) %>
</div>
<div class="col">
<div id="map" class="full"></div>
</div>
</section>

BIN
public/images/marker-icon-closed.png View File


BIN
public/images/marker-icon-opened.png View File


Loading…
Cancel
Save