clean up css and url generation

bmlt-enabled · Feb 8, 2024 · 869561f · 869561f
1 parent 713fbba
commit 869561f
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 15 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -61,3 +61,18 @@ a {
 a:hover {
 	text-decoration: underline;
 }
+
+#inner-box {
+	padding: 20px;
+	background-color: #fff;
+	border: 1px solid #ddd;
+	border-radius: 3px;
+	box-sizing: border-box;
+}
+
+#description {
+	text-align: center;
+	margin-bottom: 20px;
+	font-size: 1em;
+	color: #333;
+}
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -80,24 +80,33 @@ class MeetingDataProcessor {
 
   // CSV export functionality
   exportCSV(meetings) {
-    const csvContent = `data:text/csv;charset=utf-8,${encodeURIComponent(
-      this.constructor.convertToCSV(meetings)
-    )}`;
+    const convertedCSV = this.constructor.convertToCSV(meetings);
+    const csvContent = MeetingDataProcessor.createDownloadLink(
+      convertedCSV,
+      "text/csv"
+    );
     const downloadLink = document.getElementById("downloadLink");
     downloadLink.href = csvContent;
     downloadLink.style.display = "block";
   }
 
   // KML export functionality
   exportKML(meetings) {
-    const kmlContent = `data:text/xml;charset=utf-8,${encodeURIComponent(
-      this.constructor.convertToKML(meetings)
-    )}`;
+    const convertedKML = this.constructor.convertToKML(meetings);
+    const kmlContent = MeetingDataProcessor.createDownloadLink(
+      convertedKML,
+      "application/vnd.google-earth.kml+xml"
+    );
     const kmlDownloadLink = document.getElementById("kmlDownloadLink");
     kmlDownloadLink.href = kmlContent;
     kmlDownloadLink.style.display = "block";
   }
 
+  static createDownloadLink(data, type) {
+    const blob = new Blob([data], { type });
+    return URL.createObjectURL(blob);
+  }
+
   static hideLinks() {
     const downloadLink = document.getElementById("downloadLink");
     downloadLink.style.display = "none";
@@ -107,16 +116,23 @@ class MeetingDataProcessor {
 
   // Convert data to CSV
   static convertToCSV(data) {
+    if (!Array.isArray(data) || data.length === 0) {
+      MeetingDataProcessor.displayError("No data found");
+      throw new Error("No data found");
+    }
     const csvRows = [];
     const keys = Object.keys(data[0]);
     csvRows.push(keys.join(","));
 
     data.forEach((row) => {
       const values = keys.map((key) => {
-        let value = row[key];
+        let value = row[key] === null ? "" : row[key];
         if (
           typeof value === "string" &&
-          (value.includes(",") || value.includes('"'))
+          (value.includes(",") ||
+            value.includes('"') ||
+            value.includes("\n") ||
+            value.includes("\r"))
         ) {
           value = `"${value.replace(/"/g, '""')}"`;
         }

diff --git a/index.html b/index.html
@@ -9,14 +9,18 @@
 <body>
 <h1>BMLT Data Converter</h1>
 <div id="export-form">
-  <label for="query">BMLT URL Query:</label>
-  <input type="text" id="query" required>
-  <br>
-  <button onclick="exportData()">Generate Export Data</button>
-  <a id="downloadLink" style="display: none;" download="BMLT_data.csv">Download CSV</a>
-  <a id="kmlDownloadLink" style="display: none;" download="BMLT_data.kml">Download KML</a>
-  <div id="errorMessages" style="display: none;"></div>
+  <div id="description">Converts BMLT JSON  meeting data to CSV or KML</div>
+  <div id="inner-box">
+    <label for="query">BMLT URL Query:</label>
+    <input type="text" id="query" required>
+    <br>
+    <button onclick="exportData()">Generate Export Data</button>
+    <a id="downloadLink" style="display: none;" download="BMLT_data.csv">Download CSV</a>
+    <a id="kmlDownloadLink" style="display: none;" download="BMLT_data.kml">Download KML</a>
+    <div id="errorMessages" style="display: none;"></div>
+  </div>
 </div>
+
 <script src="assets/js/main.js"></script>
 </body>
 </html>