Skip to content

Commit 6da63ea

Browse files
eric-gadeeric-gade
authored
Merge pull request #3 from 18F/eg-point-page
Point Page v1
2 parents ca38206 + 8eeaae2 commit 6da63ea

42 files changed

Lines changed: 2050 additions & 71 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docker-compose.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ services:
2727
MYSQL_USER: drupal
2828
MYSQL_PASSWORD: drupal
2929
MYSQL_ROOT_PASSWORD: drupal
30+
INTEROP_URL: "http://api-interop-layer:8082/"
3031
networks:
3132
- weather.gov
3233
depends_on:

‎requirements.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
Django>=5.0
22
psycopg2>=2.8
33
mysqlclient>=2.2
4+
requests

‎weather/templates/weather/base.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@
55
<head>
66
<title>
77
{% if point.place %}
8-
{{point.place.fullName}} |
8+
{{point.place.fullName}} |
99
{% endif %}
1010
beta.weather.gov | {{ "National Weather Service" | t }}
1111
</title>
12+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1213
<link rel="icon" type="image/png" href="/assets/images/weather/favicons/nws-favicon.ico" />
1314
<link rel="stylesheet" type="text/css" href="/assets/css/styles.css" />
1415
{% block head_css %}{% endblock %}
@@ -25,5 +26,6 @@
2526
{% block page %}{% endblock %}
2627
{% block page_bottom %}{% endblock %}
2728
<script src="/assets/js/uswds.min.js"></script>
29+
{% block end_js %}{% endblock %}
2830
</body>
2931
</html>

‎weather/templates/weather/partials/alert-link.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{% comment %}
2+
# Expected inputs:
3+
# - alertID - the ID used to link to this specific alert, or null to link
4+
# to the alerts tab
5+
# - alertType - the event type, such as "Severe Thunderstorm Warning"
6+
# - alertLevel - the severity level of the event type, such as "Warning"
7+
{% endcomment %}
8+
9+
{% if alertCount > 0 %}
10+
<div class="wx-alert-link wx-alert-link--{{ alertLevel|lower }} display-flex flex-align-start">
11+
<div class="maxw-3 height-3 margin-right-05">
12+
<svg role="img" aria-hidden="true" class="width-full height-full">
13+
<use xlink:href="{{ "/assets/images/uswds/sprite.svg#warning" }}"></use>
14+
</svg>
15+
</div>
16+
<a
17+
{% comment %}
18+
Table cells have a set line height. Set our own line height so that we
19+
know what we're working with. The margin nudges the text down a bit so it
20+
vertically aligns with the icon.
21+
{% endcomment %}
22+
class="line-height-sans-2 margin-top-05"
23+
href="#{% if alertID == null %}alerts{% else %}alert_{{alertID}}{% endif %}">
24+
{{ alertType }}
25+
</a>
26+
</div>
27+
{% endif %}

‎weather/templates/weather/partials/alert-summary.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<weathergov-alert-list>
2+
<div class="margin-top-0 margin-bottom-2">
3+
{% for alert in alerts %}
4+
<div class="usa-alert usa-alert--warning usa-alert--slim wx-alert margin-top-0 margin-bottom-1 padding-y-05" role="alert" data-alert-level="{{ alert.metadata.level.text | lower }}">
5+
<div class="usa-alert__body wx-alert-li">
6+
<a href="#alert_{{ alert.id }}">
7+
{{ alert.event | t }} {{ alert.duration }}
8+
</a>
9+
</div>
10+
</div>
11+
{% endfor %}
12+
</div>
13+
</weathergov-alert-list>

‎weather/templates/weather/partials/alerts-in-hourly-table.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{% for alert in alerts %}
2+
<tr data-row-name="alert">
3+
<th scope="row" class="position-sticky left-0 font-family-mono text-primary-dark font-mono-xs text-uppercase z-400">
4+
{% comment %}
5+
Visually we can display the alert(s) heading just once for the alerts section of
6+
the table, however we want the row head to announced for each row of alerts to
7+
screen reader users so they know the content of the row. Using "rowspan" would
8+
seem to solve for both cases, but unfortunately the row header isn't always
9+
announced when testing using VO.
10+
{% endcomment %}
11+
{% if forloop.first %}
12+
<span class="" aria-hidden="true">
13+
{% if alerts|length > 1%}
14+
{% trans "forecast.labels.alerts.01" %}
15+
{% else %}
16+
{% trans "daily-forecast.labels.alert.01" %}
17+
{% endif %}
18+
</span>
19+
{% endif %}
20+
<span class="usa-sr-only">{% trans "daily-forecast.labels.alert.01" %}</span>
21+
</th>
22+
{% if alert.offset > 0 %}
23+
<td colspan="{{ alert.offset }}"></td>
24+
{% endif %}
25+
<td colspan="{{alert.duration}}">
26+
{% alert_link alert=alert %}
27+
</td>
28+
{% if alert.remainder > 0 %}
29+
<td colspan="{{ alert.remainder }}"></td>
30+
{% endif %}
31+
</tr>
32+
{% endfor %}

‎weather/templates/weather/partials/alerts.html‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<h2 class="usa-sr-only">{{ "alerts.heading+aria.alerts.01" | t }}</h2>
2+
<div class="grid-container padding-x-2 desktop:padding-x-4">
3+
<div class="grid-row">
4+
<div class="grid-col-12">
5+
<wx-alerts class="display-block">
6+
{% for alert in alerts %}
7+
<div class="usa-accordion usa-accordion--bordered margin-bottom-1" id="alert_{{ alert.id }}">
8+
<h3 class="usa-accordion__heading font-heading-lg">
9+
<button
10+
type="button"
11+
class="usa-accordion__button text-ls-1"
12+
aria-expanded="true"
13+
aria-controls="a{{ alert.id }}"
14+
data-button-for="#alert_{{alert.id}}">
15+
{{ alert.event | t }}
16+
</button>
17+
</h3>
18+
<div id="a{{alert.id}}" class="usa-accordion__content usa-prose">
19+
<p class="font-sans-md text-bold text-primary-darker margin-y-0" >
20+
{% if alert.timing.end %}
21+
{% trans_with_args "alerts.text.in-effect-from-until.01" with start=alert.timing.start end=alert.timing.end %}
22+
{% else %}
23+
{% trans_with_args "alerts.text.in-effect-from.01" with start=alert.timing.start %}
24+
{% endif %}
25+
</p>
26+
<p class="margin-y-05">
27+
{% trans_with_args "alerts.text.issued-by.01" with sender=alert.sender %}
28+
</p>
29+
30+
{% comment %}
31+
# We don't translate alert descriptions for now. There is a larger
32+
# effort to do those translations in realtime and we will try to hook
33+
# into that when the time comes. For now... we can't really do anything.
34+
{% endcomment %}
35+
{% for element in alert.description %}
36+
{% if element.type == "heading" %}
37+
<h4 class="wx-visual-h3 text-normal text-primary-dark">{{ element.text | title }}</h4>
38+
{% elif element.type == "paragraph" %}
39+
<p>
40+
{% for node in element.nodes %}
41+
{% if node.type == "link" %}
42+
<a href="{{node.url}}" class="usa-link{% if node.external %} usa-link--external{% endif %}">
43+
{{node.url}}
44+
</a>
45+
{% else %}
46+
{{ node.content }}
47+
{% endif %}
48+
{% endfor %}
49+
</p>
50+
{% else %}
51+
{{ node }}
52+
{% endif %}
53+
{% endfor %}
54+
55+
{% if alert.instruction %}
56+
<h4 class="wx-visual-h3 text-normal text-primary-dark">{{ "alerts.labels.what-to-do.01" | t }}</h4>
57+
<p>
58+
{{ alert.instruction | normalize_alert_whitespace }}
59+
</p>
60+
{% endif %}
61+
62+
<hr class="border-base-light">
63+
64+
<div class="grid-container margin-0 padding-0">
65+
<div class="grid-row">
66+
<div class="grid-col-12 tablet-lg:grid-col-6">
67+
<h4 class="wx-visual-h3 text-normal text-primary-dark margin-bottom-05">{{ "alerts.labels.areas-impacted.01" |t }}</h4>
68+
{% comment %}
69+
# Some alerts come with location information in the description text
70+
# in a common text formatting. In those cases, the location information
71+
# is lists of counties by region of the state, and sometimes a list of
72+
# impacted cities as well. When we have that more fine-grained data,
73+
# we will display it.
74+
{% endcomment %}
75+
{% if alert.locations != false %}
76+
{% for area in alert.locations.regions %}
77+
<wx-alert-county-region>
78+
<h5 class="wx-visual-h4 text-normal text-primary-dark margin-top-205 margin-bottom-0">
79+
{% trans_with_args "alerts.text.counties-in.01" with area=area.area %}
80+
</h5>
81+
<ul class="usa-list margin-top-1 {% if area.counties|length > 7 %} wx-col-2 {% endif %}">
82+
{% for county in area.counties %}
83+
<li class="">{{ county }}</li>
84+
{% endfor %}
85+
</ul>
86+
</wx-alert-county-region>
87+
{% endfor %}
88+
{% if alert.locations.cities|length > 0 %}
89+
<wx-alert-cities>
90+
<h5 class="wx-visual-h4 text-normal text-primary-dark margin-top-105 margin-bottom-0">
91+
{{ "alerts.text.including-cities.01" | t }}
92+
</h5>
93+
<ul class="usa-list margin-top-1 {% if alert.locations.cities|length > 7 %} wx-col-2 {% endif %}">
94+
95+
{% for city in alert.locations.cities %}
96+
<li class="">{{ city }}</li>
97+
{% endfor %}
98+
</ul>
99+
</wx-alert-cities>
100+
{% endif %}
101+
102+
{% comment %}
103+
# If the alert doesn't have that location information in the description
104+
# text, we can use the list of impacted areas provided by AWIPS. This
105+
# list is based on the alert polygon drawn by a forecaster, and then
106+
# AWIPS identifies the areas.
107+
{% endcomment %}
108+
{% else %}
109+
<ul class="usa-list {% if alert.area|length > 7 %} wx-col-2 {% endif %}">
110+
{% for areaName in alert.area %}
111+
<li class="">{{ areaName }}</li>
112+
{% endfor %}
113+
</ul>
114+
{% endif %}
115+
</div>
116+
117+
<div class="grid-col-12 tablet-lg:grid-col-6 margin-top-3">
118+
<wx-alert-map class="display-block grid-col-12 wx-radar-container wx-isolation-isolate"
119+
data-geo-json="{{ alert.geometry | json_encode | urlencode }}"
120+
data-alert-id="{{ alert.id }}"
121+
data-alert-level="{{ alert.metadata.level.text }}"
122+
data-lat="{{ point.point.latitude }}"
123+
data-lon="{{ point.point.longitude }}"
124+
data-alert-name="{{ alert.event }}"
125+
>
126+
<div id="wx_alert_map_{{ alert.id }}" class="height-full"></div>
127+
<div class="wx_alert_map_legend margin-top-3 display-flex flex-align-center">
128+
<div class="wx_alert_map_legend_impact_area display-block width-3 height-3 border-2px margin-right-1"></div><span>{{ "alerts.legend.impacted-area.01" | t }}</span>
129+
</div>
130+
</wx-alert-map>
131+
</div>
132+
</div>
133+
</div>
134+
135+
<hr class="border-base-light">
136+
137+
<!-- Dynamic Safety Information should go here! -->
138+
{#{ drupal_block("weathergov_dynamic_safety_information", { weather_event: alert.event }) }#}
139+
140+
</div>
141+
</div>
142+
{% endfor %}
143+
</wx-alerts>
144+
</div>
145+
</div>
146+
</div>

0 commit comments

Comments
 (0)