@planbgmbh/flinkey-web-components
Version:
This project provides some Web Components built for usage in combination with the flinkey API.
54 lines (53 loc) • 2.2 kB
JavaScript
import { Component, Host, h, State } from '@stencil/core';
import { httpGet } from '../../utils/utils';
export class FlinkeyKeyfobCatalog {
componentWillLoad() {
return httpGet('brands')
.then((httpResponse) => {
this.brands = httpResponse.parsedBody;
})
.catch(() => {
// TODO
});
}
onBrandChanged(event) {
const brand = event.target.value;
const path = `brands/${brand}/keys`;
const searchParams = new URLSearchParams([
['$select', 'boxName'],
['$expand', 'keyForm($select=imageUrl)'],
]);
return httpGet(path, searchParams)
.then((httpResponse) => {
this.keys = httpResponse.parsedBody;
})
.catch(() => {
// TODO
});
}
render() {
var _a, _b;
return (h(Host, null,
h("div", { class: "mb-4" },
h("select", { onChange: e => this.onBrandChanged(e), class: "font-sans mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" },
h("option", { selected: true, disabled: true, hidden: true }, "Choose brand"), (_a = this.brands) === null || _a === void 0 ? void 0 :
_a.map(brand => (h("option", { value: brand }, brand))))),
h("div", { class: "grid 2xl:grid-cols-6 xl:grid-cols-5 lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 gap-4" }, (_b = this.keys) === null || _b === void 0 ? void 0 : _b.map(key => (h("div", { class: "col-span-1 flex flex-col text-center bg-white rounded-lg shadow divide-y divide-gray-200" },
h("div", { class: "flex-1 flex flex-col p-8" },
h("img", { class: "w-44 h-auto flex-shrink-0 mx-auto", src: key.keyForm.imageUrl, alt: "" }),
h("h3", { class: "mt-6 text-gray-900 text-sm font-medium font-sans" }, key.boxName))))))));
}
static get is() { return "flinkey-keyfob-catalog"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["../../utils/common.css"]
}; }
static get styleUrls() { return {
"$": ["../../utils/common.css"]
}; }
static get states() { return {
"brands": {},
"keys": {},
"dropdownOpen": {}
}; }
}