Infra-Mirrors/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-12-19 04:34:33 -05:00
Code Issues Packages Projects Releases Wiki Activity

Update Maintenance UI

Browse Source
This commit is contained in:
Louis Lam 2022-09-18 02:02:18 +08:00
parent 80698a58b8
commit a29eae3213
3 changed files with 80 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/EditMaintenance.vue
View File

@ -268,7 +268,7 @@ export default {
toast.success(res.msg);
this.processing = false;
this.$root.getMaintenanceList();
this.$router.push("/maintenance/" + res.maintenanceID);
this.$router.push("/maintenance");
});
});
} else {
@ -285,6 +285,7 @@ export default {
this.processing = false;
this.$root.toastRes(res);
this.init();
this.$router.push("/maintenance");
});
});
} else {

2
src/pages/MaintenanceDetails.vue
View File

@ -91,7 +91,7 @@ export default {
this.$root.deleteMaintenance(this.maintenance.id, (res) => {
if (res.ok) {
toast.success(res.msg);
this.$router.push("/dashboard");
this.$router.push("/maintenance");
} else {
toast.error(res.msg);
}

84
src/pages/ManageMaintenance.vue
View File

@ -16,21 +16,37 @@
{{ $t("No maintenance") }}
</span>
<router-link
<div
v-for="(item, index) in sortedMaintenanceList"
:key="index"
:to="maintenanceURL(item.id)"
class="item"
:class="{ 'disabled': !$root.isActiveMaintenance(item.end_date) }"
:class="{ 'ended': !$root.isActiveMaintenance(item.end_date) }"
>
<div>
</div>
<div class="left-part">
<div
class="circle"
></div>
<div class="info">
<div class="title">{{ item.title }}</div>
<div>{{ item.description }}</div>
</div>
</router-link>
</div>
<div class="buttons">
<router-link :to="maintenanceURL(item.id)" class="btn btn-light">{{ $t("Details") }}</router-link>
<router-link :to="'/maintenance/edit/' + item.id" class="btn btn-secondary">
<font-awesome-icon icon="edit" /> {{ $t("Edit") }}
</router-link>
<button class="btn btn-danger" @click="deleteDialog(item.id)">
<font-awesome-icon icon="trash" /> {{ $t("Delete") }}
</button>
</div>
</div>
</div>
<Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteMaintenance">
{{ $t("deleteMaintenanceMsg") }}
</Confirm>
</div>
</transition>
</template>
@ -38,12 +54,17 @@
<script>
import { getResBaseURL } from "../util-frontend";
import { getMaintenanceRelativeURL } from "../util.ts";
import Confirm from "../components/Confirm.vue";
import { useToast } from "vue-toastification";
const toast = useToast();
export default {
components: {
Confirm,
},
data() {
return {
selectedMaintenanceID: undefined,
};
},
computed: {
@ -107,6 +128,22 @@ export default {
maintenanceURL(id) {
return getMaintenanceRelativeURL(id);
},
deleteDialog(maintenanceID) {
this.selectedMaintenanceID = maintenanceID;
this.$refs.confirmDelete.show();
},
deleteMaintenance() {
this.$root.deleteMaintenance(this.selectedMaintenanceID, (res) => {
if (res.ok) {
toast.success(res.msg);
this.$router.push("/maintenance");
} else {
toast.error(res.msg);
}
});
},
},
};
</script>
@ -121,6 +158,7 @@ export default {
text-decoration: none;
border-radius: 10px;
transition: all ease-in-out 0.15s;
justify-content: space-between;
padding: 10px;
min-height: 90px;
@ -128,18 +166,26 @@ export default {
background-color: $highlight-white;
}
&.active {
background-color: #cdf8f4;
&.ended {
.left-part {
opacity: 0.5;
.circle {
background-color: $dark-font-color;
}
}
}
$logo-width: 70px;
.left-part {
display: flex;
gap: 12px;
align-items: center;
.logo {
width: $logo-width;
height: $logo-width;
.circle {
width: 25px;
height: 25px;
border-radius: 50rem;
background-color: $maintenance;
// Better when the image is loading
min-height: 1px;
}
.info {
@ -154,15 +200,17 @@ export default {
}
}
.buttons {
display: flex;
gap: 8px;
}
}
.dark {
.item {
&:hover {
background-color: $dark-bg2;
}
&.active {
background-color: $dark-bg2;
}
}
}
</style>