~ihabunek/triglav

c87730eb64a7fcb981870a38e02663a7f0f11a69 — Ivan Habunek 3 months ago 9e9d98f
Adjust html markup to tailwind
M assets/css/app.css => assets/css/app.css +6 -0
@@ 8,6 8,7 @@
  h1 { @apply text-2xl font-bold mb-4 }
  h2 { @apply text-xl font-bold mb-4 }
  h3 { @apply text-lg font-bold mb-4 }
  hr { @apply my-4 }

  table { @apply border-collapse mb-4 }
  tbody > tr:hover { @apply bg-gray-100 }


@@ 18,6 19,8 @@

  form { @apply mb-4 }
  select { @apply rounded h-10 }

  section + section { @apply mt-4 }
}

@layer components {


@@ 92,4 95,7 @@
    @apply px-3 text-gray-500;
    content: ">";
  }

  .border-left-thin { border-left: 1px dotted gray }
  .border-left-thick { border-left: 10px solid LightGray }
}

M lib/triglav_web/templates/home/data.html.eex => lib/triglav_web/templates/home/data.html.eex +11 -15
@@ 1,7 1,3 @@
<style>
  .bl { border-left: 1px dotted gray }
</style>

<main role="main" class="container">
  <h1>Data overview</h1>



@@ 13,20 9,20 @@
    <thead>
      <tr>
        <th rowspan="2">Updated at</th>
        <th colspan="3" class="bl">Nodes</th>
        <th colspan="3" class="bl">Ways</th>
        <th colspan="3" class="bl">Relations</th>
        <th rowspan="2" class="bl">Earliest timestamp</th>
        <th colspan="3" class="border-left-thin">Nodes</th>
        <th colspan="3" class="border-left-thin">Ways</th>
        <th colspan="3" class="border-left-thin">Relations</th>
        <th rowspan="2" class="border-left-thin">Earliest timestamp</th>
        <th rowspan="2">Latest timestamp</th>
      </tr>
      <tr>
        <th class="bl">Add</th>
        <th class="border-left-thin">Add</th>
        <th>Del</th>
        <th>Mod</th>
        <th class="bl">Add</th>
        <th class="border-left-thin">Add</th>
        <th>Del</th>
        <th>Mod</th>
        <th class="bl">Add</th>
        <th class="border-left-thin">Add</th>
        <th>Del</th>
        <th>Mod</th>
      </tr>


@@ 35,16 31,16 @@
      <%= for changes <- @replication_changes do %>
      <tr>
        <td><%= changes.tstamp %></td>
        <td class="bl"><%= changes.nodes_added %></td>
        <td class="border-left-thin"><%= changes.nodes_added %></td>
        <td><%= changes.nodes_deleted %></td>
        <td><%= changes.nodes_modified %></td>
        <td class="bl"><%= changes.ways_added %></td>
        <td class="border-left-thin"><%= changes.ways_added %></td>
        <td><%= changes.ways_deleted %></td>
        <td><%= changes.ways_modified %></td>
        <td class="bl"><%= changes.relations_added %></td>
        <td class="border-left-thin"><%= changes.relations_added %></td>
        <td><%= changes.relations_deleted %></td>
        <td><%= changes.relations_modified %></td>
        <td class="bl"><%= changes.earliest_timestamp %></td>
        <td class="border-left-thin"><%= changes.earliest_timestamp %></td>
        <td><%= changes.latest_timestamp %></td>
      </tr>
      <% end %>

M lib/triglav_web/templates/hp/post_offices/index.html.eex => lib/triglav_web/templates/hp/post_offices/index.html.eex +5 -9
@@ 1,7 1,3 @@
<style>
  .bl { border-left: 1px dotted gray }
</style>

<main role="main" class="container">
  <h1>HP Post Offices</h1>



@@ 14,8 10,8 @@
      <thead>
        <tr>
          <th colspan="2">Hrvatska Pošta</th>
          <th rowspan="2" class="bl">Matched OSM node or way</th>
          <th rowspan="2" class="bl">Distance</th>
          <th rowspan="2" class="border-left-thin">Matched OSM node or way</th>
          <th rowspan="2" class="border-left-thin">Distance</th>
        </tr>
        <tr>
          <th>Name</th>


@@ 29,15 25,15 @@
            <td><%= mapping.post_office.street %></td>

            <%= if mapping.node do %>
              <td class="bl"><%= osm_link(mapping.node, tags: [], name: true) %></td>
              <td class="border-left-thin"><%= osm_link(mapping.node, tags: [], name: true) %></td>
            <% end %>

            <%= if mapping.way do %>
              <td class="bl"><%= osm_link(mapping.way, tags: [], name: true) %></td>
              <td class="border-left-thin"><%= osm_link(mapping.way, tags: [], name: true) %></td>
            <% end %>

            <%= if !mapping.node and !mapping.way do %>
              <td class="bl text-gray">Not found</td>
              <td class="border-left-thin text-gray-500">Not found</td>
            <% end %>

            <%= if mapping.distance && mapping.distance <= 50 do %>

M lib/triglav_web/templates/hps/tracks/detail.html.eex => lib/triglav_web/templates/hps/tracks/detail.html.eex +8 -33
@@ 1,34 1,5 @@
<link rel="stylesheet" type="text/css" href="<%= Routes.static_path(@conn, "/leaflet/leaflet.css") %>">

<style type="text/css">
  #map {
    width: 100%;
    height: 400px;
    background-color: lemonchiffon;
  }

  #elevation {
    margin-top: 1rem;
    position: relative;
    width: 100%;
    padding-bottom: 20%;
    border: 1px solid gray;
  }

  #elevation-chart, #elevation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<script id="elevations" type="application/json"><%= raw(@elevations) %></script>
<script id="times" type="application/json"><%= raw(@times) %></script>
<script id="distances" type="application/json"><%= raw(@distances) %></script>
<script id="linestring" type="text/plain"><%= raw(@linestring) %></script>

<main role="main" class="container">
  <h1>HPS Track <%= @track.route_no %>: <%= @track.name %></h1>



@@ 59,17 30,21 @@
    </tr>
  </table>

  <div id="map"></div>
  <div id="map" class="w-full h-[400px] border border-gray-300"></div>

  <div id="elevation">
    <canvas id="elevation-chart">
  <div id="elevation" class="mt-4 relative w-full pb-[25%] border border-gray-300">
    <canvas id="elevation-chart" class="absolute w-full h-full top-0 left-0">
      <p>Your browser doesn’t support HTML5 Canvas. If it did you'd see an elevation chart.</p>
    </canvas>

    <canvas id="elevation-overlay">
    <canvas id="elevation-overlay" class="absolute w-full h-full top-0 left-0">
      <p>Your browser doesn’t support HTML5 Canvas. If it did you'd see an elevation chart.</p>
    </canvas>
  </div>
</main>

<script id="elevations" type="application/json"><%= raw(@elevations) %></script>
<script id="times" type="application/json"><%= raw(@times) %></script>
<script id="distances" type="application/json"><%= raw(@distances) %></script>
<script id="linestring" type="text/plain"><%= raw(@linestring) %></script>
<script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/assets/track.js") %>"></script>

M lib/triglav_web/templates/hps/tracks/index.html.eex => lib/triglav_web/templates/hps/tracks/index.html.eex +9 -11
@@ 13,12 13,8 @@
          </option>
        <% end %>
      </select>
      <button class="button" type="submit">
        Go
      </button>
      <a href="?" class="button">
        Clear
      </a>
      <button class="button" type="submit">Go</button>
      <a href="?" class="button">Clear</a>
    </form>
  <% end %>



@@ 43,13 39,15 @@
          <tr>
            <td><%= track.ref %></td>
            <td><%= track.route_no %></td>
            <td><a href="<%= Routes.hps_tracks_path(TriglavWeb.Endpoint, :detail, track.id) %>">
              <%= track.name %></a>
            <td>
              <a href="<%= Routes.hps_tracks_path(TriglavWeb.Endpoint, :detail, track.id) %>">
                <%= track.name %>
              </a>
            </td>
            <td><%= track.region %></td>
            <td class="text-right"><%= track.length %> km</td>
            <td class="text-right"><%= track.height_diff %> m</td>
            <td class="text-right"><%= track.walk_time %> min</td>
            <td class="text-right whitespace-nowrap"><%= track.length %> km</td>
            <td class="text-right whitespace-nowrap"><%= track.height_diff %> m</td>
            <td class="text-right whitespace-nowrap"><%= track.walk_time %> min</td>
            <td><a href="<%= track.url %>">www</a></td>
            <td><a href="<%= track.gpx1_url %>">GPX1</a></td>
            <td><a href="<%= track.gpx2_url %>">GPX2</a></td>

M lib/triglav_web/templates/layout/app.html.eex => lib/triglav_web/templates/layout/app.html.eex +7 -20
@@ 8,31 8,18 @@
    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/assets/app.css") %>"/>
    <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/assets/app.js") %>"></script>
  </head>
  <body>
  <body class="font-mono text-sm">
    <header>
      <nav class="topnav">
        <div class="container">
          <div class="topnav-title">
            <a href="/">Triglav</a>
          </div>
          <div class="topnav-links">
            <a href="/zet/routes">Routes</a>
          </div>
          <div class="topnav-links">
            <a href="/zet/stops">Stops</a>
          </div>
          <div class="topnav-links">
            <a href="/zet/errors/history">Errors</a>
          </div>
      <nav class="bg-red-700">
        <div class="container flex space-x-10 items-baseline">
          <a class="text-xl text-white" href="/">Triglav</a>
          <a class="uppercase text-base text-white" href="/zet/routes">Routes</a>
          <a class="uppercase text-base text-white" href="/zet/stops">Stops</a>
          <a class="uppercase text-base text-white" href="/zet/errors/history">Errors</a>
        </div>
      </nav>
    </header>

    <section>
      <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
      <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
    </section>

    <%= @inner_content %>
  </body>
</html>

M lib/triglav_web/templates/zet/errors/index.html.eex => lib/triglav_web/templates/zet/errors/index.html.eex +3 -4
@@ 10,8 10,7 @@
    Atom feed
  </a>


  <table style="margin-top: 1rem; width: 100%;">
  <table class="mt-4 w-full">
    <thead>
      <tr>
        <th>Timestamp</th>


@@ 32,11 31,11 @@
          <td><%= item.count %></td>

          <%= if item.created_count > item.resolved_count do %>
            <td class="text-red">
            <td class="text-red-700">
              + <%= item.created_count - item.resolved_count %>
            </td>
          <% else %>
            <td class="text-green">
            <td class="text-green-700">
              <%= if item.resolved_count > item.created_count do %>-<% end %>
              <%= item.resolved_count - item.created_count %>
            </td>

M lib/triglav_web/templates/zet/routes/detail.html.eex => lib/triglav_web/templates/zet/routes/detail.html.eex +28 -40
@@ 1,22 1,7 @@
<link rel="stylesheet" type="text/css" href="<%= Routes.static_path(@conn, "/leaflet/leaflet.css") %>">

<style type="text/css">
  #routes-map {
    height: 600px;
    max-width:  1024px;
    margin: 1rem 0;
  }

  .bl { border-left: 10px solid lightgray }
</style>

<script id="trips-geojson" type="application/json">
  <%= raw(@trips_geojson) %>
</script>

<script id="zet-stops-geojson" type="application/json">
  <%= raw(@zet_stops_geojson) %>
</script>
<script id="trips-geojson" type="application/json"><%= raw(@trips_geojson) %></script>
<script id="zet-stops-geojson" type="application/json"><%= raw(@zet_stops_geojson) %></script>

<main role="main" class="container-wide">
  <ul class="breadcrumbs">


@@ 26,23 11,23 @@

  <h1>#<%= @route.id %>: <%= @route.long_name %></h1>

  <div id="routes-map"></div>
  <div id="routes-map" class="h-[600px] max-w-[1024px] my-4"></div>

  <h2>OSM Relations</h2>

  <section>
    <%= render_relation_hierarchy(@hierarchy) %>
    <%= josm_load_objects(@relations) %>
    <div class="mt-4"><%= josm_load_objects(@relations) %></div>
  </section>

  <%= if length(@route_errors) > 0 or map_size(@relation_errors) > 0 do %>
    <section>
  <section>
    <%= if length(@route_errors) > 0 or map_size(@relation_errors) > 0 do %>
      <h3>Errors</h3>
      <%= if length(@route_errors) > 0 do %>
        <ul>
          <%= for error <- @route_errors do %>
            <li>
              <span class="text-red"><%= render_error(error) %></span>
              <span class="text-red-700"><%= render_error(error) %></span>
            </li>
          <% end %>
        </ul>


@@ 55,17 40,17 @@
              <%= osm_link(relation, tags: ["type"], name: true) %>
              <ul>
                <%= for error <- errors do %>
                  <li><span class="text-red"><%= render_error(error) %></span></li>
                  <li><span class="text-red-700"><%= render_error(error) %></span></li>
                <% end %>
              </ul>
            </li>
          <% end %>
        </ul>
      <% end %>
    </section>
  <% else %>
    <p class="text-green">No errors found.</p>
  <% end %>
    <% else %>
      <p class="text-green-700">No errors found.</p>
    <% end %>
  </section>

  <section>
    <%= for trip <- @trips do %>


@@ 77,9 62,9 @@
            <thead>
              <tr>
                <th colspan="6" class="text-center">OSM Platform</th>
                <th colspan="2" class="text-center bl">GTFS Stop</th>
                <th colspan="2" class="text-center border-left-thick">GTFS Stop</th>
                <%= if has_platform_errors do %>
                  <th colspan="1" rowspan="2" class="text-center bl">Errors</th>
                  <th colspan="1" rowspan="2" class="text-center border-left-thick">Errors</th>
                <% end %>
              </tr>
              <tr>


@@ 89,7 74,7 @@
                <th>Stop ID</th>
                <th>From route</th>
                <th>JOSM</th>
                <th class="bl">ID</th>
                <th class="border-left-thick">ID</th>
                <th>Name</th>
              </tr>
            </thead>


@@ 109,16 94,16 @@
                </td>
                <td><%= josm_load_objects([member]) %></td>
                <%= if platform.stop do %>
                  <td class="bl"><%= platform.stop.id %></td>
                  <td class="border-left-thick"><%= platform.stop.id %></td>
                  <td><%= platform.stop.name %></td>
                <% else %>
                  <td class="bl"></td>
                  <td class="border-left-thick"></td>
                  <td></td>
                <% end %>
                <%= if has_platform_errors do %>
                  <td class="bl">
                  <td class="border-left-thick">
                    <%= if length(errors) > 0 do %>
                      <ul class="no-margin text-red">
                      <ul class="m-0 text-red-700">
                        <%= for error <- errors do %>
                          <li><%= render_error(error) %></li>
                        <% end %>


@@ 133,14 118,16 @@
              <% colspan = if has_platform_errors, do: 9, else: 8 %>
              <%= if trip.sample_trip_id do %>
                <tr>
                  <td colspan="<%= colspan %>" class="success text-green text-center">
                    ✔ Matches ZET trip <b><%= trip.sample_trip_id %></b>
                  <td colspan="<%= colspan %>" class="success text-center">
                    <span class="text-green-700">✔</span>
                    Matches ZET trip <b><%= trip.sample_trip_id %></b>
                  </td>
                </tr>
              <% else %>
                <tr>
                  <td class="error text-center" colspan="<%= colspan %>">
                    ✖ No GTFS trip matched.
                    <span class="text-red-700">✖</span>
                    No GTFS trip matched.
                    <a href="<%= Routes.zet_routes_path(TriglavWeb.Endpoint, :match, @route.id, trip.relation.id) %>">
                      Find a match
                    </a>


@@ 197,12 184,13 @@
              <tr>
                <%= if trip.matched_relation do %>
                  <td class="success text-center" colspan="4">
                    <span class="text-green">✔ Matches relation</span>
                    <%= osm_link(trip.matched_relation) %>
                    <span class="text-green-700">✔</span>
                    Matches relation <%= osm_link(trip.matched_relation) %>
                  </td>
                <% else %>
                  <td class="error text-center" colspan="4">
                    ✖ No relation matched.
                    <span class="text-red-700">✖</span>
                    No relation matched.
                  </td>
                <% end %>
              </tr>

M lib/triglav_web/templates/zet/routes/index.html.eex => lib/triglav_web/templates/zet/routes/index.html.eex +6 -6
@@ 18,7 18,7 @@

  <h2>Imported data</h2>

  <div style="display: flex">
  <div class="flex">
    <table>
      <tr>
        <th colspan="2">GTFS</th>


@@ 41,7 41,7 @@
      </tr>
    </table>

    <table style="margin-left: 1rem">
    <table class="ml-4">
      <tr>
        <th colspan="2">OSM</th>
      </tr>


@@ 86,10 86,10 @@
        <td>
          <%= render_relation_hierarchy(hierarchy) %>
        </td>
        <td class="no-wrap <%= if counts.total == counts.matched and counts.unmatched == 0, do: "success" %>">
        <td class="whitespace-nowrap <%= if counts.total == counts.matched and counts.unmatched == 0, do: "success" %>">
          ZET: <%= counts.total %><br />
          Matched: <%= counts.matched %><br />
          <span class="<%= if counts.unmatched > 0, do: "text-red" %>">
          <span class="<%= if counts.unmatched > 0, do: "text-red-700" %>">
            Unmatched: <%= counts.unmatched %>
          </span>
        </td>


@@ 99,12 99,12 @@
          <ul>
            <%= for error <- route_errors do %>
              <li>
                <span class="text-red"><%= render_error(error) %></span>
                <span class="text-red-700"><%= render_error(error) %></span>
              </li>
            <% end %>
          </ul>
          <% else %>
            <span class="text-green">OK!</span>
            <span class="text-green-700">OK!</span>
          <% end %>
        </td>
      </tr>

M lib/triglav_web/templates/zet/routes/match.html.eex => lib/triglav_web/templates/zet/routes/match.html.eex +1 -1
@@ 12,7 12,7 @@

  <%= osm_link(@relation, tags: ["type"], name: true, josm: true) %>

  <hr style="margin: 1rem 0" />
  <hr />

  <%= for {row, index} <- Enum.with_index(@diffs) do %>
    <h3>

M lib/triglav_web/templates/zet/stops/index.html.eex => lib/triglav_web/templates/zet/stops/index.html.eex +8 -12
@@ 1,7 1,3 @@
<style>
  .bl { border-left: 1px dotted gray }
</style>

<main role="main" class="container">
  <h1>ZET Stops</h1>



@@ 13,19 9,19 @@

  <%= josm_load_objects(@unmatched_platforms, title: "Open all in JOSM", relation_members: false) %>

  <table style="margin-top: 1rem; width: 100%;">
  <table class="mt-4 w-full">
    <thead>
      <tr>
        <th colspan="3">OSM Node</th>
        <th colspan="3" class="bl">Closest GTFS Stop</th>
        <th rowspan="2" class="bl">Distance</th>
        <th rowspan="2" class="bl">JOSM Actions</th>
        <th colspan="3" class="border-left-thin">Closest GTFS Stop</th>
        <th rowspan="2" class="border-left-thin">Distance</th>
        <th rowspan="2" class="border-left-thin">JOSM Actions</th>
      </tr>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>JOSM</th>
        <th class="bl">ID</th>
        <th class="border-left-thin">ID</th>
        <th>Name</th>
        <th>JOSM</th>
      </tr>


@@ 36,16 32,16 @@
          <td><%= osm_link(member) %></td>
          <td><%= member.tags["name"] %></td>
          <td><%= josm_load_objects([member], title: "Load") %></td>
          <td class="bl"><%= closest_stop.id %></td>
          <td class="border-left-thin"><%= closest_stop.id %></td>
          <td><%= closest_stop.name %></td>
          <td>
            <% {lon, lat} = closest_stop.geom.coordinates %>
            <%= josm_zoom(lat, lon, title: "Zoom") %>
          </td>
          <td class="bl <%= if round(distance) > 500 do %>bg-red<% end %>">
          <td class="border-left-thin <%= if round(distance) > 500 do %>error<% end %>">
            <%= round(distance) %>
          </td>
          <td class="bl"><%= josm_add_tags(member, %{"gtfs:stop_id": closest_stop.id}) %></td>
          <td class="border-left-thin"><%= josm_add_tags(member, %{"gtfs:stop_id": closest_stop.id}) %></td>
        </tr>
      <% end %>
    </tbody>

M lib/triglav_web/views/osm_helpers.ex => lib/triglav_web/views/osm_helpers.ex +5 -5
@@ 30,14 30,14 @@ defmodule TriglavWeb.OsmHelpers do
      |> Enum.map(&{&1, Relation.get_tag(relation, &1)})

    ~E"""
    <span class="osm-link">
      <img src="<%= image_url %>" alt="Relation" />
    <span class="whitespace-nowrap">
      <img class="h-4 inline-block" src="<%= image_url %>" alt="Relation" />
      <a href="<%= target_url %>"><%= relation.id %></a>
      <%= if name? do %>
        <%= relation.tags["name"] %>
      <% end %>
      <%= if !Enum.empty?(tags) do %>
        <span class="tag text-smaller">
        <span class="tag text-xs">
          <%= for {k, v} <- tags do %>[<%= k %>=<%= v %>]<% end %>
        </span>
      <% end %>


@@ 72,7 72,7 @@ defmodule TriglavWeb.OsmHelpers do
        <%= node.tags["name"] %>
      <% end %>
      <%= if !Enum.empty?(tags) do %>
        <span class="tag text-smaller">
        <span class="tag">
          <%= for {k, v} <- tags do %>[<%= k %>=<%= v %>]<% end %>
        </span>
      <% end %>


@@ 107,7 107,7 @@ defmodule TriglavWeb.OsmHelpers do
        <%= way.tags["name"] %>
      <% end %>
      <%= if !Enum.empty?(tags) do %>
        <span class="tag text-smaller">
        <span class="tag">
          <%= for {k, v} <- tags do %>[<%= k %>=<%= v %>]<% end %>
        </span>
      <% end %>