Skip to content

Commit

Permalink
final content updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@matikin9
matikin9 committed Aug 23, 2024
1 parent 9ab3841 commit ba3dfc6
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 107 deletions.
214 changes: 121 additions & 93 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,22 @@
<script async src="https://www.googletagmanager.com/gtag/js?id=G-5QBDD28NZW"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());

gtag('config', 'G-5QBDD28NZW');
</script>
<!-- Google Tag Manager -->
<script>(function (w, d, s, l, i) {
w[l] = w[l] || []; w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
}); var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-W3M95SRD');</script>
<!-- End Google Tag Manager -->

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
Expand All @@ -23,7 +34,7 @@
<link rel="stylesheet" href="assets/uswds/css/styles.css">
<link href="designSystem.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">

<title>Metro | Alerts</title>

<script>
Expand All @@ -42,108 +53,125 @@
</head>

<body style="visibility: hidden;">
<header class="usa-header usa-header--basic">
<div class="nav-container">
<div class="navbar">
<div class="logo" id="-logo">
<a href="https://metro.net"><img src="img/metro_logo_white.svg" role="img"
alt="Metro logo" /></a>
</div>
</div>
</div>
</header>
<div class="content-wrapper">
<div class="pageTitle">
<h1>Alerts & Advisories</h1>
<span class="h3">Filter by service:</span>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W3M95SRD" height="0" width="0"
style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<header class="usa-header usa-header--basic">
<div class="nav-container">
<div class="navbar">
<div class="logo" id="-logo">
<a href="https://metro.net"><img src="img/metro_logo_white.svg" role="img" alt="Metro logo" /></a>
</div>
</div>
</div>
</header>
<div class="content-wrapper">
<div class="pageTitle">
<h1>Alerts & Advisories</h1>
<span class="h3">Filter by service:</span>
</div>

<div id="service-nav" class="nav-buttons">
<div id="service-nav--rail" class="nav-buttons__button nav-buttons__button--selected">
<div>
<img src="img/Service_Rail.svg" alt="rail icon">
</div>
<div class="nav-buttons__button-text">
Rail
</div>
</div>
<div id="service-nav--bus" class="nav-buttons__button">
<div>
<img src="img/Service_Bus.svg" alt="bus icon">
</div>
<div class="nav-buttons__button-text">
Bus
</div>
</div>
<div id="service-nav--access" class="nav-buttons__button">
<div>
<img src="img/elevator-black.svg" alt="elevator icon">
</div>
<div class="nav-buttons__button-text">
Elevator & Escalator
</div>
</div>
<div id="service-nav" class="nav-buttons">
<div id="service-nav--rail" class="nav-buttons__button nav-buttons__button--selected">
<div>
<img src="img/Service_Rail.svg" alt="rail icon">
</div>
<div id="alert-list">
<div id="status__nav" class="nav-tabs">
<div id="status-nav--current" class="nav-tabs__button nav-tabs__button--selected">
<div class="nav-tabs__button-text">Current</div>
</div>
<div id="status-nav--upcoming" class="nav-tabs__button">
<div class="nav-tabs__button-text">Upcoming</div>
</div>
<div id="status-nav--all" class="nav-tabs__button">
<div class="nav-tabs__button-text">All</div>
</div>
</div>
<div id="alert-list__content">
</div>
<div class="nav-buttons__button-text">
Rail
</div>

<div id="alerts"></div>
<div id="access"></div>
</div>
<div id="service-nav--bus" class="nav-buttons__button">
<div>
<img src="img/Service_Bus.svg" alt="bus icon">
</div>
<div class="nav-buttons__button-text">
Bus
</div>
</div>
<div id="service-nav--access" class="nav-buttons__button">
<div>
<img src="img/elevator-black.svg" alt="elevator icon">
</div>
<div class="nav-buttons__button-text">
Elevator & Escalator
</div>
</div>
</div>
<div id="alert-list">
<div id="status__nav" class="nav-tabs">
<div id="status-nav--current" class="nav-tabs__button nav-tabs__button--selected">
<div class="nav-tabs__button-text">Current</div>
</div>
<div id="status-nav--upcoming" class="nav-tabs__button">
<div class="nav-tabs__button-text">Upcoming</div>
</div>
<div id="status-nav--all" class="nav-tabs__button">
<div class="nav-tabs__button-text">All</div>
</div>
</div>
<div id="alert-list__content">
</div>
</div>

<div id="alerts"></div>
<div id="access"></div>
</div>

<footer class="usa-footer">
<div class="usa-footer__secondary-section">
<div class="grid-container">
<div class="grid-row grid-gap">
<div class="usa-footer__logo grid-row tablet:grid-col-5 tablet:grid-gap-2">
<div class="grid-col-4 tablet:grid-col-12">
<img src="img/metro_logo_white.svg" role="img" alt="Metro logo">
</div>
<div class="usa-footer__social-links grid-col-8 tablet:grid-col-12 grid-row grid-gap-1 display-flex flex-row flex-justify-end tablet:flex-justify-start">
<div class="grid-col-auto">
<a class="usa-social-link" href="https://twitter.com/metrolosangeles"><img class="usa-social-link__icon" src="https://lacmta.github.io/metro-iconography/SocialContact_icon_twitter_b-on-w.svg" alt="Twitter"></a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link" href="https://www.facebook.com/losangelesmetro"><img class="usa-social-link__icon" src="https://lacmta.github.io/metro-iconography/SocialContact_icon_facebook_b-on-w.svg" alt="Facebook"></a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link" href="https://www.instagram.com/metrolosangeles/"><img class="usa-social-link__icon" src="https://lacmta.github.io/metro-iconography/SocialContact_icon_instagram_b-on-w.svg" alt="Instagram"></a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link" href="https://www.linkedin.com/company/los-angeles-county-metropolitan-transportation-authority/"><img class="usa-social-link__icon" src="https://lacmta.github.io/metro-iconography/SocialContact_icon_linkedin_b-on-w.svg" alt="LinkedIn"></a>
</div>
</div>
<footer class="usa-footer">
<div class="usa-footer__secondary-section">
<div class="grid-container">
<div class="grid-row grid-gap">
<div class="usa-footer__logo grid-row tablet:grid-col-5 tablet:grid-gap-2">
<div class="grid-col-4 tablet:grid-col-12">
<img src="img/metro_logo_white.svg" role="img" alt="Metro logo">
</div>
<div
class="usa-footer__social-links grid-col-8 tablet:grid-col-12 grid-row grid-gap-1 display-flex flex-row flex-justify-end tablet:flex-justify-start">
<div class="grid-col-auto">
<a class="usa-social-link" href="https://twitter.com/metrolosangeles"><img class="usa-social-link__icon"
src="https://lacmta.github.io/metro-iconography/SocialContact_icon_twitter_b-on-w.svg"
alt="Twitter"></a>
</div>
<div class="usa-footer__contact-links tablet:grid-col-7">

<div class="margin-y-3 grid-row display-flex flex-row flex-justify-end grid-gap-2">
<a href="https://www.metro.net/about/privacy-policy/" class="grid-col-auto">Privacy Policy</a>
<a href="https://www.metro.net/about/copyright/" class="grid-col-auto">Terms of Use</a>
<a href="https://www.metro.net/about/contacts/" class="grid-col-auto">Contact Us</a>
</div>
<div>
This website was designed and developed with love to make Metro's digital tools more equitable, accessible and easy to use.
</div>
<div class="grid-col-auto">
<a class="usa-social-link" href="https://www.facebook.com/losangelesmetro"><img
class="usa-social-link__icon"
src="https://lacmta.github.io/metro-iconography/SocialContact_icon_facebook_b-on-w.svg"
alt="Facebook"></a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link" href="https://www.instagram.com/metrolosangeles/"><img
class="usa-social-link__icon"
src="https://lacmta.github.io/metro-iconography/SocialContact_icon_instagram_b-on-w.svg"
alt="Instagram"></a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link"
href="https://www.linkedin.com/company/los-angeles-county-metropolitan-transportation-authority/"><img
class="usa-social-link__icon"
src="https://lacmta.github.io/metro-iconography/SocialContact_icon_linkedin_b-on-w.svg"
alt="LinkedIn"></a>
</div>
</div>
</div>
<div class="usa-footer__contact-links tablet:grid-col-7">

<div class="margin-y-3 grid-row display-flex flex-row flex-justify-end grid-gap-2">
<a href="https://www.metro.net/about/privacy-policy/" class="grid-col-auto">Privacy Policy</a>
<a href="https://www.metro.net/about/copyright/" class="grid-col-auto">Terms of Use</a>
<a href="https://www.metro.net/about/contacts/" class="grid-col-auto">Contact Us</a>
</div>
<div>
This website was designed and developed with love to make Metro's digital tools more equitable, accessible
and easy to use.
</div>
</div>
</div>
</footer>
</div>
</div>
</footer>

<script src="script.js"></script>
<script src="script.js"></script>
</body>

</html>
</html>
29 changes: 15 additions & 14 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,13 +83,6 @@ fetch(DATA_SOURCE, {
function updateLastUpdated(time) {
let result = convertDateTime(time);
feedTimestamp = result;

// result = convertDateTime(time).toLocaleString();
// result = new Intl.DateTimeFormat('en-US', {
// dateStyle: 'short',
// timeStyle: 'short'
// }).format(time);
// document.querySelector("#lastUpdated span").innerHTML = result;
}

function convertDateTime(time) {
Expand Down Expand Up @@ -397,6 +390,14 @@ function updateAccessView() {
let service = getServiceSelected();
let nowvsLater = getStatusSelected();

let elevatorMessage = document.createElement("div");
elevatorMessage.classList.add("alert-item");
let elevatorMessageText = document.createElement("div");
elevatorMessageText.innerHTML = `If you encounter an elevator or escalator problem not listed here, please report via our <a href="https://www.metro.net/riding/la-metro-transit-watch-app/" target="_blank">TransitWatch App</a> or inform Metro staff at station.`;
elevatorMessage.appendChild(elevatorMessageText);
alertList.appendChild(elevatorMessage);


if (Object.keys(filteredAlerts).length == 0) {
let noAlerts = document.createElement("div");
noAlerts.classList.add("alert-item");
Expand Down Expand Up @@ -427,16 +428,13 @@ function updateAccessView() {

let content_title = document.createElement('div');
content_title.classList.add("alert-item__title");
//content_title.innerHTML = alert.alert.informed_entity[0].stop_name + ": " + alert.alert.informed_entity[0].mode;
content_title.innerHTML = alert.alert.header_text.translation[0].text;

let content_description = document.createElement('div');
content_description.classList.add("alert-item__description");

// let headerText = alert.alert.header_text.translation[0].text;
let descriptionText = alert.alert.description_text.translation[0].text;

// content_description.innerHTML = headerText;
content_description.innerHTML += descriptionText.length > 0 ? descriptionText + "<br>": '';

content_description.innerHTML += '<br>Starting on: ' + convertDateTime(alert.alert.active_period[0].start);
Expand Down Expand Up @@ -631,15 +629,18 @@ function updateView() {
content_title.innerHTML = alert.alert.header_text.translation[0].text;

let content_description = document.createElement('div');
content_description.classList.add("alert-item__description");
content_description.innerHTML = alert.alert.description_text.translation[0].text;

if (alert.alert.description_text.translation[0].text != '') {
content_description.classList.add("alert-item__description");
content_description.innerHTML = alert.alert.description_text.translation[0].text + '<br><br>';
}

if (alert.alert.url) {
content_description.innerHTML += `<br><br><a href="${alert.alert.url.translation[0].text}" target="_blank">More info on service impact to ${routeName}.</a>`;
content_description.innerHTML += `<a href="${alert.alert.url.translation[0].text}" target="_blank">More info on service impact to ${routeName}.</a><br><br>`;
}


content_description.innerHTML += '<br><br>Starting on: ' + convertDateTime(alert.alert.active_period[0].start);
content_description.innerHTML += 'Starting on: ' + convertDateTime(alert.alert.active_period[0].start);
if (alert.alert.active_period[0].end) {
content_description.innerHTML += '<br>Ending on: ' + convertDateTime(alert.alert.active_period[0].end);
} else {
Expand Down

0 comments on commit ba3dfc6

Please sign in to comment.