From 6258c86980723e09df3cd648f65321990d69cf8d Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 16:35:07 +0200
Subject: [PATCH 01/28] Logs: move filters to the side of tabs

- hide filter for map
- note about 10 logbooks for Map
- improve contrast on tabs
---
 src/pages/logs-book/Page.vue        | 59 +++++++++++++----------------
 src/pages/logs-book/widgets/Map.vue |  1 -
 2 files changed, 27 insertions(+), 33 deletions(-)

diff --git a/src/pages/logs-book/Page.vue b/src/pages/logs-book/Page.vue
index a3389a0f..38c56b49 100644
--- a/src/pages/logs-book/Page.vue
+++ b/src/pages/logs-book/Page.vue
@@ -1,42 +1,37 @@
 <template>
-  <div>
-    <va-card class="mb-3">
-      <va-card-content>
-        <div class="layout gutter--md">
-          <div class="py-2 grid grid-cols-12 gap-6">
-            <div class="col-span-12 md:col-span-6 flex flex-col">
-              <va-input v-model="filter.name" :clearable="true" placeholder="Filter by name..." />
-            </div>
-            <div class="col-span-12 md:col-span-6 flex flex-col">
-              <va-date-input
-                v-model="filter.dateRange"
-                :readonly="false"
-                :clearable="true"
-                placeholder="Filter by date range..."
-                mode="range"
-              />
-            </div>
-          </div>
-        </div>
-      </va-card-content>
-    </va-card>
-  </div>
-
-  <VaCard>
-    <VaCardContent>
-      <div class="flex flex-col md:flex-row gap-2 mb-2 justify-between">
+  <va-card>
+    <va-card-content>
+      <div class="flex flex-col md:flex-row gap-4 mb-2 justify-between">
         <div class="flex flex-col md:flex-row gap-2 justify-start">
-          <VaButtonToggle
+          <va-button-toggle
             v-model="doShowAsCards"
-            color="background-element"
-            border-color="background-element"
+            preset="secondary"
+            border-color="primary"
+            size="large"
             :options="[
               { label: 'Cards', value: 1 },
-              { label: 'Tables', value: 2 },
+              { label: 'Table', value: 2 },
               { label: 'Map', value: 3 },
             ]"
           />
         </div>
+        <div v-if="doShowAsCards != 3" class="layout flex flex-col md:flex-row gap-4 justify-between">
+          <div class="flex flex-col">
+            <va-input v-model="filter.name" :clearable="true" placeholder="Filter by name..." />
+          </div>
+          <div class="flex flex-col">
+            <va-date-input
+              v-model="filter.dateRange"
+              :readonly="false"
+              :clearable="true"
+              placeholder="Filter by date range..."
+              mode="range"
+            />
+          </div>
+        </div>
+        <div v-else class="layout flex">
+          <p class="text-center">Showing only last 10 logbooks.</p>
+        </div>
       </div>
 
       <LogbookCards
@@ -71,8 +66,8 @@
           @click="handleCSV_all(items)"
         ></va-icon>
       </div>
-    </VaCardContent>
-  </VaCard>
+    </va-card-content>
+  </va-card>
 </template>
 
 <script setup>
diff --git a/src/pages/logs-book/widgets/Map.vue b/src/pages/logs-book/widgets/Map.vue
index db6350d2..053406ee 100644
--- a/src/pages/logs-book/widgets/Map.vue
+++ b/src/pages/logs-book/widgets/Map.vue
@@ -41,7 +41,6 @@
 <template>
   <div>
     <VaInnerLoading :loading="isBusy">
-      <h3>The last 10 logbooks</h3>
       <lMap
         v-if="logbook_geojson.length > 1"
         :geo-json-features="logbook_geojson"

From 9226684133c6ea9979e08cccf0304d2096f1c433 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 17:02:23 +0200
Subject: [PATCH 02/28] Logs: improve tablet

---
 src/pages/logs-book/Page.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/logs-book/Page.vue b/src/pages/logs-book/Page.vue
index 38c56b49..6f8889a8 100644
--- a/src/pages/logs-book/Page.vue
+++ b/src/pages/logs-book/Page.vue
@@ -1,8 +1,8 @@
 <template>
   <va-card>
     <va-card-content>
-      <div class="flex flex-col md:flex-row gap-4 mb-2 justify-between">
-        <div class="flex flex-col md:flex-row gap-2 justify-start">
+      <div class="flex flex-col lg:flex-row gap-4 mb-2 justify-between">
+        <div class="flex flex-col lg:flex-row gap-2 justify-start">
           <va-button-toggle
             v-model="doShowAsCards"
             preset="secondary"
@@ -16,10 +16,10 @@
           />
         </div>
         <div v-if="doShowAsCards != 3" class="layout flex flex-col md:flex-row gap-4 justify-between">
-          <div class="flex flex-col">
+          <div class="flex flex-col md:flex-row">
             <va-input v-model="filter.name" :clearable="true" placeholder="Filter by name..." />
           </div>
-          <div class="flex flex-col">
+          <div class="flex flex-col md:flex-row">
             <va-date-input
               v-model="filter.dateRange"
               :readonly="false"

From 3c24e2af490d6f7f54f7e7af8b82ab683b83e2dc Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 17:13:30 +0200
Subject: [PATCH 03/28] Logs: bring title back

---
 src/pages/logs-book/Page.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/logs-book/Page.vue b/src/pages/logs-book/Page.vue
index 6f8889a8..d6b6e882 100644
--- a/src/pages/logs-book/Page.vue
+++ b/src/pages/logs-book/Page.vue
@@ -1,5 +1,6 @@
 <template>
   <va-card>
+    <va-card-title>{{ $t('logs.list.title') }}</va-card-title>
     <va-card-content>
       <div class="flex flex-col lg:flex-row gap-4 mb-2 justify-between">
         <div class="flex flex-col lg:flex-row gap-2 justify-start">

From d4d3c5651b0e724ed7933ee23f853f8e381cd71e Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 17:13:58 +0200
Subject: [PATCH 04/28] Stays: filters in same card as table

---
 src/pages/stays/List.vue | 69 +++++++++++++++++++---------------------
 1 file changed, 32 insertions(+), 37 deletions(-)

diff --git a/src/pages/stays/List.vue b/src/pages/stays/List.vue
index f0ed0e64..0909d838 100644
--- a/src/pages/stays/List.vue
+++ b/src/pages/stays/List.vue
@@ -1,48 +1,43 @@
 <template>
   <div>
-    <va-card class="mb-3">
-      <va-card-content>
-        <div class="layout gutter--md">
-          <div class="py-2 grid grid-cols-12 gap-6">
-            <div class="col-span-4 md:col-span-3 flex flex-col">
-              <va-input v-model="filter.name" :clearable="true" placeholder="Filter by name..." />
-            </div>
-            <div class="col-span-4 md:col-span-3 flex flex-col">
-              <va-date-input
-                v-model="filter.dateRange"
-                style="width: 100%"
-                :readonly="false"
-                :clearable="true"
-                placeholder="Filter by date range..."
-                mode="range"
-              />
-            </div>
-            <div class="col-span-3 md:col-span-4 flex flex-col">
-              <VaSelect v-model="filter.stayed_at" placeholder="Filter by stay type..." :options="options" multiple>
-                <template #content="{ value }">
-                  <VaChip
-                    v-for="chip in value"
-                    :key="chip.text"
-                    size="small"
-                    class="mr-2"
-                    closeable
-                    @update:modelValue="deleteChip(chip)"
-                  >
-                    {{ chip }}
-                  </VaChip>
-                </template>
-              </VaSelect>
-            </div>
-          </div>
-        </div>
-      </va-card-content>
-    </va-card>
     <va-card>
       <va-card-title>{{ $t('stays.list.title') }}</va-card-title>
       <va-card-content>
         <template v-if="apiError">
           <va-alert color="danger" outline class="mb-4">{{ $t('api.error') }}: {{ apiError }}</va-alert>
         </template>
+        <div class="layout flex flex-col md:flex-row gap-4 justify-between">
+          <div class="flex flex-col md:flex-row">
+            <va-input v-model="filter.name" :clearable="true" placeholder="Filter by name..." />
+          </div>
+          <div class="flex flex-col md:flex-row">
+            <va-date-input
+              v-model="filter.dateRange"
+              style="width: 100%"
+              :readonly="false"
+              :clearable="true"
+              placeholder="Filter by date range..."
+              mode="range"
+            />
+          </div>
+          <div class="flex flex-col md:flex-row">
+            <VaSelect v-model="filter.stayed_at" placeholder="Filter by stay type..." :options="options" multiple>
+              <template #content="{ value }">
+                <VaChip
+                  v-for="chip in value"
+                  :key="chip.text"
+                  size="small"
+                  class="mr-2"
+                  closeable
+                  @update:modelValue="deleteChip(chip)"
+                >
+                  {{ chip }}
+                </VaChip>
+              </template>
+            </VaSelect>
+          </div>
+        </div>
+
         <va-data-table
           :columns="columns"
           :items="items"

From 16e58029e192c8c7b10f3e80ef321588a37f0238 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 17:24:40 +0200
Subject: [PATCH 05/28] Cleanup: use va-xxx-xxx style

---
 src/pages/stays/List.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/stays/List.vue b/src/pages/stays/List.vue
index 0909d838..eba25535 100644
--- a/src/pages/stays/List.vue
+++ b/src/pages/stays/List.vue
@@ -21,9 +21,9 @@
             />
           </div>
           <div class="flex flex-col md:flex-row">
-            <VaSelect v-model="filter.stayed_at" placeholder="Filter by stay type..." :options="options" multiple>
+            <va-select v-model="filter.stayed_at" placeholder="Filter by stay type..." :options="options" multiple>
               <template #content="{ value }">
-                <VaChip
+                <va-chip
                   v-for="chip in value"
                   :key="chip.text"
                   size="small"
@@ -32,9 +32,9 @@
                   @update:modelValue="deleteChip(chip)"
                 >
                   {{ chip }}
-                </VaChip>
+                </va-chip>
               </template>
-            </VaSelect>
+            </va-select>
           </div>
         </div>
 

From 15958b923008de18d5ce3ca509ef97f432cfb76c Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 17:48:23 +0200
Subject: [PATCH 06/28] Temp workaround for Vuestic date range picker bug

---
 src/pages/logs-book/List.vue | 4 ++++
 src/pages/logs-book/Page.vue | 4 ++++
 src/pages/stays/List.vue     | 4 ++++
 src/pages/stays/Moorage.vue  | 4 ++++
 4 files changed, 16 insertions(+)

diff --git a/src/pages/logs-book/List.vue b/src/pages/logs-book/List.vue
index bce078c2..37cb8318 100644
--- a/src/pages/logs-book/List.vue
+++ b/src/pages/logs-book/List.vue
@@ -206,6 +206,10 @@
                       row.to.toLowerCase().includes(f[fkey].toLowerCase())
                     )
                   case 'dateRange':
+                    // TODO: temp fix for Vuestic date range bug
+                    if (!f[fkey].start || !f[fkey].end) {
+                      return true
+                    }
                     return areIntervalsOverlapping(
                       { start: new Date(row.fromTime), end: new Date(row.toTime) },
                       f[fkey],
diff --git a/src/pages/logs-book/Page.vue b/src/pages/logs-book/Page.vue
index d6b6e882..9d653793 100644
--- a/src/pages/logs-book/Page.vue
+++ b/src/pages/logs-book/Page.vue
@@ -251,6 +251,10 @@
                       row.to.toLowerCase().includes(f[fkey].toLowerCase())
                     )
                   case 'dateRange':
+                    // TODO: temp fix for Vuestic date range bug
+                    if (!f[fkey].start || !f[fkey].end) {
+                      return true
+                    }
                     return areIntervalsOverlapping(
                       { start: new Date(row.fromTime), end: new Date(row.toTime) },
                       f[fkey],
diff --git a/src/pages/stays/List.vue b/src/pages/stays/List.vue
index eba25535..14ac1d46 100644
--- a/src/pages/stays/List.vue
+++ b/src/pages/stays/List.vue
@@ -213,6 +213,10 @@
                     row.moorage.toLowerCase().includes(f[fkey].toLowerCase())
                   )
                 case 'dateRange':
+                  // TODO: temp fix for Vuestic date range bug
+                  if (!f[fkey].start || !f[fkey].end) {
+                    return true
+                  }
                   return areIntervalsOverlapping({ start: new Date(row.arrived), end: new Date(row.departed) }, f[fkey])
                 case 'stayed_at':
                   var valid = false
diff --git a/src/pages/stays/Moorage.vue b/src/pages/stays/Moorage.vue
index 42771edb..07f5b3f0 100644
--- a/src/pages/stays/Moorage.vue
+++ b/src/pages/stays/Moorage.vue
@@ -188,6 +188,10 @@
               }
               switch (fkey) {
                 case 'dateRange':
+                  // TODO: temp fix for Vuestic date range bug
+                  if (!f[fkey].start || !f[fkey].end) {
+                    return true
+                  }
                   return areIntervalsOverlapping({ start: new Date(row.arrived), end: new Date(row.departed) }, f[fkey])
                 case 'stayed_at':
                   var valid = false

From 5aff24c8d87fd7d5e0b984b9d27ed7f192fe3d44 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 17:57:20 +0200
Subject: [PATCH 07/28] Stays: better for tablet

---
 src/pages/stays/List.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/stays/List.vue b/src/pages/stays/List.vue
index 14ac1d46..79d11d11 100644
--- a/src/pages/stays/List.vue
+++ b/src/pages/stays/List.vue
@@ -6,7 +6,7 @@
         <template v-if="apiError">
           <va-alert color="danger" outline class="mb-4">{{ $t('api.error') }}: {{ apiError }}</va-alert>
         </template>
-        <div class="layout flex flex-col md:flex-row gap-4 justify-between">
+        <div class="layout flex flex-col lg:flex-row gap-4 justify-between">
           <div class="flex flex-col md:flex-row">
             <va-input v-model="filter.name" :clearable="true" placeholder="Filter by name..." />
           </div>

From 5bf74d7ebfc7522fadee25fe7bf52c3232179407 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 18:00:50 +0200
Subject: [PATCH 08/28] Stay-Moorage: filters in same card as table

---
 src/pages/stays/Moorage.vue | 58 +++++++++++++++++--------------------
 1 file changed, 26 insertions(+), 32 deletions(-)

diff --git a/src/pages/stays/Moorage.vue b/src/pages/stays/Moorage.vue
index 07f5b3f0..3b2435d9 100644
--- a/src/pages/stays/Moorage.vue
+++ b/src/pages/stays/Moorage.vue
@@ -9,44 +9,38 @@
           <Map style="width: 100%; height: 40vh" :map-zoom="12" :moorage-map-id="Number.parseInt(route.params.id)" />
         </va-card-content>
       </va-card>
-      <va-card class="mb-3">
-        <va-card-content>
-          <div class="layout gutter--md">
-            <div class="py-2 grid grid-cols-12 gap-6">
-              <div class="col-span-12 md:col-span-6 flex flex-col">
-                <va-date-input
-                  v-model="filter.dateRange"
-                  :clearable="true"
-                  placeholder="Filter by date range..."
-                  mode="range"
-                />
-              </div>
-              <div class="col-span-12 md:col-span-6 flex flex-col">
-                <VaSelect v-model="filter.stayed_at" placeholder="Filter by stay type..." :options="options" multiple>
-                  <template #content="{ value }">
-                    <VaChip
-                      v-for="chip in value"
-                      :key="chip.text"
-                      size="small"
-                      class="mr-2"
-                      closeable
-                      @update:modelValue="deleteChip(chip)"
-                    >
-                      {{ chip }}
-                    </VaChip>
-                  </template>
-                </VaSelect>
-              </div>
-            </div>
-          </div>
-        </va-card-content>
-      </va-card>
       <va-card class="mb-3">
         <va-card-title>{{ $t('moorages.list.title') }}</va-card-title>
         <va-card-content>
           <template v-if="apiError">
             <va-alert color="danger" outline class="mb-4">{{ $t('api.error') }}: {{ apiError }}</va-alert>
           </template>
+          <div class="layout flex flex-col lg:flex-row gap-4 justify-between">
+            <div class="flex flex-col md:flex-row">
+              <va-date-input
+                v-model="filter.dateRange"
+                :clearable="true"
+                placeholder="Filter by date range..."
+                mode="range"
+              />
+            </div>
+            <div class="flex flex-col md:flex-row">
+              <va-select v-model="filter.stayed_at" placeholder="Filter by stay type..." :options="options" multiple>
+                <template #content="{ value }">
+                  <va-chip
+                    v-for="chip in value"
+                    :key="chip.text"
+                    size="small"
+                    class="mr-2"
+                    closeable
+                    @update:modelValue="deleteChip(chip)"
+                  >
+                    {{ chip }}
+                  </va-chip>
+                </template>
+              </va-select>
+            </div>
+          </div>
           <va-data-table
             v-model:sort-by="sorting.sortBy"
             v-model:sorting-order="sorting.sortingOrder"

From 140a3ec77da6d4cea3a4058f152f0ea8a10c4477 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 18:07:14 +0200
Subject: [PATCH 09/28] Moorages:  filters in same card as table

---
 src/pages/moorages/List.vue | 60 +++++++++++++++++--------------------
 1 file changed, 27 insertions(+), 33 deletions(-)

diff --git a/src/pages/moorages/List.vue b/src/pages/moorages/List.vue
index 1ad3897c..e31405ef 100644
--- a/src/pages/moorages/List.vue
+++ b/src/pages/moorages/List.vue
@@ -4,45 +4,39 @@
   </template>
   <template v-else>
     <div>
-      <va-card class="mb-3">
-        <va-card-content>
-          <div class="layout gutter--md">
-            <div class="py-2 grid grid-cols-12 gap-6">
-              <div class="col-span-12 md:col-span-6 flex flex-col">
-                <va-input v-model="filter.name" :clearable="true" placeholder="Filter by name..." />
-              </div>
-              <div class="col-span-12 md:col-span-6 flex flex-col">
-                <VaSelect
-                  v-model="filter.default_stay"
-                  placeholder="Filter by default stay type..."
-                  :options="options"
-                  multiple
-                  text-by="text"
-                >
-                  <template #content="{ value }">
-                    <VaChip
-                      v-for="chip in value"
-                      :key="chip.text"
-                      size="small"
-                      class="mr-2"
-                      closeable
-                      @update:modelValue="deleteChip(chip)"
-                    >
-                      {{ chip }}
-                    </VaChip>
-                  </template>
-                </VaSelect>
-              </div>
-            </div>
-          </div>
-        </va-card-content>
-      </va-card>
       <va-card class="mb-3">
         <va-card-title>{{ $t('moorages.list.title') }}</va-card-title>
         <va-card-content>
           <template v-if="apiError">
             <va-alert color="danger" outline class="mb-4">{{ $t('api.error') }}: {{ apiError }}</va-alert>
           </template>
+          <div class="layout flex flex-col lg:flex-row gap-4 justify-between">
+            <div>
+              <va-input v-model="filter.name" :clearable="true" placeholder="Filter by name..." />
+            </div>
+            <div>
+              <va-select
+                v-model="filter.default_stay"
+                placeholder="Filter by default stay type..."
+                :options="options"
+                multiple
+                text-by="text"
+              >
+                <template #content="{ value }">
+                  <va-chip
+                    v-for="chip in value"
+                    :key="chip.text"
+                    size="small"
+                    class="mr-2"
+                    closeable
+                    @update:modelValue="deleteChip(chip)"
+                  >
+                    {{ chip }}
+                  </va-chip>
+                </template>
+              </va-select>
+            </div>
+          </div>
           <va-data-table
             v-model:sort-by="sorting.sortBy"
             v-model:sorting-order="sorting.sortingOrder"

From 10ff676b02b0b2495a6fea29a22b66a9528343a6 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 18:21:17 +0200
Subject: [PATCH 10/28] Cleanup: remove <div> that is not needed

+ date-input to 100% width
---
 src/pages/logs-book/Page.vue | 22 +++++++---------
 src/pages/moorages/List.vue  | 46 +++++++++++++++-----------------
 src/pages/stays/List.vue     | 51 ++++++++++++++++--------------------
 src/pages/stays/Moorage.vue  | 45 +++++++++++++++----------------
 4 files changed, 73 insertions(+), 91 deletions(-)

diff --git a/src/pages/logs-book/Page.vue b/src/pages/logs-book/Page.vue
index 9d653793..d303e9a6 100644
--- a/src/pages/logs-book/Page.vue
+++ b/src/pages/logs-book/Page.vue
@@ -16,19 +16,15 @@
             ]"
           />
         </div>
-        <div v-if="doShowAsCards != 3" class="layout flex flex-col md:flex-row gap-4 justify-between">
-          <div class="flex flex-col md:flex-row">
-            <va-input v-model="filter.name" :clearable="true" placeholder="Filter by name..." />
-          </div>
-          <div class="flex flex-col md:flex-row">
-            <va-date-input
-              v-model="filter.dateRange"
-              :readonly="false"
-              :clearable="true"
-              placeholder="Filter by date range..."
-              mode="range"
-            />
-          </div>
+        <div v-if="doShowAsCards != 3" class="layout flex flex-col lg:flex-row gap-4 justify-between">
+          <va-input v-model="filter.name" :clearable="true" placeholder="Filter by name..." />
+          <va-date-input
+            v-model="filter.dateRange"
+            style="width: 100%"
+            :clearable="true"
+            placeholder="Filter by date range..."
+            mode="range"
+          />
         </div>
         <div v-else class="layout flex">
           <p class="text-center">Showing only last 10 logbooks.</p>
diff --git a/src/pages/moorages/List.vue b/src/pages/moorages/List.vue
index e31405ef..fb213abc 100644
--- a/src/pages/moorages/List.vue
+++ b/src/pages/moorages/List.vue
@@ -11,31 +11,27 @@
             <va-alert color="danger" outline class="mb-4">{{ $t('api.error') }}: {{ apiError }}</va-alert>
           </template>
           <div class="layout flex flex-col lg:flex-row gap-4 justify-between">
-            <div>
-              <va-input v-model="filter.name" :clearable="true" placeholder="Filter by name..." />
-            </div>
-            <div>
-              <va-select
-                v-model="filter.default_stay"
-                placeholder="Filter by default stay type..."
-                :options="options"
-                multiple
-                text-by="text"
-              >
-                <template #content="{ value }">
-                  <va-chip
-                    v-for="chip in value"
-                    :key="chip.text"
-                    size="small"
-                    class="mr-2"
-                    closeable
-                    @update:modelValue="deleteChip(chip)"
-                  >
-                    {{ chip }}
-                  </va-chip>
-                </template>
-              </va-select>
-            </div>
+            <va-input v-model="filter.name" :clearable="true" placeholder="Filter by name..." />
+            <va-select
+              v-model="filter.default_stay"
+              placeholder="Filter by default stay type..."
+              :options="options"
+              multiple
+              text-by="text"
+            >
+              <template #content="{ value }">
+                <va-chip
+                  v-for="chip in value"
+                  :key="chip.text"
+                  size="small"
+                  class="mr-2"
+                  closeable
+                  @update:modelValue="deleteChip(chip)"
+                >
+                  {{ chip }}
+                </va-chip>
+              </template>
+            </va-select>
           </div>
           <va-data-table
             v-model:sort-by="sorting.sortBy"
diff --git a/src/pages/stays/List.vue b/src/pages/stays/List.vue
index 79d11d11..2e2fdd68 100644
--- a/src/pages/stays/List.vue
+++ b/src/pages/stays/List.vue
@@ -7,35 +7,28 @@
           <va-alert color="danger" outline class="mb-4">{{ $t('api.error') }}: {{ apiError }}</va-alert>
         </template>
         <div class="layout flex flex-col lg:flex-row gap-4 justify-between">
-          <div class="flex flex-col md:flex-row">
-            <va-input v-model="filter.name" :clearable="true" placeholder="Filter by name..." />
-          </div>
-          <div class="flex flex-col md:flex-row">
-            <va-date-input
-              v-model="filter.dateRange"
-              style="width: 100%"
-              :readonly="false"
-              :clearable="true"
-              placeholder="Filter by date range..."
-              mode="range"
-            />
-          </div>
-          <div class="flex flex-col md:flex-row">
-            <va-select v-model="filter.stayed_at" placeholder="Filter by stay type..." :options="options" multiple>
-              <template #content="{ value }">
-                <va-chip
-                  v-for="chip in value"
-                  :key="chip.text"
-                  size="small"
-                  class="mr-2"
-                  closeable
-                  @update:modelValue="deleteChip(chip)"
-                >
-                  {{ chip }}
-                </va-chip>
-              </template>
-            </va-select>
-          </div>
+          <va-input v-model="filter.name" :clearable="true" placeholder="Filter by name..." />
+          <va-date-input
+            v-model="filter.dateRange"
+            style="width: 100%"
+            :clearable="true"
+            placeholder="Filter by date range..."
+            mode="range"
+          />
+          <va-select v-model="filter.stayed_at" placeholder="Filter by stay type..." :options="options" multiple>
+            <template #content="{ value }">
+              <va-chip
+                v-for="chip in value"
+                :key="chip.text"
+                size="small"
+                class="mr-2"
+                closeable
+                @update:modelValue="deleteChip(chip)"
+              >
+                {{ chip }}
+              </va-chip>
+            </template>
+          </va-select>
         </div>
 
         <va-data-table
diff --git a/src/pages/stays/Moorage.vue b/src/pages/stays/Moorage.vue
index 3b2435d9..512d29f7 100644
--- a/src/pages/stays/Moorage.vue
+++ b/src/pages/stays/Moorage.vue
@@ -16,30 +16,27 @@
             <va-alert color="danger" outline class="mb-4">{{ $t('api.error') }}: {{ apiError }}</va-alert>
           </template>
           <div class="layout flex flex-col lg:flex-row gap-4 justify-between">
-            <div class="flex flex-col md:flex-row">
-              <va-date-input
-                v-model="filter.dateRange"
-                :clearable="true"
-                placeholder="Filter by date range..."
-                mode="range"
-              />
-            </div>
-            <div class="flex flex-col md:flex-row">
-              <va-select v-model="filter.stayed_at" placeholder="Filter by stay type..." :options="options" multiple>
-                <template #content="{ value }">
-                  <va-chip
-                    v-for="chip in value"
-                    :key="chip.text"
-                    size="small"
-                    class="mr-2"
-                    closeable
-                    @update:modelValue="deleteChip(chip)"
-                  >
-                    {{ chip }}
-                  </va-chip>
-                </template>
-              </va-select>
-            </div>
+            <va-date-input
+              v-model="filter.dateRange"
+              style="width: 100%"
+              :clearable="true"
+              placeholder="Filter by date range..."
+              mode="range"
+            />
+            <va-select v-model="filter.stayed_at" placeholder="Filter by stay type..." :options="options" multiple>
+              <template #content="{ value }">
+                <va-chip
+                  v-for="chip in value"
+                  :key="chip.text"
+                  size="small"
+                  class="mr-2"
+                  closeable
+                  @update:modelValue="deleteChip(chip)"
+                >
+                  {{ chip }}
+                </va-chip>
+              </template>
+            </va-select>
           </div>
           <va-data-table
             v-model:sort-by="sorting.sortBy"

From ae8118b6d8f96dbf2ff3aa556feba730bf0b3c21 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 18:50:19 +0200
Subject: [PATCH 11/28] Logs/Stays/Moorages: add vesselName to title, fix title
 text

---
 src/i18n/locales/br.json     | 6 +++---
 src/i18n/locales/es.json     | 6 +++---
 src/i18n/locales/fr.json     | 6 +++---
 src/i18n/locales/gb.json     | 6 +++---
 src/pages/logs-book/Page.vue | 6 +++++-
 src/pages/moorages/List.vue  | 5 ++++-
 src/pages/stays/List.vue     | 5 ++++-
 7 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/i18n/locales/br.json b/src/i18n/locales/br.json
index fa67c183..a677d774 100644
--- a/src/i18n/locales/br.json
+++ b/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",
@@ -190,7 +190,7 @@
   },
   "moorages": {
     "list": {
-      "title": "Moorages list",
+      "title": "Moorages of",
       "filter": {
         "title": "Search for moorage",
         "name": "Name",
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index 15d430b1..34dd59fc 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.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",
@@ -190,7 +190,7 @@
   },
   "moorages": {
     "list": {
-      "title": "Moorages list",
+      "title": "Moorages of",
       "filter": {
         "title": "Search for moorage",
         "name": "Name",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index 3197fb65..9f324c27 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.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",
@@ -190,7 +190,7 @@
   },
   "moorages": {
     "list": {
-      "title": "Moorages list",
+      "title": "Moorages of",
       "filter": {
         "title": "Search for moorage",
         "name": "Name",
diff --git a/src/i18n/locales/gb.json b/src/i18n/locales/gb.json
index 0b23957c..a7b22d22 100644
--- a/src/i18n/locales/gb.json
+++ b/src/i18n/locales/gb.json
@@ -117,7 +117,7 @@
   },
   "logs": {
     "list": {
-      "title": "Logs list - Log book for",
+      "title": "Logs - Log Book for",
       "filter": {
         "title": "Search for log",
         "name": "Name",
@@ -165,7 +165,7 @@
   },
   "stays": {
     "list": {
-      "title": "Stays list - Moorage History of",
+      "title": "Stays - Moorage History of",
       "filter": {
         "title": "Search for stay",
         "name": "Name",
@@ -196,7 +196,7 @@
   },
   "moorages": {
     "list": {
-      "title": "Moorages list",
+      "title": "Moorages of",
       "filter": {
         "title": "Search for moorage",
         "name": "Name",
diff --git a/src/pages/logs-book/Page.vue b/src/pages/logs-book/Page.vue
index d303e9a6..5eb31120 100644
--- a/src/pages/logs-book/Page.vue
+++ b/src/pages/logs-book/Page.vue
@@ -1,6 +1,6 @@
 <template>
   <va-card>
-    <va-card-title>{{ $t('logs.list.title') }}</va-card-title>
+    <va-card-title>{{ $t('logs.list.title') }} {{ vesselName }}</va-card-title>
     <va-card-content>
       <div class="flex flex-col lg:flex-row gap-4 mb-2 justify-between">
         <div class="flex flex-col lg:flex-row gap-2 justify-start">
@@ -85,6 +85,10 @@
   import { useGlobalStore } from '../../stores/global-store'
   import { storeToRefs } from 'pinia'
   import PostgSail from '../../services/api-client'
+  import { useVesselStore } from '../../stores/vessel-store'
+
+  const { vesselName, vesselType } = useVesselStore()
+
   const GlobalStore = useGlobalStore()
   const { isMobile, doShowAsCards, readOnly } = storeToRefs(GlobalStore)
 
diff --git a/src/pages/moorages/List.vue b/src/pages/moorages/List.vue
index fb213abc..3e019a90 100644
--- a/src/pages/moorages/List.vue
+++ b/src/pages/moorages/List.vue
@@ -5,7 +5,7 @@
   <template v-else>
     <div>
       <va-card class="mb-3">
-        <va-card-title>{{ $t('moorages.list.title') }}</va-card-title>
+        <va-card-title>{{ $t('moorages.list.title') }} {{ vesselName }}</va-card-title>
         <va-card-content>
           <template v-if="apiError">
             <va-alert color="danger" outline class="mb-4">{{ $t('api.error') }}: {{ apiError }}</va-alert>
@@ -134,6 +134,9 @@
   import StayAt from '../../components/SelectStayAt.vue'
   import { stayed_at_options } from '../../utils/PostgSail.ts'
   import { durationFormatDays } from '../../utils/dateFormatter.js'
+  import { useVesselStore } from '../../stores/vessel-store'
+
+  const { vesselName, vesselType } = useVesselStore()
 
   import mooragesData from '../../data/moorages.json'
 
diff --git a/src/pages/stays/List.vue b/src/pages/stays/List.vue
index 2e2fdd68..6adbc668 100644
--- a/src/pages/stays/List.vue
+++ b/src/pages/stays/List.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <va-card>
-      <va-card-title>{{ $t('stays.list.title') }}</va-card-title>
+      <va-card-title>{{ $t('stays.list.title') }} {{ vesselName }}</va-card-title>
       <va-card-content>
         <template v-if="apiError">
           <va-alert color="danger" outline class="mb-4">{{ $t('api.error') }}: {{ apiError }}</va-alert>
@@ -133,6 +133,9 @@
   import { asBusy, handleExport } from '../../utils/handleExports'
   import StayAt from '../../components/SelectStayAt.vue'
   import { stayed_at_options } from '../../utils/PostgSail.ts'
+  import { useVesselStore } from '../../stores/vessel-store'
+
+  const { vesselName, vesselType } = useVesselStore()
 
   import staysData from '../../data/stays.json'
 

From e302466b906eaedd7577f8969745866cc5f17c18 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 19:11:38 +0200
Subject: [PATCH 12/28] Stays-Moorage, Moorage-Arrivals: fix title

still missing moorage name
---
 src/i18n/locales/br.json     |  5 +++++
 src/i18n/locales/es.json     |  5 +++++
 src/i18n/locales/fr.json     |  4 ++++
 src/i18n/locales/gb.json     |  4 ++++
 src/pages/logs-book/List.vue | 31 +++++++++++--------------------
 src/pages/stays/Moorage.vue  |  2 +-
 6 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/i18n/locales/br.json b/src/i18n/locales/br.json
index a677d774..2cc54e34 100644
--- a/src/i18n/locales/br.json
+++ b/src/i18n/locales/br.json
@@ -182,6 +182,7 @@
       "note": "Note | Notes"
     },
     "moorage": {
+      "title": "Stays at Moorage",
       "arrived": "Chegou",
       "departed": "Partiu",
       "stayed_at": "Fiquei em",
@@ -202,10 +203,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",
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index 34dd59fc..fa6e8c1b 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -182,6 +182,7 @@
       "note": "Note | Notes"
     },
     "moorage": {
+      "title": "Stays at Moorage",
       "arrived": "Llegó",
       "departed": "Partido",
       "stayed_at": "Me alojé en",
@@ -202,10 +203,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",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index 9f324c27..be1eca15 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -182,6 +182,7 @@
       "note": "Note | Notes"
     },
     "moorage": {
+      "title": "Stays at Moorage",
       "arrived": "Arrivé",
       "departed": "Parti",
       "stayed_at": "Séjourné à",
@@ -202,6 +203,9 @@
       "total_stay": "Total Stay [d]",
       "arrivals": "Arrivals & Departures"
     },
+    "arrivals-departures": {
+      "title": "Arrivals and Departures for Moorage"
+    },
     "details": {
       "title": "Moorage's details"
     },
diff --git a/src/i18n/locales/gb.json b/src/i18n/locales/gb.json
index a7b22d22..9ee2fa12 100644
--- a/src/i18n/locales/gb.json
+++ b/src/i18n/locales/gb.json
@@ -188,6 +188,7 @@
       "note": "Note | Notes"
     },
     "moorage": {
+      "title": "Stays at Moorage",
       "arrived": "Arrived",
       "departed": "Departed",
       "stayed_at": "Stayed at",
@@ -208,6 +209,9 @@
       "total_stay": "Total Stay [d]",
       "arrivals": "Arrivals & Departures"
     },
+    "arrivals-departures": {
+      "title": "Arrivals and Departures for Moorage"
+    },
     "details": {
       "title": "Moorage's details"
     },
diff --git a/src/pages/logs-book/List.vue b/src/pages/logs-book/List.vue
index 37cb8318..2f2d5a7c 100644
--- a/src/pages/logs-book/List.vue
+++ b/src/pages/logs-book/List.vue
@@ -1,30 +1,21 @@
 <template>
   <div>
-    <va-card class="mb-3">
-      <va-card-content>
-        <div class="layout gutter--md">
-          <div class="py-2 grid grid-cols-12 gap-6">
-            <div class="col-span-12 md:col-span-6 flex flex-col">
-              <va-input v-model="filter.name" :clearable="true" placeholder="Filter by name..." />
-            </div>
-            <div class="col-span-12 md:col-span-6 flex flex-col">
-              <va-date-input
-                v-model="filter.dateRange"
-                :clearable="true"
-                placeholder="Filter by date range..."
-                mode="range"
-              />
-            </div>
-          </div>
-        </div>
-      </va-card-content>
-    </va-card>
     <va-card>
-      <va-card-title>{{ $t('logs.list.title') }}</va-card-title>
+      <va-card-title>{{ $t('moorages.arrivals-departures.title') }}</va-card-title>
       <va-card-content>
         <template v-if="apiError">
           <va-alert color="danger" outline class="mb-4">{{ $t('api.error') }}: {{ apiError }}</va-alert>
         </template>
+        <div class="layout flex flex-col lg:flex-row gap-4 justify-between">
+          <va-input v-model="filter.name" :clearable="true" placeholder="Filter by name..." />
+          <va-date-input
+            v-model="filter.dateRange"
+            style="width: 100%"
+            :clearable="true"
+            placeholder="Filter by date range..."
+            mode="range"
+          />
+        </div>
         <va-data-table
           :columns="columns"
           :items="items"
diff --git a/src/pages/stays/Moorage.vue b/src/pages/stays/Moorage.vue
index 512d29f7..1a7f25c0 100644
--- a/src/pages/stays/Moorage.vue
+++ b/src/pages/stays/Moorage.vue
@@ -10,7 +10,7 @@
         </va-card-content>
       </va-card>
       <va-card class="mb-3">
-        <va-card-title>{{ $t('moorages.list.title') }}</va-card-title>
+        <va-card-title>{{ $t('stays.moorage.title') }}</va-card-title>
         <va-card-content>
           <template v-if="apiError">
             <va-alert color="danger" outline class="mb-4">{{ $t('api.error') }}: {{ apiError }}</va-alert>

From c3f7438be4b54b1b27ba6ddb9f2514cc783826f0 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 19:24:32 +0200
Subject: [PATCH 13/28] Simplify

---
 src/pages/logs-book/Page.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/logs-book/Page.vue b/src/pages/logs-book/Page.vue
index 5eb31120..4d397c69 100644
--- a/src/pages/logs-book/Page.vue
+++ b/src/pages/logs-book/Page.vue
@@ -27,7 +27,7 @@
           />
         </div>
         <div v-else class="layout flex">
-          <p class="text-center">Showing only last 10 logbooks.</p>
+          <p class="text-center">Showing only last 10 logs.</p>
         </div>
       </div>
 

From 58fd5b8b42ecc0720e636559ea34c7d54bfafbd9 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 20:38:48 +0200
Subject: [PATCH 14/28] LogMap: nicer popup formatting

---
 src/pages/logs-book/DetailsMap.vue | 58 +++++++++++++++++++-----------
 1 file changed, 37 insertions(+), 21 deletions(-)

diff --git a/src/pages/logs-book/DetailsMap.vue b/src/pages/logs-book/DetailsMap.vue
index e24671a3..859328c3 100644
--- a/src/pages/logs-book/DetailsMap.vue
+++ b/src/pages/logs-book/DetailsMap.vue
@@ -4,7 +4,7 @@
       <va-alert color="danger" outline class="mb-4">{{ $t('api.error') }}: {{ apiError }}</va-alert>
     </template>
     <va-inner-loading :loading="item && isBusy">
-      <va-card title="Leaflet Maps">
+      <va-card>
         <div id="sidebar" ref="sidebarContainer" class="leaflet-sidebar collapsed">
           <!-- Nav tabs -->
           <div class="leaflet-sidebar-tabs">
@@ -256,29 +256,38 @@
     L.control.layers(bMaps, oMaps).addTo(map.value)
 
     const popup = function (feature, layer) {
-      var popupContent =
-        '<p>I started out as a GeoJSON ' + feature.geometry.type + ", but now I'm a Leaflet vector!</p>"
-      // If geo Point click
       if (feature.properties && feature.properties.time) {
-        //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' id='${time}'><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='popup' 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><br/>`
         // Form content
         let content =
           text +
@@ -616,6 +625,13 @@
 </script>
 
 <style>
+  td:nth-child(1) {
+    text-align: right;
+    padding-right: 5px;
+  }
+  td:nth-child(2) {
+    font-weight: bold;
+  }
   .save {
     width: 50%;
     padding: 5px;

From c48e8ff25bc3bc0c4c2d0931cbdaed357f62587c Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 20:43:00 +0200
Subject: [PATCH 15/28] leafletMap: improved popup

---
 src/components/maps/leafletMap.vue | 52 +++++++++++++++++++++---------
 1 file changed, 36 insertions(+), 16 deletions(-)

diff --git a/src/components/maps/leafletMap.vue b/src/components/maps/leafletMap.vue
index 8cdf2221..f99adb75 100644
--- a/src/components/maps/leafletMap.vue
+++ b/src/components/maps/leafletMap.vue
@@ -103,22 +103,35 @@
           //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='popup' 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><br/>`
           popupContent = text
         }
         // If geo linestring click
@@ -228,4 +241,11 @@
     clear: both;
     padding: 1px 1px;
   }
+  td:nth-child(1) {
+    text-align: right;
+    padding-right: 5px;
+  }
+  td:nth-child(2) {
+    font-weight: bold;
+  }
 </style>

From 6b7a5dec681a3508e567eaeaf6456b0a510e1fb0 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 20:50:17 +0200
Subject: [PATCH 16/28] Apply td style only in popup

---
 src/components/maps/leafletMap.vue | 14 ++++++++------
 src/pages/logs-book/DetailsMap.vue | 14 ++++++++------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/maps/leafletMap.vue b/src/components/maps/leafletMap.vue
index f99adb75..c57b5349 100644
--- a/src/components/maps/leafletMap.vue
+++ b/src/components/maps/leafletMap.vue
@@ -241,11 +241,13 @@
     clear: both;
     padding: 1px 1px;
   }
-  td:nth-child(1) {
-    text-align: right;
-    padding-right: 5px;
-  }
-  td:nth-child(2) {
-    font-weight: bold;
+  .popup {
+    td:nth-child(1) {
+      text-align: right;
+      padding-right: 5px;
+    }
+    td:nth-child(2) {
+      font-weight: bold;
+    }
   }
 </style>
diff --git a/src/pages/logs-book/DetailsMap.vue b/src/pages/logs-book/DetailsMap.vue
index 859328c3..9e408ba7 100644
--- a/src/pages/logs-book/DetailsMap.vue
+++ b/src/pages/logs-book/DetailsMap.vue
@@ -625,12 +625,14 @@
 </script>
 
 <style>
-  td:nth-child(1) {
-    text-align: right;
-    padding-right: 5px;
-  }
-  td:nth-child(2) {
-    font-weight: bold;
+  .popup {
+    td:nth-child(1) {
+      text-align: right;
+      padding-right: 5px;
+    }
+    td:nth-child(2) {
+      font-weight: bold;
+    }
   }
   .save {
     width: 50%;

From 4603b864ea8d21bf3799b65f75004450d3b9c0fd Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 20:50:56 +0200
Subject: [PATCH 17/28] Remove 2x miles in popup

---
 src/components/maps/leafletMapMoorages.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/maps/leafletMapMoorages.vue b/src/components/maps/leafletMapMoorages.vue
index bbf1edb3..5bc2fa8a 100644
--- a/src/components/maps/leafletMapMoorages.vue
+++ b/src/components/maps/leafletMapMoorages.vue
@@ -184,7 +184,7 @@
       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>`
+        ${date}, ${distance}, ${duration} hours<br/></div>`
       // TODO should be done using i18n
       popupContent = text
     }

From 751b7e508dd79123d3bcd779edeeabc3deb4af2b Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 20:55:33 +0200
Subject: [PATCH 18/28] MMSI cleanup

---
 src/i18n/locales/br.json | 3 +--
 src/i18n/locales/de.json | 2 +-
 src/i18n/locales/es.json | 3 +--
 src/i18n/locales/fr.json | 3 +--
 src/i18n/locales/gb.json | 3 +--
 5 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/i18n/locales/br.json b/src/i18n/locales/br.json
index 2cc54e34..a17f29f5 100644
--- a/src/i18n/locales/br.json
+++ b/src/i18n/locales/br.json
@@ -252,7 +252,7 @@
     },
     "boat": {
       "name": "Name | Names",
-      "mmsi": "MMSI (opcional)",
+      "mmsi": "MMSI",
       "first_contact": "Primeiro contato",
       "last_contact": "Último contato",
       "created_at": "Creado en",
@@ -260,7 +260,6 @@
         "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",
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index cb6fd8e9..5b367241 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -251,7 +251,7 @@
     },
     "boat": {
       "name": "Name | Namen",
-      "mmsi": "MMSI (fakultativ)",
+      "mmsi": "MMSI",
       "first_contact": "First Kontakt",
       "last_contact": "Letzter Kontakt",
       "created_at": "Erstellt am",
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index fa6e8c1b..4230fa37 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -252,7 +252,7 @@
     },
     "boat": {
       "name": "Nombre | Nombres",
-      "mmsi": "MMSI (opcional)",
+      "mmsi": "MMSI",
       "first_contact": "Primero contacto",
       "last_contact": "Último contacto",
       "created_at": "Creado en",
@@ -260,7 +260,6 @@
         "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",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index be1eca15..4504ede8 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -251,7 +251,7 @@
     },
     "boat": {
       "name": "Nom | Noms",
-      "mmsi": "MMSI (facultatif)",
+      "mmsi": "MMSI",
       "first_contact": "Premiere contact",
       "last_contact": "Dernier contact",
       "created_at": "Créé à",
@@ -259,7 +259,6 @@
         "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",
diff --git a/src/i18n/locales/gb.json b/src/i18n/locales/gb.json
index 9ee2fa12..d391e898 100644
--- a/src/i18n/locales/gb.json
+++ b/src/i18n/locales/gb.json
@@ -257,7 +257,7 @@
     },
     "boat": {
       "name": "Boat Name | Names",
-      "mmsi": "MMSI (optional)",
+      "mmsi": "MMSI",
       "first_contact": "First Contact",
       "last_contact": "Last Contact",
       "created_at": "Created at",
@@ -266,7 +266,6 @@
         "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",

From ce8d103e5144bc1441e05fd77b7862887079b794 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 20:59:00 +0200
Subject: [PATCH 19/28] NM/km/kts for non-english

---
 src/i18n/locales/br.json | 6 +++---
 src/i18n/locales/de.json | 6 +++---
 src/i18n/locales/es.json | 6 +++---
 src/i18n/locales/fr.json | 6 +++---
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/i18n/locales/br.json b/src/i18n/locales/br.json
index a17f29f5..f309818c 100644
--- a/src/i18n/locales/br.json
+++ b/src/i18n/locales/br.json
@@ -421,11 +421,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",
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index 5b367241..6be3bf71 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -423,11 +423,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",
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index 4230fa37..a1f080eb 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -421,11 +421,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",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index 4504ede8..bb5f31fd 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -420,11 +420,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",

From 66355667945219b9bbaa617171fff5890ab6b10c Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 21:00:13 +0200
Subject: [PATCH 20/28] remove warning

---
 src/i18n/locales/de.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index 6be3bf71..48938534 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -260,7 +260,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",

From 5226cdaad87b1b38dcd25a4a61bc3737de6560a1 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 21:08:47 +0200
Subject: [PATCH 21/28] Fix mpopup style

---
 src/components/maps/leafletMap.vue | 22 +++++++++++-----------
 src/pages/logs-book/DetailsMap.vue |  6 +++---
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/maps/leafletMap.vue b/src/components/maps/leafletMap.vue
index c57b5349..9203dcd4 100644
--- a/src/components/maps/leafletMap.vue
+++ b/src/components/maps/leafletMap.vue
@@ -110,7 +110,7 @@
           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='popup' id='${time}'><h4>${vesselName}: ${status}</h4><br/>
+          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>`
@@ -228,7 +228,16 @@
   }
 </script>
 
-<style scoped>
+<style lang="scss">
+  .mpopup {
+    td:nth-child(1) {
+      text-align: right;
+      padding-right: 5px;
+    }
+    td:nth-child(2) {
+      font-weight: bold;
+    }
+  }
   #mapContainer {
     z-index: 0;
   }
@@ -241,13 +250,4 @@
     clear: both;
     padding: 1px 1px;
   }
-  .popup {
-    td:nth-child(1) {
-      text-align: right;
-      padding-right: 5px;
-    }
-    td:nth-child(2) {
-      font-weight: bold;
-    }
-  }
 </style>
diff --git a/src/pages/logs-book/DetailsMap.vue b/src/pages/logs-book/DetailsMap.vue
index 9e408ba7..04668e3a 100644
--- a/src/pages/logs-book/DetailsMap.vue
+++ b/src/pages/logs-book/DetailsMap.vue
@@ -266,7 +266,7 @@
         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='popup' id='${time}'><h4>${vesselName}: ${status}</h4><br/>
+        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>`
@@ -624,8 +624,8 @@
   }
 </script>
 
-<style>
-  .popup {
+<style lang="scss">
+  .mpopup {
     td:nth-child(1) {
       text-align: right;
       padding-right: 5px;

From 9259105899c05472e6d9c3b09095b895c6131ea2 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 21:25:53 +0200
Subject: [PATCH 22/28] leafletMap: imrpove formatting multi track popup

---
 src/components/maps/leafletMap.vue | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/components/maps/leafletMap.vue b/src/components/maps/leafletMap.vue
index 9203dcd4..616737d9 100644
--- a/src/components/maps/leafletMap.vue
+++ b/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'
 
@@ -131,22 +132,26 @@
           if (feature.properties.truewinddirection && feature.properties.courseovergroundtrue) {
             text += `<tr><td>AWA</td><td>${awa}</td></tr>`
           }
-          text += `</tbody></table></div><br/>`
+          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 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 duration = durationFormatHours(feature.properties.duration)
+          let distance = distanceFormatMiles(feature.properties.distance)
+          let text = `<div class='mpopup'>
+                        <h4><a id="logLink" onclick="logLink(${feature.properties.id})">
+                          ${feature.properties.name}</a></h4><br/>
+                        <table class='data'><tbody>
+                          <tr><td>Time</td><td>${time}</td></tr>
+                          <tr><td>Average Speed</td><td>${avg_speed}</td></tr>
+                          <tr><td>Distance</td><td>${distance}</td></tr>
+                          <tr><td>Duration</td><td>${duration} hours</td></tr>
+                        </tbody></table></br>
+                        <a id="timelapseLink" onclick="timelapseLink(${feature.properties.id})">Replay</a>
+                      </div>`
           popupContent = text
 
           // Go to logbook details page
@@ -237,6 +242,9 @@
     td:nth-child(2) {
       font-weight: bold;
     }
+    a {
+      cursor: pointer;
+    }
   }
   #mapContainer {
     z-index: 0;

From f9f8b74b5955848bd8bc487067730121cbce1347 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 21:49:03 +0200
Subject: [PATCH 23/28] Moorages Map: add max speed, max wind speed

---
 src/components/maps/leafletMap.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/maps/leafletMap.vue b/src/components/maps/leafletMap.vue
index 616737d9..58850962 100644
--- a/src/components/maps/leafletMap.vue
+++ b/src/components/maps/leafletMap.vue
@@ -138,17 +138,20 @@
         // If geo linestring click
         if (feature.properties && feature.properties._from_time) {
           let time = dateFormatUTC(feature.properties._from_time)
-          let avg_speed = speedFormatKnots(feature.properties.avg_speed)
           let duration = durationFormatHours(feature.properties.duration)
           let distance = distanceFormatMiles(feature.properties.distance)
+          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 id="logLink" onclick="logLink(${feature.properties.id})">
                           ${feature.properties.name}</a></h4><br/>
                         <table class='data'><tbody>
                           <tr><td>Time</td><td>${time}</td></tr>
-                          <tr><td>Average Speed</td><td>${avg_speed}</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 Max</td><td>${max_wind}</td></tr>
                         </tbody></table></br>
                         <a id="timelapseLink" onclick="timelapseLink(${feature.properties.id})">Replay</a>
                       </div>`

From f39a2f46dfd0506f4f2b04ef5eac8b7aee759197 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 21:59:21 +0200
Subject: [PATCH 24/28] simplify links from popup

---
 src/components/maps/leafletMap.vue | 18 ++----------------
 1 file changed, 2 insertions(+), 16 deletions(-)

diff --git a/src/components/maps/leafletMap.vue b/src/components/maps/leafletMap.vue
index 58850962..0318a0b8 100644
--- a/src/components/maps/leafletMap.vue
+++ b/src/components/maps/leafletMap.vue
@@ -144,8 +144,7 @@
           let max_speed = speedFormatKnots(feature.properties.max_speed)
           let max_wind = speedFormatKnots(feature.properties.max_wind_speed)
           let text = `<div class='mpopup'>
-                        <h4><a id="logLink" onclick="logLink(${feature.properties.id})">
-                          ${feature.properties.name}</a></h4><br/>
+                        <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>
@@ -153,22 +152,9 @@
                           <tr><td>Speed Ave/Max</td><td>${avg_speed} / ${max_speed}</td></tr>
                           <tr><td>Wind Max</td><td>${max_wind}</td></tr>
                         </tbody></table></br>
-                        <a id="timelapseLink" onclick="timelapseLink(${feature.properties.id})">Replay</a>
+                        <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)
       }

From f52eb804626cadc15721379e3a6f7efee81dc714 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 22:13:06 +0200
Subject: [PATCH 25/28] Moorage Map: improve popups

---
 src/components/maps/leafletMapMoorages.vue | 53 ++++++++++++++--------
 1 file changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/components/maps/leafletMapMoorages.vue b/src/components/maps/leafletMapMoorages.vue
index 5bc2fa8a..4c3d7ac4 100644
--- a/src/components/maps/leafletMapMoorages.vue
+++ b/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,13 @@
       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,
-      })
     }
 
     const layer = L.geoJSON(geojson, {
@@ -174,18 +170,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}, ${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 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 +282,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>

From 98cd5a8254244c52338839cf43f2f4575f37f91c Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 22:21:35 +0200
Subject: [PATCH 26/28] Re-add duration i18n

---
 src/i18n/locales/br.json | 2 ++
 src/i18n/locales/de.json | 2 ++
 src/i18n/locales/es.json | 2 ++
 src/i18n/locales/fr.json | 2 ++
 src/i18n/locales/gb.json | 2 ++
 5 files changed, 10 insertions(+)

diff --git a/src/i18n/locales/br.json b/src/i18n/locales/br.json
index f309818c..74a2ffb4 100644
--- a/src/i18n/locales/br.json
+++ b/src/i18n/locales/br.json
@@ -178,6 +178,7 @@
       "departed": "Departed",
       "arrived": "Arrived",
       "stayed_at": "Fiquei em",
+      "duration": "Duração",
       "duration_d": "Duração [d]",
       "note": "Note | Notes"
     },
@@ -186,6 +187,7 @@
       "arrived": "Chegou",
       "departed": "Partiu",
       "stayed_at": "Fiquei em",
+      "duration": "Duração",
       "duration_d": "Duração [d]"
     }
   },
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index 48938534..9753d172 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -182,6 +182,7 @@
       "departed": "Abgereist",
       "arrived": "Angekommen",
       "stayed_at": "Verbleib",
+      "duration": "Dauer",
       "duration_d": "Dauer [t]",
       "note": "Notiz | Notizen"
     },
@@ -189,6 +190,7 @@
       "arrived": "Arrived",
       "departed": "Departed",
       "stayed_at": "Stayed at",
+      "duration": "Dauer",
       "duration_d": "Dauer [t]"
     }
   },
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index a1f080eb..78bda616 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -178,6 +178,7 @@
       "departed": "Departed To",
       "arrived": "Arrived",
       "stayed_at": "Stayed at",
+      "duration": "Duración",
       "duration_d": "Duración [d]",
       "note": "Note | Notes"
     },
@@ -186,6 +187,7 @@
       "arrived": "Llegó",
       "departed": "Partido",
       "stayed_at": "Me alojé en",
+      "duration": "Duración",
       "duration_d": "Duración [d]"
     }
   },
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index bb5f31fd..372ed82f 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -178,6 +178,7 @@
       "departed": "Departed",
       "arrived": "Arrived",
       "stayed_at": "Séjourné à",
+      "duration": "Durée",
       "duration_d": "Durée [j]",
       "note": "Note | Notes"
     },
@@ -186,6 +187,7 @@
       "arrived": "Arrivé",
       "departed": "Parti",
       "stayed_at": "Séjourné à",
+      "duration": "Durée",
       "duration_d": "Durée [j]"
     }
   },
diff --git a/src/i18n/locales/gb.json b/src/i18n/locales/gb.json
index d391e898..0b11b92c 100644
--- a/src/i18n/locales/gb.json
+++ b/src/i18n/locales/gb.json
@@ -184,6 +184,7 @@
       "departed": "Departed",
       "arrived": "Arrived",
       "stayed_at": "Stayed at",
+      "duration": "Duration",
       "duration_d": "Duration [d]",
       "note": "Note | Notes"
     },
@@ -192,6 +193,7 @@
       "arrived": "Arrived",
       "departed": "Departed",
       "stayed_at": "Stayed at",
+      "duration": "Duration",
       "duration_d": "Duration [d]"
     }
   },

From 513792bf3eaf18c06f4bbab9afc3995ffe9fd281 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 22:23:00 +0200
Subject: [PATCH 27/28] Fix log show on click

---
 src/components/maps/leafletMapMoorages.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/maps/leafletMapMoorages.vue b/src/components/maps/leafletMapMoorages.vue
index 4c3d7ac4..0163ccd5 100644
--- a/src/components/maps/leafletMapMoorages.vue
+++ b/src/components/maps/leafletMapMoorages.vue
@@ -156,6 +156,7 @@
         popupContent = text
       }
       layer.bindPopup(popupContent)
+      layer.on({ click: whenClicked })
     }
 
     const layer = L.geoJSON(geojson, {

From a1751c9fcaf82fa8170af486e1f2a6efbf2da376 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 2 May 2024 22:33:31 +0200
Subject: [PATCH 28/28] Wind Speed Max

---
 src/components/maps/leafletMap.vue         | 2 +-
 src/components/maps/leafletMapMoorages.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/maps/leafletMap.vue b/src/components/maps/leafletMap.vue
index 0318a0b8..65682cdb 100644
--- a/src/components/maps/leafletMap.vue
+++ b/src/components/maps/leafletMap.vue
@@ -150,7 +150,7 @@
                           <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 Max</td><td>${max_wind}</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>`
diff --git a/src/components/maps/leafletMapMoorages.vue b/src/components/maps/leafletMapMoorages.vue
index 0163ccd5..6767120e 100644
--- a/src/components/maps/leafletMapMoorages.vue
+++ b/src/components/maps/leafletMapMoorages.vue
@@ -187,7 +187,7 @@
                           <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 Max</td><td>${max_wind}</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>`