tabular summary

Author: WardCunningham

pages/parks-by-compass-points/far-from-home.html

@@ -1,6 +1,6 @@
 <div id=result>working</div>
 <script type=module>
-  
+
   const site = `http://found.ward.fed.wiki`
   const slug = `places-winter-25`
   const page = await fetch(`${site}/${slug}.json`).then(res => res.json())
@@ -9,17 +9,41 @@
   const actions = page.journal
     .filter(action => action.type == 'edit' && action.item.type == 'map')
     .filter(action => action.item.text.split(/\n/).length > 1)
+  const quads = ['north','south','east','west']
+  const rows = []
+  let row = {}
 
-  window.result.innerHTML = actions
+  const list = actions
     .map(action => {
       const when = new Date(action.date)
       const date = when.toLocaleDateString().slice(0,-5)
       const day = when.toLocaleString(window.navigator.language, {weekday: 'short'})
       const fold = items[items.findIndex(item => item.id == action.id)-1].text
       const coord = action.item.text.split(/\n/).pop()
+      if(occupied(fold)) {rows.push(row); row = {}}
+      row[fold] = `${day} ⇒ ${dist(coord)}`
       return `${day} ${date} ⇒ ${dist(coord)} ${fold}`
     })
     .join("<br>")
+    rows.push(row)
+
+  const table = `
+    <table style="border-collapse: collapse;">
+      ${`<tr>${quads.map(quad => `<th  style="text-align: center">
+        ${quad}`).join("")}`}
+      ${rows.map(row =>
+        `<tr>${quads.map(quad => `<td style="border: 1px solid black; padding: 6px">
+          ${row[quad]||""}`).join("")}`
+      ).join("")}
+    </table>`
+
+  window.result.innerHTML = `
+    <details><summary>data</summary>
+      ${list}
+    </details>
+    <br>
+      ${table}
+  `
 
   function dist(coord) {
     const home = {lat:45.4701282, lon:-122.7462476}
@@ -29,4 +53,11 @@
     return (2*(dx+dy)).toFixed(2)
   }
 
+  function occupied(fold) {
+    const wants = quads.slice(quads.indexOf(fold))
+    for(const want of wants)
+      if(want in row) return true
+    return false
+  }
+
 </script>