TravelTip

The app that gets you somewhere

Description

TravelTip is an app that keeps a list of favorite locations

Main Features

• The app allows the user to keep and manage locations
• The user can also search for an address and pan the map to that point
• The User can pan the map to his own geo-location

Locations CRUDL

• Create – click on the map prompts for name and rate
• Read – Selected location details (see below)
• Update – can update location rate
• Delete – can delete a location
• List - Including filtering, sorting and grouping

Selected Location

• Displayed in the header
• Location is active in the list (gold color)
• Marker on the map
• Reflected in query params
• Copy url to clipboard
• Share via Web-Share API

Location

Here is the format of the location object:

{
    id: 'GEouN',
    name: 'Dahab, Egypt',
    rate: 5,
    geo: {
      address: 'Dahab, South Sinai, Egypt',
      lat: 28.5096676,
      lng: 34.5165187,
      zoom: 11
    },
    createdAt: 1706562160181,
    updatedAt: 1706562160181
  }

Services

export const locService = {
    query,
    getById,
    remove,
    save,
    setFilterBy,
    setSortBy,
    getLocCountByRateMap
}

export const mapService = {
    initMap,
    getPosition,
    setMarker,
    panTo,
    lookupAddressGeo,
    addClickListener
}

Controller

// To make things easier in this project structure 
// functions that are called from DOM are defined on a global app object

window.app = {
    onRemoveLoc,
    onUpdateLoc,
    onSelectLoc,
    onPanToUserPos,
    onSearchAddress,
    onCopyLoc,
    onShareLoc,
    onSetSortBy,
    onSetFilterBy
    onCloseLocationModal,  // New
    onToggleTheme         // New
}

Here is a sample usage:

<button onclick="app.onCopyLoc()">Copy location</button>
<button onclick="app.onShareLoc()">Share location</button>

Project Structure

css/ ├── base/ │ ├── vars.css # CSS variables for theming │ └── base.css # Base styles ├── cmps/ │ ├── locs.css # Location components and modal styles │ ├── selected-loc.css │ └── user-msg.css └── main.css js/ ├── services/ │ ├── loc.service.js # Location data management │ ├── map.service.js # Google Maps integration │ ├── util.service.js # Utility functions │ └── async-storage.service.js # Local storage wrapper └── app.controller.js # Main app controller

Advanced Features

• Theme Toggle: Switch between light and dark color themes
• Location Modal: Modern modal interface for adding/editing locations
• Distance Calculation: Shows distance from user's current position
• Statistics Dashboard: Visual pie chart showing location ratings distribution