You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
2.8 KiB
96 lines
2.8 KiB
<template>
|
|
<div class="container">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header">
|
|
<h4 class="mb-0">System meldinger</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul v-if="messages.length" class="list-group list-group-flush pad gap-3">
|
|
<li
|
|
v-for="msg in messages.slice(0, 5)"
|
|
:key="msg.id"
|
|
class="list-group-item d-flex flex-column border border-1 border-dark"
|
|
:class="typeClass(msg.type)">
|
|
<div class="d-flex justify-content-between align-items-center w-100">
|
|
<span class="text-dark fw-bold fs-6">{{ msg.title }}</span>
|
|
<small class="text-black fw-bold fs-6">{{ formatDate(msg.date) }}</small>
|
|
</div>
|
|
|
|
<p class="mb-0">{{ msg.message }}</p>
|
|
<div v-if="msg.url">
|
|
<a
|
|
:href="msg.url"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="link-primary small"
|
|
>
|
|
Les mer her
|
|
</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<p v-else class="text-muted">Loading messages...</p>
|
|
<!-- Indicator for more messages -->
|
|
<div v-if="messages.length > 5" class="text-center text-muted fst-italic small mt-2">
|
|
...
|
|
</div>
|
|
<div class="text-center pt-1">
|
|
<router-link to="/systemmessagelist" class="text-primary text-decoration-underline">
|
|
Flere meldinger
|
|
</router-link>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
import {ref, onMounted} from 'vue';
|
|
import {initializeApi} from '../utils/api.js';
|
|
|
|
const api = initializeApi(true);
|
|
const messages = ref([]);
|
|
|
|
const useMockedData = import.meta.env.VITE_USE_MOCK === "true";
|
|
|
|
if (useMockedData) {
|
|
import('bootstrap/dist/css/bootstrap.min.css')
|
|
.then(() => console.log('Bootstrap CSS loaded!'))
|
|
.catch(err => console.error('Error loading Bootstrap CSS:', err));
|
|
}
|
|
|
|
onMounted(async () => {
|
|
messages.value = await api.getAllMessages();
|
|
});
|
|
|
|
function formatDate(date) {
|
|
const d = new Date(date);
|
|
const day = String(d.getDate()).padStart(2, '0');
|
|
const month = String(d.getMonth() + 1).padStart(2, '0');
|
|
const year = String(d.getFullYear()).slice(2); // get last 2 digits
|
|
const hours = String(d.getHours()).padStart(2, '0');
|
|
const minutes = String(d.getMinutes()).padStart(2, '0');
|
|
return `${day}.${month}.${year} ${hours}:${minutes}`;
|
|
}
|
|
|
|
const typeClass = (type) => {
|
|
const typeMap = {
|
|
info: 'bg-success bg-opacity-50',
|
|
warning: 'bg-warning bg-opacity-75',
|
|
new: 'bg-primary bg-opacity-25',
|
|
};
|
|
return typeMap[type] || 'bg-secondary bg-opacity-50';
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
<style>
|
|
@media (min-width: 1400px) {
|
|
.container {
|
|
max-width: 600px;
|
|
}
|
|
}
|
|
</style>
|