Mobile UX: filters, map popups

src/components/maps/leafletMap.vue

@@ -10,6 +10,7 @@
   import { defaultBaseMapType, baseMaps, overlayMaps, boatMarkerTypes } from './leafletHelpers.js'
 
   import { dateFormatUTC, durationFormatHours } from '../../utils/dateFormatter.js'
+  import { distanceFormatMiles } from '../../utils/distanceFormatter.js'
   import { speedFormatKnots } from '../../utils/speedFormatter.js'
   import { awaFormat, angleFormat } from '../../utils/angleFormatter.js'
 
@@ -103,51 +104,57 @@
           //console.log(`popup`, feature.properties)
           let status = feature.properties.status || ''
           let time = dateFormatUTC(feature.properties.time)
-          let speed = speedFormatKnots(feature.properties.speedoverground) || 0
-          let cog = angleFormat(feature.properties.courseovergroundtrue) || 0
-          let awa = awaFormat(feature.properties.truewinddirection, feature.properties.courseovergroundtrue) || 0
-          let wind = speedFormatKnots(feature.properties.windspeedapparent) || 0
-          let winddir = angleFormat(feature.properties.truewinddirection) || 0
-          let latitude = parseFloat(feature.properties.latitude).toFixed(5)
-          let longitude = parseFloat(feature.properties.longitude).toFixed(5)
-          let text = `<div class='center'><h4>${vesselName}: ${status}</h4></div><br/>
-              Time: ${time}<br/>
-              Boat Speed: ${speed}<br/>
-              Course Over Ground: ${cog}<br/>
-              Apparent Wind Angle: ${awa}<br/>
-              Wind Speed: ${wind}<br/>
-              Wind Direction: ${winddir}<br/>
-              Latitude: ${latitude}<br/>
-              Longitude: ${longitude}<br/>`
+          let sog = speedFormatKnots(feature.properties.speedoverground)
+          let cog = angleFormat(feature.properties.courseovergroundtrue)
+          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 text = `<div class='mpopup' id='${time}'><h4>${vesselName}: ${status}</h4><br/>
+                      <table class='data'><tbody>
+                        <tr><td>Time</td><td>${time}</td></tr>
+                        <tr><td>Position</td><td>${latitude} ${longitude}</td></tr>`
+          if (feature.properties.speedoverground) {
+            text += `<tr><td>Speed</td><td>${sog}`
+            if (feature.properties.courseovergroundtrue) {
+              text += ` / ${cog}`
+            }
+            text += `</td></tr>`
+          }
+          if (feature.properties.windspeedapparent) {
+            text += `<tr><td>Wind</td><td>${aws}`
+            if (feature.properties.truewinddirection) {
+              text += ` / ${twd}`
+            }
+            text += `</td></tr>`
+          }
+          if (feature.properties.truewinddirection && feature.properties.courseovergroundtrue) {
+            text += `<tr><td>AWA</td><td>${awa}</td></tr>`
+          }
+          text += `</tbody></table></div>`
           popupContent = text
         }
         // If geo linestring click
         if (feature.properties && feature.properties._from_time) {
-          //console.log(`popup`, feature.properties)
           let time = dateFormatUTC(feature.properties._from_time)
+          let duration = durationFormatHours(feature.properties.duration)
+          let distance = distanceFormatMiles(feature.properties.distance)
           let avg_speed = speedFormatKnots(feature.properties.avg_speed)
-          let duration = durationFormatHours(feature.properties.duration) + ' H'
-          let distance = parseFloat(feature.properties.distance).toFixed(5) + ' NM'
-          let text = `<div class='center'><h4><a id="logLink" style="cursor: pointer;" onclick="logLink(${feature.properties.id})">${feature.properties.name}</a></h4></div><br/>
-              Time: ${time}<br/>
-              Average Speed: ${avg_speed}<br/>
-              Duration: ${duration}<br/>
-              Distance: ${distance}<br/>
-              <a id="timelapseLink" style="cursor: pointer;" onclick="timelapseLink(${feature.properties.id})">Play timelapse</a>`
+          let max_speed = speedFormatKnots(feature.properties.max_speed)
+          let max_wind = speedFormatKnots(feature.properties.max_wind_speed)
+          let text = `<div class='mpopup'>
+                        <h4><a href="/logmap/${feature.properties.id}">${feature.properties.name}</a></h4><br/>
+                        <table class='data'><tbody>
+                          <tr><td>Time</td><td>${time}</td></tr>
+                          <tr><td>Distance</td><td>${distance}</td></tr>
+                          <tr><td>Duration</td><td>${duration} hours</td></tr>
+                          <tr><td>Speed Ave/Max</td><td>${avg_speed} / ${max_speed}</td></tr>
+                          <tr><td>Wind Speed Max</td><td>${max_wind}</td></tr>
+                        </tbody></table></br>
+                        <a href="/timelapse/${feature.properties.id}">Replay</a>
+                      </div>`
           popupContent = text
-
-          // Go to logbook details page
-          window.logLink = async function (log_id) {
-            let tripLink = document.getElementById('logLink')
-            tripLink.href = `/logmap/${log_id}`
-            return
-          }
-          // Go to timelapse page
-          window.timelapseLink = async function (log_id) {
-            let link = document.getElementById('timelapseLink')
-            link.href = `/timelapse/${log_id}`
-            return
-          }
         }
         layer.bindPopup(popupContent)
       }
@@ -215,7 +222,19 @@
   }
 </script>
 
-<style scoped>
+<style lang="scss">
+  .mpopup {
+    td:nth-child(1) {
+      text-align: right;
+      padding-right: 5px;
+    }
+    td:nth-child(2) {
+      font-weight: bold;
+    }
+    a {
+      cursor: pointer;
+    }
+  }
   #mapContainer {
     z-index: 0;
   }

src/components/maps/leafletMapMoorages.vue

@@ -14,7 +14,6 @@
    * TODO
    * Add boat name
    * Add motorboat icon
-   * Add Emodnet bathymetry
    */
   import 'leaflet/dist/leaflet.css'
   import * as L from 'leaflet'
@@ -26,6 +25,7 @@
 
   import { dateFormatUTC, durationFormatHours } from '../../utils/dateFormatter.js'
   import { distanceFormatMiles } from '../../utils/distanceFormatter.js'
+  import { speedFormatKnots } from '../../utils/speedFormatter.js'
 
   const isBusy = ref(false),
     apiError = ref(null),
@@ -149,17 +149,14 @@
       var popupContent =
         '<p>I started out as a GeoJSON ' + feature.geometry.type + ", but now I'm a Leaflet vector!</p>"
       if (feature.properties && feature.properties.id) {
-        console.log('popup onEachMoorageFeaturePopup')
-        let text = `<div class='center'><h5><a href="/moorage/${feature.properties.id}">${feature.properties.name}</a></h5><br/>
-        <a href="/stay/${feature.properties.id}">${feature.properties.total_stay}<a/> day(s) stay<br/></div>`
-        // Should be done using i18n
+        let text = `<div class='mpopup'>
+                        <h4><a href="/moorage/${feature.properties.id}">${feature.properties.name}</a></h4><br/>
+                        <a href="/stays/moorage/${feature.properties.id}">${feature.properties.total_stay} day(s) stay</a>
+                      </div>`
         popupContent = text
       }
       layer.bindPopup(popupContent)
-      //bind click
-      layer.on({
-        click: whenClicked,
-      })
+      layer.on({ click: whenClicked })
     }
 
     const layer = L.geoJSON(geojson, {
@@ -174,18 +171,26 @@
   }
 
   // TODO Zoom and fit on click
-  // TODO convert _from_time to date
-  // TODO convert _duration to hours
   const onEachLineStringFeaturePopup = function (feature, layer) {
     var popupContent = '<p>I started out as a GeoJSON ' + feature.geometry.type + ", but now I'm a Leaflet vector!</p>"
-    if (feature.properties && feature.properties.id) {
-      console.log('popup onEachLineStringFeaturePopup')
-      let date = dateFormatUTC(feature.properties._from_time)
+    if (feature.properties && feature.properties._from_time) {
+      let time = dateFormatUTC(feature.properties._from_time)
       let duration = durationFormatHours(feature.properties.duration)
       let distance = distanceFormatMiles(feature.properties.distance)
-      let text = `<div class='center'><h6><a href="/log/${feature.properties.id}">From ${feature.properties.name}</a></h6><br/>
-        ${date}, ${distance} miles, ${duration} hours<br/></div>`
-      // TODO should be done using i18n
+      let avg_speed = speedFormatKnots(feature.properties.avg_speed)
+      let max_speed = speedFormatKnots(feature.properties.max_speed)
+      let max_wind = speedFormatKnots(feature.properties.max_wind_speed)
+      let text = `<div class='mpopup'>
+                        <h4><a href="/logmap/${feature.properties.id}">${feature.properties.name}</a></h4><br/>
+                        <table class='data'><tbody>
+                          <tr><td>Time</td><td>${time}</td></tr>
+                          <tr><td>Distance</td><td>${distance}</td></tr>
+                          <tr><td>Duration</td><td>${duration} hours</td></tr>
+                          <tr><td>Speed Ave/Max</td><td>${avg_speed} / ${max_speed}</td></tr>
+                          <tr><td>Wind Speed Max</td><td>${max_wind}</td></tr>
+                        </tbody></table></br>
+                        <a href="/timelapse/${feature.properties.id}">Replay</a>
+                      </div>`
       popupContent = text
     }
     layer.bindPopup(popupContent)
@@ -278,4 +283,17 @@
   })
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss">
+  .mpopup {
+    td:nth-child(1) {
+      text-align: right;
+      padding-right: 5px;
+    }
+    td:nth-child(2) {
+      font-weight: bold;
+    }
+    a {
+      cursor: pointer;
+    }
+  }
+</style>

src/i18n/locales/br.json

@@ -113,7 +113,7 @@
   },
   "logs": {
     "list": {
-      "title": "Logs list",
+      "title": "Logs - Log Book for",
       "filter": {
         "title": "Search for log",
         "name": "Name",
@@ -159,7 +159,7 @@
   },
   "stays": {
     "list": {
-      "title": "Stays list",
+      "title": "Stays - Moorage History of",
       "filter": {
         "title": "Search for stay",
         "name": "Name",
@@ -178,19 +178,22 @@
       "departed": "Departed",
       "arrived": "Arrived",
       "stayed_at": "Fiquei em",
+      "duration": "Duração",
       "duration_d": "Duração [d]",
       "note": "Note | Notes"
     },
     "moorage": {
+      "title": "Stays at Moorage",
       "arrived": "Chegou",
       "departed": "Partiu",
       "stayed_at": "Fiquei em",
+      "duration": "Duração",
       "duration_d": "Duração [d]"
     }
   },
   "moorages": {
     "list": {
-      "title": "Moorages list",
+      "title": "Moorages of",
       "filter": {
         "title": "Search for moorage",
         "name": "Name",
@@ -202,10 +205,14 @@
       "total_stay": "Total Stay [d]",
       "arrivals": "Arrivals & Departures"
     },
+    "arrivals-departures": {
+      "title": "Arrivals and Departures for Moorage"
+    },
     "details": {
       "title": "Moorage's details"
     },
     "moorage": {
+      "title": "Stays at Moorage",
       "moorage": "Preferred Name",
       "departed": "Default Stay Type",
       "home": "Home",
@@ -247,15 +254,14 @@
     },
     "boat": {
       "name": "Name | Names",
-      "mmsi": "MMSI (opcional)",
+      "mmsi": "MMSI",
       "first_contact": "Primeiro contato",
       "last_contact": "Último contato",
       "created_at": "Creado en",
       "token_modal": {
         "button": "Get token",
         "title": "Boat's token",
         "token": "Token",
-        //"message": "WARNING, This access token will only be displayed once. It will not be stored and cannot be retrieved. Please be sure to save it now."
         "message": "Copy paste this token into your postgsail plugin instance of signalk."
       },
       "beam": "Beam",
@@ -417,11 +423,11 @@
   },
   "units": {
     "distance": {
-      "miles": "NM",
-      "kilometres": "km"
+      "miles": "{n} NM",
+      "kilometres": "{n} km"
     },
     "speed": {
-      "knots": "kts"
+      "knots": "{n} kts"
     },
     "time": {
       "days": "{n} days | {n} day | {n} days",

src/i18n/locales/de.json

@@ -182,13 +182,15 @@
       "departed": "Abgereist",
       "arrived": "Angekommen",
       "stayed_at": "Verbleib",
+      "duration": "Dauer",
       "duration_d": "Dauer [t]",
       "note": "Notiz | Notizen"
     },
     "moorage": {
       "arrived": "Arrived",
       "departed": "Departed",
       "stayed_at": "Stayed at",
+      "duration": "Dauer",
       "duration_d": "Dauer [t]"
     }
   },
@@ -251,7 +253,7 @@
     },
     "boat": {
       "name": "Name | Namen",
-      "mmsi": "MMSI (fakultativ)",
+      "mmsi": "MMSI",
       "first_contact": "First Kontakt",
       "last_contact": "Letzter Kontakt",
       "created_at": "Erstellt am",
@@ -260,7 +262,6 @@
         "button": "Token erhalten",
         "title": "Token des Bootes",
         "token": "Token",
-        //"message": "WARNUNG, Dieser Zugriffstoken wird nur einmal angezeigt. Er wird nicht gespeichert und kann nicht wieder abgerufen werden. Bitte speichern Sie ihn jetzt.",
         "message": "Kopieren Sie diesen Token in Ihre PostgSail-Plugin-Instanz von Signalk."
       },
       "beam": "Breite",
@@ -423,11 +424,11 @@
   },
   "units": {
     "distance": {
-      "miles": "NM",
-      "kilometres": "km"
+      "miles": "{n} NM",
+      "kilometres": "{n} km"
     },
     "speed": {
-      "knots": "kts"
+      "knots": "{n} kts"
     },
     "time": {
       "days": "{n} Tage | {n} Tag | {n} Tage",