Frontend: Implementation

Table of Contents

• Overview
• Layout
• Dependencies
• Control flow

Overview

The frontend is organized in the following way:

• index.html - The webpage of the frontend
• img - Image resources used on the webpage
• stylesheets
  • main.css - The main stylesheet to include, it imports all other stylesheets
  • libs - External stylesheets
  • includes
    • base.css - Base style of all sites
    • layout.css - Layout of the site, positions containers by their ID
    • modules.css - Styling of classes that can be applied to elements
    • states.css - Styling of temporary states of elements that can be enabled and disabled
    • theme.css - The default theme, the user may exchanged it by custom themes
• scripts
  • libs - External scripts
  • config.js - Configuration of all site functionality
  • main.js - Main handling of all site functionality, as well as communication with REST API server
  • handler.js - Methods that are used as callbacks for certain UI actions
  • parser.js - Methods that parse information out of the site
  • util.js - Utility methods

Layout

The site layout is as follows:

• driv.fullWrapper
  • div#sideContainer
    • div#logoPanel
    • div#requestPanel
      • input#from
      • input#to
      • input#departureDate
      • input#departureTime
      • div#transportationModePane
      • div#planRoutePane
    • div#miscInfoPanel
  • div#mapContainer

Dependencies

The site has dependencies on the following libraries:

• jquery-3.3.1.min.js - For convenient usage of JS, see jQuery
• jquery-ui.min.js - For various interfaces like auto-complete and date-picker, see jQuery UI
• jquery-deparam.js - To handle site hashes, see jquery-deparam
• jquery.timepicker.min.js - Interface for selecting times, see jQuery Timepicker
• leaflet.js - To display the map, see Leaflet
• leaflet.contextmenu.min.js - Provides a right-click context-menu for the map, see Leaflet.contextmenu

Control flow

The main.js script starts by calling init() which consists of initUi() and initMap(). The methods add the corresponding handler functions to interface actions. If the site URL has a hash it will parse it and try to send a routing request using planRouteFromHashHandler().

The methods planRouteHandler() and planRouteFromHashHandler() trigger a routing request after collecting relevant data and constructing the request. The former is tied to the button on the user interface.

Analogously nameSearchHandler() triggers a name search request, it is tied to the auto-complete dropdown-box.

Likewise fromHereHandler(e) and toHereHandler(e) trigger a nearest search request, they are tied to the right-click context-menu of the map.

Functions sendRouteRequestToServer(request), sendNameSearchRequestToServer(request, inputId) and sendNearestSearchRequestToServer(request, inputId) do the actual communication with the REST API. The response is forwarded to handleRouteServerResponse(response), handleNameSearchServerResponse(response, inputId) and handleNearestSearchServerResponse(response, inputId).