Merge pull request #232 from cal-itp/features/feed-url-modal

feat: show report source URLs in a modal
cal-itp · Apr 12, 2023 · ba967d9 · ba967d9
2 parents bff8f8b + e039a08
commit ba967d9
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 80 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -5,10 +5,12 @@
     "version": "0.2.0",
     "configurations": [
         {
-            "type": "pwa-msedge",
+            "name": "Python: Current File (Integrated Terminal)",
+            "type": "python",
             "request": "launch",
-            "name": "Open index.html",
-            "file": "/home/ryon/projects/cal-itp-reports/templates/index.html"
-        }
+            "program": "${file}",
+            "console": "integratedTerminal",
+            "cwd": "${fileDirname}"
+        },
     ]
 }
diff --git a/templates/macros.html.jinja b/templates/macros.html.jinja
@@ -28,3 +28,25 @@
         {% endfor %}
     </div>
 {% endmacro %}
+
+{% macro render_dialog(id, title, class="
+    backdrop:backdrop-blur-sm
+    bg-white border
+    md:min-w-[24rem] max-w-3xl
+    !my-8 p-8
+    responsive-prose
+    rounded-xl shadow-xl
+    ") %}
+    <dialog id="{{ id }}" class="{{ class }}">
+        <header class="flex items-baseline justify-between">
+            <h3 class="!mt-0">{{ title }}</h3>
+            <form method="dialog" class="ml-4">
+                <button class="btn" aria-label="Close">
+                    <i class="fas fa-times"></i>
+                </button>
+            </form>
+        </header>
+
+        {{ caller() }}
+    </dialog>
+{% endmacro %}
diff --git a/templates/report.html.jinja b/templates/report.html.jinja
@@ -25,36 +25,34 @@
 {%- endblock -%}
 
 {% block content %}
-
-
-<div class="responsive-prose max-w-none">
-    {{ macros.breadcrumbs([
+    <div class="responsive-prose max-w-none">
+        {{ macros.breadcrumbs([
         { 'url': '/', 'text': 'Home' },
         { 'url': '/#directory', 'text': 'Directory' },
         { 'url': '../', 'text': feed_info.date_month_year },
         { 'text': feed_info.feed_publisher_name },
-    ]) }}
-
-    <h1>
-        Monthly GTFS Quality Report
-        <br>
-        <small>
-          {% if feed_info.feed_publisher_url %}
-            <a href="{{ feed_info.feed_publisher_url }}">{{ feed_info.feed_publisher_name }}</a>
-          {% else %}
-            {{ feed_info.feed_publisher_name }}
-          {% endif %}
-            &hairsp;&middot;&hairsp;
-            <span class="inline-block">{{ feed_info.date_month_year }}</span>
-        </small>
-    </h1>
-    <p class="lead responsive-prose">
-        This is a monthly report, generated by the California Integrated Travel Project
-        (Cal-ITP), summarizing issues discovered by MobilityData’s GTFS Validator. This report
-        is available for viewing by the general public to support continuous improvement of
-        GTFS data and the experience of transit passengers.
-    </p>
-</div>
+        ]) }}
+
+        <h1>
+            Monthly GTFS Quality Report
+            <br>
+            <small>
+                {% if feed_info.feed_publisher_url %}
+                    <a href="{{ feed_info.feed_publisher_url }}">{{ feed_info.feed_publisher_name }}</a>
+                {% else %}
+                    {{ feed_info.feed_publisher_name }}
+                {% endif %}
+                &hairsp;&middot;&hairsp;
+                <span class="inline-block">{{ feed_info.date_month_year }}</span>
+            </small>
+        </h1>
+        <p class="lead responsive-prose">
+            This is a monthly report, generated by the California Integrated Travel Project
+            (Cal-ITP), summarizing issues discovered by MobilityData’s GTFS Validator. This report
+            is available for viewing by the general public to support continuous improvement of
+            GTFS data and the experience of transit passengers.
+        </p>
+    </div>
 
     <hr>
 
@@ -89,26 +87,43 @@
                 </ul>
             </div>
         {% endif %}
+    </div>
 
-        {% if speedmap_url %}
-            <div class="my-8">
+    <div class="responsive-prose max-w-none">
+        <div class="my-8 flex gap-4">
+            <button type="button"
+                    class="btn"
+                    onclick="document.getElementById('feed-info-modal').showModal()">
+                Show Source URLs
+            </button>
+
+            {% if speedmap_url %}
                 <a class="btn" href="{{ speedmap_url }}" target="_blank">
                     View Speedmap
                     <i class="fas fa-external-link-alt ml-1"></i>
                 </a>
-            </div>
-        {% endif %}
+            {% endif %}
+        </div>
     </div>
 
-    {# Commented out until an ultimate resolution can be found for
-  https://github.com/cal-itp/reports/issues/44
-<div class="my-8">
-    <a class="btn responsive-prose mr-4 mb-4" href="{{ status.gtfs_schedule_url }}">
-        <i class="fas fa-link mr-1 text-itp-slate-bold"></i>
-        Download Feed
-    </a>
-</div>
-#}
+    {% call macros.render_dialog('feed-info-modal', 'Source URLs') %}
+        <div class="prose-ul:m-0 prose-li:m-0 prose-li:p-0 prose-p:m-0">
+            <ul>
+                {%- for feed in feeds -%}
+                    <li>
+                        <a href="{{ feed.string_url | escape }}" rel="external" target="_blank">{{ feed.gtfs_dataset_name }}</a>
+                    </li>
+                {% endfor %}
+            </ul>
+
+            <div class="mt-4 flex items-baseline gap-3 max-w-sm">
+                <i class="text-sm fa-solid fa-triangle-exclamation text-itp-yellow"></i>
+                <p class="text-sm text-itp-slate-bold">
+                    Note: Links may lead directly to downloads and/or to resources that require&nbsp;authentication
+                </p>
+            </div>
+        </div>
+    {% endcall %}
 
     <hr>
 
@@ -177,12 +192,13 @@
     <hr>
 
     <div class="flex flex-col lg:flex-row gap-12 lg:gap-16 xl:gap-24 2xl:gap-36">
-
         <div class="flex-1 responsive-prose">
             <h2>About the {{ feed_info.date_month }} Identifier Change&nbsp;Charts</h2>
             <ul>
                 <li>These charts show the percentage of stop and route IDs that have changed since the previous&nbsp;month.</li>
-                <li>Stop and route IDs are important identifiers for GTFS feed consumers to correctly parse&nbsp;feeds.</li>
+                <li>
+                    Stop and route IDs are important identifiers for GTFS feed consumers to correctly parse&nbsp;feeds.
+                </li>
                 <li>
                     It is a <a href="https://gtfs.org/schedule/best-practices/#dataset-publishing-general-practices">GTFS Best Practice</a> to keep these consistent between feed versions whenever&nbsp;possible.
                 </li>
@@ -311,22 +327,15 @@
                             </tr>
                         {% endfor %}
                     </tbody>
+
                 {% else %}
 
                     <p>
                         <b>No validation severity data is available for this period.</b>
                     </p>
 
                 {% endif %}
-
-            </div>
-
-
+            </table>
         </div>
-
-    </table>
-</div>
-
-</div>
-
+    </div>
 {% endblock %}
diff --git a/tests/fixtures/index_report.json b/tests/fixtures/index_report.json
@@ -10,7 +10,13 @@
           {
             "agency_name": "City of Delano",
             "itp_id": 91,
-            "report_path": "2022\/11\/91\/index.html"
+            "report_path": "2022\/11\/91\/index.html",
+            "feeds": [
+              {
+                "gtfs_dataset_name": "Delano Schedule",
+                "string_url": "https:\/\/data.trilliumtransit.com\/gtfs\/delano-ca-us\/delano-ca-us.zip"
+              }
+            ]
           }
         ]
       }

diff --git a/website/assets/scss/_animations.scss b/website/assets/scss/_animations.scss
@@ -0,0 +1,12 @@
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+}
+
+@keyframes gentle-scale-in {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+}
diff --git a/website/assets/scss/style.scss b/website/assets/scss/style.scss
@@ -1,4 +1,5 @@
-@import 'charts';
+@import "animations";
+@import "charts";
 
 @tailwind base;
 @tailwind components;
@@ -10,7 +11,7 @@
     }
 }
 
-$text-color: #323A45;
+$text-color: #323a45;
 
 html {
     scroll-behavior: smooth;
@@ -21,7 +22,10 @@ body {
     overflow-y: scroll; // prevent layout jumping when page height changes
 }
 
-h1, h2, h3, h4 {
+h1,
+h2,
+h3,
+h4 {
     @apply font-serif;
 
     small {
@@ -31,8 +35,7 @@ h1, h2, h3, h4 {
 
 .btn,
 a.btn {
-    @apply
-        border
+    @apply border
         border-itp-slate
         font-semibold
         inline-block
@@ -49,35 +52,32 @@ a.btn {
     text-decoration: none !important;
 }
 
-input, select {
-    @apply
-        border
+input,
+select {
+    @apply border
         bg-white
         px-4 py-2
         rounded;
 }
 
 input {
-    @apply
-        shadow-inner;
+    @apply shadow-inner;
 }
 
 select {
-    @apply
-        appearance-none
+    @apply appearance-none
         pr-9
         shadow;
 
     /*! icon from bootstrap | https://github.com/twbs/bootstrap/blob/8f11c52919fb9b7142ebf9b5797f9cc1538194d2/scss/_variables.scss#L930 */
     background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
-    background-position: right .75rem center;
+    background-position: right 0.75rem center;
     background-repeat: no-repeat;
-    background-size: 1em .75em;
+    background-size: 1em 0.75em;
 }
 
 input[type="search"] {
-    @apply
-        rounded-full
+    @apply rounded-full
         pl-12;
 
     /*! icon from font awesome | https://fontawesome.com/v5.15/icons/search?style=solid */
@@ -100,24 +100,21 @@ input[type="search"] {
 }
 
 .text-muted {
-    @apply
-        text-itp-slate-bold
+    @apply text-itp-slate-bold
         text-opacity-60;
 }
 
 .list-group {
-    @apply
-        bg-white
+    @apply bg-white
         divide-solid divide-y
         overflow-hidden
         rounded-md;
 
-        &__link {
-            @apply
-                block
+    &__link {
+        @apply block
                 hover:bg-itp-teal-light
                 p-4;
-        }
+    }
 }
 
 .breadcrumbs {
@@ -154,3 +151,11 @@ nav {
         @apply bg-itp-yellow-bold/30;
     }
 }
+
+dialog {
+    animation: gentle-scale-in 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+
+    &::backdrop {
+        animation: fade-in 250ms;
+    }
+}
diff --git a/website/generate.py b/website/generate.py
@@ -264,6 +264,7 @@ def fetch_report_data(report_dir):
         p_report_path = Path(entry["report_path"])
         p_report_inputs = REPORT_OUTPUTS_DIR / p_report_path.parent
         report_data = fetch_report_data(p_report_inputs)
+        report_data["feeds"] = entry["feeds"]
         report_html = report_template.render({**global_data, **report_data})
         pbar.update(1)