diff --git a/Dockerfile b/Dockerfile index 4c464fdf..d250560a 100644 --- a/Dockerfile +++ b/Dockerfile @@ -19,7 +19,7 @@ RUN curl -sL https://deb.nodesource.com/setup_12.x | bash - # # Read more on Dockerfile best practices at the source: # https://docs.docker.com/develop/develop-images/dockerfile_best-practices -RUN apt-get update && apt-get install -y --no-install-recommends postgresql-client nodejs +RUN apt-get update && apt-get install -y --no-install-recommends postgresql-client nodejs npm # Inside the container, create an app directory and switch into it RUN mkdir /app diff --git a/parserator_web/static/js/index.js b/parserator_web/static/js/index.js index 492674cc..07bacd96 100644 --- a/parserator_web/static/js/index.js +++ b/parserator_web/static/js/index.js @@ -1,2 +1,97 @@ -/* TODO: Flesh this out to connect the form to the API and render results - in the #address-results div. */ +const $form = $(".form"); +const $addressInput = $("#address"); +const $addressResults = $("#address-results"); +const $parseType = $("#parse-type"); +const $resultsTableBody = $("tbody"); +const $errorMessage = $("

") + .attr("id", "error-message") + .addClass("text-danger d-inline-block mx-4"); +const DEFAULT_ERROR_MESSAGE = "Could not parse address"; +const API_URL = "/api/parse/" + +$form.on("submit", (evt) => { + evt.preventDefault(); + handleSubmit(); +}); + +/** handleSubmit: + * Handles user form input; + * calls functions to fetch parsed data and display results/errors + */ +async function handleSubmit() { + const input = $addressInput.val(); + + try { + const parsedAddressData = await fetchParsedAddressData(input); + renderResults( + parsedAddressData.address_components, + parsedAddressData.address_type + ); + } catch (e) { + renderErrorMessage(e.message); + } +} + +/** fetchParsedAddressData: + * fetches parsed address data from API + * @param {String} address + * @returns {Object} parsed address data, from JSON response + * @throws Error on bad request + */ +async function fetchParsedAddressData(address) { + const params = new URLSearchParams({ address }); + const response = await fetch(`${API_URL}?${params}`); + const parsedAddressData = await response.json(); + + if (response.status != 200) { + throw new Error(parsedAddressData.error || DEFAULT_ERROR_MESSAGE); + } + + return parsedAddressData; +} + +/** renderResults: + * Displays parsed address components and information in UI + * @param {Object} addressComponents tagged address components + * @param {String} addressType + */ +function renderResults(addressComponents, addressType) { + clearResultsDisplay(); + + $parseType.text(addressType); + fillResultsTableBody(addressComponents); +} + +/** renderErrorMessage: + * Displays an error message in UI + * @param {String} message error message + */ +function renderErrorMessage(message) { + $errorMessage.text(message); + $form.append($errorMessage); +} + +/** fillResultsTableBody: + * builds displayed table of address components in UI + * @param {Object} addressComponents like {component: tag, ...} + */ +function fillResultsTableBody(addressComponents) { + for (const addressPart in addressComponents) { + const $row = $(""); + const tag = addressComponents[addressPart]; + $row.append( + $("").text(addressPart), + $("").text(tag) + ); + $resultsTableBody.append($row); + } +} + +/** clearResultsDisplay: + * resets UI, in order to display new results + */ +function clearResultsDisplay() { + $errorMessage.remove(); + $resultsTableBody.empty(); + $addressResults.removeClass("d-none"); +} diff --git a/parserator_web/templates/parserator_web/base.html b/parserator_web/templates/parserator_web/base.html index 8de4f844..0d532a4b 100644 --- a/parserator_web/templates/parserator_web/base.html +++ b/parserator_web/templates/parserator_web/base.html @@ -81,7 +81,15 @@

/>
- ... and you! + ... and + + Noah Appelbaum! +

diff --git a/parserator_web/templates/parserator_web/index.html b/parserator_web/templates/parserator_web/index.html index a72d9c80..b70c738a 100644 --- a/parserator_web/templates/parserator_web/index.html +++ b/parserator_web/templates/parserator_web/index.html @@ -17,8 +17,7 @@

U.S. addres - -