ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-03-04 08:25:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fixed lint format

Browse source
This commit is contained in:
Mason Coloretti 2024-07-14 18:45:56 -06:00
parent 78c2db2682
commit 49d9d194a7
1 changed files with 72 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

134
src/pages/ListIncidents.vue
View file

@ -1,82 +1,92 @@
<template>
<div>
<h1>Incident Reports</h1>
<div v-if="isLoading">Loading...</div>
<div v-else-if="filteredReports.length">
<div v-for="report in filteredReports" :key="report._id" class="big-padding">
<h3>{{ formatDate(report._createdDate) }}</h3>
<hr>
<h4>{{ report._title }}</h4>
<p>{{ report._content }}</p>
<hr><br><br>
</div>
<div>
<h1>Incident Reports</h1>
<div v-if="isLoading">Loading...</div>
<div v-else-if="filteredReports.length">
<div
v-for="report in filteredReports"
:key="report._id"
class="big-padding"
>
<h3>{{ formatDate(report._createdDate) }}</h3>
<hr />
<h4>{{ report._title }}</h4>
<p>{{ report._content }}</p>
<hr />
<br /><br />
</div>
</div>
<p v-else>No incident reports found or an error occurred.</p>
</div>
<p v-else>No incident reports found or an error occurred.</p>
</div>
</template>
<script>
export default {
data() {
return {
incidentReports: [],
isLoading: false,
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;
}
data() {
return {
incidentReports: [],
isLoading: false,
error: null,
};
},
formatDate(dateString) {
const date = new Date(dateString);
return date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
mounted() {
this.fetchIncidentReports();
},
},
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
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) {
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>
<style>
.incident-report-container {
display: flex;
flex-direction: column;
gap: 10px; /* Adjust gap between boxes */
display: flex;
flex-direction: column;
gap: 10px; /* Adjust gap between boxes */
}
.incident-report {
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.jumbotron {
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 20px; /* Add spacing between jumbotrons */
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 20px; /* Add spacing between jumbotrons */
}
</style>