Polished the CSV download feature

Author: MathisSinet

src/Sim/write.ts

@@ -1,6 +1,6 @@
 import jsonData from "../Data/data.json" assert { type: "json" };
 import { convertTime, formatNumber, isMainTheory, logToExp } from "../Utils/helpers";
-import { qs, qsa, ce, event, removeAllChilds, downloadString } from "../Utils/DOMhelpers";
+import { qs, qsa, ce, event, removeAllChilds, downloadString, getTableHeaders, tau } from "../Utils/DOMhelpers";
 
 // Settings
 const generateTotalPurchaseList = qs<HTMLInputElement>(".totalPurchaseList");
@@ -14,10 +14,6 @@ const varBuyDialog = qs<HTMLDialogElement>(".boughtVars");
 const varBuyTable = qs<HTMLTableSectionElement>(".boughtVarsOtp");
 const varBuyListCloseBtn = qs<HTMLButtonElement>(".boughtVarsCloseBtn");
 
-// Consts
-const tau = `<span style="font-size:0.9rem; font-style:italics">&tau;</span>`;
-const rho = `<span style="font-size:0.9rem; font-style:italics">&rho;</span>`;
-
 const downloadIcon = '<svg xmlns="http://www.w3.org" width="24" height="24" viewBox="0 0 24 24" ' +
         'fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"' +
         'class="feather feather-download">\n' +
@@ -299,35 +295,8 @@ export function writeSimResponse(response: SimResponse) {
         setTableMode(mode);
         clearTable();
     }
-    if (mode === "all") {
-        let headers = [
-            `${response.sigma}<span style="font-size:0.9rem;">&sigma;</span><sub>t</sub>`,
-            'Input'
-        ];
-        if (response.stratType == "all") headers.push('Ratio');
-        headers.push(
-            `${tau}/h`,
-            'Multi',
-            'Strat',
-            'Time',
-            `&Delta;${tau}`,
-            `Pub ${rho}`,
-            'Var Buys'
-        )
-        setTableHeaders(...headers);
-    }
-    else setTableHeaders(
-        '<span style="padding-inline: 0.5rem">Theory</span>',
-        '<span style="font-size:0.9rem;">&sigma;</span><sub>t</sub>',
-        'Last Pub',
-        'Max Rho',
-        `&Delta;${tau}`,
-        'Multi',
-        'Strat',
-        `${tau}/h`,
-        'Pub Time',
-        'Var Buys'
-    );
+    if (mode === "all") setTableHeaders(...getTableHeaders(response.stratType === "all" ? "all" : "all_one", "html", response.sigma), 'Var Buys')
+    else setTableHeaders(...getTableHeaders("single", "html"), 'Var Buys');
 
     totalBuys = [];
 

src/UI/buttonEvents.ts

@@ -1,5 +1,5 @@
 import html2canvas from "html2canvas";
-import { qs, qsa, ce, event, removeAllChilds, downloadString } from "../Utils/DOMhelpers";
+import { qs, qsa, ce, event, removeAllChilds, downloadString, tau, rho, sigma_t, getTableHeaders } from "../Utils/DOMhelpers";
 
 //Buttons
 const clear = qs(".clear");
@@ -95,10 +95,12 @@ function makeTableCsv(): string {
     let csvTotal = "";
 
     if (table.classList.contains("big")) {
-      for (let i = 0; i < theadRow.children.length - 1; i++) {
-        csvTotal += theadRow.children[i].innerHTML + ",";
-      }
-      csvTotal += "\n";
+      let headers = getTableHeaders(
+        theadRow.children.length == 10 ? "all" : "all_one",
+        "text",
+        Number(theadRow.children[0].innerHTML.match(/^\d+/))
+      )
+      csvTotal += headers.join(",") + ",\n";
       let rowIndex = 0;
       while (rowIndex < tbody.children.length) {
         let row = tbody.children[rowIndex];
@@ -124,7 +126,7 @@ function makeTableCsv(): string {
             csvTotal += row2Content.join(",") + ",\n";
           }
           else {
-            for (let i = 0; i < 9; i++) {
+            for (let i = 0; i < theadRow.children.length - 1; i++) {
               csvTotal += row.children[i].innerHTML + ",";
             }
             csvTotal += "\n";
@@ -134,11 +136,12 @@ function makeTableCsv(): string {
       }
     }
     else {
-      for (let i = 0; i < 9; i++) {
-        csvTotal += theadRow.children[i].innerHTML + ",";
-      }
-      csvTotal += "\n";
+      let headers = getTableHeaders("single", "text")
+      csvTotal += headers.join(",") + ",\n";
       for (let row of tbody.children) {
+          if (row.children[0].innerHTML.trim().length == 0) {
+            continue;
+          }
           for (let i = 0; i < 9; i++) {
               csvTotal += row.children[i].innerHTML + ",";
           }

src/Utils/DOMhelpers.ts

@@ -2,6 +2,12 @@
 const raise = (err: string) => {
   throw new Error(err);
 };
+
+// Consts
+export const tau = `<span style="font-size:0.9rem; font-style:italics">&tau;</span>`;
+export const rho = `<span style="font-size:0.9rem; font-style:italics">&rho;</span>`;
+export const sigma_t = `<span style="font-size:0.9rem;">&sigma;</span><sub>t</sub>`;
+
 /** Alias of document.querySelector */
 export const qs = <T extends HTMLElement>(name: string) => document.querySelector<T>(name) ?? raise(`HtmlElement ${name} not found.`);
 /** Alias of document.querySelectorAll */
@@ -37,4 +43,37 @@ export function downloadString(str: string, filename: string) {
         link.click();
         document.body.removeChild(link); // Clean up the DOM element
     }
+}
+
+export function getTableHeaders(tableType: "single" | "all" | "all_one", headerType: "html" | "text", sigma?: number): string[] {
+  if (tableType !== "single") {
+      let headers = [
+          headerType === "html" ? `${sigma}${sigma_t}` : `${sigma}σ`,
+          'Input'
+      ];
+      if (tableType == "all") headers.push('Ratio');
+      headers.push(
+          headerType === "html" ? `${tau}/h` : "τ/h",
+          'Multi',
+          'Strat',
+          'Time',
+          headerType === "html" ? `&Delta;${tau}` : "Δτ",
+          headerType === "html" ? `Pub ${rho}` : "Pub ρ"
+      )
+      return headers;
+  }
+  else {
+    let headers = [
+      '<span style="padding-inline: 0.5rem">Theory</span>',
+      headerType === "html" ? sigma_t : "σ",
+      'Last Pub',
+      'Max Rho',
+      headerType === "html" ? `&Delta;${tau}` : "Δτ",
+      'Multi',
+      'Strat',
+      headerType === "html" ? `${tau}/h` : "τ/h",
+      'Pub Time'
+    ];
+    return headers;
+  };
 }