opdavies/lab
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
Oliver Davies 2019-11-22 07:18:47 +00:00
parent d1ee7f64c7
commit 1668c195ea
8 changed files with 323 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

104
src/components/TalksTable.vue Normal file
View file

@ -0,0 +1,104 @@
<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>