diff --git a/Dockerfile b/Dockerfile index 4c464fdf..50ab527d 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,50 +1,32 @@ # Extend the base Python image -# See https://hub.docker.com/_/python for version options -# N.b., there are many options for Python images. We used the plain -# version number in the pilot. YMMV. See this post for a discussion of -# some options and their pros and cons: -# https://pythonspeed.com/articles/base-image-python-docker-images/ FROM python:3.8 # Add the NodeSource PPA -# (see: https://github.com/nodesource/distributions/blob/master/README.md) -RUN curl -sL https://deb.nodesource.com/setup_12.x | bash - - -# Install any additional OS-level packages you need via apt-get. RUN statements -# add additional layers to your image, increasing its final size. Keep your -# image small by combining related commands into one RUN statement, e.g., -# -# RUN apt-get update && \ -# apt-get install -y python-pip -# -# 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 curl -sL https://deb.nodesource.com/setup_14.x | bash - # Updated to Node.js 14 + +# Install any additional OS-level packages +RUN apt-get update && apt-get install -y --no-install-recommends postgresql-client nodejs npm + +# Verify PATH includes npm +ENV PATH /usr/local/bin:$PATH # Inside the container, create an app directory and switch into it RUN mkdir /app WORKDIR /app -# Copy the requirements file into the app directory, and install them. Copy -# only the requirements file, so Docker can cache this build step. Otherwise, -# the requirements must be reinstalled every time you build the image after -# the app code changes. See this post for further discussion of strategies -# for building lean and efficient containers: -# https://blog.realkinetic.com/building-minimal-docker-containers-for-python-applications-37d0272c52f3 +# Copy the requirements file and install Python dependencies COPY ./requirements.txt /app/requirements.txt RUN pip install --no-cache-dir -r requirements.txt -# Install Node requirements +# Copy package.json and install Node dependencies COPY ./package.json /app/package.json -RUN npm install +RUN npm install --verbose # Added verbose flag for more detailed output -# Copy the contents of the current host directory (i.e., our app code) into -# the container. +# Copy the rest of the application COPY . /app -# Add a bogus env var for the Django secret key in order to allow us to run -# the 'collectstatic' management command +# Add a bogus env var for the Django secret key ENV DJANGO_SECRET_KEY 'foobar' # Build static files into the container -RUN python manage.py collectstatic --noinput +RUN python manage.py collectstatic --noinput \ No newline at end of file diff --git a/parserator_web/static/js/index.js b/parserator_web/static/js/index.js index 492674cc..3c299a75 100644 --- a/parserator_web/static/js/index.js +++ b/parserator_web/static/js/index.js @@ -1,2 +1,77 @@ /* TODO: Flesh this out to connect the form to the API and render results in the #address-results div. */ + document.addEventListener('DOMContentLoaded', function() { + const form = document.querySelector('form'); + const addressResults = document.getElementById('address-results'); + + form.addEventListener('submit', function(e) { + e.preventDefault(); + const address = document.getElementById('address').value; + + // Send request to API endpoint + fetch(`/api/parse/?address=${encodeURIComponent(address)}`) + .then(response => response.json()) + .then(data => { + // Clear previous results + addressResults.innerHTML = ''; + addressResults.style.display = 'block'; + + if (data.detail && data.detail.startsWith('Error parsing address:')) { + // Display parsing error + const errorMessage = data.detail.split('ORIGINAL STRING:')[0].trim(); + addressResults.innerHTML = ` +
${errorMessage}
+The address could not be parsed. This may be due to:
+Please check the address and try again.
+ `; + } else if (data.address_components) { + // Display successful results + addressResults.innerHTML = ` +Address type: ${data.address_type}
+Input: ${data.input_string}
+| Address part | +Tag | +
|---|
An unexpected error occurred. Please try again.
+ `; + } + }) + .catch(error => { + console.error('Error:', error); + addressResults.style.display = 'block'; + addressResults.innerHTML = ` +An unexpected error occurred. Please try again.
+ `; + }); + }); + }); diff --git a/parserator_web/templates/parserator_web/index.html b/parserator_web/templates/parserator_web/index.html index a72d9c80..bd219cad 100644 --- a/parserator_web/templates/parserator_web/index.html +++ b/parserator_web/templates/parserator_web/index.html @@ -17,7 +17,6 @@