mirror of https://github.com/Troplo/Colubrina.git
92 lines
2.4 KiB
Vue
92 lines
2.4 KiB
Vue
<template>
|
|
<div id="dev-overlay" class="dev-overlay">
|
|
<div id="dev-header" class="dev-header">Colubrina DevTools</div>
|
|
<v-container>
|
|
<v-btn @click="benchmark">
|
|
Benchmark
|
|
<template v-if="isBenchmarking"> ({{ multiplier }}x) </template> </v-btn
|
|
><br />
|
|
<template v-if="isBenchmarking">
|
|
Please restart the Colubrina server to stop the benchmark. </template
|
|
><br />
|
|
<v-btn @click="deleteBenchmark"> Delete benchuser messages </v-btn>
|
|
</v-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import AjaxErrorHandler from "@/lib/errorHandler.js"
|
|
export default {
|
|
name: "DevOverlay",
|
|
data() {
|
|
return {
|
|
isBenchmarking: false,
|
|
multiplier: 0
|
|
}
|
|
},
|
|
mounted() {
|
|
this.drag(document.getElementById("dev-overlay"))
|
|
},
|
|
methods: {
|
|
deleteBenchmark() {
|
|
this.axios.delete("/api/v1/debug/bench").catch((e) => {
|
|
AjaxErrorHandler(this.$store)(e)
|
|
})
|
|
},
|
|
benchmark() {
|
|
this.axios
|
|
.get("/api/v1/debug/bench")
|
|
.then(() => {
|
|
this.isBenchmarking = true
|
|
this.multiplier += 1
|
|
})
|
|
.catch((e) => {
|
|
AjaxErrorHandler(this.$store)(e)
|
|
})
|
|
},
|
|
drag(element) {
|
|
let pos1 = 0,
|
|
pos2 = 0,
|
|
pos3 = 0,
|
|
pos4 = 0
|
|
if (document.getElementById("dev-header")) {
|
|
// if present, the header is where you move the DIV from:
|
|
document.getElementById("dev-header").onmousedown = dragMouseDown
|
|
} else {
|
|
// otherwise, move the DIV from anywhere inside the DIV:
|
|
element.onmousedown = dragMouseDown
|
|
}
|
|
|
|
function dragMouseDown(e) {
|
|
e = e || window.event
|
|
e.preventDefault()
|
|
// get the mouse cursor position at startup:
|
|
pos3 = e.clientX
|
|
pos4 = e.clientY
|
|
document.onmouseup = closeDragElement
|
|
// call a function whenever the cursor moves:
|
|
document.onmousemove = elementDrag
|
|
}
|
|
|
|
function elementDrag(e) {
|
|
e = e || window.event
|
|
e.preventDefault()
|
|
pos1 = pos3 - e.clientX
|
|
pos2 = pos4 - e.clientY
|
|
pos3 = e.clientX
|
|
pos4 = e.clientY
|
|
element.style.top = element.offsetTop - pos2 + "px"
|
|
element.style.left = element.offsetLeft - pos1 + "px"
|
|
}
|
|
|
|
function closeDragElement() {
|
|
document.onmouseup = null
|
|
document.onmousemove = null
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|