60 lines
1.4 KiB
Vue
60 lines
1.4 KiB
Vue
<script lang="ts">
|
|
export default {
|
|
name: "WorksPage",
|
|
computed: {
|
|
tableTheme() {
|
|
return this.$themeLocale.worksTable ?? {};
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<script lang="ts" setup>
|
|
import { CHRONOLOGICAL_WORKS } from "../data.ts";
|
|
import { renderDate } from "../../../global.ts";
|
|
import { work as w } from "../domain";
|
|
</script>
|
|
|
|
<template>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>{{ tableTheme.name }}</th>
|
|
<th>{{ tableTheme.description }}</th>
|
|
<th>{{ tableTheme.role }}</th>
|
|
<th>{{ tableTheme.technologies }}</th>
|
|
<th>{{ tableTheme.status }}</th>
|
|
<th>{{ tableTheme.dates }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="work in CHRONOLOGICAL_WORKS">
|
|
<td>
|
|
<a rel="nofollow noopener" :href="w.getExternalLink(work)">{{
|
|
work.name
|
|
}}</a>
|
|
</td>
|
|
<td>{{ work.description }}</td>
|
|
<td v-html="work.roles.join(', ')"></td>
|
|
<td>{{ work.technologies.join(", ") }}</td>
|
|
<td>{{ work.status }}</td>
|
|
<td>
|
|
<div>
|
|
<small :class="{ grey: work.endDate }">{{ renderDate(work.startDate) }}</small>
|
|
</div>
|
|
<div v-if="work.endDate">
|
|
<small>{{ renderDate(work.endDate) }}</small>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
|
|
<style lang="css">
|
|
.grey {
|
|
color: rgba(0,0,0,0.4);
|
|
}
|
|
|
|
</style>
|