PostgSail front end.

PostgSail front end JavaScript using framework Vue.js, Vitejs with vuestic-ui and more.

Based on vuestic-admin

Getting Started

Cloud development

A full-featured development environment ready to test and code.

With CodeSandbox

• Develop on
  • or via direct link

With DevPod

• 
  • or via direct link

Setup

# npm install

# cp .env.example .env

# nano .env

# npm run dev -- --host 0.0.0.0 --port 8080

# npm run build

Todo

• Layout
  • Update theme icon to night/day mode theme
  • Update theme icon to day and night vision
• Logs:
  • Add Action '...' column with sub menu to export to CSV, GPX
  • Add button with icon to export to CSV to log list page
• Log:
  • Add trash and save icon to log details page next to text
  • Add button with icon to export to CVS to log details page
  • Add button with icon to export to GPX to log details page
  • Add button with icon to export to KML to log details page
  • Add button with icon to export to GeoJSON to log details page
• Add Profile/Settings page
  • require backend update
• Add new vessel page
  • require backend update
• Add Stays page
  • require backend update
• Add Moorages page
  • require backend update
• Add Map page
  • require backend update
• Add Monitoring page
  • require backend update
• Menu icon
  • boats - icon basic sailboat
  • moorages - icon anchor
  • stays - icon alone
  • logs - icon logbook
  • privacy -
  • faq -
  • monitoring -
  • observability - icon grafana
  • badges - icon
  • map - icon
• Security
  • Implement refresh token
    • require backend update
  • Add external authentication
    • require backend update
  • Add public anonymous access for sharing
    • require backend update
• Login
  • Create /activate page for OTP validation
  • Force email validation via One Time code on login
    • require backend update
• Singup
  • Create /activate page for OTP validation
  • Force email validation via One Time code on Signup
    • require backend update
• Implement notifications Pushover, Telegram
  • require backend update
• Add Activity page
  • timeline (event log) - of events, history of notifications
  • require backend update
• Vessels:
  • Update last_contact text to a human readable string, "Waiting/Pending for vessel connection"
  • Disable boat details page when missing lat_contact null
  • Add link to https://www.vesselfinder.com/
  • Add link to https://www.marinevesseltraffic.com/
  • Add vessel type or even all vessel metadata
    • require backend update
• Add Terms of Use page
• Update translation
• Fix English
• Add telegram bot in the main menu page with QR Code, needed?
  • Account verification
    • require backend update OTP
• Sample data in build
  • include in dev
  • exclude in prod
• Settings
  • Update parameters
  • PushOver Web-Based Subscription Process
    • Subscription URL format
    • require backend update OTP
  • Telegram bot link
• Boats icons base on vessel type
  • powerboaticon.png vs sailboaticon.png
  • require backend update
• Timelapse
  • Log Geojson replay functionality
  • Generic Geojson replay functionality base on date or multiple logbook
  • require backend update
• Loading screen
  • Display an animated gif while loading content, before vite mount.
  • page loadingScreen

Core

• Use vuejs/pinia store to access API instead of by components
  • Offline mode store all API data in browser local storage
    • Refresh if data is older than 10min old
    • Fallback to local storage is no internet
  • Implement global store username, token, cache: logs, moorages, stays
    • Implement offline mode
  • Add env to include demo data
    • load demo data in dev and env if error? or if no data?

Pages:

• /, Home, Dashboard
  • Widget - Current Boats position map
  • Widget Total of Logs, Stays, Moorage,
  • Widget Weather Forecast
  • Widget Energy
  • Widget ?!?
• /logs/, Logs
  • Table layout from api view, filter and sort
  • Filter on log type, date range, name
• /log/:id
  • Map layout from api
  • Table layout from api
  • Edit notes and name
  • Link to timelapse
• /moorages, Moorages
  • Map layout from api
  • Table layout from api view, filter and sort
  • Filter on moorage type, name
• /moorage/:id
  • Map layout from api
  • Table layout from api,
  • Edit notes and name and Stayed at (select)
• /stays, stays
  • Table layout from api view, filter and sort
  • Filter on stay date range, name
• /stay/:id
  • Map layout from api
  • Table layout from api
  • Edit notes and name and Stayed at (select)
• /map, Map
  • Same as Moorage Map layout from api
    • Link to /moorages/map/
• /boats, Boats
  • Table layout editable?
  • Add geojson we properties and popupcontent
  • Satellite view
• /timelapse, Timelapse
  • Map layout from api
• /stats, Stats/Dashboard
  • Cards layout
  • Editable date value range
  • Add Pie boat usage %
  • Add Polar stay type %
• /monitoring, Monitoring
  • Steering layout from api? todo
• /signup, Sign up
  • Form layout register from api
• /signin, Sign in
  • Form layout login from api
• /settings, User settings
  • Table & Form layout from api
• /badges, User badges
  • Table from api
• /faq, FAQ
  • Add translation
• /privacy, Privacy
  • Add translation
• /grafana, external link, open a new window/tab
• windy,external link, open a new window/tab
• /eventlogs, Event Logs
  • Table from api
  • Display as a timeline?
• /alarmlogs, Alarm Logs
  • Table from api
  • Display as a timeline?

Dependencies

• Remove axios dependency in favor of nodejs fetch
• Update to the latest version vuestic-ui and tailwindcss (css issue on profile page)
• Update to the latest version chart.js and vue-chart.js
• Update to the latest version vue-i18n
• Update to the latest version vitejs and plugins
• Remove medium-editor dependency
• Remove amcharts dependency
• Update date formatting as moment is deprecated, use date-fns?
• Update graph using echarts.

Icons/SVG

• https://fonts.google.com/icons?icon.set=Material+Icons
• https://www.svgrepo.com/
• https://fontawesome.com/

Debugger

• JSON Web Tokens, https://jwt.io/
• GeoJSON, https://geojson.io/
• GeoJSONLint, https://geojsonlint.com/
• Nominatim, https://nominatim.openstreetmap.org/ui/reverse.html
• A web-based data filtering tool for OpenStreetMap, https://overpass-turbo.eu
• GPX validation, https://opencpn.org/OpenCPN/info/gpxvalidation.html
• KML, https://developers.google.com/kml/documentation/kml_tut