Update resources

index.html

@@ -258,13 +258,18 @@
             </div>
 
             <label class="label">匯出<br>Export</label>
-            <button class="export-image-button button is-info" id="export-image-button" onclick="exportHeatmapAsImage();" disabled>熱圖 Heatmap (PNG)</button>
 
-            <button class="export-image-button button is-info" id="export-image-basemap-button" onclick="exportHeatmapWithBasemapAsImage();" disabled>熱圖+地圖 Heatmap+Basemap (PNG)</button>
+            <div class="control export-password">
+                <input type="password" class="input" id="password" name="password" placeholder="密碼 Password" onchange="document.getElementById('password').classList.remove('error');">
+            </div>
+
+            <button class="export-image-button button is-info" id="export-image-button" onclick="executeIfPasswordCorrect(exportHeatmapAsImage);" disabled>熱圖 Heatmap (PNG)</button>
+
+            <button class="export-image-button button is-info" id="export-image-basemap-button" onclick="executeIfPasswordCorrect(exportHeatmapWithBasemapAsImage);" disabled>熱圖+地圖 Heatmap+Basemap (PNG)</button>
 
-            <button class="export-area-button button is-info" id="export-area-button" onclick="exportTimeArea();" disabled>時間範圍 Area (GeoJson)</button>
+            <button class="export-area-button button is-info" id="export-area-button" onclick="executeIfPasswordCorrect(exportTimeArea);" disabled>時間範圍 Area (GeoJson)</button>
 
-            <button class="export-points-button button is-info" id="export-points-button" onclick="exportGeoJson();" disabled>數據點 Stop Points (GeoJson)</button>
+            <button class="export-points-button button is-info" id="export-points-button" onclick="executeIfPasswordCorrect(exportGeoJson);" disabled>數據點 Stop Points (GeoJson)</button>
             <p class="note">Note that it might require <b>ArcGis Pro</b> to recreate the best look and feel of the heatmap via stop points data if you are using ArcGis</p>
         </div>
         <div class="map-container">

main.js

@@ -741,6 +741,27 @@ function exportHeatmapWithBasemapAsImage() {
 
 // ==============================
 
+async function getSHA256Hash(input) {
+    const textAsBuffer = new TextEncoder().encode(input);
+    const hashBuffer = await window.crypto.subtle.digest("SHA-256", textAsBuffer);
+    const hashArray = Array.from(new Uint8Array(hashBuffer));
+    return hashArray.map((item) => item.toString(16).padStart(2, "0")).join("");
+}
+
+async function executeIfPasswordCorrect(block) {
+    const passwordElement = document.getElementById("password");
+    if (await getSHA256Hash(passwordElement.value) === exportPasswordHash) {
+        block();
+    } else {
+        passwordElement.classList.add("error");
+        alert("密碼錯誤 Incorrect password");
+    }
+}
+
+// ==============================
+
+const exportPasswordHash = "b92a1ffdc416f6f67e0a32f459e2b652504adba390017c29f3538b7b494172df";
+
 let routeList = null;
 let stopList = null;
 let journeyTimes = null;

style.css

@@ -169,6 +169,11 @@ html {
     margin-bottom: 10px;
 }
 
+.export-password {
+    width: 100%;
+    margin-bottom: 10px;
+}
+
 .export-image-button {
     width: 100%;
     font-size: 14px;