Question Hey there! I’m trying to create a mobile using HTML and JSON. Any help would be much appreceiated. A REST API has been prepared to facilitate the management of MegaMax Sales, so that you do not have to worry about the storage of data. What you need to do is to make use of the API to implement the required functional requirements. Need to make a JSON file that uses the HTML provided to complete the FR's The Functional Requirements (FR) for this app are as follows: FR1 The app should make an order as if the salesperson is at a client site with a valid OUCU and password for the salesperson and the client id: FR1.1 Validating the OUCU starts with a letter and ends with a number. FR1.2 Navigating the widgets catalogue (with Previous and Next buttons) and display of widget images, in addition to the description and asking price. FR1.3 Adding the currently displayed widget to the order items, including the amount and the agreed price. FR1.4 Displaying the sum of ordered items including VAT at a rate of 20%. FR1.5 The order is saved to the web service. FR2 For the salesperson to review their performance: FR2.1 Displaying a Map for the area around the current location of the salesperson when placing or viewing an order. FR2.2 When clicking on Begin Order to start an empty order, displaying the orders along the day’s journey with markers, where the location of clients’ addresses is used to place the marker. HTML Code Below: <html> <head> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <meta http-equiv="Content-Security-Policy" content=""> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/> <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" charset="utf-8"></script> <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" charset="utf-8"></script> <script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" /> <script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script> <title>MegaMax Sale</title> </head> <body> <div class="app"> <h1>MegaMax Sale</h1> <div> <!-- Question 1 --> <label>ID:</label> <input type="text" name="id"> <label>Password:</label> <input type="text" name="password"> <br> <label>Client:</label> <input type="number" name="client"> <button type="button" onclick="controller.beginorder()">Begin Order</button> <br> </div> <div> <!-- Question 2. Widget navigation buttons --> <button type="previous" onclick="controller.previous()">Previous</button> <button type="button" onclick="controller.next()">Next</button> <label>Number:</label> <input type="number" name="number"> </div> <div> <!-- Question 3. Widget display--> <label>Price:</label> <input type="decimal" name=""> <br> </div> <div> <!-- Question 4. Order navigation buttons and display --> <button type="button" onclick="controller.add()">Add to Order</button> <button type="button" onclick="controller.end()">End Order</button> </div> <!-- Question 5. Map canvas --> </div> <div id="mapContainer" style="height: 70vh; width: auto"></div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/helpers.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html> JSON Below:(SOME CODE MAY BE WRONG!!!) // Execute in strict mode to prevent some common mistakes "use strict"; // Declare a MegaMax object for use by the HTML view var controller; document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { console.log("Running cordova-" + cordova.platformId + "@" + cordova.version); // Create the MegaMax object for use by the HTML view controller = new MegaMax(); } // JavaScript "class" containing the model, providing controller "methods" for the HTML view function MegaMax() { console.log("Creating controller/model"); // PRIVATE VARIABLES AND FUNCTIONS - available only to code inside the controller/model // Note these are declared as function functionName() { ... } var BASE_GET_URL = "http://137.108.92.9/openstack/api/"; var BASE_URL = BASE_GET_URL; // NOTE CORS: if you get a CORS error we may recommend you insert code at this point. // Initialize the platform object: var platform = new H.service.Platform({ // TODO: Change to your own API key or map will NOT work! apikey: "IEFXS00bdXxCLmEN6DM_kvlpseufqALIEysuD_9KHzQ", }); // Obtain the default map types from the platform object: var defaultLayers = platform.createDefaultLayers(); // Instantiate (and display) a map object: var map = new H.Map( document.getElementById("mapContainer"), defaultLayers.vector.normal.map, { zoom: 15, center: { lat: 52.5, lng: 13.4 }, } ); // Create the default UI: var ui = H.ui.UI.createDefault(map, defaultLayers); var mapSettings = ui.getControl("mapsettings"); var zoom = ui.getControl("zoom"); var scalebar = ui.getControl("scalebar"); mapSettings.setAlignment("top-left"); zoom.setAlignment("top-left"); scalebar.setAlignment("top-left"); // Enable the event system on the map instance: var mapEvents = new H.mapevents.MapEvents(map); // Instantiate the default behavior, providing the mapEvents object: new H.mapevents.Behavior(mapEvents); var markers = []; // array of markers that have been added to the map // Clear any markers added to the map (if added to the markers array) function clearMarkersFromMap() { // This is implemented for you and no further work is needed on it markers.forEach(function (marker) { if (marker) { map.removeObject(marker); } }); markers = []; } // Obtain the device location and centre the map function centreMap() { // This is implemented for you and no further work is needed on it function onSuccess(position) { console.log("Obtained position", position); var point = { lng: position.coords.longitude, lat: position.coords.latitude, }; map.setCenter(point); } function onError(error) { console.error("Error calling getCurrentPosition", error); // Inform the user that an error occurred alert("Error obtaining location, please try again."); } // Note: This can take some time to callback or may never callback, // if permissions are not set correctly on the phone/emulator/browser navigator.geolocation.getCurrentPosition(onSuccess, onError, { enableHighAccuracy: true, }); } RESTful services (responses are in JSON format) Service endpoints and example responses GET POST DELETE http://137.108.92.9/ openstack/ api/ widgets?OUCU=user1&password=password {"status" : "success", "data" : [{"id":"1","url":"http:\/\/137.108.92.9\/openstack\/images\/widget1.jpg","pence_price":"10","description":"Brass, self tapping wood screw, 20mm"},{"id":"2","url":"http:\/\/137.108.92.9\/openstack\/images\/widget2.jpg","pence_price":"12","description":"Coach Screw 10 x 50mm"},{"id":"3","url":"http:\/\/137.108.92.9\/openstack\/images\/widget3.jpg","pence_price":"13","description":"Rawwlplug LX Masonry Bolts 12x140mm"},{"id":"4","url":"http:\/\/137.108.92.9\/openstack\/images\/widget4.jpg","pence_price":"8","description":"Marine Eye Bolt 6 x 40mm"},{"id":"5","url":"http:\/\/137.108.92.9\/openstack\/images\/widget5.jpg","pence_price":"6","description":"Exterior Coach Screw Organic Green M10 x 160mm"},{"id":"6","url":"http:\/\/137.108.92.9\/openstack\/images\/widget6.jpg","pence_price":"14","description":"Marine Eye Bolt 8 x 100mm"},{"id":"7","url":"http:\/\/137.108.92.9\/openstack\/images\/widget7.jpg","pence_price":"12","description":"Socket Button Screw A2 stainless Steel M6 x 20mm"},{"id":"8","url":"http:\/\/137.108.92.9\/openstack\/images\/widget8.jpg","pence_price":"5","description":"Roofing Bolt Bright Zinc-Plated M6 x 30mm"},{"id":"9","url":"http:\/\/137.108.92.9\/openstack\/images\/widget9.jpg","pence_price":"9","description":"Zinc-Plated High Tensile Steel Hex Bolt M10 x 120mm"},{"id":"10","url":"http:\/\/137.108.92.9\/openstack\/images\/widget10.jpg","pence_price":"12","description":"Concrete Bolt 10 x 100mm"}] } {"status" : "error", "message" : " 401 - invalid username or password"} On "success", returns the widget id, image url, price and description; otherwise returns "error". N/A N/A http://137.108.92.9/ openstack/ api/ orders?OUCU=user1&password=password {"status" : "success", "data" : [{"id":"6", "client_id":"2", "date":"2017-01-05T00:00:00", "latitude":"99.00000000", "longitude":0}, {"id":"8", "client_id":"1", "date":"0000-00-00T00:00:00", "latitude":0, "longitude":"-20.00000000"}] } {"status" : "fail", "data" : [{"reason":"No matching records"}] } MegaMax Sale ID: PASS: Client: 1 Begin Order Prev Widget Next Next Number 1 Brass, self tapping wood screw, 20mm Agreed Price 0.1 Dear Costco Wholesale UK Ltd., Your order at Mandeville Dr, Milton Keynes MK10 ODB ass, self tapping wood screw, 20mm (1) Subtotal: VAT: Total is: + (2) (3) Add to Order | End Order (4) on 2021-10-17 14:08:09 0.10 0.10 GBP 0.02 GBP 0.12 GBP 200 m •(1) (5)

7ONFNN The Asker · Computer Science

Hey there! I’m trying to create a mobile using HTML and JSON. Any help would be much appreceiated.

A REST API has been prepared to facilitate the management of MegaMax Sales, so that you do not have to worry about the storage of data. What you need to do is to make use of the API to implement the required functional requirements.

Need to make a JSON file that uses the HTML provided to complete the FR's

The Functional Requirements (FR) for this app are as follows:

FR1 The app should make an order as if the salesperson is at a client site with a valid OUCU and password for the salesperson and the client id:

FR1.1 Validating the OUCU starts with a letter and ends with a number.

FR1.2 Navigating the widgets catalogue (with Previous and Next buttons) and display of widget images, in addition to the description and asking price.

FR1.3 Adding the currently displayed widget to the order items, including the amount and the agreed price.

FR1.4 Displaying the sum of ordered items including VAT at a rate of 20%.

FR1.5 The order is saved to the web service.

FR2 For the salesperson to review their performance:

FR2.1 Displaying a Map for the area around the current location of the salesperson when placing or viewing an order.

FR2.2 When clicking on Begin Order to start an empty order, displaying the orders along the day’s journey with markers, where the location of clients’ addresses is used to place the marker.

HTML Code Below:

<html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<meta http-equiv="Content-Security-Policy" content="">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<title>MegaMax Sale</title>
</head>
<body>
<div class="app">
<h1>MegaMax Sale</h1>
<div>
<!-- Question 1 -->
<label>ID:</label>
<input type="text" name="id">
<label>Password:</label>
<input type="text" name="password">
<br>
<label>Client:</label>
<input type="number" name="client">
<button type="button" onclick="controller.beginorder()">Begin Order</button>
<br>
</div>
<div>
<!-- Question 2. Widget navigation buttons -->
<button type="previous" onclick="controller.previous()">Previous</button>
<button type="button" onclick="controller.next()">Next</button>
<label>Number:</label>
<input type="number" name="number">
</div>
<div>
<!-- Question 3. Widget display-->
<label>Price:</label>
<input type="decimal" name="">
<br>
</div>
<div>
<!-- Question 4. Order navigation buttons and display -->
<button type="button" onclick="controller.add()">Add to Order</button>
<button type="button" onclick="controller.end()">End Order</button>

</div>
<!-- Question 5. Map canvas -->
</div>
<div id="mapContainer" style="height: 70vh; width: auto"></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/helpers.js"></script>

<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

JSON Below:(SOME CODE MAY BE WRONG!!!)

// Execute in strict mode to prevent some common mistakes
"use strict";

// Declare a MegaMax object for use by the HTML view
var controller;

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
console.log("Running cordova-" + cordova.platformId + "@" + cordova.version);
// Create the MegaMax object for use by the HTML view
controller = new MegaMax();
}

// JavaScript "class" containing the model, providing controller "methods" for the HTML view
function MegaMax() {
console.log("Creating controller/model");

// PRIVATE VARIABLES AND FUNCTIONS - available only to code inside the controller/model
// Note these are declared as function functionName() { ... }
var BASE_GET_URL = "http://137.108.92.9/openstack/api/";
var BASE_URL = BASE_GET_URL;
// NOTE CORS: if you get a CORS error we may recommend you insert code at this point.

// Initialize the platform object:
var platform = new H.service.Platform({
// TODO: Change to your own API key or map will NOT work!
apikey: "IEFXS00bdXxCLmEN6DM_kvlpseufqALIEysuD_9KHzQ",
});
// Obtain the default map types from the platform object:
var defaultLayers = platform.createDefaultLayers();
// Instantiate (and display) a map object:
var map = new H.Map(
document.getElementById("mapContainer"),
defaultLayers.vector.normal.map,
{
zoom: 15,
center: { lat: 52.5, lng: 13.4 },
}
);

// Create the default UI:
var ui = H.ui.UI.createDefault(map, defaultLayers);
var mapSettings = ui.getControl("mapsettings");
var zoom = ui.getControl("zoom");
var scalebar = ui.getControl("scalebar");
mapSettings.setAlignment("top-left");
zoom.setAlignment("top-left");
scalebar.setAlignment("top-left");
// Enable the event system on the map instance:
var mapEvents = new H.mapevents.MapEvents(map);
// Instantiate the default behavior, providing the mapEvents object:
new H.mapevents.Behavior(mapEvents);

var markers = []; // array of markers that have been added to the map


// Clear any markers added to the map (if added to the markers array)
function clearMarkersFromMap() {
// This is implemented for you and no further work is needed on it
markers.forEach(function (marker) {
if (marker) {
map.removeObject(marker);
}
});
markers = [];
}

// Obtain the device location and centre the map
function centreMap() {
// This is implemented for you and no further work is needed on it

function onSuccess(position) {
console.log("Obtained position", position);
var point = {
lng: position.coords.longitude,
lat: position.coords.latitude,
};
map.setCenter(point);
}

function onError(error) {
console.error("Error calling getCurrentPosition", error);

// Inform the user that an error occurred
alert("Error obtaining location, please try again.");
}

// Note: This can take some time to callback or may never callback,
// if permissions are not set correctly on the phone/emulator/browser
navigator.geolocation.getCurrentPosition(onSuccess, onError, {
enableHighAccuracy: true,
});
}

RESTful services (responses are in JSON format)
Service endpoints and example responses GET POST DELETE

http://137.108.92.9/ openstack/ api/ widgets?OUCU=user1&password=password

{"status" : "success", "data" : [{"id":"1","url":"http:\/\/137.108.92.9\/openstack\/images\/widget1.jpg","pence_price":"10","description":"Brass, self tapping wood screw, 20mm"},{"id":"2","url":"http:\/\/137.108.92.9\/openstack\/images\/widget2.jpg","pence_price":"12","description":"Coach Screw 10 x 50mm"},{"id":"3","url":"http:\/\/137.108.92.9\/openstack\/images\/widget3.jpg","pence_price":"13","description":"Rawwlplug LX Masonry Bolts 12x140mm"},{"id":"4","url":"http:\/\/137.108.92.9\/openstack\/images\/widget4.jpg","pence_price":"8","description":"Marine Eye Bolt 6 x 40mm"},{"id":"5","url":"http:\/\/137.108.92.9\/openstack\/images\/widget5.jpg","pence_price":"6","description":"Exterior Coach Screw Organic Green M10 x 160mm"},{"id":"6","url":"http:\/\/137.108.92.9\/openstack\/images\/widget6.jpg","pence_price":"14","description":"Marine Eye Bolt 8 x 100mm"},{"id":"7","url":"http:\/\/137.108.92.9\/openstack\/images\/widget7.jpg","pence_price":"12","description":"Socket Button Screw A2 stainless Steel M6 x 20mm"},{"id":"8","url":"http:\/\/137.108.92.9\/openstack\/images\/widget8.jpg","pence_price":"5","description":"Roofing Bolt Bright Zinc-Plated M6 x 30mm"},{"id":"9","url":"http:\/\/137.108.92.9\/openstack\/images\/widget9.jpg","pence_price":"9","description":"Zinc-Plated High Tensile Steel Hex Bolt M10 x 120mm"},{"id":"10","url":"http:\/\/137.108.92.9\/openstack\/images\/widget10.jpg","pence_price":"12","description":"Concrete Bolt 10 x 100mm"}] }

{"status" : "error", "message" : " 401 - invalid username or password"}

On "success", returns the widget id, image url, price and description; otherwise returns "error".

N/A

N/A

http://137.108.92.9/ openstack/ api/ orders?OUCU=user1&password=password

{"status" : "success", "data" : [{"id":"6", "client_id":"2", "date":"2017-01-05T00:00:00", "latitude":"99.00000000", "longitude":0}, {"id":"8", "client_id":"1", "date":"0000-00-00T00:00:00", "latitude":0, "longitude":"-20.00000000"}] }

{"status" : "fail", "data" : [{"reason":"No matching records"}] }

Transcribed Image Text: MegaMax Sale ID: PASS: Client: 1 Begin Order Prev Widget Next Next Number 1 Brass, self tapping wood screw, 20mm Agreed Price 0.1 Dear Costco Wholesale UK Ltd., Your order at Mandeville Dr, Milton Keynes MK10 ODB ass, self tapping wood screw, 20mm (1) Subtotal: VAT: Total is: + (2) (3) Add to Order | End Order (4) on 2021-10-17 14:08:09 0.10 0.10 GBP 0.02 GBP 0.12 GBP 200 m •(1) (5)
More
Transcribed Image Text: MegaMax Sale ID: PASS: Client: 1 Begin Order Prev Widget Next Next Number 1 Brass, self tapping wood screw, 20mm Agreed Price 0.1 Dear Costco Wholesale UK Ltd., Your order at Mandeville Dr, Milton Keynes MK10 ODB ass, self tapping wood screw, 20mm (1) Subtotal: VAT: Total is: + (2) (3) Add to Order | End Order (4) on 2021-10-17 14:08:09 0.10 0.10 GBP 0.02 GBP 0.12 GBP 200 m •(1) (5)