refactor: replay

ExpTechTW · Jul 24, 2023 · 8deff70 · 8deff70
1 parent 12a5b02
commit 8deff70
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 25 deletions.
diff --git a/src/core/index/api.js b/src/core/index/api.js
@@ -313,10 +313,7 @@ async function refresh_report_list(_fetch = false, data = {}) {
 					report_now_id = originTime.getTime();
 					rts_replay_timestamp = originTime.getTime();
 					rts_replay_time = originTime.getTime() - 5000;
-					let list = [];
-					if (report_data[i].ID.length != 0) list = list.concat(report_data[i].ID);
-					if (report_data[i].trem.length != 0) list = list.concat(report_data[i].trem);
-					replay_run(list);
+					replay_run();
 					if (storage.getItem("report_eew")) get_data({
 						"originTime" : originTime.getTime(),
 						"type"       : "eew-report",
@@ -392,10 +389,7 @@ async function refresh_report_list(_fetch = false, data = {}) {
 					report_now_id = originTime.getTime();
 					rts_replay_timestamp = originTime.getTime();
 					rts_replay_time = originTime.getTime() - 5000;
-					let list = [];
-					if (report_data[i].ID.length != 0) list = list.concat(report_data[i].ID);
-					if (report_data[i].trem.length != 0) list = list.concat(report_data[i].trem);
-					replay_run(list);
+					replay_run();
 					if (storage.getItem("report_eew")) get_data({
 						"originTime" : originTime.getTime(),
 						"type"       : "eew-report",
@@ -468,7 +462,7 @@ function replay_stop() {
 	setTimeout(() => fetch_eew(), 1500);
 }
 
-function replay_run(id_list) {
+function replay_run() {
 	for (const item of document.getElementsByClassName("report_click_text fa-regular fa-circle-play fa-2x"))
 		item.style.display = "none";
 	for (let i = 0; i < Object.keys(TREM.EQ_list).length; i++) {
@@ -734,4 +728,9 @@ function show_screen(type) {
 function geoJsonMap(geojson, config, map) {
 	if (storage.getItem("disable_geojson_vt") ?? false) return L.geoJson(geojson, config).addTo(map);
 	else return L.geoJson.vt(geojson, config).addTo(map);
+}
+
+function time_replay(time) {
+	replay_run();
+	rts_replay_time = new Date(time).getTime();
 }
diff --git a/src/core/index/core.js b/src/core/index/core.js
@@ -38,4 +38,11 @@ function _sleep(e) {
 	localStorage.UUID = ans.uuid;
 	_server_init();
 })();
-log("Start", 1, "log", "~");
+log("Start", 1, "log", "~");
+
+ipcMain.on("replay_start", (e, time) => {
+	replay_run();
+	rts_replay_time = Now().getTime() - (10800 - Number(time)) * 1000;
+});
+
+ipcMain.on("replay_stop", () => replay_stop());
diff --git a/src/core/index/loop.js b/src/core/index/loop.js
@@ -54,15 +54,15 @@ map.onwheel = () => {
 };
 
 time.onclick = () => {
-	if (rts_replay_timestamp) replay_stop();
+	if (rts_replay_time) replay_stop();
 	if (TREM.report_epicenterIcon) report_off();
 	refresh_report_list();
 	time.style.cursor = "";
 };
 
 setInterval(() => {
 	setTimeout(() => {
-		const now = (rts_replay_time) ? new Date(rts_replay_time).getTime() : Now().getTime();
+		const now = (rts_replay_time) ? rts_replay_time : Now().getTime();
 		if (WS) time.innerHTML = `<b>${time_to_string(now)}</b>`;
 		if (Object.keys(TREM.EQ_list).length) {
 			for (const item of document.getElementsByClassName("flash"))

diff --git a/src/core/require.js b/src/core/require.js
@@ -1,4 +1,4 @@
-const { BrowserWindow, app, shell } = require("@electron/remote");
+const { BrowserWindow, app, ipcMain, shell } = require("@electron/remote");
 const fetch = require("node-fetch");
 const fs = require("fs");
 const { ipcRenderer } = require("electron");

diff --git a/src/core/setting/setting.js b/src/core/setting/setting.js
@@ -220,7 +220,7 @@ function _onchange(id) {
 }
 
 const openURL = url => {
-	shell.openExternal(url);
+	shell.openExternal(`https://${url}`);
 };
 
 for (const list of document.querySelectorAll(".list"))
@@ -325,4 +325,9 @@ for (const i of plugin_list)
 		plugin.appendChild(item);
 	} catch (err) {
 		log(`Unable to read plugin (${i}) >> ${err}`, 3, "main", "setting");
-	}
+	}
+
+function ipc_send(id, args) {
+	if (id == "replay_start") args = document.getElementById("timeline").value;
+	ipcRenderer.send(id, args);
+}
diff --git a/src/css/setting.css b/src/css/setting.css
@@ -481,4 +481,8 @@ ul > li > span{
 
 ::-webkit-scrollbar-thumb:active {
 	background-color: rgb(255 255 255 / 8%);
+}
+
+#timeline {
+  width: 100%;
 }
diff --git a/src/view/setting.html b/src/view/setting.html
@@ -42,8 +42,11 @@
               <div class="item-description">設定所在地可以在地震發生時預估你所在區域的地震震度。</div>
               <div class="item-options">
                 <div class="notice info">
-                  <svg width="20" height="20" class="icon-bottom" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M12 1.999c5.524 0 10.002 4.478 10.002 10.002 0 5.523-4.478 10.001-10.002 10.001-5.524 0-10.002-4.478-10.002-10.001C1.998 6.477 6.476 1.999 12 1.999Zm-.004 8.25a1 1 0 0 0-.992.885l-.007.116.003 5.502.007.117a1 1 0 0 0 1.987-.002L13 16.75l-.003-5.501-.007-.117a1 1 0 0 0-.994-.882ZM12 6.5a1.251 1.251 0 1 0 0 2.503A1.251 1.251 0 0 0 12 6.5Z" fill="#68f"/>
+                  <svg width="20" height="20" class="icon-bottom" fill="none" viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M12 1.999c5.524 0 10.002 4.478 10.002 10.002 0 5.523-4.478 10.001-10.002 10.001-5.524 0-10.002-4.478-10.002-10.001C1.998 6.477 6.476 1.999 12 1.999Zm-.004 8.25a1 1 0 0 0-.992.885l-.007.116.003 5.502.007.117a1 1 0 0 0 1.987-.002L13 16.75l-.003-5.501-.007-.117a1 1 0 0 0-.994-.882ZM12 6.5a1.251 1.251 0 1 0 0 2.503A1.251 1.251 0 0 0 12 6.5Z"
+                      fill="#68f" />
                   </svg>
                   <span>更改位置將會自動設定距離最近的即時測站。</span>
                 </div>
@@ -59,9 +62,11 @@
                 </div>
                 <div class="item-option">
                   <label for="lat">緯度</label>
-                  <input type="number" id="lat" class="input text" placeholder="(未設定)" step="0.01" max="90" min="-90" style="width: 80px;">
+                  <input type="number" id="lat" class="input text" placeholder="(未設定)" step="0.01" max="90" min="-90"
+                    style="width: 80px;">
                   <label for="lon">經度</label>
-                  <input type="number" id="lon" class="input text" placeholder="(未設定)" step="0.01" max="180" min="-180" style="width: 80px;">
+                  <input type="number" id="lon" class="input text" placeholder="(未設定)" step="0.01" max="180" min="-180"
+                    style="width: 80px;">
                 </div>
               </div>
             </div>
@@ -76,8 +81,11 @@
                   <label for="site">值</label>
                   <input type="text" id="site" class="input text" style="width: 120px;">
                   <div class="notice warn">
-                    <svg width="20" height="20" class="icon-bottom" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                      <path d="M10.909 2.782a2.25 2.25 0 0 1 2.975.74l.083.138 7.759 14.009a2.25 2.25 0 0 1-1.814 3.334l-.154.006H4.242A2.25 2.25 0 0 1 2.2 17.812l.072-.143L10.03 3.66a2.25 2.25 0 0 1 .879-.878ZM12 16.002a.999.999 0 1 0 0 1.997.999.999 0 0 0 0-1.997Zm-.002-8.004a1 1 0 0 0-.993.884L11 8.998 11 14l.007.117a1 1 0 0 0 1.987 0l.006-.117L13 8.998l-.007-.117a1 1 0 0 0-.994-.883Z" fill="#ffd700" />
+                    <svg width="20" height="20" class="icon-bottom" fill="none" viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M10.909 2.782a2.25 2.25 0 0 1 2.975.74l.083.138 7.759 14.009a2.25 2.25 0 0 1-1.814 3.334l-.154.006H4.242A2.25 2.25 0 0 1 2.2 17.812l.072-.143L10.03 3.66a2.25 2.25 0 0 1 .879-.878ZM12 16.002a.999.999 0 1 0 0 1.997.999.999 0 0 0 0-1.997Zm-.002-8.004a1 1 0 0 0-.993.884L11 8.998 11 14l.007.117a1 1 0 0 0 1.987 0l.006-.117L13 8.998l-.007-.117a1 1 0 0 0-.994-.883Z"
+                        fill="#ffd700" />
                     </svg>
                     <span>請不要隨意更改此數值。</span>
                   </div>
@@ -179,7 +187,8 @@
               <div class="item-options">
                 <div class="item-option">
                   <input type="password" id="key" class="input text" style="width: 210px;">
-                  <button id="apply-key" type="button" onclick="openURL('https://exptech.com.tw/api/v1/file/exptech/user.html')">
+                  <button id="apply-key" type="button"
+                    onclick="openURL('exptech.com.tw/api/v1/file/exptech/user.html')">
                     <span>點擊申請</span>
                     <span class="icon">open_in_new</span>
                   </button>
@@ -208,6 +217,24 @@
               </div>
             </div>
           </div>
+          <div class="item">
+            <div class="item-border"></div>
+            <div class="item-content">
+              <div class="item-title">重播</div>
+              <div class="item-description">重播 過去時間(3小時) 的地震紀錄。</div>
+              <div class="item-options">
+                <input id="timeline" type="range" min="0" max="10800" step="1" value="10800">
+                <div style="display: flex;">
+                  <button id="apply-key" type="button" onclick="ipc_send('replay_start')">
+                    <span>重播</span>
+                  </button>
+                  <button id="apply-key" type="button" onclick="ipc_send('replay_stop')">
+                    <span>取消</span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div id="graphics" class="view">
@@ -325,8 +352,11 @@
               <div class="item-description">選擇啟用的插件，插件將在程式啟動時載入。</div>
               <div class="item-options">
                 <div class="notice danger">
-                  <svg width="20" height="20" class="icon-bottom" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M10.909 2.782a2.25 2.25 0 0 1 2.975.74l.083.138 7.759 14.009a2.25 2.25 0 0 1-1.814 3.334l-.154.006H4.242A2.25 2.25 0 0 1 2.2 17.812l.072-.143L10.03 3.66a2.25 2.25 0 0 1 .879-.878ZM12 16.002a.999.999 0 1 0 0 1.997.999.999 0 0 0 0-1.997Zm-.002-8.004a1 1 0 0 0-.993.884L11 8.998 11 14l.007.117a1 1 0 0 0 1.987 0l.006-.117L13 8.998l-.007-.117a1 1 0 0 0-.994-.883Z" fill="#ff3b3e" />
+                  <svg width="20" height="20" class="icon-bottom" fill="none" viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M10.909 2.782a2.25 2.25 0 0 1 2.975.74l.083.138 7.759 14.009a2.25 2.25 0 0 1-1.814 3.334l-.154.006H4.242A2.25 2.25 0 0 1 2.2 17.812l.072-.143L10.03 3.66a2.25 2.25 0 0 1 .879-.878ZM12 16.002a.999.999 0 1 0 0 1.997.999.999 0 0 0 0-1.997Zm-.002-8.004a1 1 0 0 0-.993.884L11 8.998 11 14l.007.117a1 1 0 0 0 1.987 0l.006-.117L13 8.998l-.007-.117a1 1 0 0 0-.994-.883Z"
+                      fill="#ff3b3e" />
                   </svg>
                   <span>使用來源不明或無法信任的插件可能會危及你的個人資訊安全，請謹慎使用。</span>
                 </div>
@@ -341,7 +371,8 @@
             <div class="item-border"></div>
             <div class="item-content">
               <div class="item-title">關於 TREM Lite</div>
-              <div class="item-description">TREM Lite 是一款開源地震速報軟體，提供給您即時的地震資訊，利用自製的測站，顯示各地的即時震度，在地震發生的第一時間取得各管道發布的強震即時警報訊息。</div>
+              <div class="item-description">TREM Lite
+                是一款開源地震速報軟體，提供給您即時的地震資訊，利用自製的測站，顯示各地的即時震度，在地震發生的第一時間取得各管道發布的強震即時警報訊息。</div>
               <div class="item-options">
                 <div class="item-option">
                   <label for="client-version">版本</label>