104 lines
3.5 KiB
Vue
104 lines
3.5 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.title ? worship.title : `Gottesdienst in ${worship.eventPlace.name}` }}
|
|
</h3>
|
|
<div v-if="worship.organizer">Gestaltung: {{ worship.organizer }}</div>
|
|
<div v-if="worship.sacristanService" class="internal-information">Küsterdienst: {{ worship.sacristanService }}</div>
|
|
<div v-if="worship.collection">Kollekte: {{ worship.collection }}</div>
|
|
<div v-if="worship.organPlaying" class="internal-information">Orgelspiel: {{ worship.organPlaying }}</div>
|
|
<div v-if="worship.address">{{ worship.address }}</div>
|
|
<div v-if="!worship.address && 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
|
|
<a v-if="worship.eventPlace.website" :href="worship.eventPlace.website" target="_blank">Internetseiten dieser Gemeinde!</a><span
|
|
v-else>Internetseiten dieser Gemeinde!</span>
|
|
</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: {
|
|
config: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
worships: []
|
|
};
|
|
},
|
|
async created() {
|
|
await this.fetchWorships();
|
|
},
|
|
methods: {
|
|
formatTime,
|
|
formatDate,
|
|
async fetchWorships() {
|
|
try {
|
|
const response = await axios.get('/worships/filtered', {
|
|
params: this.config
|
|
});
|
|
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;
|
|
}
|
|
a {
|
|
color: #0020e0;
|
|
}
|
|
.internal-information {
|
|
color: #e45;
|
|
font-style: italic;
|
|
}
|
|
</style> |