Slightly more sketching

logbook/editable.js

@@ -0,0 +1,35 @@
+function injectAnnotations() {
+  const editables = document.querySelectorAll('td[contenteditable]');
+  const annotations = JSON.parse(localStorage.getItem('annotations')) || [];
+  editables.forEach((editable) => {
+    const timestamp = editable.parentElement.dataset.time;
+    const override = annotations.find((element) => element.time === timestamp);
+    if (override) {
+      editable.innerText = override.value;
+    }
+  });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  injectAnnotations();
+
+  const editables = document.querySelectorAll('td[contenteditable]');
+  editables.forEach((editable) => {
+    editable.addEventListener('keyup', () => {
+      const timestamp = editable.parentElement.dataset.time;
+      const annotations = JSON.parse(localStorage.getItem('annotations')) || [];
+      const annotation = {
+        time: timestamp,
+        value: editable.innerText,
+      };
+      const override = annotations.find((element) => element.time === timestamp);
+      if (override) {
+        const idx = annotations.indexOf(override);
+        annotations[idx] = annotation;
+      } else {
+        annotations.push(annotation);
+      }
+      localStorage.setItem('annotations', JSON.stringify(annotations));
+    });
+  });
+});

logbook/index.js

@@ -31,11 +31,9 @@ const influxOptions = {
   database,
 };
 const startDate = '2022-04-15T06:00:00Z';
-//const startDate = '2022-09-08T06:00:00Z';
+// const startDate = '2022-09-08T06:00:00Z';
 const endDate = '2022-09-16T18:00:00Z';
 
-
-
 const client = new Influx.InfluxDB(influxOptions);
 client
   .getDatabaseNames()
@@ -53,6 +51,9 @@ client
   .then(trips => {
     return tripFunctions.collectSpeed(trips, client);
   })
+  .then(trips => {
+    return tripFunctions.collectLog(trips, client);
+  })
   .then(trips => {
     return tripFunctions.collectHeading(trips, client);
   })
@@ -65,14 +66,27 @@ client
   .then(trips => {
     return tripFunctions.collectPositions(trips, client);
   })
+  .then(trips => {
+    return tripFunctions.collectFixtype(trips, client);
+  })
+  .then(trips => {
+    return tripFunctions.collectAnnotations(trips);
+  })
+  .then(trips => {
+    return tripFunctions.collectSaillogger(trips);
+  })
   .then(trips => {
     return tripFunctions.geoCode(trips);
   })
   .then(trips => {
     return writeFile('2022.json', JSON.stringify(trips, 0, 2), 'utf-8')
       .then(() => trips);
   })
+  .then(() => {
+    console.log('DONE');
+    process.exit(0);
+  })
   .catch(e => {
-    console.error(e.message);
+    console.error(e);
     process.exit(1);
   });

logbook/log.css

@@ -0,0 +1,44 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+table {
+  border-collapse: collapse;
+  width: 100vw;
+  margin-bottom: 2em;
+}
+thead th,
+thead td {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+thead td {
+  min-width: 42vw;
+  max-width: 42vw;
+}
+td, th {
+  padding: 2px;
+  border: 0;
+  text-align: left;
+}
+tbody td,
+tbody th {
+  border-right: 1px solid black;
+}
+thead tr.headings th {
+  border-bottom: 1px solid black;
+  border-right: 1px solid black;
+}
+td {
+  color: navy;
+  font-family: cursive;
+}
+tbody tr:nth-of-type(even) {
+  background-color: #eee;
+}
+
+@media print {
+  table {
+    page-break-before: always;
+  }
+}

logbook/render.js

@@ -0,0 +1,69 @@
+const { render } = require('mustache');
+const { Point } = require('where');
+const data = require('./2022-logs.json');
+const { readFile, writeFile } = require('node:fs/promises');
+
+let previousState = null;
+
+readFile('template.html', 'utf-8')
+  .then(template => {
+    return render(template, {
+      trips: data,
+      formatDate: () => (tmpl, render) => {
+        const d = new Date(render(tmpl));
+        return `${d.getUTCDate()}.${d.getMonth()+1}. ${String(d.getUTCHours()).padStart(2, '0')}:${String(d.getUTCMinutes()).padStart(2, '0')}Z`;
+      },
+      formatTime: () => (tmpl, render) => {
+        const d = new Date(render(tmpl));
+        return `${String(d.getUTCHours()).padStart(2, '0')}:${String(d.getUTCMinutes()).padStart(2, '0')}`;
+      },
+      formatWind: () => (tmpl, render) => {
+        const wind = render(tmpl);
+        if (wind === '0.0kt 000°') {
+          return 'n/a';
+        }
+        return wind;
+      },
+      formatBarometer: () => (tmpl, render) => {
+        const baro = render(tmpl);
+        return baro.split('.')[0];
+      },
+      formatCoordinates: () => (tmpl, render) => {
+        const [ lat, lon ] = render(tmpl).split(' ');
+        return new Point(parseFloat(lat), parseFloat(lon)).toString();
+      },
+      formatState: () => (tmpl, render) => {
+        const prev = previousState;
+        const state = render(tmpl);
+        previousState = state;
+        switch (state) {
+          case 'sailing':
+            if (prev === 'motoring') {
+              return 'Motor stopped, sails up';
+            }
+            return 'Sails up';
+          case 'motoring':
+            if (prev === 'sailing') {
+              return 'Motor started, sails down';
+            }
+            if (prev === 'anchored') {
+              return 'Motor started, anchor up';
+            }
+            return 'Motor started';
+          case 'moored':
+            return 'Vessel stopped';
+          case 'anchored':
+            return 'Anchored';
+          default:
+            return state;
+        }
+      },
+    });
+  })
+  .then(output => {
+    return writeFile('log.html', output, 'utf-8');
+  })
+  .catch(e => {
+    console.error(e.message);
+    process.exit(1);
+  });

logbook/template.html

@@ -0,0 +1,48 @@
+<!doctype HTML>
+<html lang="en">
+  <head>
+    <title>Logbook</title>
+    <link rel="stylesheet" href="log.css">
+    <script src="editable.js"></script>
+  </head>
+  <body>
+    {{#trips}}
+    <table>
+      <thead>
+        <tr>
+          <th>From</th>
+          <td colspan="5">{{#formatDate}}{{ start }}{{/formatDate}} {{ startLocation }}</td>
+          <th>To</th>
+          <td colspan="2">{{#formatDate}}{{ end }}{{/formatDate}} {{ endLocation }}</td>
+        </tr>
+        <tr class="headings">
+          <th>Time</th>
+          <th>Course</th>
+          <th>Speed</th>
+          <th>Log</th>
+          <th>Wind</th>
+          <th>Baro</th>
+          <th>Coordinates</th>
+          <th>Fix</th>
+          <th>Remarks</th>
+        </tr>
+      </thead>
+      <tbody>
+        {{#events}}
+        <tr data-time="{{ time }}">
+          <td>{{#formatTime}}{{ time }}{{/formatTime}}</td>
+          <td>{{ heading }}&deg;</td>
+          <td>{{ speed }}kt</td>
+          <td>{{ log }}NM</td>
+          <td>{{#formatWind}}{{ windSpeed }}kt {{ windDirection }}&deg;{{/formatWind}}</td>
+          <td>{{#formatBarometer}}{{ barometer }}{{/formatBarometer}} hPa</td>
+          <td>{{#formatCoordinates}}{{ position.lat }} {{ position.lon }}{{/formatCoordinates}}</td>
+          <td>{{ fixType }}</td>
+          <td contenteditable>{{^hourly}}{{#formatState}}{{ state }}{{/formatState}}{{/hourly}}</td>
+        </tr>
+        {{/events}}
+      </tbody>
+    </table>
+    {{/trips}}
+  </body>
+</html>