`src/web/views/detail.ejs`

46 lines
<%- include('partials/head', { title: fac.name, description: fac.name + ' — ' + (fac.address || '') + ', ' + (fac.city || '') + '.' }) %>

<main class="container detail">
  <p class="crumbs"><a href="/">All restaurants</a> · <%= fac.city || 'LA County' %></p>

  <header class="detail-head">
    <h1><%= fac.name %></h1>
    <p class="addr"><%= fac.address %><%= fac.city ? ', ' + fac.city : '' %><%= fac.state ? ', ' + fac.state : '' %><%= fac.zip ? ' ' + fac.zip : '' %></p>
    <% if (fac.cuisine) { %>
      <p class="cuisine"><%= fac.cuisine %></p>
    <% } %>
    <% if (fac.pe_description) { %>
      <p class="pe"><%= fac.pe_description %></p>
    <% } %>
  </header>

  <% if (fac.lat && fac.lng) { %>
    <section class="map-block">
      <div id="mini-map" data-lat="<%= fac.lat %>" data-lng="<%= fac.lng %>" data-name="<%= fac.name %>"></div>
    </section>
  <% } %>

  <section class="meta">
    <dl>
      <dt>Permit ID</dt><dd><%= fac.facility_id %></dd>
      <% if (fac.owner_name) { %><dt>Operator</dt><dd><%= fac.owner_name %></dd><% } %>
      <% if (fac.seat_tier) { %><dt>Seat capacity</dt><dd><%= fac.seat_tier %></dd><% } %>
      <dt>First seen</dt><dd><%= fac.first_seen_at?.slice(0, 10) %></dd>
    </dl>
  </section>
</main>

<% if (fac.lat && fac.lng) { %>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <script>
    const el = document.getElementById('mini-map');
    const lat = parseFloat(el.dataset.lat), lng = parseFloat(el.dataset.lng);
    const map = L.map(el, { scrollWheelZoom: false }).setView([lat, lng], 15);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OSM', maxZoom: 19 }).addTo(map);
    L.marker([lat, lng]).addTo(map).bindPopup(el.dataset.name).openPopup();
  </script>
<% } %>

<%- include('partials/foot') %>