diff options
| -rw-r--r-- | README.md | 47 | ||||
| -rw-r--r-- | server/server.py | 5 |
2 files changed, 52 insertions, 0 deletions
diff --git a/README.md b/README.md new file mode 100644 index 0000000..0306e82 --- /dev/null +++ b/README.md @@ -0,0 +1,47 @@ +# 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): +```console +virtualenv venv +source venv/bin/activate +pip install -r requirements.txt +``` + +To run the dev server, launch Flask as such: +```console +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. diff --git a/server/server.py b/server/server.py index f1ddaa9..ca28d51 100644 --- a/server/server.py +++ b/server/server.py @@ -1,3 +1,5 @@ +import time + from datetime import datetime from flask import abort, Flask, jsonify from flask_cors import CORS @@ -11,12 +13,15 @@ CORS(app) @app.route('/zones/', methods=['GET']) def zones(): """ Return a list of common timezones """ + # time.sleep(5) # Simulate slow connection return jsonify(common_timezones) @app.route('/time-at/<path:zone>', methods=['GET']) def time_at(zone): """ Return current time at given timezone """ + # time.sleep(5) # Simulate slow connection + if zone not in common_timezones: abort(404) |