Due:    see Moodle

Submission:

The work to be submitted for this assignment is direct preparation for Assignment 5, and builds on the practical from Week 8 as well as previous work.

You should make sure you are familiar with the requirements for Assignment 5 before working on this submission.

For this submission, you are required to complete two tasks:

Task 1

Create all the menu items for Assignment 5 – making sure they appear only for the correct screen sizes (responsive mode).

Each menu item should – when clicked – call a function that just pops up an alert message that states “ Functionality to do XXXX” will go here (where XXX is the functionality that you will add for Assignment 5).

Task 2

Prepare the two forms required for Assignment 5, and adapt the work done in the practical to show the forms as follows:

-    The form for a new petrol station should appear when the user clicks on a map in the ‘ Petrol Station’ App.    The coordinates where the user clicks should be automatically inserted into the form

-    The form for Price/Queue information should appear when the user clicks on the Price/Queue App, on any of three  hard-coded  GeoJSON  points that you will create at the following coordinates:

Latitude: 51.500150, Longitude: -0.126240

Latitude: 51.500333, Longitude: -0.127502

Latitude: 51.501075, Longitude: -0.127481

(the map should zoom to these points when the page is loaded)

The points must only appear in Price/Queue mode.

When the user fills in these forms and clicks the SAVE button, the code should send the data to the /testCRUD end point (in the /crud route).   The return message sent from /testCRUD should be popped up as an alert message to the user.

To submit this assignment, you should create a  branch  in  your  GitHub  app  and  api  repository  called assignment4, and make sure that all the code from the practical is complete and contained within this branch.

NB - We are testing both API and APP for this practical so you should have a assignment4 branch in BOTH of these modules

NB:  You may well have extensive JavaScript code in your repository by now, and that is fine (you can leave them in).  However, for this assignment we only want to see pop-up alert messages with the function name when the menu option is selected.

NB:  You should only have index.html as the HTML file.

We will test your assignment as follows (example given for the App):

1.   Clone your assignment4 branch to our test server – we will use a time-stamp to make sure that we clone the repository as it was at the time of submission

git clone https://github.com/ucl-geospatial/cege0043-apps-claireellul.git -b assignment4 git rev-list assignment4 -n 1 --first-parent --before=2021-03-24- 13:01

this gives us the latest commit in that branch before 13:01, which will look something like this:

cd3305328914111672ef4cc6d7ac2ce77e72ee58

git checkout cd3305328914111672ef4cc6d7ac2ce77e72ee58

this takes us to your code at that point in time

2.   For the API, we will run dataAPI.js to start the node server.   Make sure you include this file in the API

3.  We will test the functionality of your API for example by running (see Moodle for the required route name, which may be different from that in the practical)

.. /testCRUD

4.  We will then run the app.js file to start the node server – make sure you have this file included in the branch!

5.  We will then test the functionality of the index.html file  - see marking scheme below o

For this test we will use:

https://<<our server IP address>>/app/index.html

6.  We will then count the number of commits you have made in the repository using methods that may include:

git rev-list --all --count

git shortlog -sne --since=XX-XXX-XXXX –until=XX-XXX-XXXX

(Remember not all commits will count)

7.   For this module, we want to encourage you to work consistently every week.  We can also check the range of dates that you’ve been active – e.g. using

git log

git log --reverse | sed -n -e "3,3p"

git log | sed -n -e "3,3p"