From a1882b67c41fe9901a0cd8059b5cc78a5beadec0 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel@debian.org>
Date: Tue, 26 Nov 2024 09:28:28 +0100
Subject: Adding upstream version 2.0.0~beta.0+dfsg.

Signed-off-by: Daniel Baumann <daniel@debian.org>
---
 src/pages/MaintenanceDetails.vue | 169 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 169 insertions(+)
 create mode 100644 src/pages/MaintenanceDetails.vue

(limited to 'src/pages/MaintenanceDetails.vue')

diff --git a/src/pages/MaintenanceDetails.vue b/src/pages/MaintenanceDetails.vue
new file mode 100644
index 0000000..edcb3a0
--- /dev/null
+++ b/src/pages/MaintenanceDetails.vue
@@ -0,0 +1,169 @@
+<template>
+    <transition name="slide-fade" appear>
+        <div v-if="maintenance">
+            <h1>{{ maintenance.title }}</h1>
+            <p class="url">
+                <span>{{ $t("Start") }}: {{ $root.datetimeMaintenance(maintenance.start_date) }}</span>
+                <br>
+                <span>{{ $t("End") }}: {{ $root.datetimeMaintenance(maintenance.end_date) }}</span>
+            </p>
+
+            <div class="functions" style="margin-top: 10px;">
+                <router-link :to=" '/maintenance/edit/' + maintenance.id " class="btn btn-secondary">
+                    <font-awesome-icon icon="edit" /> {{ $t("Edit") }}
+                </router-link>
+                <button class="btn btn-danger" @click="deleteDialog">
+                    <font-awesome-icon icon="trash" /> {{ $t("Delete") }}
+                </button>
+            </div>
+
+            <label for="description" class="form-label" style="margin-top: 20px;">{{ $t("Description") }}</label>
+            <textarea id="description" v-model="maintenance.description" class="form-control" disabled></textarea>
+
+            <label for="affected_monitors" class="form-label" style="margin-top: 20px;">{{ $t("Affected Monitors") }}</label>
+            <br>
+            <button v-for="monitor in affectedMonitors" :key="monitor.id" class="btn btn-monitor" style="margin: 5px; cursor: auto; color: white; font-weight: 500;">
+                {{ monitor }}
+            </button>
+            <br />
+
+            <label for="selected_status_pages" class="form-label" style="margin-top: 20px;">{{ $t("Show this Maintenance Message on which Status Pages") }}</label>
+            <br>
+            <button v-for="statusPage in selectedStatusPages" :key="statusPage.id" class="btn btn-monitor" style="margin: 5px; cursor: auto; color: white; font-weight: 500;">
+                {{ statusPage }}
+            </button>
+
+            <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteMaintenance">
+                {{ $t("deleteMaintenanceMsg") }}
+            </Confirm>
+        </div>
+    </transition>
+</template>
+
+<script>
+import { useToast } from "vue-toastification";
+const toast = useToast();
+import Confirm from "../components/Confirm.vue";
+
+export default {
+    components: {
+        Confirm,
+    },
+    data() {
+        return {
+            affectedMonitors: [],
+            selectedStatusPages: [],
+        };
+    },
+    computed: {
+        maintenance() {
+            let id = this.$route.params.id;
+            return this.$root.maintenanceList[id];
+        },
+    },
+    mounted() {
+        this.init();
+    },
+    methods: {
+        /**
+         * Initialise page
+         * @returns {void}
+         */
+        init() {
+            this.$root.getSocket().emit("getMonitorMaintenance", this.$route.params.id, (res) => {
+                if (res.ok) {
+                    this.affectedMonitors = Object.values(res.monitors).map(monitor => monitor.name);
+                } else {
+                    toast.error(res.msg);
+                }
+            });
+
+            this.$root.getSocket().emit("getMaintenanceStatusPage", this.$route.params.id, (res) => {
+                if (res.ok) {
+                    this.selectedStatusPages = Object.values(res.statusPages).map(statusPage => statusPage.title);
+                } else {
+                    toast.error(res.msg);
+                }
+            });
+        },
+
+        /**
+         * Confirm deletion
+         * @returns {void}
+         */
+        deleteDialog() {
+            this.$refs.confirmDelete.show();
+        },
+
+        /**
+         * Delete maintenance after showing confirmation
+         * @returns {void}
+         */
+        deleteMaintenance() {
+            this.$root.deleteMaintenance(this.maintenance.id, (res) => {
+                this.$root.toastRes(res);
+                this.$router.push("/maintenance");
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+@media (max-width: 550px) {
+    .functions {
+        text-align: center;
+
+        button, a {
+            margin-left: 10px !important;
+            margin-right: 10px !important;
+        }
+    }
+}
+
+@media (max-width: 400px) {
+    .btn {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+        padding-top: 10px;
+    }
+
+    a.btn {
+        padding-left: 25px;
+        padding-right: 25px;
+    }
+}
+
+.url {
+    color: $primary;
+    margin-bottom: 20px;
+    font-weight: bold;
+
+    a {
+        color: $primary;
+    }
+}
+
+.functions {
+    button, a {
+        margin-right: 20px;
+    }
+}
+
+textarea {
+    min-height: 100px;
+    resize: none;
+}
+
+.btn-monitor {
+    background-color: #5cdd8b;
+}
+
+.dark .btn-monitor {
+    color: #020b05 !important;
+}
+
+</style>
-- 
cgit v1.2.3