mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-09-08 02:12:10 +00:00
Update Maintenance UI
This commit is contained in:
parent
80698a58b8
commit
a29eae3213
@ -268,7 +268,7 @@ export default {
|
|||||||
toast.success(res.msg);
|
toast.success(res.msg);
|
||||||
this.processing = false;
|
this.processing = false;
|
||||||
this.$root.getMaintenanceList();
|
this.$root.getMaintenanceList();
|
||||||
this.$router.push("/maintenance/" + res.maintenanceID);
|
this.$router.push("/maintenance");
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
@ -285,6 +285,7 @@ export default {
|
|||||||
this.processing = false;
|
this.processing = false;
|
||||||
this.$root.toastRes(res);
|
this.$root.toastRes(res);
|
||||||
this.init();
|
this.init();
|
||||||
|
this.$router.push("/maintenance");
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
@ -91,7 +91,7 @@ export default {
|
|||||||
this.$root.deleteMaintenance(this.maintenance.id, (res) => {
|
this.$root.deleteMaintenance(this.maintenance.id, (res) => {
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
toast.success(res.msg);
|
toast.success(res.msg);
|
||||||
this.$router.push("/dashboard");
|
this.$router.push("/maintenance");
|
||||||
} else {
|
} else {
|
||||||
toast.error(res.msg);
|
toast.error(res.msg);
|
||||||
}
|
}
|
||||||
|
@ -16,21 +16,37 @@
|
|||||||
{{ $t("No maintenance") }}
|
{{ $t("No maintenance") }}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<router-link
|
<div
|
||||||
v-for="(item, index) in sortedMaintenanceList"
|
v-for="(item, index) in sortedMaintenanceList"
|
||||||
:key="index"
|
:key="index"
|
||||||
:to="maintenanceURL(item.id)"
|
|
||||||
class="item"
|
class="item"
|
||||||
:class="{ 'disabled': !$root.isActiveMaintenance(item.end_date) }"
|
:class="{ 'ended': !$root.isActiveMaintenance(item.end_date) }"
|
||||||
>
|
>
|
||||||
<div>
|
<div class="left-part">
|
||||||
|
<div
|
||||||
|
class="circle"
|
||||||
|
></div>
|
||||||
|
<div class="info">
|
||||||
|
<div class="title">{{ item.title }}</div>
|
||||||
|
<div>{{ item.description }}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info">
|
|
||||||
<div class="title">{{ item.title }}</div>
|
<div class="buttons">
|
||||||
<div>{{ item.description }}</div>
|
<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>
|
||||||
</router-link>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteMaintenance">
|
||||||
|
{{ $t("deleteMaintenanceMsg") }}
|
||||||
|
</Confirm>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
</template>
|
</template>
|
||||||
@ -38,12 +54,17 @@
|
|||||||
<script>
|
<script>
|
||||||
import { getResBaseURL } from "../util-frontend";
|
import { getResBaseURL } from "../util-frontend";
|
||||||
import { getMaintenanceRelativeURL } from "../util.ts";
|
import { getMaintenanceRelativeURL } from "../util.ts";
|
||||||
|
import Confirm from "../components/Confirm.vue";
|
||||||
|
import { useToast } from "vue-toastification";
|
||||||
|
const toast = useToast();
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
Confirm,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
selectedMaintenanceID: undefined,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -107,6 +128,22 @@ export default {
|
|||||||
maintenanceURL(id) {
|
maintenanceURL(id) {
|
||||||
return getMaintenanceRelativeURL(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>
|
</script>
|
||||||
@ -121,6 +158,7 @@ export default {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
transition: all ease-in-out 0.15s;
|
transition: all ease-in-out 0.15s;
|
||||||
|
justify-content: space-between;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
min-height: 90px;
|
min-height: 90px;
|
||||||
|
|
||||||
@ -128,29 +166,43 @@ export default {
|
|||||||
background-color: $highlight-white;
|
background-color: $highlight-white;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.ended {
|
||||||
background-color: #cdf8f4;
|
.left-part {
|
||||||
|
opacity: 0.5;
|
||||||
|
.circle {
|
||||||
|
background-color: $dark-font-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$logo-width: 70px;
|
.left-part {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
.logo {
|
.circle {
|
||||||
width: $logo-width;
|
width: 25px;
|
||||||
height: $logo-width;
|
height: 25px;
|
||||||
|
border-radius: 50rem;
|
||||||
|
background-color: $maintenance;
|
||||||
|
|
||||||
// Better when the image is loading
|
}
|
||||||
min-height: 1px;
|
|
||||||
|
.info {
|
||||||
|
.title {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slug {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.info {
|
.buttons {
|
||||||
.title {
|
display: flex;
|
||||||
font-weight: bold;
|
gap: 8px;
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slug {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -159,10 +211,6 @@ export default {
|
|||||||
&:hover {
|
&:hover {
|
||||||
background-color: $dark-bg2;
|
background-color: $dark-bg2;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
|
||||||
background-color: $dark-bg2;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user