/vuestic-postgsail

PostgSail frontend in VueJs with vuestic-ui

Primary LanguageVueMIT LicenseMIT

PostgSail front end.

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

Based on vuestic-admin

release

Getting Started

Cloud development

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

With CodeSandbox

With DevPod

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:
  • 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

Debugger