94 lines
2.9 KiB
Vue
94 lines
2.9 KiB
Vue
<template>
|
|
<div>
|
|
<table v-if="worships.length" class="worships">
|
|
<tr v-for="worship in worships" :key="worship.id" :style="worship.eventPlace && worship.eventPlace.backgroundColor ? `background-color:${worship.eventPlace.backgroundColor}` : ''">
|
|
<td>
|
|
<div>{{ formatDate(worship.date) }}</div>
|
|
<div>{{ worship.dayName }}</div>
|
|
</td>
|
|
<td>
|
|
<div v-if="worship.neighborInvitation" class="neighborhood-invitation">Einladung zum Gottesdienst im Nachbarschaftsraum:</div>
|
|
<h3>
|
|
<span :class="worship.highlightTime ? 'highlight-time' : ''">{{ formatTime(worship.time) }}</span> -
|
|
{{ !worship.neighborInvitation ? worship.title : `Gottesdienst in ${worship.eventPlace.name}` }}
|
|
</h3>
|
|
<div v-if="worship.organizer">Gestaltung: {{ worship.organizer }}</div>
|
|
<div v-if="worship.collection">Kollekte: {{ worship.collection }}</div>
|
|
<div v-if="worship.eventPlace.id && worship.eventPlace.id">
|
|
Adresse: {{ worship.eventPlace.name }}, {{ worship.eventPlace.street }}, {{ worship.eventPlace.city }}
|
|
</div>
|
|
<div v-if="worship.selfInformation" class="selfinformation">Bitte informieren Sie sich auch auf den Internetseiten dieser Gemeinde!</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<p v-else>Keine Gottesdienste verfügbar.</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from '@/axios';
|
|
import { formatTime, formatDate } from '@/utils/strings';
|
|
|
|
export default {
|
|
name: 'WorshipRender',
|
|
props: {
|
|
location: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
orderBy: {
|
|
type: String,
|
|
default: 'date ASC'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
worships: []
|
|
};
|
|
},
|
|
async created() {
|
|
await this.fetchWorships();
|
|
},
|
|
methods: {
|
|
formatTime,
|
|
formatDate,
|
|
async fetchWorships() {
|
|
try {
|
|
const response = await axios.get('/worships/filtered', {
|
|
params: {
|
|
location: this.location,
|
|
orderBy: this.orderBy
|
|
}
|
|
});
|
|
this.worships = response.data;
|
|
} catch (error) {
|
|
console.error('Fehler beim Abrufen der Gottesdienste:', error);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
table.worships {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
}
|
|
table.worships td {
|
|
border: 1px solid #000;
|
|
text-align: center;
|
|
}
|
|
h3 {
|
|
margin: 0;
|
|
}
|
|
table.worships td div{
|
|
margin: 5px;
|
|
}
|
|
.highlight-time {
|
|
text-decoration: underline;
|
|
}
|
|
.neighborhood-invitation {
|
|
font-weight: bold;
|
|
color: #0020e0;
|
|
}
|
|
</style> |