Skip to content

Commit

Permalink
add content and code
Browse files Browse the repository at this point in the history
  • Loading branch information
@jebowe3
jebowe3 committed Aug 5, 2024
1 parent 89e5518 commit a257877
Show file tree
Hide file tree
Showing 3 changed files with 302 additions and 0 deletions.
Binary file added .DS_Store
View file
Binary file not shown.
302 changes: 302 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,302 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<!-- Give the page a title -->
<title>BTAA GIN Important Documents</title>

<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Add a link to normalize.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<!-- Add fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre+Franklin&display=swap" rel="stylesheet">
<!-- All the CSS code goes inside the style tags below -->
<style>
body {
background: #f5f5f5;
font-family: 'Libre Franklin', sans-serif;
font-weight: normal;
font-style: normal;
text-decoration: none;
}

header {
width: 100%;
min-width: 800px;
margin: 0 auto;
background: #184c7c;
padding: 15px 0 20px;
display: flex;
justify-content: space-between;
/* Push h1 and h2 to the left and right edges */
align-items: center;
/* Vertically center content */
flex-wrap: wrap;
/* Allow items to wrap to the next line if needed */
}

.header-elements {
width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between; /* Distribute elements horizontally */
align-items: center; /* Vertically center content */
}

h1 {
font-family: 'Libre Franklin', sans-serif;
/*width: 80%;*/
margin: 0 auto;
color: whitesmoke;
font-weight: normal;
font-style: normal;
text-decoration: none;
}

/* Ensure that the h2 is left-aligned to the same margin as h1 */
h2 {
font-family: 'Libre Franklin', sans-serif;
/*width: 80%;*/
margin: 0 auto;
color: whitesmoke;
font-weight: normal;
font-style: normal;
text-decoration: none;
}

h3 {
font-family: 'Libre Franklin', sans-serif;
color: #375671;
font-weight: normal;
font-style: normal;
text-decoration: none;
}

h5 {
font-family: 'Libre Franklin', sans-serif;
font-size: 1.5em;
color: #375671;
width: 80%;
margin: 0 auto;
margin-top: 50px;
margin-bottom: 25px;
text-align: center;
font-weight: normal;
font-style: normal;
text-decoration: none;
}

p {
font-size: .9em;
color: #375671;
}

a,
a:visited {
color: #003d71;
}

.project {
width: 80%;
min-width: 800px;
height: 100%;
margin: 35px auto;
}

.project:after {
content: "";
display: table;
clear: both;
}

/* Adjust the dropdown styles */
.dropdown {
/*width: 80%;*/
margin: 0 auto;
margin-top: 10px;
}

label {
margin: 0;
padding: 0;
font-family: 'Libre Franklin', sans-serif;
color: whitesmoke;
font-size: 16px;
text-align: right;
margin-right: 10px;
font-weight: normal;
font-style: normal;
text-decoration: none;
}

select {
width: 70px;
padding: 2px;
height: auto;
margin-right: 0px;
}

.gin-span {
padding: 16px 12px;
text-decoration: none;
font-family: 'Libre Franklin', sans-serif;
color: whitesmoke;
font-size: 15px;
font-weight: normal;
font-style: normal;
text-decoration: none;
}

header .logo {
display: flex;
align-items: center;
margin-right: 12px;
}

header .logo img {
height: 60px; /* Adjust the height as needed */
max-width: 100%; /* Make sure the image doesn't exceed its container */
}

.gin-link {
text-decoration: none; /* Remove underline */
}

hr {
background-color: #375671;
border: none;
height: 1px;
width: 5%;
text-align: center;
margin-bottom: 25px;
}

</style>
</head>

<body>
<header>
<div class="header-elements">
<div id="title">
<h1>Important Documents Locator</h1>
<h2>BTAA Geospatial Information Network</h2>
<div class="dropdown">
<label for="type">Select By Document Type:</label>
<select id="type">
<!-- Make the default no selection -->
<option value="0" selected>Any</option>
<option value="Presentation">Presentation</option>
<option value="Template">Template</option>
<option value="Tutorial">Tutorial</option>
<option value="Outreach">Outreach</option>
<option value="Report">Report</option>
<option value="Information">Information</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="logo">
<a class="gin-link" href="https://gin.btaa.org/" aria-hidden="false" tabindex="0">
<div class="logo">
<img src="logo/btaa-logo-white.png" role="img" />
<span class="gin-span">BTAA-GIN</span>
</div>
</a>
</div>
</div>
</header>
<h5>Filtered Documents</h5>
<hr>
<div id="documents"></div>
<!-- Papaparse for bringing in Google spreadsheet data -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js "></script>
<!-- Add a link to the jQuery JavaScript library so you can leverage ajax methods to load your data -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Custom JavaScript below -->

<script>

// Define a function to load data from the Google Sheet
function loadGoogleSheetData() {

// Define the Google Sheet URL
const gsheet = 'https://docs.google.com/spreadsheets/d/1UVXt7_ZmzTnCeraJKl-0wL4rD1n_dlyMlsNrYzjbW9M/export?format=csv&id=1UVXt7_ZmzTnCeraJKl-0wL4rD1n_dlyMlsNrYzjbW9M&gid=0';

// Clear the documents div
$('#documents').empty();

Papa.parse(gsheet, {
download: true,
header: true,
complete: function (results) {
// Define data
let data = results.data;

// Flag to track if "Static Maps" has been added
let staticMapsAdded = false;

// Loop through data
for (let i = 0; i < data.length; i++) {
// Define an empty array for the project types
let types = [];
// Define variables
let project = data[i];
let title = project.Title;
let link = project.Link;
let description = project.Description;
let utility = project.Utility;
let type1 = project.Type_1;
let type2 = project.Type_2;
let type3 = project.Type_3;
// If type1 is not empty, add it to the types array
if (type1) {
types.push(type1);
};
// If type2 is not empty, add it to the types array
if (type2) {
types.push(type2);
};
// If type3 is not empty, add it to the types array
if (type3) {
types.push(type3);
};
// Convert the types array to a string
formattedTypes = types.join(', ');
// If the type dropdown is set to "Any" or the project type matches the selected type
if ($('#type').val() == 0 || types.includes($('#type').val())) {
// Create inital HTML elements
let projectHTML = '<section class="project"><a target="_blank" href="' + link + '"><h3>' + title + '</h3></a><p><b>Description:</b><br>' + description + '<br><br><b>Utility:</b><br>' + utility + '<br><br><b>Type of Document:</b><br>' + formattedTypes + '</p></section>';
// Append HTML elements to documents div
$('#documents').append(projectHTML);
};
};

}
});
};

// Call the function to load data when the page loads
$(document).ready(function () {
// Set the default type to "Any" in the dropdown
$('#type').val(0);
// Call the function to load data
loadGoogleSheetData();
});

// Add an event listener to the <select> element for future changes
let selectElement = document.getElementById("type");

// Listen for changes
selectElement.addEventListener("change", function () {
// Get the selected value
const selectedValue = $(this).val();
// Call the function to load data
loadGoogleSheetData();
});

</script>

</body>
Binary file added logo/btaa-logo-white.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit a257877

Please sign in to comment.