Download as CSV

Author: wraybowling

index.html

@@ -243,13 +243,13 @@ <h2>Visualize Your Backup</h2>
     </p>
 
     <p>
-      The files use the JSON format and can be opened in any text editor. You
-      should store them somewhere encrypted for safety.
+      The files use the JSON format and can be opened in any text editor.
+      <strong>You should store them somewhere encrypted for safety.</strong>
     </p>
 
     <p>
       By themselves, you may have trouble sifting through the large files. A
-      visualizer is in the works.
+      simple visualizer is available with more tools in the works.
     </p>
     <a href="visualizer.html">Continue to the Snapshot Visualizer</a>
 
@@ -363,8 +363,13 @@ <h2>Disclaimers</h2>
 
       <p>
         <strong>License & contact:</strong> This project is open source.
-        <em>(Insert chosen license, e.g., MIT)</em>. For legal questions,
-        takedown notices, or contact: <em>(insert contact email)</em>.
+        <em
+          >(<a
+            href="https://github.com/wraybowling/baqup-tools/blob/main/LICENSE"
+            >GPL 3.0</a
+          >)</em
+        >. For legal questions, takedown notices, or contact:
+        <em>(insert contact email)</em>.
       </p>
 
       <p>

style.css

@@ -116,3 +116,7 @@ header img {
     flex-direction: column;
   }
 }
+
+.hidden {
+  display: none;
+}

visualizer.html

@@ -65,23 +65,24 @@ <h2>Qubes</h2>
       <input type="file" id="fileInput" />
       <label for="fileInput"> Drag and drop your account file here. </label>
     </div>
+    <button class="download hidden" onClick="downloadCSV()">
+      Download as CSV
+    </button>
 
-    <div class="sidescroll">
-      <table id="qubes">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Type</th>
-            <th>12 Month</th>
-            <th>6 Month</th>
-            <th>3 Month</th>
-            <th>Budget</th>
-            <th>Bill/Goal</th>
-          </tr>
-        </thead>
-        <tbody></tbody>
-      </table>
-    </div>
+    <table id="qubes">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Type</th>
+          <th>12 Month</th>
+          <th>6 Month</th>
+          <th>3 Month</th>
+          <th>Budget</th>
+          <th>Bill/Goal</th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+    </table>
 
     <div class="bigbreak"></div>
 

visualizer.js

@@ -1,6 +1,25 @@
-document.querySelector('.dropzone').addEventListener('drop', (e) => {
-  e.preventDefault();
-  let file = e.dataTransfer.files[0];
+const downloadButton = document.querySelector('.download');
+
+function downloadCSV() {
+  const qubesTable = document.querySelector('#qubes');
+  const rows = Array.from(qubesTable.querySelectorAll('tr')).map((row) =>
+    Array.from(row.querySelectorAll('th,td')).map((cell) => cell.textContent)
+  );
+  const filename = 'baqup-qubes.csv';
+  const csvContent = rows
+    .map((row) => row.map((cell) => `"${cell}"`).join(','))
+    .join('\n');
+  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.setAttribute('download', filename);
+  a.style.display = 'none';
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+}
+function handleFile(file) {
   let reader = new FileReader();
   reader.onload = (event) => {
     let jsonData = JSON.parse(event.target.result);
@@ -9,18 +28,19 @@ document.querySelector('.dropzone').addEventListener('drop', (e) => {
     addQubesToTable(qubesTable, jsonData);
   };
   reader.readAsText(file);
+}
+
+document.querySelector('.dropzone').addEventListener('drop', (e) => {
+  e.preventDefault();
+  let file = e.dataTransfer.files[0];
+  handleFile(file);
+  downloadButton.classList.remove('hidden');
 });
 
 document.querySelector('input[type=file]').addEventListener('change', (e) => {
   let file = e.target.files[0];
-  let reader = new FileReader();
-  reader.onload = (event) => {
-    let jsonData = JSON.parse(event.target.result);
-    console.log(jsonData);
-    const qubesTable = document.querySelector('#qubes > tbody');
-    addQubesToTable(qubesTable, jsonData);
-  };
-  reader.readAsText(file);
+  handleFile(file);
+  downloadButton.classList.remove('hidden');
 });
 
 function addQubesToTable(qubesTable, jsonData) {