mirror of
https://github.com/louislam/uptime-kuma.git
synced 2025-03-04 08:25:57 +00:00
fixed lint format
This commit is contained in:
parent
78c2db2682
commit
49d9d194a7
1 changed files with 72 additions and 62 deletions
|
@ -1,82 +1,92 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<h1>Incident Reports</h1>
|
<h1>Incident Reports</h1>
|
||||||
<div v-if="isLoading">Loading...</div>
|
<div v-if="isLoading">Loading...</div>
|
||||||
<div v-else-if="filteredReports.length">
|
<div v-else-if="filteredReports.length">
|
||||||
<div v-for="report in filteredReports" :key="report._id" class="big-padding">
|
<div
|
||||||
|
v-for="report in filteredReports"
|
||||||
<h3>{{ formatDate(report._createdDate) }}</h3>
|
:key="report._id"
|
||||||
<hr>
|
class="big-padding"
|
||||||
<h4>{{ report._title }}</h4>
|
>
|
||||||
<p>{{ report._content }}</p>
|
<h3>{{ formatDate(report._createdDate) }}</h3>
|
||||||
<hr><br><br>
|
<hr />
|
||||||
|
<h4>{{ report._title }}</h4>
|
||||||
</div>
|
<p>{{ report._content }}</p>
|
||||||
|
<hr />
|
||||||
|
<br /><br />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p v-else>No incident reports found or an error occurred.</p>
|
||||||
</div>
|
</div>
|
||||||
<p v-else>No incident reports found or an error occurred.</p>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
incidentReports: [],
|
incidentReports: [],
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
error: null,
|
error: null,
|
||||||
};
|
};
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.fetchIncidentReports();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async fetchIncidentReports() {
|
|
||||||
this.isLoading = true;
|
|
||||||
try {
|
|
||||||
const response = await fetch("/api/incident-reports"); // Replace with your API endpoint
|
|
||||||
const data = await response.json();
|
|
||||||
this.incidentReports = data;
|
|
||||||
} catch (error) {
|
|
||||||
this.error = error;
|
|
||||||
console.error("Error fetching incident reports:", error);
|
|
||||||
} finally {
|
|
||||||
this.isLoading = false;
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
formatDate(dateString) {
|
mounted() {
|
||||||
const date = new Date(dateString);
|
this.fetchIncidentReports();
|
||||||
return date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
|
|
||||||
},
|
},
|
||||||
},
|
methods: {
|
||||||
computed: {
|
async fetchIncidentReports() {
|
||||||
filteredReports() {
|
this.isLoading = true;
|
||||||
return this.incidentReports
|
try {
|
||||||
.slice() // Create a copy to avoid mutating the original array
|
const response = await fetch("/api/incident-reports"); // Replace with your API endpoint
|
||||||
.sort((a, b) => new Date(b._createdDate) - new Date(a._createdDate))
|
const data = await response.json();
|
||||||
.slice(-25); // Get the last 25 sorted reports
|
this.incidentReports = data;
|
||||||
|
} catch (error) {
|
||||||
|
this.error = error;
|
||||||
|
console.error("Error fetching incident reports:", error);
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
formatDate(dateString) {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
return date.toLocaleDateString("en-US", {
|
||||||
|
year: "numeric",
|
||||||
|
month: "long",
|
||||||
|
day: "numeric",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
filteredReports() {
|
||||||
|
return this.incidentReports
|
||||||
|
.slice() // Create a copy to avoid mutating the original array
|
||||||
|
.sort(
|
||||||
|
(a, b) =>
|
||||||
|
new Date(b._createdDate) - new Date(a._createdDate),
|
||||||
|
)
|
||||||
|
.slice(-25); // Get the last 25 sorted reports
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
.incident-report-container {
|
.incident-report-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 10px; /* Adjust gap between boxes */
|
gap: 10px; /* Adjust gap between boxes */
|
||||||
}
|
}
|
||||||
|
|
||||||
.incident-report {
|
.incident-report {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
.jumbotron {
|
.jumbotron {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||||
margin-bottom: 20px; /* Add spacing between jumbotrons */
|
margin-bottom: 20px; /* Add spacing between jumbotrons */
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue