kamp/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-22 07:10:09 +01:00
Code

Some adjustment on map

Browse Source
This commit is contained in:
Donald Zou 2024-10-02 18:01:20 +08:00
parent ff0147bebb
commit 4905d61a1a
4 changed files with 98 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/static/app/src/components/map/map.vue
View File

@ -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>

52
src/static/app/src/views/ping.vue
View File

@ -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()">
<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>

46
src/static/app/src/views/traceroute.vue
View File

@ -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>

21
src/static/css/dashboard.css
View File

@ -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;
}