kamp/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-22 15:20: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({ const marker = new Feature({
geometry: new Point(coordinate) geometry: new Point(coordinate)
}); });
// Add marker to the vector source
vectorSource.addFeature(marker); vectorSource.addFeature(marker);
} }
const lineString = new LineString(coordinates); const lineString = new LineString(coordinates);
@ -90,8 +89,8 @@ export default {
} else if (feature.getGeometry().getType() === 'LineString') { } else if (feature.getGeometry().getType() === 'LineString') {
return new Style({ return new Style({
stroke: new Stroke({ stroke: new Stroke({
color: '#0d6efd', // Line color color: '#0d6efd',
width: 2 // Line width width: 2
}) })
}); });
} }
@ -103,11 +102,15 @@ export default {
</script> </script>
<template> <template>
<div id="map" class="w-100 rounded-3" style="height: 300px"></div> <div id="map" class="w-100 rounded-3"></div>
</template> </template>
<style> <style>
.ol-layer canvas{ .ol-layer canvas{
border-radius: var(--bs-border-radius-lg) !important; border-radius: var(--bs-border-radius-lg) !important;
} }
#map{
height: 300px;
}
</style> </style>

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

@ -46,7 +46,9 @@ export default {
}else{ }else{
this.store.newMessage("Server", res.message, "danger") this.store.newMessage("Server", res.message, "danger")
} }
this.pinging = false
}) })
} }
{} } {} }
}, },
@ -73,7 +75,7 @@ export default {
<small> <small>
<LocaleText t="Configuration"></LocaleText> <LocaleText t="Configuration"></LocaleText>
</small></label> </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 disabled selected :value="undefined"></option>
<option :value="key" v-for="(val, key) in this.cips"> <option :value="key" v-for="(val, key) in this.cips">
{{key}} {{key}}
@ -85,7 +87,7 @@ export default {
<small> <small>
<LocaleText t="Peer"></LocaleText> <LocaleText t="Peer"></LocaleText>
</small></label> </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 disabled selected :value="undefined"></option>
<option v-if="this.selectedConfiguration !== undefined" :value="key" v-for="(peer, key) in <option v-if="this.selectedConfiguration !== undefined" :value="key" v-for="(peer, key) in
this.cips[this.selectedConfiguration]"> this.cips[this.selectedConfiguration]">
@ -98,7 +100,7 @@ export default {
<small> <small>
<LocaleText t="IP Address"></LocaleText> <LocaleText t="IP Address"></LocaleText>
</small></label> </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 disabled selected :value="undefined"></option>
<option <option
v-if="this.selectedPeer !== undefined" v-if="this.selectedPeer !== undefined"
@ -121,6 +123,7 @@ export default {
</small></label> </small></label>
<input class="form-control" type="text" <input class="form-control" type="text"
id="ipAddress" id="ipAddress"
:disabled="this.pinging"
v-model="this.selectedIp"> v-model="this.selectedIp">
</div> </div>
<div class="w-100 border-top my-2"></div> <div class="w-100 border-top my-2"></div>
@ -141,29 +144,40 @@ export default {
<i class="bi bi-plus-lg"></i> <i class="bi bi-plus-lg"></i>
</button> </button>
</div> </div>
<!-- <input class="form-control" type="number" -->
<!-- v-model="this.count"-->
<!-- min="1" id="count" placeholder="How many times you want to ping?">-->
</div> </div>
<button class="btn btn-primary rounded-3 mt-3" <button class="btn btn-primary rounded-3 mt-3 position-relative"
:disabled="!this.selectedIp" :disabled="!this.selectedIp || this.pinging"
@click="this.execute()"> @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> </button>
</div> </div>
<div class="col-sm-8"> <div class="col-sm-8 position-relative">
<TransitionGroup name="ping"> <Transition name="ping">
<div v-if="!this.pingResult" key="pingPlaceholder"> <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" <div class="pingPlaceholder bg-body-secondary rounded-3 mb-3"
:class="{'animate__animated animate__flash animate__slower animate__infinite': this.pinging}" :class="{'animate__animated animate__flash animate__slower animate__infinite': this.pinging}"
:style="{'animation-delay': `${x*0.15}s`}" :style="{'animation-delay': `${x*0.15}s`}"
v-for="x in 4" ></div> v-for="x in 4" ></div>
</div> </div>
<div v-else key="pingResult" class="d-flex flex-column gap-2 w-100"> <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 rounded-3 bg-transparent shadow-sm animate__animated animate__fadeIn" style="animation-delay: 0.15s">
<div class="card-body row"> <div class="card-body row">
<div class="col-sm"> <div class="col-sm">
@ -216,9 +230,8 @@ export default {
</samp> </samp>
</div> </div>
</div> </div>
<Map :d="this.pingResult" v-if="this.pingResult.geo && this.pingResult.geo.status === 'success'"></Map>
</div> </div>
</TransitionGroup> </Transition>
</div> </div>
@ -241,17 +254,12 @@ export default {
.ping-leave-active{ .ping-leave-active{
position: absolute; position: absolute;
width: 100%;
} }
.ping-enter-from, .ping-enter-from,
.ping-leave-to { .ping-leave-to {
opacity: 0; 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
animations can be calculated correctly. */
.ping-leave-active {
position: absolute;
} }
</style> </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"> <label class="mb-1 text-muted" for="ipAddress">
<small>IP Address</small></label> <small>IP Address</small></label>
<input <input
:disabled="this.tracing"
id="ipAddress" id="ipAddress"
class="form-control" class="form-control"
v-model="this.ipAddress" v-model="this.ipAddress"
@keyup.enter="this.execute()" @keyup.enter="this.execute()"
type="text" placeholder="Enter an IP Address you want to trace :)"> type="text" placeholder="Enter an IP Address you want to trace :)">
</div> </div>
<button class="btn btn-primary rounded-3 mt-3" <button class="btn btn-primary rounded-3 mt-3 position-relative"
:disabled="this.tracing" :disabled="this.tracing || !this.ipAddress"
@click="this.execute()"> @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> </button>
</div> </div>
<div class="position-relative"> <div class="position-relative">
<TransitionGroup name="ping"> <Transition name="ping">
<div v-if="!this.tracerouteResult" key="pingPlaceholder"> <div v-if="!this.tracerouteResult" key="pingPlaceholder">
<div class="pingPlaceholder bg-body-secondary rounded-3 mb-3" <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`}" :style="{'animation-delay': `${x*0.05}s`}"
:class="{'animate__animated animate__flash animate__slower animate__infinite': this.tracing}"
v-for="x in 5" ></div> v-for="x in 5" ></div>
</div> </div>
<div v-else> <div v-else>
@ -111,7 +124,7 @@ export default {
</table> </table>
</div> </div>
</div> </div>
</TransitionGroup> </Transition>
</div> </div>
</div> </div>
</div> </div>
@ -130,12 +143,14 @@ export default {
.ping-leave-active{ .ping-leave-active{
position: absolute; position: absolute;
width: 100%;
} }
.ping-enter-from, .ping-enter-from,
.ping-leave-to { .ping-leave-to {
opacity: 0; 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 /* ensure leaving items are taken out of layout flow so that moving
@ -151,4 +166,21 @@ table th, table td{
.table > :not(caption) > * > *{ .table > :not(caption) > * > *{
background-color: transparent !important; 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> </style>

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

@ -1166,3 +1166,24 @@ pre.index-alert {
.messageCentre{ .messageCentre{
z-index: 9999; 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;
}