blob: 0306e8291239897949a4f9ac8cf8f86ce6d336c8 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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.
|
