Merge pull request #129 from xbgmsharp/mobile-ux

UX: /log is now log-map, moorage name in title, duration formatting, links on cards

src/components/maps/leafletMap.vue

@@ -149,8 +149,8 @@
                           <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>
+                          <tr><td>Speed</td><td>avg ${avg_speed} / max ${max_speed}</td></tr>
+                          <tr><td>Wind</td><td>max ${max_wind}</td></tr>
                         </tbody></table></br>
                         <a href="/timelapse/${feature.properties.id}">Replay</a>
                       </div>`

src/components/maps/leafletMapMoorages.vue

@@ -186,8 +186,8 @@
                           <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>
+                          <tr><td>Speed</td><td>avg ${avg_speed} / max ${max_speed}</td></tr>
+                          <tr><td>Wind</td><td>max ${max_wind}</td></tr>
                         </tbody></table></br>
                         <a href="/timelapse/${feature.properties.id}">Replay</a>
                       </div>`

src/pages/logs-book/List.vue

@@ -1,7 +1,10 @@
 <template>
   <div>
     <va-card>
-      <va-card-title>{{ $t('moorages.arrivals-departures.title') }}</va-card-title>
+      <va-card-title>
+        <template v-if="filter_moorage_id"> {{ $t('moorages.arrivals-departures.title') }} {{ moorageName }} </template>
+        <template v-else> {{ $t('logs.list.title') }} {{ vesselName }}</template>
+      </va-card-title>
       <va-card-content>
         <template v-if="apiError">
           <va-alert color="danger" outline class="mb-4">{{ $t('api.error') }}: {{ apiError }}</va-alert>
@@ -27,13 +30,13 @@
         >
           <template #cell(name)="{ value, rowData }">
             <template v-if="isLoggedIn">
-              <router-link class="va-link link" :to="{ name: 'log-details', params: { id: rowData.id } }">
+              <router-link class="va-link link" :to="{ name: 'log-map', params: { id: rowData.id } }">
                 {{ value }}
               </router-link> </template
             ><template v-else>
               <router-link
                 class="va-link link"
-                :to="{ name: 'log-details', params: { boat: publicVessel, id: rowData.id } }"
+                :to="{ name: 'log-map', params: { boat: publicVessel, id: rowData.id } }"
               >
                 {{ value }}
               </router-link>
@@ -112,6 +115,8 @@
   import { useRoute } from 'vue-router'
   import { useGlobalStore } from '../../stores/global-store'
   const { isLoggedIn, publicVessel, instagram, website } = useGlobalStore()
+  import { useVesselStore } from '../../stores/vessel-store'
+  const { vesselName, vesselType } = useVesselStore()
   import logsData from '../../data/logs.json'
 
   const CacheStore = useCacheStore()
@@ -148,6 +153,7 @@
   const isBusy = ref(false)
   const apiError = ref(null)
   const rowsData = ref([])
+  const moorageName = ref(null) // will be assigned from stays data
   const perPage = ref(20)
   const currentPage = ref(1)
   const columns = ref([
@@ -156,8 +162,8 @@
     { key: 'to', label: t('logs.list.to'), sortable: true },
     { key: 'fromTime', label: t('logs.list.from_time'), sortable: true },
     { key: 'toTime', label: t('logs.list.to_time'), sortable: true },
-    { key: 'distance', label: t('logs.log.distance'), sortable: true, sortingFn: utils.sortNum, tdAlign: 'right' },
-    { key: 'duration', label: t('logs.log.duration'), sortable: true, sortingFn: utils.sortNum, tdAlign: 'right' },
+    { key: 'distance', label: t('logs.log.distance_nm'), sortable: true, sortingFn: utils.sortNum, tdAlign: 'right' },
+    { key: 'duration', label: t('logs.log.duration_h'), sortable: true, sortingFn: utils.sortNum, tdAlign: 'right' },
     //{ key: 'action', label: t('logs.log.action') },
   ])
   const filter = reactive(getDefaultFilter())
@@ -225,6 +231,18 @@
         rowsData.value.splice(0, rowsData.value.length || [])
         rowsData.value.push(...response)
         console.log('Logs list', rowsData.value)
+
+        // if logs for specific moorage, get moorage name from first log
+        if (filter_moorage_id) {
+          const firstItem = items.value[0]
+          if (firstItem) {
+            if (firstItem.fromMoorageId == filter_moorage_id) {
+              moorageName.value = firstItem.from
+            } else if (firstItem.toMoorageId == filter_moorage_id) {
+              moorageName.value = firstItem.to
+            }
+          }
+        }
       } else {
         throw { response }
       }

src/pages/logs-book/Page.vue

@@ -221,8 +221,10 @@
             to: row.to,
             fromTime: row.started,
             toTime: row.ended,
-            distance: distanceFormat(row.distance),
-            duration: durationFormatHours(row.duration),
+            distance: row.distance,
+            distance_nm: distanceFormat(row.distance),
+            duration: row.duration,
+            duration_h: durationFormatHours(row.duration),
             fromMoorageId: row._from_moorage_id,
             toMoorageId: row._to_moorage_id,
           }))

src/pages/logs-book/widgets/Cards.vue

@@ -2,7 +2,8 @@
   import { PropType } from 'vue'
   import { Log } from '../types'
   import { useI18n } from 'vue-i18n'
-  import { dateFormatUTC } from '../../../utils/dateFormatter.js'
+  import { dateFormatUTC, durationI18nDaysHours } from '../../../utils/dateFormatter.js'
+  import { distanceFormatMiles } from '../../../utils/distanceFormatter.js'
   import { useGlobalStore } from '../../../stores/global-store'
   const { isLoggedIn, publicVessel } = useGlobalStore()
   const { t } = useI18n()
@@ -102,13 +103,53 @@
             </h4>
             <div class="grid grid-cols-2 gap-1 items-center justify-center text-center">
               <span class="label">{{ t('logs.log.distance') }}: </span>
-              <span class="value">{{ log.distance }} {{ t('units.distance.miles') }}</span>
+              <span class="value">
+                <template v-if="isLoggedIn">
+                  <router-link class="va-link link" :to="{ name: 'log-map', params: { id: log.id } }">
+                    {{ distanceFormatMiles(log.distance) }}
+                  </router-link> </template
+                ><template v-else>
+                  <router-link
+                    class="va-link link"
+                    :to="{ name: 'log-map', params: { boat: publicVessel, id: log.id } }"
+                  >
+                    {{ distanceFormatMiles(log.distance) }}
+                  </router-link>
+                </template>
+              </span>
               <span class="label">{{ t('logs.log.duration') }}: </span>
-              <span class="value">{{ log.duration }} {{ t('units.time.hours') }} </span>
+              <span class="value">
+                <template v-if="isLoggedIn">
+                  <router-link class="va-link link" :to="{ name: 'log-map', params: { id: log.id } }">
+                    {{ durationI18nDaysHours(log.duration) }}
+                  </router-link> </template
+                ><template v-else>
+                  <router-link
+                    class="va-link link"
+                    :to="{ name: 'log-map', params: { boat: publicVessel, id: log.id } }"
+                  >
+                    {{ durationI18nDaysHours(log.duration) }}
+                  </router-link>
+                </template>
+              </span>
               <span class="label">{{ t('logs.log.from') }}: </span>
-              <span class="value">{{ log.from }}</span>
+              <span class="value">
+                <router-link
+                  class="va-link link"
+                  :to="{ name: 'moorage-details', params: { id: log.fromMoorageId || 0 } }"
+                >
+                  {{ log.from }}
+                </router-link>
+              </span>
               <span class="label">{{ t('logs.log.to') }}: </span>
-              <span class="value">{{ log.to }}</span>
+              <span class="value">
+                <router-link
+                  class="va-link link"
+                  :to="{ name: 'moorage-details', params: { id: log.toMoorageId || 0 } }"
+                >
+                  {{ log.to }}
+                </router-link>
+              </span>
             </div>
           </div>
         </div>

src/pages/logs-book/widgets/Table.vue

@@ -16,8 +16,14 @@
     { label: t('logs.list.to'), key: 'to', sortable: true },
     { label: t('logs.list.from_time'), key: 'fromTime', sortable: true },
     { label: t('logs.list.to_time'), key: 'toTime', sortable: true },
-    { label: t('logs.log.distance_nm'), key: 'distance', sortable: true, sortingFn: utils.sortNum, tdAlign: 'right' },
-    { label: t('logs.log.duration_h'), key: 'duration', sortable: true, sortingFn: utils.sortNum, tdAlign: 'right' },
+    {
+      label: t('logs.log.distance_nm'),
+      key: 'distance_nm',
+      sortable: true,
+      sortingFn: utils.sortNum,
+      tdAlign: 'right',
+    },
+    { label: t('logs.log.duration_h'), key: 'duration_h', sortable: true, sortingFn: utils.sortNum, tdAlign: 'right' },
     { label: ' ', key: 'actions' },
   ])
 
@@ -94,10 +100,10 @@
       <template #cell(toTime)="{ value }">
         {{ dateFormatUTC(value) }}
       </template>
-      <template #cell(distance)="{ value }">
+      <template #cell(distance_nm)="{ value }">
         {{ value }}
       </template>
-      <template #cell(duration)="{ value }"> {{ value }} </template>
+      <template #cell(duration_d)="{ value }"> {{ value }} </template>
       <template #cell(actions)="{ rowData: log }">
         <div class="flex gap-2 justify-end">
           <va-dropdown class="">

src/pages/moorages/Details.vue

@@ -73,7 +73,7 @@
                 <dt class="flex xs12 md6 pa-2 va-text-bold">{{ $t('moorages.moorage.stayed_at') }}</dt>
                 <dd class="flex xs12 md6 pa-2">
                   <router-link class="va-link link" :to="{ name: 'moorage-stays', params: { id: item.id } }">
-                    {{ durationFormatDays(item.total_duration) }} {{ durationI18nDays(item.total_duration) }}
+                    {{ durationI18nDaysHours(item.total_duration) }}
                   </router-link>
                 </dd>
                 <dt class="flex xs12 md6 pa-2 va-text-bold">{{ $t('moorages.moorage.arrivals') }}</dt>
@@ -120,7 +120,7 @@
   import Map from '../../components/maps/leafletMapMoorages.vue'
   import { asBusy } from '../../utils/handleExports'
   import StayAt from '../../components/SelectStayAt.vue'
-  import { durationFormatDays, durationI18nDays } from '../../utils/dateFormatter.js'
+  import { durationFormatDays, durationI18nDaysHours } from '../../utils/dateFormatter.js'
   import { useModal, useToast } from 'vuestic-ui'
   const { confirm } = useModal()
   const { init: initToast } = useToast()

src/pages/stats/Stats.vue

@@ -100,7 +100,7 @@
                     <td>
                       <router-link
                         class="va-link link"
-                        :to="{ name: 'log-details', params: { id: stats_logs.max_speed_id } }"
+                        :to="{ name: 'log-map', params: { id: stats_logs.max_speed_id } }"
                       >
                         {{ speedFormatKnots(stats_logs.max_speed) }}
                       </router-link>
@@ -112,7 +112,7 @@
                     <td>
                       <router-link
                         class="va-link link"
-                        :to="{ name: 'log-details', params: { id: stats_logs.max_wind_speed_id } }"
+                        :to="{ name: 'log-map', params: { id: stats_logs.max_wind_speed_id } }"
                       >
                         {{ speedFormatKnots(stats_logs.max_wind_speed) }}
                       </router-link>
@@ -123,14 +123,14 @@
                     <td>
                       <router-link
                         class="va-link link"
-                        :to="{ name: 'log-details', params: { id: stats_logs.max_distance_id } }"
+                        :to="{ name: 'log-map', params: { id: stats_logs.max_distance_id } }"
                       >
                         {{ distanceFormatMiles(stats_logs.max_distance) }}
                       </router-link>
                       /
                       <router-link
                         class="va-link link"
-                        :to="{ name: 'log-details', params: { id: stats_logs.max_duration_id } }"
+                        :to="{ name: 'log-map', params: { id: stats_logs.max_duration_id } }"
                       >
                         {{ durationFormatHours(stats_logs.max_duration) }}
                         {{ durationI18nHours(stats_logs.max_duration) }}

src/pages/stays/Details.vue

@@ -55,8 +55,7 @@
                 </dd>
                 <dt class="flex xs12 md6 pa-2 va-text-bold">{{ $t('stays.stay.duration') }}</dt>
                 <dd class="flex xs12 md6 pa-2">
-                  {{ durationFormatHours(item.duration) }} {{ durationI18nHours(item.duration) }} /
-                  {{ durationI18nDays(item.duration) }}
+                  {{ durationI18nDaysHours(item.duration) }}
                 </dd>
                 <dt class="flex xs12 md6 pa-2 va-text-bold">{{ $t('stays.stay.stayed_at') }}</dt>
                 <dd class="flex">
@@ -89,7 +88,7 @@
                 </dd>
                 <dt class="flex xs12 md6 pa-2 va-text-bold">{{ $t('stays.stay.arrival') }}</dt>
                 <dd class="flex xs12 md6 pa-2">
-                  <router-link class="link" :to="{ name: 'log-details', params: { id: item.arrived_log_id } }">
+                  <router-link class="link" :to="{ name: 'log-map', params: { id: item.arrived_log_id } }">
                     {{ dateFormatUTC(item.arrived) }}
                   </router-link>
                 </dd>
@@ -104,7 +103,7 @@
                 </dd>
                 <dt class="flex xs12 md6 pa-2 va-text-bold">{{ $t('stays.stay.departure') }}</dt>
                 <dd class="flex xs12 md6 pa-2">
-                  <router-link class="link" :to="{ name: 'log-details', params: { id: item.departed_log_id } }">
+                  <router-link class="link" :to="{ name: 'log-map', params: { id: item.departed_log_id } }">
                     {{ dateFormatUTC(item.departed) }}
                   </router-link>
                 </dd>
@@ -142,7 +141,7 @@
   import { useRoute } from 'vue-router'
   import PostgSail from '../../services/api-client'
   import { useCacheStore } from '../../stores/cache-store'
-  import { dateFormatUTC, durationFormatHours, durationI18nHours, durationI18nDays } from '../../utils/dateFormatter.js'
+  import { dateFormatUTC, durationI18nDaysHours } from '../../utils/dateFormatter.js'
   import Map from '../../components/maps/leafletMapMoorages.vue'
   import { asBusy } from '../../utils/handleExports'
   import StayAt from '../../components/SelectStayAt.vue'

src/pages/stays/List.vue

@@ -62,7 +62,7 @@
             <router-link
               v-if="typeof rowData.departed_log_id !== 'undefined'"
               class="va-link link"
-              :to="{ name: 'log-details', params: { id: rowData.departed_log_id || 0 } }"
+              :to="{ name: 'log-map', params: { id: rowData.departed_log_id || 0 } }"
             >
               {{ dateFormatUTC(value) }}
             </router-link>
@@ -71,7 +71,7 @@
             <router-link
               v-if="typeof rowData.arrived_log_id !== 'undefined'"
               class="va-link link"
-              :to="{ name: 'log-details', params: { id: rowData.arrived_log_id || 0 } }"
+              :to="{ name: 'log-map', params: { id: rowData.arrived_log_id || 0 } }"
             >
               {{ dateFormatUTC(value) }}
             </router-link>

src/pages/stays/Moorage.vue

@@ -10,7 +10,7 @@
         </va-card-content>
       </va-card>
       <va-card class="mb-3">
-        <va-card-title>{{ $t('stays.moorage.title') }}</va-card-title>
+        <va-card-title>{{ $t('stays.moorage.title') }} {{ moorageName }}</va-card-title>
         <va-card-content>
           <template v-if="apiError">
             <va-alert color="danger" outline class="mb-4">{{ $t('api.error') }}: {{ apiError }}</va-alert>
@@ -51,12 +51,12 @@
             class="datatable"
           >
             <template #cell(arrived)="{ value, rowData }">
-              <router-link class="va-link link" :to="{ name: 'log-details', params: { id: rowData.arrived_id } }">
+              <router-link class="va-link link" :to="{ name: 'log-map', params: { id: rowData.arrived_id } }">
                 {{ dateFormatUTC(value) }}
               </router-link>
             </template>
             <template #cell(departed)="{ value, rowData }">
-              <router-link class="va-link link" :to="{ name: 'log-details', params: { id: rowData.departed_id } }">
+              <router-link class="va-link link" :to="{ name: 'log-map', params: { id: rowData.departed_id } }">
                 {{ dateFormatUTC(value) }}
               </router-link>
             </template>
@@ -125,6 +125,7 @@
   const isBusy = ref(false)
   const apiError = ref(null)
   const rowsData = ref([])
+  const moorageName = ref(null) // will be assigned from stays data
   const perPage = ref(20)
   const currentPage = ref(1)
   const columns = ref([
@@ -203,7 +204,7 @@
   const pages = computed(() => {
     return Math.ceil(items.value.length / perPage.value)
   })
-  // TODO Default sort on duration
+
   onMounted(async () => {
     isBusy.value = true
     apiError.value = null
@@ -215,6 +216,9 @@
         rowsData.value.splice(0, rowsData.value.length || [])
         rowsData.value.push(...response)
         console.log('Moorages Stays List rowsData:', rowsData.value)
+        if (rowsData.value[0].name) {
+          moorageName.value = rowsData.value[0].name
+        }
       } else {
         throw { response }
       }

src/router/index.ts

@@ -71,15 +71,15 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import('../pages/logs-book/Page.vue'),
         meta: { isPublic: true, type: 'public_logs_list' },
       },
-      {
-        name: 'log-details',
-        path: 'log/:id(\\d+)',
-        component: () => import('../pages/logs-book/Details.vue'),
-        meta: { isPublic: true, type: 'public_logs' },
-      },
+      // {
+      //   name: 'log-details',
+      //   path: 'log/:id(\\d+)',
+      //   component: () => import('../pages/logs-book/Details.vue'),
+      //   meta: { isPublic: true, type: 'public_logs' },
+      // },
       {
         name: 'log-map',
-        path: 'logmap/:id(\\d+)',
+        path: 'log/:id(\\d+)',
         component: () => import('../pages/logs-book/DetailsMap.vue'),
         meta: { isPublic: true, type: 'public_logs' },
       },