104 lines
3.2 KiB
Vue
104 lines
3.2 KiB
Vue
<template>
|
|
<div class="overflow-x-scroll text-gray-900 leading-snug">
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr class="border-b border-gray-400">
|
|
<th class="px-4 py-2 border border-gray-400">Date</th>
|
|
<th class="px-4 py-2 border border-gray-400">Talk</th>
|
|
<th class="px-4 py-2 border border-gray-400">Event</th>
|
|
<th class="px-4 py-2 border border-gray-400">Feedback</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="(event, i) in sortedEvents"
|
|
:key="i"
|
|
class="odd:bg-red-500"
|
|
:class="{ 'bg-gray-200': i % 2 === 0 }"
|
|
>
|
|
<td class="w-1/5 px-4 py-3 border border-gray-400">
|
|
<dl>
|
|
<span>
|
|
<dt class="sr-only">Date</dt>
|
|
<dd class="whitespace-no-wrap md:whitespace-normal">{{ event.date }}</dd>
|
|
</span>
|
|
|
|
<span v-if="event.time">
|
|
<dt class="sr-only">Time</dt>
|
|
<dd class="mt-px text-sm text-gray-700">{{ event.time }}</dd>
|
|
</span>
|
|
</dl>
|
|
</td>
|
|
<td class="w-1/3 px-4 py-3 border border-gray-400">
|
|
<dl>
|
|
<span>
|
|
<dt class="sr-only">Talk</dt>
|
|
<dd>
|
|
<a class="block whitespace-no-wrap md:whitespace-normal underline hover:no-underline" href="#0">{{ getTalk(event.talk).title }}</a>
|
|
</dd>
|
|
</span>
|
|
|
|
<span>
|
|
<dt class="sr-only">Talk type</dt>
|
|
<dd class="mt-px text-sm text-gray-600">{{ getTalk(event.talk).type }}</dd>
|
|
</span>
|
|
</dl>
|
|
</td>
|
|
<td class="w-1/3 px-4 py-3 border border-gray-400">
|
|
<dl>
|
|
<span>
|
|
<dt class="sr-only">Event name</dt>
|
|
<dd>
|
|
<a class="whitespace-no-wrap md:whitespace-normal underline hover:no-underline" href="#0">{{ event.title }}</a>
|
|
</dd>
|
|
</span>
|
|
|
|
<span class="block">
|
|
<dt class="sr-only">Location</dt>
|
|
<dd class="mt-px text-sm text-gray-600">{{ event.location }}</dd>
|
|
</span>
|
|
</dl>
|
|
</td>
|
|
<td class="w-1/2 px-4 py-3 border border-gray-400">
|
|
<div v-if="event.feedback">
|
|
<a
|
|
class="px-4 py-3 bg-blue-600 text-sm text-white rounded-lg hover:bg-blue-700"
|
|
href="#0"
|
|
>
|
|
<span class="sr-only">View feedback for {{ getTalk(event.talk).title }} at {{ event.title }}</span>
|
|
<span aria-hidden="true">Feedback</span>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import _ from 'lodash'
|
|
|
|
export default {
|
|
props: {
|
|
data: {
|
|
required: true,
|
|
type: Object
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
sortedEvents: function () {
|
|
return _(this.data.events)
|
|
.sortBy(e => `${e.date} ${e.time}`)
|
|
.reverse()
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
getTalk: function (talkId) {
|
|
return this.data.talks[talkId] || {}
|
|
}
|
|
}
|
|
}
|
|
</script>
|