From 4ef34817ae55c9c0c6ac75326980ae558c1cb71f Mon Sep 17 00:00:00 2001
From: Miodec <bartnikjack@gmail.com>
Date: Sun, 20 Feb 2022 14:30:13 +0100
Subject: [PATCH] added 'export csv' button to the account page (only exports
 filtered results) closes #919

---
 frontend/src/scripts/misc.ts          | 75 +++++++++++++++++++++++++++
 frontend/src/scripts/pages/account.ts |  4 ++
 frontend/src/styles/account.scss      |  8 +++
 frontend/static/index.html            |  6 +++
 4 files changed, 93 insertions(+)

diff --git a/frontend/src/scripts/misc.ts b/frontend/src/scripts/misc.ts
index 11f90f313..edb7e3c20 100644
--- a/frontend/src/scripts/misc.ts
+++ b/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();
+}
diff --git a/frontend/src/scripts/pages/account.ts b/frontend/src/scripts/pages/account.ts
index 3a73000a2..2ddd62c23 100644
--- a/frontend/src/scripts/pages/account.ts
+++ b/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"),
diff --git a/frontend/src/styles/account.scss b/frontend/src/styles/account.scss
index 094b10866..8f5b35fe1 100644
--- a/frontend/src/styles/account.scss
+++ b/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);
diff --git a/frontend/static/index.html b/frontend/static/index.html
index 1b5c81135..9683bb9e6 100644
--- a/frontend/static/index.html
+++ b/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%">