Skip to content

Commit

Permalink
Merge branch 'live' of https://github.com/xbgmsharp/vuestic-postgsail …
Browse files Browse the repository at this point in the history 
…into live
  • Loading branch information
@lukarenko
lukarenko committed Jan 9, 2025
2 parents 7b24588 + 85518ee commit 89726c7
Show file tree
Hide file tree
Showing 8 changed files with 2,453 additions and 2,137 deletions.
4,075 changes: 2,081 additions & 1,994 deletions package-lock.json
View file

Large diffs are not rendered by default.

7 changes: 3 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,7 @@
"@deck.gl/mapbox": "^9.0.38",
"@fortawesome/fontawesome-free": "^6.6.0",
"@gtm-support/vue-gtm": "^2.1.0",
"@rollup/plugin-node-resolve": "^15.3.0",
"@turf/turf": "^7.1.0",
"@turf/turf": "^7.2.0",
"@vueuse/core": "^11.3.0",
"chart.js": "^4.4.7",
"chartjs-chart-matrix": "^2.0.1",
Expand All @@ -52,7 +51,7 @@
"d3-transition": "^3.0.1",
"date-fns": "^2.29.2",
"deck.gl-leaflet": "^1.3.1",
"echarts": "^5.5.1",
"echarts": "^5.6.0",
"eslint-config-prettier": "^9.1.0",
"flag-icons": "^6.10.0",
"keycloak-js": "^23.0.4",
Expand Down Expand Up @@ -87,7 +86,7 @@
"@vue/eslint-config-prettier": "^7.0.0",
"@vue/eslint-config-typescript": "^10.0.0",
"autoprefixer": "^10.4.20",
"cypress": "^13.16.1",
"cypress": "^13.17.0",
"cypress-image-diff-js": "^1.27.3",
"eslint": "^8.57.1",
"eslint-plugin-prettier": "^4.0.0",
Expand Down
39 changes: 27 additions & 12 deletions src/components/maps/leafletMap.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,10 @@

<script>
import 'leaflet/dist/leaflet.css'
import './leaflet-sidepanel.css'
import 'leaflet.sidepanel/dist/style.css'
import L from 'leaflet'
import 'leaflet-rotatedmarker'
import './leaflet-sidepanel.min.js'
import 'leaflet.sidepanel'
import { ref } from 'vue'
Expand Down Expand Up @@ -138,11 +138,11 @@
if (this.geoJsonFeatures && this.geoJsonFeatures.length > 0) {
const midPoint = Math.round(this.geoJsonFeatures.length / 2)
console.debug('leght,midPoint', `${this.geoJsonFeatures.length} ${midPoint}`)
console.debug('length,midPoint', `${this.geoJsonFeatures.length} ${midPoint}`)
console.debug('geoJsonFeatures', this.geoJsonFeatures)
if (this.multigeojson) {
centerLat = parseFloat(this.geoJsonFeatures[midPoint].track_geojson.features[0].geometry.coordinates[1])
centerLng = parseFloat(this.geoJsonFeatures[midPoint].track_geojson.features[0].geometry.coordinates[0])
centerLat = parseFloat(this.geoJsonFeatures[midPoint].geojson.features[0].geometry.coordinates[1])
centerLng = parseFloat(this.geoJsonFeatures[midPoint].geojson.features[0].geometry.coordinates[0])
} else {
centerLat = this.geoJsonFeatures[midPoint].geometry.coordinates[1]
centerLng = this.geoJsonFeatures[midPoint].geometry.coordinates[0]
Expand All @@ -163,8 +163,8 @@
let twd = angleFormat(feature.properties.truewinddirection)
let aws = speedFormatKnots(feature.properties.windspeedapparent)
let awa = awaFormat(feature.properties.truewinddirection, feature.properties.courseovergroundtrue)
let latitude = parseFloat(feature.properties.latitude).toFixed(3)
let longitude = parseFloat(feature.properties.longitude).toFixed(3)
let latitude = parseFloat(feature.geometry.coordinates[0]).toFixed(3)
let longitude = parseFloat(feature.geometry.coordinates[1]).toFixed(3)
let text = `<div class='mpopup'><h4>${vesselName}: ${status}</h4><br/>
<table class='data'><tbody>
<tr><th>Time</th><td>${time}</td></tr>
Expand All @@ -186,6 +186,21 @@
if (feature.properties.truewinddirection && feature.properties.courseovergroundtrue) {
text += `<tr><th>AWA</th><td>${awa}</td></tr>`
}
if (feature.properties.depth) {
text += `<tr><th>Depth</th><td>${feature.properties.depth}</td></tr>`
}
if (feature.properties.watertemperature) {
text += `<tr><th>Water Temperature</th><td>${feature.properties.watertemperature}</td></tr>`
}
if (feature.properties.outsidetemperature) {
text += `<tr><th>outsidetemperature</th><td>${feature.properties.outsidetemperature}</td></tr>`
}
if (feature.properties.outsidepressure) {
text += `<tr><th>outsidepressure</th><td>${feature.properties.outsidepressure}</td></tr>`
}
if (feature.properties.outsidehumidity) {
text += `<tr><th>outsidehumidity</th><td>${feature.properties.outsidehumidity}</td></tr>`
}
text += `</tbody></table></div>`
if (this.showNote) {
Expand Down Expand Up @@ -241,10 +256,10 @@
const deleteButton = document.getElementById('deletePointButton')
if (saveButton) {
saveButton.addEventListener('click', () => this.saveNote(feature.geometry.coordinates))
saveButton.addEventListener('click', () => this.saveNote(feature.properties.time))
}
if (deleteButton) {
deleteButton.addEventListener('click', () => this.deletePoint(feature.geometry.coordinates))
deleteButton.addEventListener('click', () => this.deletePoint(feature.properties.time))
}
})
}
Expand Down Expand Up @@ -280,16 +295,16 @@
let controlLayer = L.control.layers()
//console.log(geojson.length)
for (let i = 0; i < geojson.length; i++) {
//console.log(geojson[i].track_geojson)
//console.log(geojson[i].geojson)
let color = random_rgb_dark()
layers[i] = L.geoJSON(geojson[i].track_geojson, {
layers[i] = L.geoJSON(geojson[i].geojson, {
style: { color: random_rgb_dark() },
filter: geoMapFilter,
pointToLayer: boatIcon,
onEachFeature: popup,
}).addTo(featGroup)
featGroup.addTo(this.map)
const text = `<i class="geojson-box" style="background-color:${color}">&nbsp;</i><h4>${geojson[i].track_geojson.features[0].properties.name}</h4><small>${geojson[i].track_geojson.features[0].properties._from_time}</small>`
const text = `<i class="geojson-box" style="background-color:${color}">&nbsp;</i><h4>${geojson[i].geojson.features[0].properties.name}</h4><small>${geojson[i].geojson.features[0].properties.started}</small>`
controlLayer.addOverlay(layers[i], text).addTo(this.map)
//document.getElementsByClassName('leaflet-control-layers-toggle')[1].className = 'leaflet-control-layers-toggle pgsail-geojson'
document.getElementsByClassName('leaflet-control-layers-toggle')[1].style =
Expand Down
180 changes: 68 additions & 112 deletions src/pages/logs-book/DetailsMap.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@
import tripPerformance from './sidebars/Performance.vue'
import tripObservations from './sidebars/Observations.vue'
import tripExport from './sidebars/Export.vue'
import moment from 'moment'
const CacheStore = useCacheStore()
const router = useRouter()
Expand Down Expand Up @@ -238,116 +239,87 @@
return canDelete
}
const saveNote = async function (coordinates, note) {
console.log('saveNote to update:', coordinates, note)
// Add a note to GeoJSON feature point - Mobilitydb
const saveNote = async function (timestamp, note) {
//console.log('saveNote to update:', timestamp, note)
// '["notes"@2024-11-07T18:40:45+00, ""@2024-11-07T18:41:45+00]'
const plusone = moment.utc(timestamp).add(1, 'minutes').format()
// to be clean we need the next timestamp
const update_string = `["${note}"@${timestamp}, ""@${plusone}]`
console.log('saveNote update_string:', update_string)
// Save the note to the GeoJSON
for (let i = 0; i < GeoJSONfeatures.value.length; i++) {
const geofeature = GeoJSONfeatures.value[i]
// Check if the feature is a point
if (geofeature.geometry.type === 'Point') {
// Get the coordinates of the point
const pointCoordinates = geofeature.geometry.coordinates
// Check if the coordinates match the target coordinates
if (pointCoordinates[0] === coordinates[0] && pointCoordinates[1] === coordinates[1]) {
console.log('GeoJSONfeatures found index:', i)
GeoJSONfeatures.value[i].properties.notes = note
break // Exit loop if the point is found
}
const api = new PostgSail()
const id = route.params.id
try {
const response = await api.log_update_trip_notes({ _id: parseInt(id), update_string: update_string })
if (response) {
console.log('log_update_trip_notes success', response)
// Clean CacheStore and force refresh
CacheStore.logs = []
CacheStore.logs_get = []
CacheStore.store_ttl = null
await CacheStore.resetCache()
} else {
throw { response }
}
}
const track_geojson = {
type: 'FeatureCollection',
features: GeoJSONfeatures.value,
}
// Save change the new GeoJSON to the DB
const isSaved = await handleSubmit(track_geojson)
if (isSaved) {
console.log('saveNote saved')
} catch (err) {
const { response } = err
console.log('log_update_trip_notes failed', response)
updateError.value = response.message
} finally {
initToast({
message: updateError.value ? `Error updating log note entry` : `Successfully updating log note entry`,
position: 'top-right',
color: updateError.value ? 'warning' : 'success',
})
isBusy.value = false
router.push({ name: 'logs' })
}
}
// Delete point from GeoJSON features
const deletePoint = async function (coordinates) {
console.log('deletePoint to delete:', coordinates)
// Delete point from GeoJSON feature point - Mobilitydb
const deletePoint = async function (timestamp) {
//console.log('deletePoint to delete:', timestamp)
const toDelete = await confirmDeleteTrackpoint()
// '[2024-11-07T18:40:45+00:00, 2024-11-07T18:41:45+00:00]'
const plusone = moment.utc(timestamp).add(1, 'minutes').format()
// to be clean we need the next timestamp
const update_string = `[${timestamp}, ${plusone}]`
console.log('deletePoint update_string:', update_string)
if (toDelete) {
console.log('deletePoint confirmed continue')
// Calculate new max speed, and average speed and new wind max speed, and wind average speed
let maxSpeed = 0,
maxWindSpeed = 0,
maxWindSpeedApp = 0,
segmentSpeeds = [],
segmentWindSpeeds = [],
sumSpeeds = 0,
sumWindSpeeds = 0,
sumWindSpeedsApp = 0
// Remove the coordinates from the geojson geometry LineString and geometry Point
GeoJSONfeatures.value = GeoJSONfeatures.value.filter(function (geofeature) {
if (geofeature.geometry.type === 'Point') {
if (JSON.stringify(geofeature.geometry.coordinates) !== JSON.stringify(coordinates)) {
// Track maximum speed
if (geofeature.properties.speedoverground > maxSpeed) maxSpeed = geofeature.properties.speedoverground
// Track maximum wind speed
if (geofeature.properties.truewindspeed > maxWindSpeed) maxWindSpeed = geofeature.properties.truewindspeed
if (geofeature.properties.windspeedapparent > maxWindSpeedApp)
maxWindSpeedApp = geofeature.properties.windspeedapparent
segmentSpeeds.push(geofeature.properties.speedoverground)
segmentWindSpeeds.push(geofeature.properties.truewindspeed)
sumSpeeds += geofeature.properties.speedoverground
sumWindSpeeds += geofeature.properties.truewindspeed
sumWindSpeedsApp += geofeature.properties.windspeedapparent
}
return JSON.stringify(geofeature.geometry.coordinates) !== JSON.stringify(coordinates)
} else if (geofeature.geometry.type === 'LineString') {
geofeature.geometry.coordinates = geofeature.geometry.coordinates.filter(function (lineStringCoords) {
return JSON.stringify(lineStringCoords) !== JSON.stringify(coordinates)
})
return geofeature.geometry.coordinates.length > 0
const api = new PostgSail()
const id = route.params.id
try {
const response = await api.log_delete_trip_entry_fn({ _id: parseInt(id), update_string: update_string })
if (response) {
console.log('log_delete_trip_entry_fn success', response)
// Clean CacheStore and force refresh
CacheStore.logs = []
CacheStore.logs_get = []
CacheStore.store_ttl = null
await CacheStore.resetCache()
} else {
throw { response }
}
return true
})
const track_geojson = {
type: 'FeatureCollection',
features: GeoJSONfeatures.value,
}
// Update geojson LineString with new stats
track_geojson['features'][0]['properties']['distance'] = turf.length(track_geojson['features'][0]['geometry'], {
units: 'nauticalmiles',
})
//track_geojson['features'][0]['properties']['duration'] = metrics.totalDurationInterval
console.log('deletePoint previous geojson linestring properties', track_geojson['features'][0]['properties'])
track_geojson['features'][0]['properties']['avg_speed'] = sumSpeeds / segmentSpeeds.length
track_geojson['features'][0]['properties']['max_speed'] = maxSpeed
if (sumWindSpeeds != 0) {
track_geojson['features'][0]['properties']['avg_wind_speed'] = sumWindSpeeds / segmentWindSpeeds.length
} else {
track_geojson['features'][0]['properties']['avg_wind_speed'] = sumWindSpeedsApp / segmentWindSpeeds.length
}
track_geojson['features'][0]['properties']['max_wind_speed'] = maxWindSpeed || maxWindSpeedApp
track_geojson['features'][0]['properties']['x-update'] = new Date().toUTCString()
track_geojson['features'][0]['properties']['name'] = formData.name
track_geojson['features'][0]['properties']['notes'] = formData.notes
console.log('deletePoint new geojson linestring properties', track_geojson['features'][0]['properties'])
track_geojson['features'][1]['properties']['trip']['name'] = formData.name
track_geojson['features'][1]['properties']['trip']['distance'] =
track_geojson['features'][0]['properties']['distance']
//track_geojson['features'][1]['properties']['trip']['duration'] = formData.notes
// Save change the new GeoJSON to the DB
const isSaved = await handleSubmit(track_geojson)
if (isSaved) {
console.log('deletePoint removed')
} catch (err) {
const { response } = err
console.log('log_delete_trip_entry_fn failed', response)
updateError.value = response.message
} finally {
initToast({
message: updateError.value ? `Error deleting log note entry` : `Successfully deleting log note entry`,
position: 'top-right',
color: updateError.value ? 'warning' : 'success',
})
isBusy.value = false
router.push({ name: 'logs' })
}
}
isBusy.value = false
document.getElementById('logbook-map').style.display = ''
console.log('deletePoint done')
}
const handleSubmit = async (local_geojson) => {
const handleSubmit = async () => {
isBusy.value = true
updateError.value = null
Expand All @@ -360,27 +332,11 @@
isBusy.value = false
return true
}
/* From the emit we received a logbook trip entry
From the leaflet map we received a valid geojson */
//console.debug(local_geojson.geoJson.features[0].properties)
let geojson = {}
if (local_geojson.name) {
// If we have a log entry object, then update the geojson name in linestring geometry
local_geojson.geoJson.features[0].properties.name = formData.name
geojson = local_geojson.geoJson
// Update the corresponding geojson display on the map.
GeoJSONfeatures.value[0].properties.name = formData.name
GeoJSONfeatures.value[0].properties.notes = formData.notes
} else {
geojson = local_geojson
}
console.debug(geojson)
const api = new PostgSail()
const id = route.params.id
const payload = {
name: formData.name,
notes: formData.notes,
track_geojson: geojson,
}
try {
const response = await api.log_update(id, payload)
Expand Down
Loading

0 comments on commit 89726c7

Please sign in to comment.