Merge pull request #124 from xbgmsharp/search-ux

UX improvements

src/components/SelectStayAt.vue

@@ -18,6 +18,17 @@
 </template>
 
 <script>
+  const optionsHash = {
+    1: 'Unknown',
+    2: 'Anchor',
+    3: 'Mooring Buoy',
+    4: 'Dock',
+  }
+
+  export const getTextForStayId = (value) => {
+    return optionsHash[value]
+  }
+
   export default {
     name: 'StayAt',
     props: {
@@ -26,24 +37,10 @@
     },
     emits: ['clickFromChildComponent'],
     data(props) {
-      const options = [
-        {
-          value: 1,
-          text: 'Unknown',
-        },
-        {
-          value: 2,
-          text: 'Anchor',
-        },
-        {
-          value: 3,
-          text: 'Mooring Buoy',
-        },
-        {
-          value: 4,
-          text: 'Dock',
-        },
-      ]
+      const options = Object.entries(optionsHash).map(([value, text]) => ({
+        value: parseInt(value),
+        text: text,
+      }))
 
       return {
         item: props.id,

src/components/maps/leafletMap.vue

@@ -6,10 +6,11 @@
   import 'leaflet/dist/leaflet.css'
   import L from 'leaflet'
   import 'leaflet-rotatedmarker'
+
   import { defaultBaseMapType, baseMaps, overlayMaps, boatMarkerTypes } from './leafletHelpers.js'
 
   import { dateFormatUTC, durationFormatHours } from '../../utils/dateFormatter.js'
-  import { speedFormat } from '../../utils/speedFormatter.js'
+  import { speedFormatKnots } from '../../utils/speedFormatter.js'
   import { awaFormat, angleFormat } from '../../utils/angleFormatter.js'
 
   import { useGlobalStore } from '../../stores/global-store'
@@ -120,10 +121,10 @@
           //console.log(`popup`, feature.properties)
           let status = feature.properties.status || ''
           let time = dateFormatUTC(feature.properties.time)
-          let speed = speedFormat(feature.properties.speedoverground) || 0
+          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 = speedFormat(feature.properties.windspeedapparent) || 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)
@@ -142,7 +143,7 @@
         if (feature.properties && feature.properties._from_time) {
           //console.log(`popup`, feature.properties)
           let time = dateFormatUTC(feature.properties._from_time)
-          let avg_speed = speedFormat(feature.properties.avg_speed)
+          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/>

src/components/maps/leafletMapMoorages.vue

@@ -25,7 +25,7 @@
   import mooragesGeoJSON from '../../data/moorages_map.json'
 
   import { dateFormatUTC, durationFormatHours } from '../../utils/dateFormatter.js'
-  import { distanceFormat } from '../../utils/distanceFormatter.js'
+  import { distanceFormatMiles } from '../../utils/distanceFormatter.js'
 
   const isBusy = ref(false),
     apiError = ref(null),
@@ -182,7 +182,7 @@
       console.log('popup onEachLineStringFeaturePopup')
       let date = dateFormatUTC(feature.properties._from_time)
       let duration = durationFormatHours(feature.properties.duration)
-      let distance = distanceFormat(feature.properties.distance)
+      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

src/i18n/locales/br.json

@@ -136,14 +136,13 @@
       "from_time": "Departed at",
       "to": "Arrived",
       "to_time": "Arrived at",
-      "duration": "Duração [h]",
-      "duration_unit": "hour | hours",
-      "distance": "Distância [NM]",
-      "distance_miles": "0 mile | {n} mile | {n} miles",
+      "duration": "Duração",
+      "duration_h": "Duração [h]",
+      "distance": "Distância",
+      "distance_nm": "Distância [NM]",
       "avg": "Média",
       "max": "Max",
       "speed": "Velocidade",
-      "speed_knots": "0 knot | {n} knot | {n} knots",
       "wind_speed": "Wind Speed",
       "note": "Note | Notes",
       "remarks": "Diga o que aconteceu",
@@ -176,18 +175,17 @@
       "moorage": "Moorage",
       "departure": "Hora de partida",
       "arrival": "Arrival Time",
-      "departed": "Departed To",
-      "arrived": "Arrived From",
+      "departed": "Departed",
+      "arrived": "Arrived",
       "stayed_at": "Fiquei em",
-      "duration": "Duration",
-      "note": "Note | Notes",
-      "duration_unit": "days"
+      "duration_d": "Duração [d]",
+      "note": "Note | Notes"
     },
     "moorage": {
       "arrived": "Chegou",
       "departed": "Partiu",
       "stayed_at": "Fiquei em",
-      "duration": "Duração"
+      "duration_d": "Duração [d]"
     }
   },
   "moorages": {
@@ -201,9 +199,8 @@
       },
       "moorage": "Moorage",
       "default_stay": "Default Stay",
-      "total_stay": "Total Stay",
-      "arrivals": "Arrivals & Departures",
-      "duration_unit": "days"
+      "total_stay": "Total Stay [d]",
+      "arrivals": "Arrivals & Departures"
     },
     "details": {
       "title": "Moorage's details"
@@ -420,10 +417,11 @@
   },
   "units": {
     "distance": {
-      "NM": "Distance NM",
-      "KM": "Distance KM",
-      "miles": "{n} mile | {n} miles",
-      "kilometres": "{n} kilometre | {n} kilometres"
+      "miles": "NM",
+      "kilometres": "km"
+    },
+    "speed": {
+      "knots": "kts"
     },
     "time": {
       "days": "{n} days | {n} day | {n} days",

src/i18n/locales/de.json

@@ -140,14 +140,13 @@
       "from_time": "Abgereist um",
       "to": "Angekommen",
       "to_time": "Angekommen um",
-      "duration": "Dauer [h]",
-      "duration_unit": "{n} Stunde | {n} Stunden",
-      "distance": "Entfernung [NM]",
-      "distance_miles": "{n} Meile | {n} Meilen",
+      "duration": "Dauer",
+      "duration_h": "Dauer [h]",
+      "distance": "Entfernung",
+      "distance_nm": "Entfernung [NM]",
       "avg": "Durchschnitt",
       "max": "Maximal",
       "speed": "Geschwindigkeit",
-      "speed_knots": "0 Knoten | {n} Knoten | {n} Knoten",
       "wind_speed": "Windgeschwindigkeit",
       "note": "Notiz | Notizen",
       "remarks": "Tell what happened",
@@ -180,18 +179,17 @@
       "moorage": "Anlegestelle",
       "departure": "Abfahrtszeit",
       "arrival": "Ankunftszeit",
-      "departed": "Abgereist nach",
-      "arrived": "Angekommen von",
+      "departed": "Abgereist",
+      "arrived": "Angekommen",
       "stayed_at": "Verbleib",
-      "duration": "Dauer",
-      "note": "Notiz | Notizen",
-      "duration_unit": "Tage"
+      "duration_d": "Dauer [t]",
+      "note": "Notiz | Notizen"
     },
     "moorage": {
       "arrived": "Arrived",
       "departed": "Departed",
       "stayed_at": "Stayed at",
-      "duration": "Duration"
+      "duration_d": "Dauer [t]"
     }
   },
   "moorages": {
@@ -205,9 +203,8 @@
       },
       "moorage": "Anlegestelle",
       "default_stay": "Standardaufenthalt",
-      "total_stay": "Gesamtaufenthalt",
-      "arrivals": "Ankünfte & Abreisen",
-      "duration_unit": "Tage"
+      "total_stay": "Gesamtaufenthalt [t]",
+      "arrivals": "Ankünfte & Abreisen"
     },
     "details": {
       "title": "Details der Anlegestelle"
@@ -426,10 +423,11 @@
   },
   "units": {
     "distance": {
-      "NM": "Entfernung NM",
-      "KM": "Entfernung KM",
-      "miles": "{n} Meile | {n} Meilen",
-      "kilometres": "{n} Kilometer | {n} Kilometer"
+      "miles": "NM",
+      "kilometres": "km"
+    },
+    "speed": {
+      "knots": "kts"
     },
     "time": {
       "days": "{n} Tage | {n} Tag | {n} Tage",

src/i18n/locales/es.json

@@ -136,14 +136,13 @@
       "from_time": "Departed at",
       "to": "Arrived",
       "to_time": "Arrived at",
-      "duration": "Duración [h]",
-      "duration_unit": "hour | hours",
-      "distance": "Distancia [NM]",
-      "distance_miles": "0 mile | {n} mile | {n} miles",
+      "duration": "Duración",
+      "duration_h": "Duración [h]",
+      "distance": "Distancia",
+      "distance_nm": "Distancia [NM]",
       "avg": "Promedio",
       "max": "Max",
       "speed": "Velocidad",
-      "speed_knots": "0 knot | {n} knot | {n} knots",
       "wind_speed": "Velocidad del viento",
       "note": "Note | Notes",
       "remarks": "Di lo que paso",
@@ -177,17 +176,16 @@
       "departure": "Departure Time",
       "arrival": "Arrival Time",
       "departed": "Departed To",
-      "arrived": "Arrived From",
+      "arrived": "Arrived",
       "stayed_at": "Stayed at",
-      "duration": "Duration",
-      "note": "Note | Notes",
-      "duration_unit": "days"
+      "duration_d": "Duración [d]",
+      "note": "Note | Notes"
     },
     "moorage": {
       "arrived": "Llegó",
       "departed": "Partido",
       "stayed_at": "Me alojé en",
-      "duration": "Duración"
+      "duration_d": "Duración [d]"
     }
   },
   "moorages": {
@@ -201,9 +199,8 @@
       },
       "moorage": "Moorage",
       "default_stay": "Default Stay",
-      "total_stay": "Total Stay",
-      "arrivals": "Arrivals & Departures",
-      "duration_unit": "days"
+      "total_stay": "Total Stay [d]",
+      "arrivals": "Arrivals & Departures"
     },
     "details": {
       "title": "Moorage's details"
@@ -420,10 +417,11 @@
   },
   "units": {
     "distance": {
-      "NM": "Distance NM",
-      "KM": "Distance KM",
-      "miles": "{n} mile | {n} miles",
-      "kilometres": "{n} kilometre | {n} kilometres"
+      "miles": "NM",
+      "kilometres": "km"
+    },
+    "speed": {
+      "knots": "kts"
     },
     "time": {
       "days": "{n} days | {n} day | {n} days",

src/i18n/locales/fr.json

@@ -136,14 +136,13 @@
       "from_time": "Departed at",
       "to": "Arrived",
       "to_time": "Arrived at",
-      "duration": "Duration [h]",
-      "duration_unit": "hour | hours",
-      "distance": "Distance [NM]",
-      "distance_miles": "0 mile | {n} mile | {n} miles",
+      "duration": "Durée",
+      "distance": "Distance",
+      "duration_h": "Durée [h]",
+      "distance_nm": "Distance [NM]",
       "avg": "Moyenne",
       "max": "Max",
       "speed": "Vitesse",
-      "speed_knots": "0 knot | {n} knot | {n} knots",
       "wind_speed": "Vitesse du vent",
       "note": "Note | Notes",
       "remarks": "Raconte ce qui s'est passé",
@@ -176,18 +175,17 @@
       "moorage": "Moorage",
       "departure": "Departure Time",
       "arrival": "Arrival Time",
-      "departed": "Departed To",
-      "arrived": "Arrived From",
+      "departed": "Departed",
+      "arrived": "Arrived",
       "stayed_at": "Séjourné à",
-      "duration": "Durée",
-      "note": "Note | Notes",
-      "duration_unit": "days"
+      "duration_d": "Durée [j]",
+      "note": "Note | Notes"
     },
     "moorage": {
       "arrived": "Arrivé",
       "departed": "Parti",
       "stayed_at": "Séjourné à",
-      "duration": "Durée"
+      "duration_d": "Durée [j]"
     }
   },
   "moorages": {
@@ -201,9 +199,8 @@
       },
       "moorage": "Moorage",
       "default_stay": "Default Stay",
-      "total_stay": "Total Stay",
-      "arrivals": "Arrivals & Departures",
-      "duration_unit": "days"
+      "total_stay": "Total Stay [d]",
+      "arrivals": "Arrivals & Departures"
     },
     "details": {
       "title": "Moorage's details"
@@ -420,10 +417,11 @@
   },
   "units": {
     "distance": {
-      "NM": "Distance NM",
-      "KM": "Distance KM",
-      "miles": "{n} mile | {n} miles",
-      "kilometres": "{n} kilometre | {n} kilometres"
+      "miles": "NM",
+      "kilometres": "km"
+    },
+    "speed": {
+      "knots": "kts"
     },
     "time": {
       "days": "{n} days | {n} day | {n} days",