Update resources

hkbus · Dec 13, 2024 · 1ab44ee · 1ab44ee
1 parent f69c2ee
commit 1ab44ee
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -19,9 +19,22 @@
     <script src="main.js" defer></script>
 </head>
 <body>
+
+    <div class="password-blocker" id="password-blocker"></div>
+
+    <div class="password-dialog" id="password-dialog">
+        <div class="control password">
+            <input type="password" class="input" id="password" name="password" placeholder="密碼 Password" onchange="document.getElementById('password').classList.remove('error');">
+        </div>
+        <div class="control">
+            <button class="button is-small password-confirm" id="password-confirm" onclick="checkPassword();">確認 Enter</button>
+        </div>
+    </div>
+
     <div class="loader-container" id="loader">
         <div class="loader"></div>
     </div>
+
     <div class="hero is-fullheight">
         <div class="box sidebar">
             <div class="field">
@@ -259,17 +272,13 @@
 
             <label class="label">匯出<br>Export</label>
 
-            <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-button" onclick="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-image-button button is-info" id="export-image-basemap-button" onclick="exportHeatmapWithBasemapAsImage();" disabled>熱圖+地圖 Heatmap+Basemap (PNG)</button>
 
-            <button class="export-area-button button is-info" id="export-area-button" onclick="executeIfPasswordCorrect(exportTimeArea);" disabled>時間範圍 Area (GeoJson)</button>
+            <button class="export-area-button button is-info" id="export-area-button" onclick="exportTimeArea();" disabled>時間範圍 Area (GeoJson)</button>
 
-            <button class="export-points-button button is-info" id="export-points-button" onclick="executeIfPasswordCorrect(exportGeoJson);" disabled>數據點 Stop Points (GeoJson)</button>
+            <button class="export-points-button button is-info" id="export-points-button" onclick="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">

diff --git a/main.js b/main.js
@@ -748,20 +748,29 @@ async function getSHA256Hash(input) {
     return hashArray.map((item) => item.toString(16).padStart(2, "0")).join("");
 }
 
-async function executeIfPasswordCorrect(block) {
+function checkPassword() {
     const passwordElement = document.getElementById("password");
-    if (await getSHA256Hash(passwordElement.value) === exportPasswordHash) {
-        block();
-    } else {
-        passwordElement.classList.add("error");
-        alert("密碼錯誤 Incorrect password");
-    }
+    getSHA256Hash(passwordElement.value).then(hash => {
+        if (hash === exportPasswordHash) {
+            document.getElementById("password-blocker").style.display = "none";
+            document.getElementById("password-dialog").style.display = "none";
+        } else {
+            passwordElement.classList.add("error");
+            alert("密碼錯誤 Incorrect password");
+        }
+    });
 }
 
 // ==============================
 
 const exportPasswordHash = "b92a1ffdc416f6f67e0a32f459e2b652504adba390017c29f3538b7b494172df";
 
+document.getElementById("password").addEventListener("keyup", event => {
+    if (event.key === "Enter") {
+        checkPassword();
+    }
+});
+
 let routeList = null;
 let stopList = null;
 let journeyTimes = null;

diff --git a/routeTimeList.min.json b/routeTimeList.min.json
diff --git a/style.css b/style.css
@@ -2,6 +2,42 @@ html {
     overflow-y: auto;
 }
 
+.password-blocker {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 100000000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.password-dialog {
+    z-index: 1000000000;
+    border-radius: 5px;
+    font-family: Arial, sans-serif;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+    padding: 20px;
+    border: 1px solid black;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.password-confirm {
+    width: 100%;
+}
+
+.password {
+    width: 100%;
+    margin-bottom: 10px;
+}
+
 .leaflet-container {
     cursor: crosshair;
 }
@@ -169,11 +205,6 @@ html {
     margin-bottom: 10px;
 }
 
-.export-password {
-    width: 100%;
-    margin-bottom: 10px;
-}
-
 .export-image-button {
     width: 100%;
     font-size: 14px;