61 lines
1.1 KiB
Vue
61 lines
1.1 KiB
Vue
<template>
|
|
<div class="text w-auto">
|
|
<table>
|
|
<thead>
|
|
<th>sats</th>
|
|
<th>created at</th>
|
|
<th class="hidden-sm">expires at</th>
|
|
<th>status</th>
|
|
<th>details</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="i in invoices " :key="i.id">
|
|
<td>{{ i.Msats / 1000 }}</td>
|
|
<td :title="i.CreatedAt">{{ ago(new Date(i.CreatedAt)) }}</td>
|
|
<td :title="i.ExpiresAt" class="hidden-sm">{{ ago(new Date(i.ExpiresAt)) }}</td>
|
|
<td class="font-mono">{{ i.Status }}</td>
|
|
<td>
|
|
<router-link :to="/invoice/ + i.Id">open</router-link>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import ago from 's-ago'
|
|
|
|
const invoices = ref(null)
|
|
|
|
const url = '/api/invoices'
|
|
await fetch(url)
|
|
.then(r => r.json())
|
|
.then(body => {
|
|
invoices.value = body
|
|
})
|
|
.catch(console.error)
|
|
</script>
|
|
|
|
<style scoped>
|
|
table {
|
|
width: fit-content;
|
|
align-items: center;
|
|
}
|
|
|
|
th {
|
|
padding: 0 2rem;
|
|
}
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
th {
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.hidden-sm {
|
|
display: none
|
|
}
|
|
}
|
|
</style>
|