From 4905d61a1aa84dd81201a2f68cb3b76fd53a5f3f Mon Sep 17 00:00:00 2001
From: Donald Zou <donaldzou@live.hk>
Date: Wed, 2 Oct 2024 18:01:20 +0800
Subject: [PATCH] Some adjustment on map

---
 src/static/app/src/components/map/map.vue | 11 +++--
 src/static/app/src/views/ping.vue         | 54 +++++++++++++----------
 src/static/app/src/views/traceroute.vue   | 46 ++++++++++++++++---
 src/static/css/dashboard.css              | 21 +++++++++
 4 files changed, 98 insertions(+), 34 deletions(-)

diff --git a/src/static/app/src/components/map/map.vue b/src/static/app/src/components/map/map.vue
index de5bc57..025d325 100644
--- a/src/static/app/src/components/map/map.vue
+++ b/src/static/app/src/components/map/map.vue
@@ -68,7 +68,6 @@ export default {
 			const marker = new Feature({
 				geometry: new Point(coordinate)
 			});
-			// Add marker to the vector source
 			vectorSource.addFeature(marker);
 		}
 		const lineString = new LineString(coordinates);
@@ -90,8 +89,8 @@ export default {
 				} else if (feature.getGeometry().getType() === 'LineString') {
 					return new Style({
 						stroke: new Stroke({
-							color: '#0d6efd',  // Line color
-							width: 2       // Line width
+							color: '#0d6efd',
+							width: 2
 						})
 					});
 				}
@@ -103,11 +102,15 @@ export default {
 </script>
 
 <template>
-	<div id="map" class="w-100 rounded-3" style="height: 300px"></div>
+	<div id="map" class="w-100 rounded-3"></div>
 </template>
 
 <style>
 .ol-layer canvas{
 	border-radius: var(--bs-border-radius-lg) !important;
 }
+
+#map{
+	height: 300px;
+}
 </style>
\ No newline at end of file
diff --git a/src/static/app/src/views/ping.vue b/src/static/app/src/views/ping.vue
index 8511ca6..1c48a7b 100644
--- a/src/static/app/src/views/ping.vue
+++ b/src/static/app/src/views/ping.vue
@@ -46,7 +46,9 @@ export default {
 					}else{
 						this.store.newMessage("Server", res.message, "danger")
 					}
+					this.pinging = false
 				})
+				
 			}
 {}		}	
 	},
@@ -73,7 +75,7 @@ export default {
 							<small>
 								<LocaleText t="Configuration"></LocaleText>
 							</small></label>
-						<select class="form-select" v-model="this.selectedConfiguration">
+						<select class="form-select" v-model="this.selectedConfiguration" :disabled="this.pinging">
 							<option disabled selected :value="undefined"></option>
 							<option :value="key" v-for="(val, key) in this.cips">
 								{{key}}
@@ -85,7 +87,7 @@ export default {
 							<small>
 								<LocaleText t="Peer"></LocaleText>
 							</small></label>
-						<select id="peer" class="form-select" v-model="this.selectedPeer" :disabled="this.selectedConfiguration === undefined">
+						<select id="peer" class="form-select" v-model="this.selectedPeer" :disabled="this.selectedConfiguration === undefined || this.pinging">
 							<option disabled selected :value="undefined"></option>
 							<option v-if="this.selectedConfiguration !== undefined" :value="key" v-for="(peer, key) in 
 								this.cips[this.selectedConfiguration]">
@@ -98,7 +100,7 @@ export default {
 							<small>
 								<LocaleText t="IP Address"></LocaleText>
 							</small></label>
-						<select id="ip" class="form-select" v-model="this.selectedIp" :disabled="this.selectedPeer === undefined">
+						<select id="ip" class="form-select" v-model="this.selectedIp" :disabled="this.selectedPeer === undefined || this.pinging">
 							<option disabled selected :value="undefined"></option>
 							<option
 								v-if="this.selectedPeer !== undefined"
@@ -121,6 +123,7 @@ export default {
 							</small></label>
 						<input class="form-control" type="text"
 						       id="ipAddress"
+						       :disabled="this.pinging"
 						       v-model="this.selectedIp">
 					</div>
 					<div class="w-100 border-top my-2"></div>
@@ -141,29 +144,40 @@ export default {
 								<i class="bi bi-plus-lg"></i>
 							</button>
 						</div>
-						
-						
-<!--						<input class="form-control" type="number" -->
-<!--						       v-model="this.count"-->
-<!--						       min="1" id="count" placeholder="How many times you want to ping?">-->
 					</div>
-					<button class="btn btn-primary rounded-3 mt-3" 
-					        :disabled="!this.selectedIp"
+					<button class="btn btn-primary rounded-3 mt-3 position-relative" 
+					        :disabled="!this.selectedIp || this.pinging"
 					        @click="this.execute()">
-						<i class="bi bi-person-walking me-2"></i>Ping!
+						<Transition name="slide">
+							<span v-if="!this.pinging" class="d-block">
+								<i class="bi bi-person-walking me-2"></i>Ping!
+							</span>
+							<span v-else class="d-block">
+								<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+								<span class="visually-hidden" role="status">Loading...</span>
+							</span>
+						</Transition>
+						
+						
+						
 					</button>
 				</div>
 				
-				<div class="col-sm-8">
-					<TransitionGroup name="ping">
+				<div class="col-sm-8 position-relative">
+					<Transition name="ping">
 						<div v-if="!this.pingResult" key="pingPlaceholder">
+							<div class="pingPlaceholder bg-body-secondary rounded-3 mb-3"
+							     style="height: 300px"
+							></div>
 							<div class="pingPlaceholder bg-body-secondary rounded-3 mb-3"
 							      :class="{'animate__animated animate__flash animate__slower animate__infinite': this.pinging}"
 							     :style="{'animation-delay': `${x*0.15}s`}"
 							     v-for="x in 4" ></div>
+							
 						</div>
 
 						<div v-else key="pingResult" class="d-flex flex-column gap-2 w-100">
+							<Map :d="this.pingResult" v-if="this.pingResult.geo && this.pingResult.geo.status === 'success'"></Map>
 							<div class="card rounded-3 bg-transparent shadow-sm animate__animated animate__fadeIn" style="animation-delay: 0.15s">
 								<div class="card-body row">
 									<div class="col-sm">
@@ -216,9 +230,8 @@ export default {
 									</samp>
 								</div>
 							</div>
-							<Map :d="this.pingResult" v-if="this.pingResult.geo && this.pingResult.geo.status === 'success'"></Map>
 						</div>
-					</TransitionGroup>
+					</Transition>
 					
 
 				</div>
@@ -241,17 +254,12 @@ export default {
 
 	.ping-leave-active{
 		position: absolute;
+		width: 100%;
 	}
-
 	.ping-enter-from,
 	.ping-leave-to {
 		opacity: 0;
-		//transform: scale(0.9);
-	}
-
-	/* ensure leaving items are taken out of layout flow so that moving
-	   animations can be calculated correctly. */
-	.ping-leave-active {
-		position: absolute;
+		//transform: scale(1.1);
+		filter: blur(3px);
 	}
 </style>
\ No newline at end of file
diff --git a/src/static/app/src/views/traceroute.vue b/src/static/app/src/views/traceroute.vue
index 14793b1..ca95de0 100644
--- a/src/static/app/src/views/traceroute.vue
+++ b/src/static/app/src/views/traceroute.vue
@@ -48,24 +48,37 @@ export default {
 					<label class="mb-1 text-muted" for="ipAddress">
 						<small>IP Address</small></label>
 					<input
+						:disabled="this.tracing"
 						id="ipAddress"
 						class="form-control"
 						v-model="this.ipAddress"
 						@keyup.enter="this.execute()"
 						type="text" placeholder="Enter an IP Address you want to trace :)">
 				</div>
-				<button class="btn btn-primary rounded-3 mt-3"
-				        :disabled="this.tracing"
+				<button class="btn btn-primary rounded-3 mt-3 position-relative"
+				        :disabled="this.tracing || !this.ipAddress"
 				        @click="this.execute()">
-					<i class="bi bi-bullseye me-2"></i> {{this.tracing ? "Tracing...":"Trace It!"}}
+					<Transition name="slide">
+							<span v-if="!this.tracing" class="d-block">
+								<i class="bi bi-person-walking me-2"></i>Trace!
+							</span>
+						<span v-else class="d-block">
+								<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+								<span class="visually-hidden" role="status">Loading...</span>
+							</span>
+					</Transition>
 				</button>
 			</div>
 			<div class="position-relative">
-				<TransitionGroup name="ping">
+				<Transition name="ping">
 					<div v-if="!this.tracerouteResult" key="pingPlaceholder">
 						<div class="pingPlaceholder bg-body-secondary rounded-3 mb-3"
-						     :class="{'animate__animated animate__flash animate__slower animate__infinite': this.tracing}"
+						     style="height: 300px !important;"
+						></div>
+						
+						<div class="pingPlaceholder bg-body-secondary rounded-3 mb-3"
 						     :style="{'animation-delay': `${x*0.05}s`}"
+						     :class="{'animate__animated animate__flash animate__slower animate__infinite': this.tracing}"
 						     v-for="x in 5" ></div>
 					</div>
 					<div v-else>
@@ -111,7 +124,7 @@ export default {
 							</table>
 						</div>
 					</div>
-				</TransitionGroup>
+				</Transition>
 			</div>
 		</div>
 	</div>
@@ -130,12 +143,14 @@ export default {
 
 .ping-leave-active{
 	position: absolute;
+	width: 100%;
 }
 
 .ping-enter-from,
 .ping-leave-to {
 	opacity: 0;
-	//transform: scale(0.9);
+	//transform: scale(1.1);
+	filter: blur(3px);
 }
 
 /* ensure leaving items are taken out of layout flow so that moving
@@ -151,4 +166,21 @@ table th, table td{
 .table > :not(caption) > * > *{
 	background-color: transparent !important;
 }
+
+.ping-move, /* apply transition to moving elements */
+.ping-enter-active,
+.ping-leave-active {
+	transition: all 0.4s cubic-bezier(0.82, 0.58, 0.17, 0.9);
+}
+
+.ping-leave-active{
+	position: absolute;
+	width: 100%;
+}
+.ping-enter-from,
+.ping-leave-to {
+	opacity: 0;
+	//transform: scale(1.1);
+	filter: blur(3px);
+}
 </style>
\ No newline at end of file
diff --git a/src/static/css/dashboard.css b/src/static/css/dashboard.css
index 0fb474c..4860142 100644
--- a/src/static/css/dashboard.css
+++ b/src/static/css/dashboard.css
@@ -1166,3 +1166,24 @@ pre.index-alert {
 .messageCentre{
     z-index: 9999;
 }
+
+
+.slide-move, /* apply transition to moving elements */
+.slide-enter-active,
+.slide-leave-active {
+    transition: all 0.4s cubic-bezier(0.82, 0.58, 0.17, 0.9);
+}
+
+.slide-leave-active{
+    position: absolute;
+    width: 100%;
+}
+.slide-enter-from{
+    opacity: 0;
+    transform: translateX(-50px) !important;
+}
+
+.slide-leave-to {
+    opacity: 0;
+    transform: translateX(50px) !important;
+}
\ No newline at end of file