Skip to content
Snippets Groups Projects
Commit 8ce6a8b8 authored by Emmanuel Salomon's avatar Emmanuel Salomon :fist:
Browse files

Split events in two columns

parent d95f3fbb
No related branches found
No related tags found
No related merge requests found
<template>
<aside>
<h1 class="text-3xl uppercase text-gray-400 font-bold ml-2 mb-2 md:ml-1.5">
Événements à venir...
</h1>
<template v-if="!loading">
<aside v-if="!loading" class="lg:flex">
<div
v-for="(column, num) in columns"
:key="num"
class="flex-1"
:class="num === 1 && 'lg:ml-4'"
>
<a
v-for="(event, index) in events"
v-for="(event, index) in column"
:key="index"
:href="`https://forum.monnaie-libre.fr/t/${event.slug}/${event.id}`"
targe="_blank"
class="block dark-hover:bg-gray-700 hover:bg-gray-100 p-2 mt-1 rounded-lg transition-colors"
class="block hover:bg-hover-light dark-hover:text-gray-800 p-2 mt-1 rounded-lg transition-colors"
>
<div class="text-sm text-gray-500">
{{ $d(Date.parse(event.event.start), 'long') }}
<div class="event-date text-sm text-gray-500">
{{ prettyDate(event.event.start) }}
</div>
<div>{{ event.title }}</div>
</a>
</template>
<div v-else class="h-80 flex items-center">
<span class="loading-state h-12 w-12 scale-150 transform mx-auto" />
</div>
</aside>
<div v-else class="h-80 flex items-center">
<span class="loading-state h-12 w-12 scale-150 transform mx-auto" />
</div>
</template>
<script>
......@@ -34,12 +35,54 @@ export default {
return {
events: [],
loading: false,
cols: 2,
}
},
computed: {
columns() {
const columns = []
const mid = Math.ceil(this.events.length / this.cols)
for (let col = 0; col < this.cols; col++) {
columns.push(this.events.slice(col * mid, col * mid + mid))
}
return columns
},
},
async mounted() {
this.loading = true
this.events = await fetchNextEvents()
this.events = await fetchNextEvents(`?start=${this.formatDateForParams()}`)
this.loading = false
},
methods: {
formatDateForParams(date = new Date()) {
const offset = date.getTimezoneOffset()
date = new Date(date.getTime() - offset * 60 * 1000)
return date.toISOString().split('T')[0]
},
prettyDate(date) {
const formatter = new Intl.DateTimeFormat(
this.$i18n.locale,
this.$i18n.dateTimeFormats[this.$i18n.locale].full
)
return formatter
.formatToParts(Date.parse(date))
.map(({ type, value }) => {
switch (type) {
case 'literal':
return value === ', ' ? ' à ' : value === ':' ? 'h' : value
default:
return value
}
})
.reduce((string, part) => string + part)
},
},
}
</script>
<style lang="postcss" scoped>
.event-date:first-letter {
text-transform: uppercase;
}
</style>
......@@ -26,12 +26,12 @@ export async function fetchCategories() {
*
* @return {Array} An array of events
*/
export async function fetchNextEvents() {
export async function fetchNextEvents(params) {
// Caches to avoid fetching each time it's mounted
if (sessionStorage.getItem('events_forum')) {
return JSON.parse(sessionStorage.getItem('events_forum'))
} else {
const events = await fetch(`${forumUrl}/calendar.json`)
const events = await fetch(`${forumUrl}/calendar.json${params}`)
.then((response) => response.json())
.then((data) =>
data.topic_list.topics.filter(
......
......@@ -55,6 +55,15 @@ export default {
hour: 'numeric',
minute: 'numeric',
},
full: {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long',
hour: 'numeric',
literal: 'h',
minute: 'numeric',
},
},
},
},
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment