Views

Home view

General text

Accessibility

Design decisions

Address view

Address view shows data divided into 2 sections with tabs.

• Services for current address which shows most integral services (like schools, hospital etc) for people living in this address.
• Close-by - which shows a list of all units close to current address

Accessibility

We are using tabs to divide information to give best browsing experience for screen readers.

Design decisions

• Area tab will be moved to it's own view and address view will offer a link to it
• Add most common services tab for address view similar to old UI version

Map view

Mobile map view

Search view

Service view

Sidebar

Unit view

Unit view lists the following details of a unit:

• Image
• Highlights
• Contact information
  • Address
  • Opening hours
  • Phone numbers
  • Contact persons
• E-services
• Unit description
• Service categories

Functions

componentDidMount:

• If there is no complete unit information, this will use redux function fetchSelectedUnit to fetch the complete unit information

componentDidUpdate

• Once unit information is received, this will use the centerMap function to focus the map on the unit

componentWillUnmount

• This calls the redux function changeSelectedUnit with parameter null to remove the current value of the redux state selected unit

centerMap

• Calls the focusUnit function of map to zoom into the selected unit

sectionFilter

• This filters through the unit's connections data, which contains data such as the contact information of the unit. It receives the type of the connection (address, phone, connection...) and returns all values with the given type from the connections data object. The data is returned as object of type: {type, value, id}.