Skip to content

Commit

Permalink
Merge pull request #28 from GSA-TTS/update-results-page-logic
Browse files Browse the repository at this point in the history 
Made updates to the homepage and results page
  • Loading branch information
@natashapl
natashapl authored Sep 13, 2024
2 parents e0c99ed + 1f38642 commit 7866090
Show file tree
Hide file tree
Showing 12 changed files with 282 additions and 233 deletions.
3 changes: 1 addition & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,4 @@ Requires Node.js and npm to run. Node v20.11.0 is confirmed to work, and probabl

The software is deployed to Cloud.gov Pages (previously known as Federalist) automatically upon commiting code to, or merging a branch into, the `main` Git branch. Deployment takes a couple of minutes, after which the most recent deployment will live at this URL:

[https://federalist-fc42b3e8-1d7d-4650-b068-c0c57c55dcfd.sites.pages.cloud.gov/site/gsa-tts/10x-mutual-aid/](https://federalist-fc42b3e8-1d7d-4650-b068-c0c57c55dcfd.sites.pages.cloud.gov/site/gsa-tts/10x-mutual-aid/)

[https://federalist-fc42b3e8-1d7d-4650-b068-c0c57c55dcfd.sites.pages.cloud.gov/site/gsa-tts/10x-mutual-aid/](https://federalist-fc42b3e8-1d7d-4650-b068-c0c57c55dcfd.sites.pages.cloud.gov/site/gsa-tts/10x-mutual-aid/)
4 changes: 2 additions & 2 deletions _data/assetPaths.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,6 @@
"admin.map": "/assets/js/admin-GBLI77MO.js.map",
"app.js": "/assets/js/app-34WFVF7Q.js",
"app.map": "/assets/js/app-34WFVF7Q.js.map",
"index.css": "/assets/styles/index-SACUB2CK.css",
"index.map": "/assets/styles/index-SACUB2CK.css.map"
"index.css": "/assets/styles/index-ZKGZK7KU.css",
"index.map": "/assets/styles/index-ZKGZK7KU.css.map"
}
207 changes: 105 additions & 102 deletions _includes/filterpanel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@
<label class="usa-checkbox__label" for="state-territory">State/Territory</label>
</div>
<div class="usa-checkbox">
<input class="usa-checkbox__input filter-checkbox" id="regional" type="checkbox"
name="regional" value="regional" data-section-id="regional-mutual-aid-section" checked />
<input class="usa-checkbox__input filter-checkbox" id="regional" type="checkbox" name="regional"
value="regional" data-section-id="regional-mutual-aid-section" checked />
<label class="usa-checkbox__label" for="regional">Regional</label>
</div>
<div class="usa-checkbox">
Expand All @@ -64,119 +64,122 @@
</aside>

<script>
document.addEventListener('DOMContentLoaded', function () {
let checkboxStates = {};

// Function to toggle visibility of sections
function toggleSection(sectionId, isVisible) {
let section = document.getElementById(sectionId);
if (section) {
section.style.display = isVisible ? 'block' : 'none';
(function () {
document.addEventListener('DOMContentLoaded', function () {
let checkboxStates = {};

// Function to toggle visibility of sections
function toggleSection(sectionId, isVisible) {
let section = document.getElementById(sectionId);
if (section) {
section.style.display = isVisible ? 'block' : 'none';
}
}
}

// Build state url
function buildStateUrl(selectedState) {
let pathname = window.location.pathname;
let segments = pathname.split('/');
let stateIndex = segments.indexOf('states');
let basePath = segments.slice(0, stateIndex).join('/');
let newUrl = basePath + '/states/' + selectedState + '/';
return newUrl;
}

function updateSupportTypeMessage() {
let publicPersonnelChecked = document.getElementById('public-personnel').checked;
let privateCompaniesChecked = document.getElementById('private-companies').checked;

let messageElement = document.getElementById('supportTypeMessage');
if (!publicPersonnelChecked && !privateCompaniesChecked) {
messageElement.style.display = 'block';
} else {
messageElement.style.display = 'none';

// Build state url
function buildStateUrl(selectedState) {
let pathname = window.location.pathname;
let segments = pathname.split('/');
let stateIndex = segments.indexOf('states');
let basePath = segments.slice(0, stateIndex).join('/');
let newUrl = basePath + '/states/' + selectedState + '/';
return newUrl;
}

function updateSupportTypeMessage() {
let publicPersonnelChecked = document.getElementById('public-personnel').checked;
let privateCompaniesChecked = document.getElementById('private-companies').checked;

let messageElement = document.getElementById('supportTypeMessage');
if (!publicPersonnelChecked && !privateCompaniesChecked) {
messageElement.style.display = 'block';
} else {
messageElement.style.display = 'none';
}
}
}

// function updateStateTerritoryCheckbox() {
// let publicPersonnelChecked = document.getElementById('public-personnel').checked;
// let privateCompaniesChecked = document.getElementById('private-companies').checked;
// let stateTerritoryCheckbox = document.getElementById('state-territory');

// if (publicPersonnelChecked || privateCompaniesChecked) {
// stateTerritoryCheckbox.checked = true;
// checkboxStates['state-mutual-aid-section'] = true;
// }

// // Update local storage with the new state
// localStorage.setItem('checkboxStates', JSON.stringify(checkboxStates));
// }

// Initialize checkboxStates from local storage if available
let storedCheckboxStates = localStorage.getItem('checkboxStates');
if (storedCheckboxStates) {
checkboxStates = JSON.parse(storedCheckboxStates);
}

document.querySelectorAll('.filter-checkbox').forEach(function (checkbox) {
let sectionId = checkbox.getAttribute('data-section-id');
checkbox.checked = checkboxStates.hasOwnProperty(sectionId) ? checkboxStates[sectionId] : checkbox.checked;

checkbox.addEventListener('change', function () {
checkboxStates[sectionId] = this.checked;
});
});

document.getElementById('stateForm').addEventListener('submit', function(event) {
event.preventDefault();
let selectedState = document.getElementById('state').value;
// function updateStateTerritoryCheckbox() {
// let publicPersonnelChecked = document.getElementById('public-personnel').checked;
// let privateCompaniesChecked = document.getElementById('private-companies').checked;
// let stateTerritoryCheckbox = document.getElementById('state-territory');

// Store the checkbox states in local storage
localStorage.setItem('checkboxStates', JSON.stringify(checkboxStates));
// if (publicPersonnelChecked || privateCompaniesChecked) {
// stateTerritoryCheckbox.checked = true;
// checkboxStates['state-mutual-aid-section'] = true;
// }

// Handle state change if a valid state is selected
if (/^[A-Za-z]{2}$/.test(selectedState)) {
let encodedState = encodeURIComponent(selectedState);
window.location.href = buildStateUrl(encodedState);
} else {
console.error('Invalid state selected');
// // Update local storage with the new state
// localStorage.setItem('checkboxStates', JSON.stringify(checkboxStates));
// }

// Initialize checkboxStates from local storage if available
let storedCheckboxStates = localStorage.getItem('checkboxStates');
if (storedCheckboxStates) {
checkboxStates = JSON.parse(storedCheckboxStates);
}

updateSupportTypeMessage();
updateStateTerritoryCheckbox();
});

// Apply stored checkbox states to sections
if (storedCheckboxStates) {
for (let sectionId in checkboxStates) {
let isVisible = checkboxStates[sectionId];
toggleSection(sectionId, isVisible);
document.querySelectorAll('.filter-checkbox').forEach(function (checkbox) {
let sectionId = checkbox.getAttribute('data-section-id');
checkbox.checked = checkboxStates.hasOwnProperty(sectionId) ? checkboxStates[sectionId] : checkbox.checked;

checkbox.addEventListener('change', function () {
checkboxStates[sectionId] = this.checked;
});
});

document.getElementById('stateForm').addEventListener('submit', function (event) {
event.preventDefault();
let selectedState = document.getElementById('state').value;

// Store the checkbox states in local storage
localStorage.setItem('checkboxStates', JSON.stringify(checkboxStates));

// Handle state change if a valid state is selected
if (/^[A-Za-z]{2}$/.test(selectedState)) {
let encodedState = encodeURIComponent(selectedState);
window.location.href = buildStateUrl(encodedState);
} else {
console.error('Invalid state selected');
}

updateSupportTypeMessage();
updateStateTerritoryCheckbox();
});

// Apply stored checkbox states to sections
if (storedCheckboxStates) {
for (let sectionId in checkboxStates) {
let isVisible = checkboxStates[sectionId];
toggleSection(sectionId, isVisible);
}
}
}

// Function to extract state code from the URL path
function getCurrentStateFromPath() {
const pathSegments = window.location.pathname.split('/');
const stateIndex = pathSegments.indexOf('states');
if (stateIndex >= 0 && stateIndex < pathSegments.length - 1) {
return pathSegments[stateIndex + 1];

// Function to extract state code from the URL path
function getCurrentStateFromPath() {
const pathSegments = window.location.pathname.split('/');
const stateIndex = pathSegments.indexOf('states');
if (stateIndex >= 0 && stateIndex < pathSegments.length - 1) {
return pathSegments[stateIndex + 1];
}
return null;
}
return null;
}

const currentState = getCurrentStateFromPath();
const currentState = getCurrentStateFromPath();

if (currentState) {
const stateSelect = document.getElementById('state');
stateSelect.value = currentState;
}

if (currentState) {
const stateSelect = document.getElementById('state');
stateSelect.value = currentState;
}

// Also call updateSupportTypeMessage when checkboxes change
//document.getElementById('public-personnel').addEventListener('change', updateSupportTypeMessage);
//document.getElementById('private-companies').addEventListener('change', updateSupportTypeMessage);

// Also call updateSupportTypeMessage when checkboxes change
//document.getElementById('public-personnel').addEventListener('change', updateSupportTypeMessage);
//document.getElementById('private-companies').addEventListener('change', updateSupportTypeMessage);
// Initialize the message state on page load
updateSupportTypeMessage();

// Initialize the message state on page load
updateSupportTypeMessage();
}); // …
})();

});
</script>
117 changes: 93 additions & 24 deletions _includes/highlights.html
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,115 @@
<section class="usa-graphic-list home-highlights usa-section usa-section--dark">
<div class="grid-container">
<ul class="usa-card-group grid-row grid-gap">
<li class="usa-card usa-card--flag grid-col-12">
<div class="usa-card__container card-1">
<h2 class="text-center">Why use mutual aid ?</h2>
<ul class="usa-card-group grid-row grid-gap-2">
<li class="usa-card tablet:grid-col-6 mobile:grid-col-12">
<div class="usa-card__container">
<div class="usa-card__header">
<h3 class="usa-card__heading">
How can mutual aid resources help your building department?
</h3>
<h3 class="usa-card__heading">Rapid Response</h3>
</div>
<div class="usa-card__media">
<div class="usa-card__media usa-card__media--inset">
<div class="usa-card__img">
<img class="usa-media-block__img" src="{{ '/assets/img/help-icon.webp' | url }}" alt="" width="180" height="180" />
<img src="{{ '/assets/img/rapid-response-icon.webp' | url }}" alt="" width="100" height="100" />
</div>
</div>
<div class="usa-card__body">
<ul>
<li>Following a disaster, many local building departments struggle to handle the increased demand for post-disaster inspections, permitting, and building code enforcement tasks.</li>
<li>Mutual aid agreements allow building departments to request public or private sector personnel for short-term deployments to their community to assist rebuilding efforts.</li>
</ul>
<p>
Mutual aid allows communities to quickly mobilize additional qualified personnel to handle the surge in
inspections and permit requests that typically occur after a disaster.
</p>
</div>
</div>
</li>
<li class="usa-card usa-card--flag grid-col-12">
<div class="usa-card__container card-2">
<li class="usa-card tablet:grid-col-6 mobile:grid-col-12">
<div class="usa-card__container">
<div class="usa-card__header">
<h3 class="usa-card__heading">
Who can use mutual aid assistance for rebuilding?
</h3>
<h3 class="usa-card__heading">Expertise and Resources</h3>
</div>
<div class="usa-card__media">
<div class="usa-card__media usa-card__media--inset">
<div class="usa-card__img">
<img class="usa-media-block__img" src="{{ '/assets/img/build-icon.webp' | url }}" alt="" width="180" height="180" />
<img src="{{ '/assets/img/experts-lg.webp' | url }}" alt="" width="100" height="100" />
</div>
</div>
<div class="usa-card__body">
<ul>
<li>States and territories have a variety of agreements with differing rules and regulations on how building departments may request assistance and expense reimbursement.</li>
<li>Use our <a class="usa-link" href="#mutual-aid-search">mutual aid resource search</a> to start identifying what assistance options are available in your location and to connect with organizations that can provide help to your community.</li>
</ul>
<p>
Through mutual aid agreements, communities can access specialized expertise and resources they may not
have internally.
</p>
</div>
</div>
</li>
</ul>
<li class="usa-card tablet:grid-col-6 mobile:grid-col-12">
<div class="usa-card__container">
<div class="usa-card__header">
<h3 class="usa-card__heading">Cost-Effective Solution</h3>
</div>
<div class="usa-card__media usa-card__media--inset">
<div class="usa-card__img">
<img src="{{ '/assets/img/cost-effective-icon.webp' | url }}" alt="" width="100" height="100" />
</div>
</div>
<div class="usa-card__body">
<p>
Utilizing mutual aid is often more cost-effective than hiring temporary staff or contractors, as
partnering jurisdictions typically only seek reimbursement for direct costs.
</p>
</div>
</div>
</li>
<li class="usa-card tablet:grid-col-6 mobile:grid-col-12">
<div class="usa-card__container">
<div class="usa-card__header">
<h3 class="usa-card__heading">Consistency in Enforcement</h3>
</div>
<div class="usa-card__media usa-card__media--inset">
<div class="usa-card__img">
<img src="{{ '/assets/img/consistency-icon.webp' | url }}" alt="" width="100" height="100" />
</div>
</div>
<div class="usa-card__body">
<p>
Mutual aid personnel are usually familiar with building codes and standards, helping ensure consistent and
proper enforcement of regulations during rebuilding.
</p>
</div>
</div>
</li>
<li class="usa-card tablet:grid-col-6 mobile:grid-col-12">
<div class="usa-card__container">
<div class="usa-card__header">
<h3 class="usa-card__heading">Reduced Strain on Local Staff</h3>
</div>
<div class="usa-card__media usa-card__media--inset">
<div class="usa-card__img">
<img src="{{ '/assets/img/reduce-strain-icon.webp' | url }}" alt="" width="100" height="100" />
</div>
</div>
<div class="usa-card__body">
<p>
By bringing in outside assistance, mutual aid prevents burnout of local building department staff who may
be overwhelmed by increased workloads following a disaster.
</p>
</div>
</div>
</li>
<li class="usa-card tablet:grid-col-6 mobile:grid-col-12">
<div class="usa-card__container">
<div class="usa-card__header">
<h3 class="usa-card__heading">Improved Community Resilience</h3>
</div>
<div class="usa-card__media usa-card__media--inset">
<div class="usa-card__img">
<img src="{{ '/assets/img/build-icon.webp' | url }}" alt="" width="100" height="100" />
</div>
</div>
<div class="usa-card__body">
<p>
Mutual aid can help rebuild in ways that make structures more resilient and better prepare communities to
handle future disasters.
</p>
</div>
</div>
</li>
</ul>
</div>
</section>
Loading

0 comments on commit 7866090

Please sign in to comment.