84 lines
2.3 KiB
JavaScript
84 lines
2.3 KiB
JavaScript
function renderAliases(data) {
|
|
const dataContainer = document.getElementById('container');
|
|
const template = Handlebars.compile(okHandlebarsTemplate);
|
|
const html = template({
|
|
data: data.sort((a, b) => new Date(a.created) - new Date(b.created))
|
|
});
|
|
|
|
dataContainer.innerHTML = html;
|
|
}
|
|
|
|
function createAlias() {
|
|
const tags = document.getElementById('tags').value?.split(',') || [];
|
|
|
|
fetch('/aliases', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ tags }),
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
renderAliases(data)
|
|
})
|
|
}
|
|
|
|
function deleteAlias(id) {
|
|
fetch(`/aliases/${id}`, {
|
|
method: 'DELETE'
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
renderAliases(data)
|
|
})
|
|
}
|
|
|
|
function copyToClipboard(text) {
|
|
navigator.clipboard.writeText(text)
|
|
}
|
|
|
|
const okHandlebarsTemplate = `
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Address</th>
|
|
<th scope="col">Tags</th>
|
|
<th scope="col">Created</th>
|
|
<th scope="col">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{#each data}}
|
|
<tr>
|
|
<td onclick="copyToClipboard('{{address}}')" style="cursor: pointer;">{{address}}</td>
|
|
<td> {{#each tags}}{{this}} {{/each}}</td>
|
|
<td>{{created}}</td>
|
|
<td>
|
|
<div onclick="deleteAlias('{{id}}')" class="btn btn-danger {{#unless id}}disabled{{/unless}}">Delete</div>
|
|
</td>
|
|
</tr>
|
|
{{/each}}
|
|
</tbody>
|
|
</table>
|
|
<input type="text" id="tags" placeholder="Add tags (optional)">
|
|
<div class="btn btn-primary" onclick="createAlias()">Create alias</div class="btn btn-primary">
|
|
`
|
|
|
|
fetch('/aliases').then(async res => {
|
|
const dataContainer = document.getElementById('container');
|
|
const data = await res.json();
|
|
|
|
if (!res.ok) {
|
|
dataContainer.innerHTML = `
|
|
<div class="alert alert-warning" role="alert">
|
|
Login to see your aliases
|
|
</div>
|
|
<a href="/auth-oidc" class="btn btn-primary">Login</a>
|
|
`
|
|
|
|
return
|
|
}
|
|
|
|
renderAliases(data);
|
|
}) |