added 'export csv' button to the account page

(only exports filtered results)
closes #919

frontend/src/scripts/misc.ts

@@ -950,3 +950,78 @@ export function getMode2(
   }
   return mode2;
 }
+
+export async function downloadResultsCSV(
+  array: MonkeyTypes.Result<MonkeyTypes.Mode>[]
+): Promise<void> {
+  Loader.show();
+  const csvString = [
+    [
+      "_id",
+      "isPb",
+      "wpm",
+      "acc",
+      "rawWpm",
+      "consistency",
+      "charStats",
+      "mode",
+      "mode2",
+      "quoteLength",
+      "restartCount",
+      "testDuration",
+      "afkDuration",
+      "incompleteTestSeconds",
+      "punctuation",
+      "numbers",
+      "language",
+      "funbox",
+      "difficulty",
+      "lazyMode",
+      "blindMode",
+      "bailedOut",
+      "tags",
+      "timestamp",
+    ],
+    ...array.map((item: MonkeyTypes.Result<MonkeyTypes.Mode>) => [
+      item._id,
+      item.isPb,
+      item.wpm,
+      item.acc,
+      item.rawWpm,
+      item.consistency,
+      item.charStats.join(","),
+      item.mode,
+      item.mode2,
+      item.quoteLength,
+      item.restartCount,
+      item.testDuration,
+      item.afkDuration,
+      item.incompleteTestSeconds,
+      item.punctuation,
+      item.numbers,
+      item.language,
+      item.funbox,
+      item.difficulty,
+      item.lazyMode,
+      item.blindMode,
+      item.bailedOut,
+      item.tags.join(","),
+      item.timestamp,
+    ]),
+  ]
+    .map((e) => e.join("|"))
+    .join("\n");
+
+  const blob = new Blob([csvString], { type: "text/csv" });
+
+  const href = window.URL.createObjectURL(blob);
+
+  const link = document.createElement("a");
+  link.setAttribute("href", href);
+  link.setAttribute("download", "results.csv");
+  document.body.appendChild(link); // Required for FF
+
+  link.click();
+  link.remove();
+  Loader.hide();
+}

frontend/src/scripts/pages/account.ts

@@ -1072,6 +1072,10 @@ $(".pageAccount .content .below .smoothing input").on("input", () => {
   applyHistorySmoothing();
 });
 
+$(".pageAccount .content .group.aboveHistory .exportCSV").click(() => {
+  Misc.downloadResultsCSV(filteredResults);
+});
+
 export const page = new Page(
   "account",
   $(".page.pageAccount"),

frontend/src/styles/account.scss

@@ -115,6 +115,14 @@
       text-align: center;
     }
 
+    &.aboveHistory {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      .exportCSV {
+        grid-column: 3/4;
+      }
+    }
+
     &.createdDate {
       text-align: center;
       color: var(--sub-color);

frontend/static/index.html

@@ -4638,6 +4638,12 @@
                 <div class="val">words 10</div>
               </div> -->
               </div>
+              <div class="group aboveHistory">
+                <div class="button exportCSV">
+                  <i class="fas fa-file-csv"></i>
+                  Export CSV
+                </div>
+              </div>
               <div class="group history">
                 <!-- <div class="title">result history</div> -->
                 <table width="100%">