TyleoDvDelaware3217/Kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-05-22 06:52:33 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Fix the warning and error

Browse source
This commit is contained in:
Marshu 2025-04-20 01:59:23 +08:00
parent c45660e49c
commit 5ace5c0024
1 changed files with 53 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
src/components/PublicGroupList.vue
View file

@ -20,19 +20,19 @@
<div class="dropdown"> <div class="dropdown">
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle sort-button" :id="'sortDropdown' + group.index" data-bs-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle sort-button" :id="'sortDropdown' + group.index" data-bs-toggle="dropdown" aria-expanded="false">
<div class="sort-arrows"> <div class="sort-arrows">
<font-awesome-icon <font-awesome-icon
icon="arrow-down" icon="arrow-down"
:class="{ :class="{
'arrow-inactive': !group.element.sortKey || group.element.sortDirection !== 'desc', 'arrow-inactive': !group.element.sortKey || group.element.sortDirection !== 'desc',
'arrow-active': group.element.sortKey && group.element.sortDirection === 'desc' 'arrow-active': group.element.sortKey && group.element.sortDirection === 'desc'
}" }"
/> />
<font-awesome-icon <font-awesome-icon
icon="arrow-up" icon="arrow-up"
:class="{ :class="{
'arrow-inactive': !group.element.sortKey || group.element.sortDirection !== 'asc', 'arrow-inactive': !group.element.sortKey || group.element.sortDirection !== 'asc',
'arrow-active': group.element.sortKey && group.element.sortDirection === 'asc' 'arrow-active': group.element.sortKey && group.element.sortDirection === 'asc'
}" }"
/> />
</div> </div>
</button> </button>
@ -42,9 +42,9 @@
<div class="sort-item-content"> <div class="sort-item-content">
<span>{{ $t("Status") }}</span> <span>{{ $t("Status") }}</span>
<span v-if="getSortKey(group.element) === 'status'" class="sort-indicators"> <span v-if="getSortKey(group.element) === 'status'" class="sort-indicators">
<font-awesome-icon <font-awesome-icon
:icon="group.element.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'" :icon="group.element.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'"
class="arrow-active me-1" class="arrow-active me-1"
/> />
</span> </span>
</div> </div>
@ -55,9 +55,9 @@
<div class="sort-item-content"> <div class="sort-item-content">
<span>{{ $t("Name") }}</span> <span>{{ $t("Name") }}</span>
<span v-if="getSortKey(group.element) === 'name'" class="sort-indicators"> <span v-if="getSortKey(group.element) === 'name'" class="sort-indicators">
<font-awesome-icon <font-awesome-icon
:icon="group.element.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'" :icon="group.element.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'"
class="arrow-active me-1" class="arrow-active me-1"
/> />
</span> </span>
</div> </div>
@ -68,9 +68,9 @@
<div class="sort-item-content"> <div class="sort-item-content">
<span>{{ $t("Uptime") }}</span> <span>{{ $t("Uptime") }}</span>
<span v-if="getSortKey(group.element) === 'uptime'" class="sort-indicators"> <span v-if="getSortKey(group.element) === 'uptime'" class="sort-indicators">
<font-awesome-icon <font-awesome-icon
:icon="group.element.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'" :icon="group.element.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'"
class="arrow-active me-1" class="arrow-active me-1"
/> />
</span> </span>
</div> </div>
@ -81,9 +81,9 @@
<div class="sort-item-content"> <div class="sort-item-content">
<span>{{ $t("Cert Exp.") }}</span> <span>{{ $t("Cert Exp.") }}</span>
<span v-if="getSortKey(group.element) === 'cert'" class="sort-indicators"> <span v-if="getSortKey(group.element) === 'cert'" class="sort-indicators">
<font-awesome-icon <font-awesome-icon
:icon="group.element.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'" :icon="group.element.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'"
class="arrow-active me-1" class="arrow-active me-1"
/> />
</span> </span>
</div> </div>
@ -387,21 +387,32 @@ export default {
if (!a || !b) return 0; if (!a || !b) return 0;
let comparison = 0; let comparison = 0;
let valueA, valueB; let valueA;
let valueB;
if (sortKey === "status") { if (sortKey === "status") {
// Sort by status // Sort by status
const getStatusPriority = (monitor) => { const getStatusPriority = (monitor) => {
if (!monitor || !monitor.id) return 4; if (!monitor || !monitor.id) {
return 4;
}
const hbList = this.$root.heartbeatList || {}; const hbList = this.$root.heartbeatList || {};
const hbArr = hbList[monitor.id]; const hbArr = hbList[monitor.id];
if (hbArr && hbArr.length > 0) { if (hbArr && hbArr.length > 0) {
const lastStatus = hbArr.at(-1).status; const lastStatus = hbArr.at(-1).status;
if (lastStatus === 0) return 0; // Down if (lastStatus === 0) {
if (lastStatus === 1) return 1; // Up return 0;
if (lastStatus === 2) return 2; // Pending } // Down
if (lastStatus === 3) return 3; // Maintenance if (lastStatus === 1) {
return 1;
} // Up
if (lastStatus === 2) {
return 2;
} // Pending
if (lastStatus === 3) {
return 3;
} // Maintenance
} }
return 4; // Unknown/No data return 4; // Unknown/No data
}; };
@ -471,7 +482,9 @@ export default {
// We must check if there are any elements in monitorList to // We must check if there are any elements in monitorList to
// prevent undefined errors if it hasn't been loaded yet // prevent undefined errors if it hasn't been loaded yet
if (this.$parent.editMode && ignoreSendUrl && Object.keys(this.$root.monitorList).length) { if (this.$parent.editMode && ignoreSendUrl && Object.keys(this.$root.monitorList).length) {
return this.$root.monitorList[monitor.element.id].type === "http" || this.$root.monitorList[monitor.element.id].type === "keyword" || this.$root.monitorList[monitor.element.id].type === "json-query"; return this.$root.monitorList[monitor.element.id].type === "http" ||
this.$root.monitorList[monitor.element.id].type === "keyword" ||
this.$root.monitorList[monitor.element.id].type === "json-query";
} }
return monitor.element.sendUrl && monitor.element.url && monitor.element.url !== "https://"; return monitor.element.sendUrl && monitor.element.url && monitor.element.url !== "https://";
}, },
@ -516,13 +529,17 @@ export default {
* @returns {void} * @returns {void}
*/ */
loadSortSettingsFromURL() { loadSortSettingsFromURL() {
if (!this.$root.publicGroupList) return; if (!this.$root.publicGroupList) {
return;
}
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
// Iterate through all groups, look for sort parameters in URL // Iterate through all groups, look for sort parameters in URL
this.$root.publicGroupList.forEach(group => { this.$root.publicGroupList.forEach(group => {
if (!group) return; if (!group) {
return;
}
const groupId = this.getGroupIdentifier(group); const groupId = this.getGroupIdentifier(group);
const sortParam = urlParams.get(`sort_${groupId}`); const sortParam = urlParams.get(`sort_${groupId}`);
@ -544,7 +561,9 @@ export default {
* @returns {void} * @returns {void}
*/ */
updateURLSortParams() { updateURLSortParams() {
if (!this.$root.publicGroupList) return; if (!this.$root.publicGroupList) {
return;
}
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
@ -562,7 +581,9 @@ export default {
// Add current sort parameters // Add current sort parameters
this.$root.publicGroupList.forEach(group => { this.$root.publicGroupList.forEach(group => {
if (!group || !group.sortKey) return; if (!group || !group.sortKey) {
return;
}
const groupId = this.getGroupIdentifier(group); const groupId = this.getGroupIdentifier(group);
urlParams.set(`sort_${groupId}`, `${group.sortKey}_${group.sortDirection}`); urlParams.set(`sort_${groupId}`, `${group.sortKey}_${group.sortDirection}`);
@ -679,11 +700,11 @@ export default {
border: none; border: none;
box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1); box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
transition: all ease-in-out 0.15s; transition: all ease-in-out 0.15s;
&:hover { &:hover {
background-color: #f8f9fa; background-color: #f8f9fa;
} }
&:focus, &:active { &:focus, &:active {
box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1); box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
border: none; border: none;
@ -723,7 +744,7 @@ export default {
.sort-item { .sort-item {
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
&:hover { &:hover {
background-color: #f8f9fa; background-color: #f8f9fa;
} }
@ -769,5 +790,4 @@ export default {
.bg-maintenance { .bg-maintenance {
background-color: $maintenance; background-color: $maintenance;
} }
</style> </style>