public
src
assets
components
ApacheRestartMonitor.vue
InfobaseList.vue
InfobaseListItem.vue
InfobaseURLEditor.vue
ItemLoading.vue
router
store
views
App.vue
config.js
config.json
main.js
test
.browserslistrc
.eslintrc.js
.gitignore
README.md
babel.config.js
jsconfig.json
package.json
vetur.config.js
yarn.lock
95 lines
2.1 KiB
Vue
95 lines
2.1 KiB
Vue
<template>
|
|
<transition name="bounce">
|
|
<div
|
|
v-if="isApacheNeedRestart || isApacheRestartPending"
|
|
class="
|
|
container
|
|
d-flex
|
|
flex-row flex-wrap
|
|
rounded
|
|
bg-warning bg-gradient
|
|
shadow
|
|
p-3
|
|
mt-lg-5
|
|
"
|
|
id="apache-monitor"
|
|
>
|
|
<span class="fw-bold m-auto me-2 ms-1">Apache: </span>
|
|
<span
|
|
v-if="isApacheNeedRestart && !isApacheRestartPending"
|
|
class="badge rounded-pill bg-danger m-auto"
|
|
>Нужен перезапуск</span
|
|
>
|
|
<span
|
|
v-if="isApacheRestartPending"
|
|
class="badge rounded-pill bg-success m-auto"
|
|
>Перезапуск</span
|
|
>
|
|
<span class="flex-fill"></span>
|
|
<button
|
|
v-if="isApacheRestartPending"
|
|
type="button"
|
|
class="btn btn-success btn-sm align-self-end shadow"
|
|
@click.prevent="fetchApacheRestartFlag"
|
|
title="Обновить статус"
|
|
v-tooltip:top
|
|
>
|
|
Обновить
|
|
</button>
|
|
<button
|
|
v-if="isApacheNeedRestart && !isApacheRestartPending"
|
|
type="button"
|
|
class="btn btn-danger btn-sm align-self-end shadow mt-1 mb-1"
|
|
@click.prevent="updateApacheRestartFlag"
|
|
title="Перезапустить Apache"
|
|
v-tooltip:top
|
|
>
|
|
Перезапустить
|
|
</button>
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters, mapActions } from "vuex";
|
|
|
|
export default {
|
|
computed: mapGetters([
|
|
"isApacheNeedRestart",
|
|
"isApacheRestartPending",
|
|
"isApacheRestartFlagSent",
|
|
]),
|
|
methods: mapActions(["updateApacheRestartFlag", "fetchApacheRestartFlag"]),
|
|
async updated() {
|
|
this.fetchApacheRestartFlag();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
#apache-monitor {
|
|
min-width: 30%;
|
|
max-width: 40%;
|
|
}
|
|
|
|
.bounce-enter-active {
|
|
animation: bounce-in 0.7s ease-out both;
|
|
}
|
|
|
|
.bounce-leave-active {
|
|
animation: bounce-in 0.7s reverse ease-in both;
|
|
}
|
|
|
|
@keyframes bounce-in {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
50% {
|
|
transform: scale(1.25);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
</style>
|