coin2html: add Show Location checkbox to Register view

cmd/coin2html/README.md

@@ -34,6 +34,10 @@ When aggregated with sub-accounts, the SubAccount Max option controls how many "
 
 When Aggregate is set to None, and Show Notes is checked, each transaction is displayed with an additional row containing the transaction notes.
 
+## Show Location
+
+When Aggregate is set to None, and Show Location is checked, each transaction is displayed with an additional column showing the file location of the transaction in the path:lineNr format, e.g. examples/yearly/2010.coin:17, supported by some editors for navigation.
+
 # Chart View
 
 Chart shows aggregated transactions (including sub-accounts) by the selected aggregation period as a bar chart. The meaning of the available options is the same as for the Register aggregations.

cmd/coin2html/js/src/register.ts

@@ -8,6 +8,7 @@ import {
   addSubAccountMaxInput,
   emptyElement,
   MainView,
+  addShowLocationInput,
 } from "./views";
 import { Account, Posting } from "./account";
 import {
@@ -49,6 +50,7 @@ export function viewRegister(options?: {
     addSubAccountMaxInput(containerSelector);
   if (State.View.Aggregate == "None") {
     addIncludeNotesInput(containerSelector);
+    addShowLocationInput(containerSelector);
   }
   const groupKey = Aggregation[State.View.Aggregate];
   if (groupKey) {
@@ -175,14 +177,16 @@ function viewRegisterFull(
     negated: boolean;
   }
 ) {
-  const table = addTableWithHeader(containerSelector, [
+  const labels = [
     "Date",
     "Description",
     "Account",
     "Amount",
     "Balance",
     "Cum.Total",
-  ]);
+  ];
+  if (State.View.ShowLocation) labels.push("Location");
+  const table = addTableWithHeader(containerSelector, labels);
   const total = new Amount(0, account.commodity);
   const data = trimToDateRange(
     account.postings,
@@ -197,14 +201,17 @@ function viewRegisterFull(
     .data((p, i) => {
       p.index = i;
       total.addIn(p.quantity, p.transaction.posted);
-      return [
+      const values = [
         [dateToString(p.transaction.posted), "date"],
         [p.transaction.description, "text"],
         [p.transaction.other(p).account, "account"],
         [p.quantity, "amount"],
         [p.balance, "amount"],
         [Amount.clone(total), "amount"],
       ];
+      if (State.View.ShowLocation)
+        values.push([p.transaction.location, "text"]);
+      return values;
     })
     .join("td")
     .classed("amount", ([v, c]) => c == "amount")
@@ -235,14 +242,16 @@ function viewRegisterFullWithSubAccounts(
     negated: boolean;
   }
 ) {
-  const table = addTableWithHeader(containerSelector, [
+  const labels = [
     "Date",
     "Description",
     "SubAccount",
     "Account",
     "Amount",
     "Cum.Total",
-  ]);
+  ];
+  if (State.View.ShowLocation) labels.push("Location");
+  const table = addTableWithHeader(containerSelector, labels);
   const total = new Amount(0, account.commodity);
   const data = account.withAllChildPostings(State.StartDate, State.EndDate);
   const rows = table.append("tbody").selectAll("tr").data(data).enter();
@@ -253,14 +262,17 @@ function viewRegisterFullWithSubAccounts(
     .data((p, i) => {
       p.index = i;
       total.addIn(p.quantity, p.transaction.posted);
-      return [
+      const values = [
         [dateToString(p.transaction.posted), "date"],
         [p.transaction.description, "text"],
         [account.relativeName(p.account), "account"],
         [p.transaction.other(p).account, "account"],
         [p.quantity, "amount"],
         [Amount.clone(total), "amount"],
       ];
+      if (State.View.ShowLocation)
+        values.push([p.transaction.location, "text"]);
+      return values;
     })
     .join("td")
     .classed("amount", ([v, c]) => c == "amount")

cmd/coin2html/js/src/views.ts

@@ -26,6 +26,7 @@ export const State = {
     Aggregate: "None" as keyof typeof Aggregation,
     // How many largest subaccounts to show when aggregating.
     AggregatedSubAccountMax: 5,
+    ShowLocation: false, // Show transaction location info
   },
 };
 
@@ -98,6 +99,24 @@ export function addIncludeNotesInput(containerSelector: string) {
     .property("checked", State.View.ShowNotes);
 }
 
+export function addShowLocationInput(containerSelector: string) {
+  const container = d3.select(containerSelector);
+  container
+    .append("label")
+    .property("for", "showLocation")
+    .text("Show Location");
+  container
+    .append("input")
+    .on("change", (e, d) => {
+      const input = e.currentTarget as HTMLInputElement;
+      State.View.ShowLocation = input.checked;
+      updateView();
+    })
+    .attr("id", "showLocation")
+    .attr("type", "checkbox")
+    .property("checked", State.View.ShowLocation);
+}
+
 export function addSubAccountMaxInput(containerSelector: string) {
   const container = d3.select(containerSelector);
   container