Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
export default class BaseElement extends HTMLElement {
constructor() {
super();
this.root = this.attachShadow({mode: 'open'});
}
getStyle() {
const relativePath = import.meta.url.substring(window.location.origin.length);
const end = relativePath.lastIndexOf('/');
const path = relativePath.substring(0, end);
return `./${path}/style.css`;
}
render() {
fetch(this.getStyle())
.then(css => {
render(html`
<style>
${css.text()}
</style>
${this.getTemplate()}
`, this.root);
})
}
}
export default class GiftTable extends BaseElement {
connectedCallback() {
this.recalculateSite();
}
// should be moved to BaseElement.js but import.meta returns the wrong value
getStyle() {
const relativePath = import.meta.url.substring(window.location.origin.length);
const end = relativePath.lastIndexOf('/');
const path = relativePath.substring(0, end);
return `./${path}/style.css`;
}
recalculateSite() {
new GiftClient().retriveGifts()
.then(gifts => {
this.gifts = gifts;
this.render();
})
}
getTemplate() {
return html`
<style>
</style>
<table>
<thead>
<tr>
<th>Name</th>
<th>URL</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
${this.gifts
.map(gift => this.toEntry(gift))
}
</tbody>
</table>
`;
}
deleteGift(id) {
new GiftClient().deleteGift(id)
.then(_ => this.recalculateSite());
}
toEntry(gift) {
return html`
<tr>
<td>${gift.name}</td>
<td>${gift.link}</td>
<td><button @click=${_ => this.deleteGift(gift.id)}>delete</button></td>
</tr>
`;
}
}
customElements.define('gift-table', GiftTable);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment