chg: [app] Replaced _.throttle by _.debounce to have the desired effect
This commit is contained in:
parent
0fe9d9183a
commit
4529017748
9 changed files with 29 additions and 34 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
4
dist/index.html
vendored
4
dist/index.html
vendored
|
@ -5,8 +5,8 @@
|
||||||
<link rel="icon" href="/favicon.ico">
|
<link rel="icon" href="/favicon.ico">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Vite App</title>
|
<title>Vite App</title>
|
||||||
<script type="module" crossorigin src="/assets/index-BL0Loedz.js"></script>
|
<script type="module" crossorigin src="/assets/index-CG7kEUoH.js"></script>
|
||||||
<link rel="stylesheet" crossorigin href="/assets/index-CvXX7jiP.css">
|
<link rel="stylesheet" crossorigin href="/assets/index-DlglK08D.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|
14
package-lock.json
generated
14
package-lock.json
generated
|
@ -13,7 +13,7 @@
|
||||||
"@fortawesome/free-regular-svg-icons": "^6.5.2",
|
"@fortawesome/free-regular-svg-icons": "^6.5.2",
|
||||||
"@fortawesome/free-solid-svg-icons": "^6.5.2",
|
"@fortawesome/free-solid-svg-icons": "^6.5.2",
|
||||||
"@fortawesome/vue-fontawesome": "^3.0.8",
|
"@fortawesome/vue-fontawesome": "^3.0.8",
|
||||||
"lodash.throttle": "^4.1.1",
|
"lodash.debounce": "^4.0.8",
|
||||||
"vue": "^3.4.29"
|
"vue": "^3.4.29"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
@ -2348,18 +2348,18 @@
|
||||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
|
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/lodash.debounce": {
|
||||||
|
"version": "4.0.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||||
|
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/lodash.merge": {
|
"node_modules/lodash.merge": {
|
||||||
"version": "4.6.2",
|
"version": "4.6.2",
|
||||||
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
|
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
|
||||||
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
|
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/lodash.throttle": {
|
|
||||||
"version": "4.1.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
|
|
||||||
"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/lru-cache": {
|
"node_modules/lru-cache": {
|
||||||
"version": "10.2.2",
|
"version": "10.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
"@fortawesome/free-regular-svg-icons": "^6.5.2",
|
"@fortawesome/free-regular-svg-icons": "^6.5.2",
|
||||||
"@fortawesome/free-solid-svg-icons": "^6.5.2",
|
"@fortawesome/free-solid-svg-icons": "^6.5.2",
|
||||||
"@fortawesome/vue-fontawesome": "^3.0.8",
|
"@fortawesome/vue-fontawesome": "^3.0.8",
|
||||||
"lodash.throttle": "^4.1.1",
|
"lodash.debounce": "^4.0.8",
|
||||||
"vue": "^3.4.29"
|
"vue": "^3.4.29"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
@ -16,6 +16,7 @@ onMounted(() => {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<main>
|
<main>
|
||||||
|
<h1 class="text-2xl text-center text-slate-500 dark:text-slate-400 absolute top-1 left-1">MISP Exercise Dashboard</h1>
|
||||||
<div class="absolute top-1 right-1">
|
<div class="absolute top-1 right-1">
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2">
|
||||||
<TheThemeButton></TheThemeButton>
|
<TheThemeButton></TheThemeButton>
|
||||||
|
|
|
@ -19,7 +19,6 @@ onMounted(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<h1 class="text-3xl font-bold text-center text-slate-600 dark:text-slate-300">MISP Exercise Dashboard</h1>
|
|
||||||
<TheScores></TheScores>
|
<TheScores></TheScores>
|
||||||
<TheLiveLogs></TheLiveLogs>
|
<TheLiveLogs></TheLiveLogs>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, onMounted } from 'vue'
|
import { ref, computed, onMounted } from 'vue'
|
||||||
import { exercises, selected_exercises, diagnostic, resetAllExerciseProgress, resetLiveLogs, changeExerciseSelection, throttledGetDiangostic } from "@/socket";
|
import { exercises, selected_exercises, diagnostic, resetAllExerciseProgress, resetLiveLogs, changeExerciseSelection, debouncedGetDiangostic } from "@/socket";
|
||||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||||
import { faScrewdriverWrench, faTrash, faSuitcaseMedical, faGraduationCap, faBan } from '@fortawesome/free-solid-svg-icons'
|
import { faScrewdriverWrench, faTrash, faSuitcaseMedical, faGraduationCap, faBan } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
|
||||||
|
@ -17,7 +17,7 @@
|
||||||
|
|
||||||
function showTheModal() {
|
function showTheModal() {
|
||||||
admin_modal.value.showModal()
|
admin_modal.value.showModal()
|
||||||
throttledGetDiangostic()
|
debouncedGetDiangostic()
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { reactive, computed } from "vue";
|
import { reactive, computed } from "vue";
|
||||||
import { io } from "socket.io-client";
|
import { io } from "socket.io-client";
|
||||||
import throttle from 'lodash.throttle'
|
import debounce from 'lodash.debounce'
|
||||||
|
|
||||||
// "undefined" means the URL will be computed from the `window.location` object
|
// "undefined" means the URL will be computed from the `window.location` object
|
||||||
const URL = process.env.NODE_ENV === "production" ? undefined : "http://localhost:3000";
|
const URL = process.env.NODE_ENV === "production" ? undefined : "http://localhost:3000";
|
||||||
|
@ -81,13 +81,8 @@ export function toggleVerboseMode(enabled) {
|
||||||
sendToggleVerboseMode(enabled)
|
sendToggleVerboseMode(enabled)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function throttledGetProgress() {
|
export const debouncedGetProgress = debounce(getProgress, 200, {leading: true})
|
||||||
return throttle(getProgress, 200)
|
export const debouncedGetDiangostic = debounce(getDiangostic, 1000, {leading: true})
|
||||||
}
|
|
||||||
|
|
||||||
export function throttledGetDiangostic() {
|
|
||||||
return throttle(getDiangostic, 1000)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Private */
|
/* Private */
|
||||||
|
@ -175,11 +170,11 @@ socket.on("notification", (message) => {
|
||||||
});
|
});
|
||||||
|
|
||||||
socket.on("new_user", (new_user) => {
|
socket.on("new_user", (new_user) => {
|
||||||
throttledGetProgress()
|
debouncedGetProgress()
|
||||||
});
|
});
|
||||||
|
|
||||||
socket.on("refresh_score", (new_user) => {
|
socket.on("refresh_score", (new_user) => {
|
||||||
throttledGetProgress()
|
debouncedGetProgress()
|
||||||
});
|
});
|
||||||
|
|
||||||
function addLimited(target, message, maxCount) {
|
function addLimited(target, message, maxCount) {
|
||||||
|
|
Loading…
Reference in a new issue