https://drivetimedevotions.com/scripts/ServingOppDetails/ServingOp…?v=067bac55dc3729ccedc88375e13966800226cff8

1import formatDateMixin from '/scripts/FormatDateMixin.js';
2
3export default {
4    mixins: [formatDateMixin],
5
6    props: ['servingOpp'],
7
8    template: `
9        <div class="serving-opp-list-item">
10            <div class="details">
11                <p class="event-title">{{servingOpp.name}}</p>
12
13                <div class="ministry-name-container">
14                    <a class="ministry-name" :href="'/ministry/' + servingOpp.ministry.id">
15                        {{servingOpp.ministry.name}}
16                    </a>
17                </div>
18
19                <div class="ministry-row-container">
20                    <div class="event-date-container">
21                        <img src="/icons/location_marker_black_50.svg" />
22                        <p class="event-info bold">{{eventLocation}}</p>
23                    </div>
24
25                    <div class="event-date-container">
26                        <img src="/icons/church_outline_black_50.svg" />
27                        <p class="event-info bold">{{eventLocationName}}</p>
28                    </div>
29                </div>
30
31                <div class="event-date-container">
32                    <img src="/icons/repeating_icon_black_50.svg" />
33                    <p class="event-info bold" v-if="servingOpp.schedule.sequences[0].isRecurring">{{servingOpp.schedule.sequences[0].recurrenceFrequency}}</p>
34                </div>
35
36                <div class="event-date-container">
37                    <img src="/icons/calendar_icon_black_50.svg" />
38                    <p class="event-date bold">{{servingOpp.schedule.sequences[0].dayOfWeek}}</p>
39                </div>
40                
41                <div class="event-date-container">
42                    <img src="/icons/clock.svg" />
43                    <p class="event-info bold">{{formatDate(servingOpp.occurrence.localStartDateTime, 'hh:mm A')}}</p>
44                </div>
45            </div>
46
47            <div class="details-button">
48                <a :href="eventUrl" class="btn">
49                    View Details
50                </a>
51            </div>
52        </div>
53    `,
54
55    computed: {
56        eventLocation() {
57            return this.servingOpp.venues && this.servingOpp.venues.length ? `${this.servingOpp.venues[0].venueAddress.city}, ${this.servingOpp.venues[0].venueAddress.region} ` : this.servingOpp.churchEntityName;
58        },
59
60        eventLocationName() {
61            return this.servingOpp.venues && this.servingOpp.venues.length ? this.servingOpp.venues[0].name : this.servingOpp.churchEntityName;
62        },
63
64        eventUrl() {
65            return '/event/' + this.servingOpp.id + '/' + this.servingOpp.slug + '?' + (this.servingOpp.occurrence.id != null ? 'occurrenceId=' + this.servingOpp.occurrence.id + '&' : '') + 'startDateTime=' + encodeURIComponent(this.servingOpp.occurrence.localStartDateTime) + '&endDateTime=' + encodeURIComponent(this.servingOpp.occurrence.timeZone);
66        }
67    },
68
69    methods: {
70        getShortenedTimeZone(tz) {
71            const locale = 'en-US';
72            const timezone = tz;
73            const shortTimezone = new Intl.DateTimeFormat(locale, {
74                timeZone: timezone,
75                timeZoneName: 'short',
76            })
77                .format(Date.now())
78                .split(' ')[1];
79
80            return shortTimezone;
81        },
82    },
83};