xbgmsharp / vuestic-postgsail

PostgSail frontend in VueJs with vuestic-ui

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

vuestic-postgsail's Issues

Timelapse save as video (captureScreen)

Describe the feature

Save timelapse replay to video.

We could use:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream
https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder

Search options should use less space (particularly on mobile)

Describe the improvement
Search (filter) on top of the list uses quite some space, particularly on mobile:

Suggested behavior

• remove headers as they just duplicate information
• use icon on the left of entry field to make it clear what is the purpose
• use shaded/grayed-out text in field to describe what can be entered in the field
• use X icon on the right of the field to clear it (instead of Reset button)
• move export option after the list (in footer) as it is rarely used (particularly on mobile)

Add component radar charts

Add component radar charts.
https://www.chartjs.org/docs/latest/charts/radar.html

Add meteo page

Add meteo page

Moorages: map display in table view does not make sense

Describe the improvement
Currently we display Moorages with the map, search bar and table view.

I think that map on this display does not make a lot of sense, as we have dedicated Map option in menu:

Suggested behavior
Remove the map from Moorages and just leave it in Map. That way it would improve readability on small devices (phones).

Refactor badges in GlobalStore

Refactor badges in GlobalStore.
To allow badges listing in stats page.

Add Import/Export log

Describe the bug
Not a bug.
Would be nice to be able to import old log...

Add component gauge charts

Add component gauge charts
https://www.chartjs.org/Chart.LinearGauge.js/example
As in One more point indicator type

Refactor moment_locale in GlobalStore

Refactor moment_locale in GlobalStore.
To avoid duplicated code in Dashboard.vue and Monitoring.vue

Add component polar diagram charts

https://en.wikipedia.org/wiki/Polar_diagram_%28sailing%29
https://jieter.github.io/orc-data/site/

Default timeline distance unit should NM

Default timeline unit should NM

Logs: table view - sort by Distance or Duration does not work

Describe the bug
In table view of Logs, if you sort by Distance or Duration column it will not sort correctly, is it sorts strings and not numerical values.

Expected behavior
Sort should work with numbers and not strings.

Should we also move the unit from each row and just put it in column name, like this:

• Distance [NM]
• Duration [h]
  That way we would have simple numerical value in the table below and could also align it on decimal point to improve readability.

Fix map zoom level for log details

Fix map zoom level for log details.

Refactor export function

Export to CSV is working, but need to update GPX (XML) handle and Geojson.
Geojosn should be without external http query.

Logs navigation vs. Moorages navigation

Describe the improvement
Currently, Moorages have three submenu entries:

On the other hand, Logs does not have menu items, but have three views listed as tabs:

Suggested behavior
Would it make sense to also switch to sub-menus for Logs?

Maybe Logs sub/menu items could be:

• Cards
• Logs
• Map

Add component polarArea charts

Add component polarArea charts for stats page.
https://www.chartjs.org/docs/latest/charts/polar.html

Fix store sync issue

After updating a notes, the local store does not reflect the change.

Add date filter on Stats page

Add date filter on Stats page

Add data formatting on LeafletMap page

Add data formatting on LeafletMap page

Refactor stayed_at_options GlobalStore

Refactor stayed_at_options GlobalStore
To avoid code duplication

Add data formatting on Stats page

Add data formatting on Stats page

Submenu dark theme not working correctly in minimal sidebar view

Describe the bug
The submenu;s do not work in the dark theme when the side bar is set to minimal.

See screenshot for details

To Reproduce
1 Set theme to dark
2 Open submenu item "Moorages , Monitoring , Timelaps or Help"

Expected behavior
expected behavoir would be the submenu's have the dark theme and not the light theme.

Screenshots

Desktop (please complete the following information):

• Windows 11
• Chrome
• 120.0.6099.225

Additional context
Add any other context about the problem here.