ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-12 23:35:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

[webapp] added event info to post page

Browse Source
This commit is contained in:
Markus 2023-05-10 15:20:01 +02:00
parent 2426f5db88
commit 092feb5ee7
1 changed files with 48 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
webapp/pages/post/_id/_slug/index.vue
View File

@ -54,41 +54,35 @@
</section>
<ds-space margin-bottom="small" />
<h2 class="title hyphenate-text">{{ post.title }}</h2>
<ds-space margin-bottom="small" />
<content-viewer class="content hyphenate-text" :content="post.content" />
<!-- Eventdata -->
<ds-space
v-if="post && post.postType[0] === 'Event'"
margin-bottom="small"
style="padding: 10px; border-top: solid #f5f4f6 3px"
style="padding: 10px"
>
<ds-flex>
<ds-flex-item width="200px">{{ $t('post.viewEvent.eventStart') }}:</ds-flex-item>
<ds-flex-item>{{ post.eventStart }}</ds-flex-item>
</ds-flex>
<ds-space margin-bottom="x-small" />
<ds-flex>
<ds-flex-item width="200px">{{ $t('post.viewEvent.eventEnd') }}:</ds-flex-item>
<ds-flex-item>{{ post.eventEnd }}</ds-flex-item>
</ds-flex>
<ds-space margin-bottom="x-small" />
<ds-flex>
<ds-flex-item width="200px">{{ $t('post.viewEvent.eventVenue') }}:</ds-flex-item>
<ds-flex-item class="text-bold">{{ post.eventVenue }}</ds-flex-item>
</ds-flex>
<ds-space margin-bottom="x-small" />
<ds-flex>
<ds-flex-item width="200px">
{{ $t('post.viewEvent.eventLocationName') }}:
</ds-flex-item>
<ds-flex-item>{{ post.eventLocationName }}</ds-flex-item>
</ds-flex>
<ds-space margin-bottom="x-small" />
<ds-flex>
<ds-flex-item width="200px">{{ $t('post.viewEvent.eventIsOnline') }}:</ds-flex-item>
<ds-flex-item>{{ post.eventIsOnline }}</ds-flex-item>
</ds-flex>
<ds-text align="left" color="soft">
<base-icon name="map-marker" data-test="map-marker" />
<span v-if="post.eventVenue">{{ post.eventVenue }}</span>
<span v-if="!post.eventIsOnline">
<span v-if="post.eventVenue">-</span>
{{ post.eventLocationName }}
</span>
<span v-else>
<span v-if="post.eventVenue">-</span>
{{ $t('post.viewEvent.eventIsOnline') }}
</span>
</ds-text>
<ds-text align="left" color="soft" class="event-info">
<base-icon name="calendar" data-test="calendar" />
<span>{{getEventDateString}}</span>
</ds-text>
<ds-text align="left" color="soft" class="event-info">
<base-icon name="clock" data-test="calendar" />
<span>{{getEventTimeString}}</span>
</ds-text>
</ds-space>
<ds-space margin-bottom="small" />
<content-viewer class="content hyphenate-text" :content="post.content" />
<!-- Categories -->
<div v-if="categoriesActive" class="categories">
<ds-space margin="xx-large" />
@ -180,6 +174,7 @@ import { groupQuery } from '~/graphql/groups'
import PostMutations from '~/graphql/PostMutations'
import links from '~/constants/links.js'
import SortCategories from '~/mixins/sortCategoriesMixin.js'
import { format } from 'date-fns'
export default {
name: 'PostSlug',
@ -293,6 +288,24 @@ export default {
!this.post.group || (this.group && ['usual', 'admin', 'owner'].includes(this.group.myRole))
)
},
getEventDateString() {
if (this.post.eventEnd) {
const eventStart = format(new Date(this.post.eventStart), 'dd.MM.')
const eventEnd = format(new Date(this.post.eventEnd), 'dd.MM.yyyy')
return eventStart + ' - ' + eventEnd
} else {
return format(new Date(this.post.eventStart), 'dd.MM.yyyy')
}
},
getEventTimeString() {
if (this.post.eventEnd) {
const eventStart = format(new Date(this.post.eventStart), 'HH:mm')
const eventEnd = format(new Date(this.post.eventEnd), 'HH:mm')
return eventStart + ' - ' + eventEnd
} else {
return format(new Date(this.post.eventStart), 'HH:mm')
}
},
},
methods: {
reply(message) {
@ -411,6 +424,12 @@ export default {
filter: blur($blur-radius);
}
& .event-info {
display: flex;
align-items: center;
gap: 2px;
}
.blur-toggle {
position: absolute;
bottom: 0;