refactor: progress bar

ExpTechTW · Aug 1, 2023 · 053df7d · 053df7d
1 parent e2217bc
commit 053df7d
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 23 deletions.
diff --git a/src/core/index/event.js b/src/core/index/event.js
@@ -267,7 +267,9 @@ function on_eew(data, type) {
 			iconSize  : [40 + TREM.size * 3, 40 + TREM.size * 3],
 			className : "flash",
 		});
-		TREM.EQ_list[data.id].epicenterIcon = L.marker([data.lat, data.lon], { icon: epicenterIcon, zIndexOffset: 6000 }).addTo(TREM.Maps.main);
+		TREM.EQ_list[data.id].epicenterIcon = L.marker([data.lat, data.lon], { icon: epicenterIcon, zIndexOffset: 6000 })
+			.bindTooltip("", { opacity: 1, permanent: true, direction: "right", offset: [10, 0], className: "progress-tooltip" })
+			.addTo(TREM.Maps.main);
 	}
 
 	draw_intensity(skip);

diff --git a/src/core/index/loop.js b/src/core/index/loop.js
@@ -370,20 +370,10 @@ setInterval(() => {
 					TREM.EQ_list[key].p_wave.setRadius(p_dist);
 			if (s_dist < data.depth) {
 				const progress = Math.round(((Now().getTime() - data.time) / 1000 / TREM.EQ_list[key].wave[1].Stime) * 100);
-				const icon = L.divIcon({
-					className : "progress_bar",
-					html      : `<div style="background-color: aqua;height: ${progress}%;"></div>`,
-					iconSize  : [5, 50],
-				});
-				if (TREM.EQ_list[key].progress)
-					TREM.EQ_list[key].progress.setIcon(icon);
-				else
-					TREM.EQ_list[key].progress = L.marker([data.lat, data.lon + 0.15], { icon: icon }).addTo(TREM.Maps.main);
+				const progress_bar = `<div style="border-radius: 5px;background-color: aqua;height: ${progress}%;"></div>`;
+				TREM.EQ_list[key].epicenterIcon.bindTooltip(progress_bar, { opacity: 1, permanent: true, direction: "right", offset: [10, 0], className: "progress-tooltip" });
 			} else {
-				if (TREM.EQ_list[key].progress) {
-					TREM.EQ_list[key].progress.remove();
-					delete TREM.EQ_list[key].progress;
-				}
+				TREM.EQ_list[key].epicenterIcon.unbindTooltip();
 				if (!TREM.EQ_list[key].s_wave)
 					TREM.EQ_list[key].s_wave = L.circle([data.lat, data.lon], {
 						color     : (data.type == "eew-report") ? "grey" : (data.type == "eew-trem") ? "#73BF00" : (TREM.EQ_list[key].alert) ? "red" : "#FF8000",

diff --git a/src/core/index/main.js b/src/core/index/main.js
@@ -71,7 +71,9 @@ TREM.Maps.main.on("zoomend", () => {
 		else
 			icon.options.iconSize = [40 + TREM.size * 3, 40 + TREM.size * 3];
 		TREM.EQ_list[key].epicenterIcon.remove();
-		TREM.EQ_list[key].epicenterIcon = L.marker([data.lat, data.lon], { icon: icon, zIndexOffset: 6000 }).addTo(TREM.Maps.main);
+		TREM.EQ_list[key].epicenterIcon = L.marker([data.lat, data.lon], { icon: icon, zIndexOffset: 6000 })
+			.bindTooltip(TREM.EQ_list[key].epicenterIcon._tooltip._content, { opacity: 1, permanent: true, direction: "right", offset: [10, 0], className: "progress-tooltip" })
+			.addTo(TREM.Maps.main);
 	}
 	for (let i = 0; i < Object.keys(TREM.report_icon_list).length; i++) {
 		const key = Object.keys(TREM.report_icon_list)[i];

diff --git a/src/css/main.css b/src/css/main.css
@@ -222,14 +222,6 @@ body {
   font-size: 15px;
 }
 
-.progress_bar {
-  display: grid;
-  align-items: flex-end;
-  position: absolute;
-  border: 2px solid white;
-  border-radius: 3px;
-}
-
 .tsunami_1 {
   background-color: #5CEE18;
 }
@@ -1211,4 +1203,17 @@ body {
 
 .leaflet-tooltip-left::before {
   border-left-color: inherit;
+}
+
+.progress-tooltip {
+  width: 6px;
+  height: 50px;
+  display: grid;
+  align-items: flex-end;
+  border: 2px solid white;
+  border-radius: 5px;
+}
+
+.progress-tooltip::before {
+  display: none;
 }