Javascipt Question

You should modify the Main (index) page so that it displays the list of available paths that the user can get navigation for. This list should be generated from the array of Path class instances described above. The list should display the title and a summary (e.g., number of turns and distance) for each path. Clicking on an entry in the list should cause the app to navigate to the Navigation page and provide directions for that Path. Note: You will need to create additional methods of the Path class to compute the total distance and number of turns.

mainPage

'use strict'; // Code for the Main page of the app.

// The following is sample code to demonstrate navigation. // You need not use it for final app.

function viewPath(pathIndex) { // Save the selected path index to local storage so it can be accessed // from the Navigate page. localStorage.setItem(APP_PREFIX + "-selectedPath", pathIndex); // ... and then load the Navigate page. location.href = 'navigate.html'; }

var url = "https://eng1003.monash/api/campusnav/?campus=clayton&callback=getPaths"; var script = document.createElement('script'); script.src = url; document.body.appendChild(script);

/* function getPaths(paths) Creates a string of HTML elements each corresponding to an individual entry in the list of paths available as returned by the campusnav API

argument: paths: List of paths

Preconditions: Campusnav API must have been called Postconditions: HTML list elements are added to the DOM inside of element "pathsList" */ function getPaths(paths){ // Create empty string to append list elements to var path = ""; // For each path in the list, construct a list HTML element for (var i = 0; i < paths.length; i++){ // Add each element to the path string // TODO: change viewPath(0) to be able to access individual path instead of generic path += "

\ \ " + paths[i].title + "\\ Optional extra info\ \

"; savePath(paths, i); } // Add all elements to the DOM at "pathsList" to view document.getElementById("pathsList").innerHTML = path; }

/* function savePath(paths, i) Saves a stringified version of a path to local storage with the name "monash.eng1003.navigationApp-path{i}" where {i} is the index of the path

argument: paths: List of paths to stringify argument: i: Index of the path in the list to use for storage name

Postconditions: New local storage item saved */ function savePath(paths, pathIndex){ // Check if local storage is available if (typeof(Storage) !== "undefined"){ // Stringify path var pathAsJSON = JSON.stringify(paths[pathIndex]); // Set JSON path to local storage localStorage.setItem(APP_PREFIX + "-path" + pathIndex, pathAsJSON); } else{ console.log("localStorage is not supported by current browser."); } }

navigatePage

'use strict'; // Code for the Navigate page.

// Load path selected on home page from local storage var pathIndex = localStorage.getItem(APP_PREFIX + "-selectedPath"); if (pathIndex !== null) { // Parse loaded value at pathIndex from local storage and // set header bar title var pathAsJSON = localStorage.getItem(APP_PREFIX + "-path" + pathIndex); var path = JSON.parse(pathAsJSON); document.getElementById("headerBarTitle").textContent = path.title; }

/* ===================================================================== WAYPOINTS ===================================================================== */ // Begin waypoints at initial index of 0 on page load var nextIndex = 0; var nextWaypoint = path.locations[0];

/* ===================================================================== GEOLOCATION ===================================================================== */

// Variable to store the user's current location as a Google Maps Latlng object var userLocation = undefined;

// Array to store location history var locationHistory = [];

/* geoFind() Alerts the user that their location is not yet reliable and initialises the watching of a user's geolocation. This function will begin the app's GPS location services with callbacks to either geoSuccess or geoError based on the position being watched

preconditions: None postconditions: Begins watching user position, with callbacks to either geoSuccess or geoError as position changes */ function geoFind(){ // Alert the user and begin watching geolocation alert("Finding location, results will not yet be accurate"); var watchID = navigator.geolocation.watchPosition(geoSuccess, geoError); }

/* geoSuccess(position) Stores latitude and longitude into userLocation based on the coordinates received from the geolocation watchPosition. The function takes an argument of position which contains the coordinates, and continuously updates the location of the user since the position is being watched. On the first call of this function, the user will be notified their position has been found, and subsequent calls will be run in the background without notifying the user. The function then calls updateLocationDistances and updateDisplay to continuously update the app when the user moves.

argument: position: position from geolocation that contains coordinates of the user

preconditions: the user's location must have been successfully found postconditions: the user's latitude and longitude will be stored in userLocation updateLocationDistances and updateDisplay will run */ function geoSuccess(position){ // Variable to store latitude and longitude values from geolocation API var location = {lat: position.coords.latitude, lng: position.coords.longitude}; // If first update, alert user results are found and centre map to user if (userLocation === undefined){ userLocation = location; locationHistory.push(location); map.panTo(userLocation); map.setZoom(17); displayMessage("Location and distances found", 3000); } // Otherwise, update in background else{ userLocation = location; locationHistory.push(location); } }

/* geoError(err) Error function for when user location can't be found, or geolocation API returns an error

argument: err: error from watchPosition

preconditions: a geolocation must be attempted to be found postconditions: the user will receive an alert to the geolocation error */ function geoError(err){ alert("No position available"); }

// Begin finding geographical location geoFind();

/* ===================================================================== GOOGLE MAP ===================================================================== */ // Create global map variable var map = null; // Map Initialisation callback. Will be called when Maps API loads. function initMap() { // Initialise map, centred on Melbourne until user is found map = new google.maps.Map(document.getElementById("map"), { center: {lat: -37.8200855, lng: 144.9608045}, zoom: 10 }); }

shared

'use strict'; // Shared code needed by all pages of the app.

// Prefix to use for Local Storage. You may change this. var APP_PREFIX = "monash.eng1003.navigationApp";

// Array of saved Path objects. var availablePaths= new Paths()

function Paths() { var paths=[]; this.addPath= function(path) { paths.push(path); } this.getPaths= function() { return paths; } this.deletePath= function (index) { index=index+1 paths.splice(index-1,1); } this.getPathIndex = function(pathName) { for(var i = 0; i

Utility

'use strict'; // Shared utility code needed by the code of all pages of the app. // The code of this file shouldn't be edited.

// This function displays the given message String as a "toast" message at // the bottom of the screen. It will be displayed for 2 second, or if the // number of milliseconds given by the timeout argument if specified. function displayMessage(message, timeout) { if (timeout === undefined) { // Timeout argument not specifed, use default. timeout = 2000; }

if (typeof(message) == 'number') { // If argument is a number, convert to a string. message = message.toString(); }

if (typeof(message) != 'string') { console.log("displayMessage: Argument is not a string."); return; }

if (message.length == 0) { console.log("displayMessage: Given an empty string."); return; }

var snackbarContainer = document.getElementById('toast'); var data = { message: message, timeout: timeout }; if (snackbarContainer && snackbarContainer.hasOwnProperty("MaterialSnackbar")) { snackbarContainer.MaterialSnackbar.showSnackbar(data); } }