diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..d5f19d89 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +package-lock.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..a55761cc --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "liveServer.settings.ignoreFiles": [ + "**/*.json" + ] +} \ No newline at end of file diff --git a/db.json b/db.json new file mode 100644 index 00000000..6b470f7a --- /dev/null +++ b/db.json @@ -0,0 +1,40 @@ +{ + "breweries": [ + { + "id": "871b70be-e09e-4936-8b29-f92c0d2e2667", + "name": "Bonaventure Brewing Co", + "brewery_type": "brewpub", + "address_1": "404 S Figueroa St Ste 418A", + "address_2": null, + "address_3": null, + "city": "Los Angeles", + "state_province": "California", + "postal_code": "90071-1797", + "country": "United States", + "longitude": "-118.2562113", + "latitude": "34.05314634", + "phone": "2132360802", + "website_url": "http://www.bonaventurebrewing.com", + "state": "California", + "street": "404 S Figueroa St Ste 418A" + }, + { + "id": "950180bd-29c9-46b3-ad0c-e6f09799ec7f", + "name": "13 Below Brewery", + "brewery_type": "micro", + "address_1": "7391 Forbes Rd", + "address_2": null, + "address_3": null, + "city": "Cincinnati", + "state_province": "Ohio", + "postal_code": "45233-1013", + "country": "United States", + "longitude": "-84.70634815", + "latitude": "39.12639764", + "phone": "5139750613", + "website_url": "http://www.13belowbrewery.com", + "state": "Ohio", + "street": "7391 Forbes Rd" + } + ] +} \ No newline at end of file diff --git a/index.html b/index.html index 08b9f3fe..483e097f 100644 --- a/index.html +++ b/index.html @@ -1,47 +1,79 @@ - + - - - - - - - Brewery Tours - - -
-
-

Welcome to Brewery Tours

-
- - - -
-
+ + + + + + + + + Brewery Tours + + + +
+
+

Welcome to Brewery Tours

+
+ + + +
+
+
+
+ +

List of Breweries

+
+
+ + +
-
- -

List of Breweries

-
-
    - -
-
-
- - + + + + +
+ + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..e3d2155f --- /dev/null +++ b/index.js @@ -0,0 +1,233 @@ +const BASE_URL = "https://api.openbrewerydb.org/v1/breweries/"; +const LOCALHOST = "http://localhost:3000/breweries"; +let store = { + currentPage: 0, + breweries: [], + cities: [], + visited_breweries: [], +}; + +function localhost_get() { + fetch(`${LOCALHOST}`).then(async (response) => { + let data = await response.json(); + renderVisitBreweries(data); + }); +} + +function localhost_add(event, id) { + event.preventDefault(); + let payload = store.breweries.find((brewery) => brewery.id === id); + const options = { + method: "POST", + body: JSON.stringify(payload), + headers: { "Content-Type": "application/json" }, + }; + + fetch(`${LOCALHOST}`, options).then((response) => { + localhost_get(); + }); +} + +function localhost_remove(event, id) { + event.preventDefault(); + const options = { + method: "DELETE", + headers: { "Content-Type": "application/json" }, + }; + + fetch(`${LOCALHOST}/${id}`, options).then((response) => { + localhost_get(); + }); +} + +function clearStore() { + store.breweries = []; + store.cities = []; + store.visited_breweries = []; +} + +function getBreweries(limit, page) { + fetch(`${BASE_URL}` + `?per_page=${limit}` + `&page=${page}`).then( + async (response) => { + let data = await response.json(); + loadBreweries(data); + } + ); +} + +function getBreweriesByState(limit, page, state) { + fetch( + `${BASE_URL}` + + `?per_page=${limit}` + + `&page=${page}` + + `&by_state=${state}` + ).then(async (response) => { + let data = await response.json(); + loadBreweries(data); + }); +} + +function searchBreweries(query) { + fetch(`${BASE_URL}` + `search?query=${query}`).then(async (response) => { + let data = await response.json(); + loadBreweries(data); + }); +} + +function loadBreweries(data) { + clearStore(); + for (let i = 0; i < data.length; i++) { + if ( + data[i].brewery_type === "micro" || + data[i].brewery_type === "regional" || + data[i].brewery_type === "brewpub" + ) { + store.breweries.push(data[i]); + } + } + + for (let i = 0; i < store.breweries.length; i++) { + if (!store.cities.includes(store.breweries[i].city)) { + store.cities.push(store.breweries[i].city); + } + } + render(); +} + +let city_filter = []; +function handleCheckCity(event) { + let city = event.target.value; + if (event.target.checked) { + city_filter.push(city); + } else { + city_filter.splice(city_filter.indexOf(city), 1); + } + + console.log(city_filter); + if (city_filter.length > 0) { + let filtered_breweries = []; + for (let i = 0; i < store.breweries.length; i++) { + if (city_filter.includes(store.breweries[i].city)) { + filtered_breweries.push(store.breweries[i]); + } + } + renderBreweries(filtered_breweries); + } else { + renderBreweries(store.breweries); + } +} + +function renderBreweries(breweries) { + let brewery_list = document.getElementById("breweries-list"); + brewery_list.innerHTML = ""; + breweries.forEach((brewery) => { + let brewey_list_item = document.createElement("li"); + brewey_list_item.innerHTML = ` +

${brewery.name}

+
${brewery.brewery_type}
+
+

Address:

+

${brewery.street}

+

${brewery.city}, ${brewery.postal_code}

+

+ +

+
+
+

Phone:

+

${brewery.phone}

+
+
+ Visit Website +
+ `; + brewery_list.append(brewey_list_item); + }); +} + +function renderCityFilter(cities) { + let city_filter_form = document.getElementById("filter-by-city-form"); + city_filter_form.innerHTML = ""; + cities.forEach((city) => { + city_filter_form.innerHTML += ` + + `; + }); +} + +function renderPagination(currentPage) { + document.getElementById("page-current").innerText = store.currentPage; + document.getElementById("page-prev").onclick = async (event) => { + if (store.currentPage <= 1) return; + + clearStore(); + store.currentPage -= 1; + await getBreweries(10, store.currentPage); + render(); + }; + document.getElementById("page-next").onclick = async (event) => { + clearStore(); + store.currentPage += 1; + await getBreweries(10, store.currentPage); + render(); + }; +} + +function renderVisitBreweries(breweries) { + let visit_brewery_list = document.getElementById("visit-breweries-list"); + visit_brewery_list.innerHTML = ""; + breweries.forEach((brewery) => { + let visit_brewey_list_item = document.createElement("li"); + visit_brewey_list_item.innerHTML = ` +

${brewery.name}

+ + `; + visit_brewery_list.append(visit_brewey_list_item); + }); +} + +function render() { + renderBreweries(store.breweries); + renderCityFilter(store.cities); + renderPagination(store.currentPage); +} + +document.addEventListener("DOMContentLoaded", async function () { + document.getElementById("select-state-form").onsubmit = async (event) => { + event.preventDefault(); + let state = event.target.elements["select-state"].value; + clearStore(); + getBreweriesByState(10, 1, state); + render(); + }; + + document.getElementById("search-breweries").onkeyup = async (event) => { + event.preventDefault(); + let query = event.target.value; + clearStore(); + searchBreweries(query); + render(); + }; + + document.getElementById("filter-by-type-form").onchange = async (event) => { + let filter_brewery_type = event.target.value; + let filtered_by_type_breweries = []; + for (let i = 0; i < store.breweries.length; i++) { + if (store.breweries[i].brewery_type === filter_brewery_type) { + filtered_by_type_breweries.push(store.breweries[i]); + } + } + renderBreweries(filtered_by_type_breweries); + }; + + document.getElementsByClassName("clear-all-btn")[0].onclick = (event) => { + let collection = document.getElementsByClassName("city_filter"); + for (let i = 0; i < collection.length; i++) { + collection[i].checked = false; + } + render(); + }; + + localhost_get(); + render(); +}); diff --git a/package.json b/package.json new file mode 100644 index 00000000..a69d32b9 --- /dev/null +++ b/package.json @@ -0,0 +1,22 @@ +{ + "name": "js-dom-brewery-tours-challenge", + "version": "1.0.0", + "description": "![BreweryTours](images/brewery.jpg)", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/boolean-uk/js-dom-brewery-tours-challenge.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/boolean-uk/js-dom-brewery-tours-challenge/issues" + }, + "homepage": "https://github.com/boolean-uk/js-dom-brewery-tours-challenge#readme", + "dependencies": { + "json-server": "^1.0.0-alpha.23" + } +} diff --git a/styles/index.css b/styles/index.css index 3988f87e..ecf16296 100644 --- a/styles/index.css +++ b/styles/index.css @@ -40,13 +40,28 @@ body { main { display: grid; grid-template-areas: - "sidebar title" - "sidebar search-bar" - "sidebar article"; - grid-template-columns: 1fr 3fr; + "sidebar title right-sidebar" + "sidebar search-bar right-sidebar" + "sidebar article right-sidebar"; + grid-template-columns: 1fr 3fr 1fr; grid-template-rows: auto auto 1fr; } +.visit-section { + grid-area: right-sidebar; + + padding: 1rem 2rem 1rem 1rem; +} + +.visited-breweries-list li { + list-style-type: none; + padding: 1rem 2rem 1rem 2rem; + margin: 10px; + border-radius: 0.25rem; + border: 1px solid #000; + font-size: 14px; +} + .filters-section { grid-area: sidebar; @@ -228,3 +243,15 @@ article { text-decoration: none; font-weight: bold; } + +.pagination{ + display: block; + padding: 0.5rem 1rem; +} + +.pagination button { + border: none; + background-color: transparent; + text-decoration: underline blue; + cursor: pointer; +} \ No newline at end of file