diff --git a/.eslintrc.js b/.eslintrc.js index da83839d..a0dab885 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -11,5 +11,11 @@ module.exports = { "space-in-parens": ["error", "never"], "space-before-function-paren": ["error", "always"], "space-before-blocks": ["error", "always"] + }, + "parserOptions": { + "ecmaVersion": "latest" + }, + "env": { + "es6": true } } 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/docker-compose.yml b/docker-compose.yml index 5a9c87a7..92148de3 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,5 +1,3 @@ -version: '2.4' - services: app: image: parserator diff --git a/parserator_web/static/js/index.js b/parserator_web/static/js/index.js index 492674cc..eff54a68 100644 --- a/parserator_web/static/js/index.js +++ b/parserator_web/static/js/index.js @@ -1,2 +1,56 @@ -/* TODO: Flesh this out to connect the form to the API and render results - in the #address-results div. */ +'use strict' + +// TODO: We'll want to change this url in production, obviously +const url = "http://localhost:8000/api/parse" +const submitButton = document.getElementById("submit") + +// We'll save the blank results html for use later +let blankTable = document.getElementById("address-table").innerHTML + +submitButton.onclick = async function (event) { + event.preventDefault() + + let results = document.getElementById("address-results") + + // We'll blank this out in case we get an error + // So that we don't show old responses as if to new queries + results.style.display = "none" + + let addressString = document.getElementById("address").value + let queryTerms = new URLSearchParams({ address: addressString }) + try { + const response = await fetch(`${url}?${queryTerms}`) + console.log(response) + if (!response.ok) { + if (response.status == 400) { + alert(`${response.statusText}: Failed to parse this address`) + } else { + // TODO: Handle other failures? + } + } else { + let responseData = await response.json() + + // Set the headline + document.getElementById("parse-type").textContent = responseData.address_type + + // Build the table + let table = document.getElementById("address-table") + table.innerHTML = blankTable + let addressParts = responseData.address_components + for (let index in addressParts) { + let field = addressParts[index][0] + let value = addressParts[index][1] + + let nextRow = table.insertRow(-1) + let fieldData = nextRow.insertCell(0) + let valueData = nextRow.insertCell(1) + + fieldData.appendChild(document.createTextNode(field)) + valueData.appendChild(document.createTextNode(value)) + } + results.style.display = "block" + } + } catch (error) { + console.error(`${error} in response to query at ${url}?{queryTerms}`) + } +} diff --git a/parserator_web/templates/parserator_web/index.html b/parserator_web/templates/parserator_web/index.html index a72d9c80..cb5afeee 100644 --- a/parserator_web/templates/parserator_web/index.html +++ b/parserator_web/templates/parserator_web/index.html @@ -21,7 +21,7 @@