Timezone clock Vue component and Flask server

Flask server setup and launch

After downloading this repo, navigate to /server directory to install python dependencies. Run the following commands to create a virtual env (assuming you have virtualenv and pip installed on your system):

virtualenv venv
source venv/bin/activate
pip install -r requirements.txt

To run the dev server, launch Flask as such:

FLASK_APP=server.py FLASK_DEBUG=1 flask run

Server should now be running at localhost:5000. If you configure Flask to run on a different host/port, make sure to update the client config file accordingly (see below).

Vue client setup and launch

On a different terminal, navigate into the /client directory. A basic Vue project is already setup. Assuming npm is installed on your system, you may run npm install to fetch all needed packages.

Once that's done, launch the server by running npm run serve. You can open the client on your browser by navigating to localhost:8080.

Note: The client will access the Flask API via the url located in /client/config/index.js. So make sure to update this file if you launch Flask on a different host/port.

Rationale

I've included two endpoints on server/server.py. First one (/zones) serves a list of available timezones as outputted by pytz.common_timezones. Second endpoint (/time-at/<path:zone>) expects a single parameter, which should be an element of the previous list (otherwise a 404 is returned). Note I take advantage of the fact that common_timezones have a path-like syntax (e.g. America/Argentina/Buenos_Aires) by using the path: prefix on the decorator.

A basic Vue project was set up with vue-cli. The important part is the ZonePicker component located in /client/src/components/ZonePicker.vue. After mount, the component fetches a list of timezones, and populates a select element with the returned zones. After the user selects a timezone, the Get time button becomes enabled and we can fetch the current time at that zone.

Form inputs are also disabled while fetching the zones list (right after mount) and while waiting for a requested time (after clicking the button) so that only one request can be done at a time. We can uncomment the time.sleep() statements on the endpoint methods to simulate slow connection speeds, making this effect more noticeable.