add csv import information modal + example

wolfderechter · Jan 3, 2025 · 272c746 · 272c746
1 parent 6362973
commit 272c746
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -89,6 +89,26 @@ <h3>Total gain</h3>
             <label for="importDataCsvBtn"><a class="importDataBtn">Import data (CSV)</a></label>
           </div>
         </div>
+
+        <!-- CSV Instructions Modal -->
+        <div id="csvInstructionsModal" class="modal">
+          <div class="modal-content">
+            <span id="csv-warning-close" class="close">&times;</span>
+            <h3>CSV File Structure</h3>
+            <p>Your CSV file must have the following columns:</p>
+            <ul>
+              <li><strong>id</strong>: The unique identifier of the cryptocurrency (as used by <a href="https://docs.coingecko.com/reference/coins-id">coingecko</a>).</li>
+              <li><strong>symbol</strong>: The symbol of the cryptocurrency (e.g., BTC).</li>
+              <li><strong>date</strong>: The date of the transaction (e.g., YYYY-MM-DD).</li>
+              <li><strong>amount</strong>: The amount of cryptocurrency transacted.</li>
+              <li><strong>cost</strong>: The cost of the transaction.</li>
+              <li><strong>transactionType</strong>: The type of transaction, BUY or SELL (case insensitive).</li>
+            </ul>
+            <div>
+              <a id="downloadSampleCsv" href="#" download="sample.csv">Download Sample CSV</a>
+            </div>
+          </div>
+        </div>
       </div>
 
       <div id="ethereumStaking">

diff --git a/src/main.ts b/src/main.ts
@@ -63,36 +63,35 @@ const ethereumStakingDailyRewards = document.getElementById(
   "ethereumStakingDailyRewards"
 )!;
 
-// Import data
-const exportDropdownBtn = document.getElementById('exportDropdownBtn');
-const exportDropdown = document.getElementById('exportDropdown');
+// Import/Export data
+const exportDropdownBtn = document.getElementById("exportDropdownBtn");
+const exportDropdown = document.getElementById("exportDropdown");
 
-// Handle Import Dropdown
-const importDropdownBtn = document.getElementById('importDropdownBtn');
-const importDropdown = document.getElementById('importDropdown');
+const importDropdownBtn = document.getElementById("importDropdownBtn");
+const importDropdown = document.getElementById("importDropdown");
 
 // Toggle dropdown visibility on button click
-exportDropdownBtn?.addEventListener('click', () => {
-  exportDropdown?.classList.toggle('active');
+exportDropdownBtn?.addEventListener("click", () => {
+  exportDropdown?.classList.toggle("active");
   // Close the other dropdown if open
-  if (importDropdown?.classList.contains('active')) {
-    importDropdown.classList.remove('active');
+  if (importDropdown?.classList.contains("active")) {
+    importDropdown.classList.remove("active");
   }
 });
 
-importDropdownBtn?.addEventListener('click', () => {
-  importDropdown?.classList.toggle('active');
+importDropdownBtn?.addEventListener("click", () => {
+  importDropdown?.classList.toggle("active");
   // Close the other dropdown if open
-  if (exportDropdown?.classList.contains('active')) {
-    exportDropdown.classList.remove('active');
+  if (exportDropdown?.classList.contains("active")) {
+    exportDropdown.classList.remove("active");
   }
 });
 
 // Close dropdowns and modals when clicking outside
-window.addEventListener('click', (event) => {
-  if (!(event.target as HTMLElement).closest('.dropdown')) {
-    exportDropdown?.classList.remove('active');
-    importDropdown?.classList.remove('active');
+window.addEventListener("click", (event) => {
+  if (!(event.target as HTMLElement).closest(".dropdown")) {
+    exportDropdown?.classList.remove("active");
+    importDropdown?.classList.remove("active");
   }
 });
 let input = document.getElementById("importDataBtn");
@@ -101,6 +100,34 @@ input?.addEventListener("change", importData);
 let inputCsv = document.getElementById("importDataCsvBtn");
 inputCsv?.addEventListener("change", importCsvData);
 
+const importCsvButton = document.getElementById("importDataCsvBtn")!;
+const csvInstructionsModal = document.getElementById("csvInstructionsModal")!;
+const csvModalCloseBtn = document.getElementById("csv-warning-close");
+
+importCsvButton?.addEventListener("click", () => {
+  if (csvInstructionsModal) {
+    csvInstructionsModal.style.display = "block";
+  }
+});
+csvModalCloseBtn?.addEventListener("click", () => {
+    csvInstructionsModal.style.display = "none";
+});
+// Close the modal when clicking outside of it
+window.addEventListener("click", (event) => {
+  if (event.target === csvInstructionsModal) {
+    csvInstructionsModal.style.display = "none";
+  }
+});
+const downloadSampleCsv = document.getElementById("downloadSampleCsv");
+if (downloadSampleCsv) {
+  downloadSampleCsv.addEventListener("click", () => {
+    const csvContent =
+      "id,symbol,date,amount,cost,transactionType\nbitcoin,BTC,2023-10-01,0.5,25000,BUY";
+    const blob = new Blob([csvContent], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    downloadSampleCsv.setAttribute("href", url);
+  });
+}
 // Summary number animations
 let summaryTotalValueContentCountUp = new CountUp(summaryTotalValueContent, 0, {
   decimalPlaces: 2,