Hello, I come once again to ask for help to the seniors, this time a big help.
I have no experience in the stack they use to create their components and style them. I want to build a dashboard that will show various states of a custom asset I created.
I’ve already found your custom components and they work for me, but I’m having trouble updating variables and objects that are arranged in the HTML created by the render() function.
go to the code:
This is my customElement basic implementation
@customElement("page-custom-dashboard")
export class pageCustomDashboard extends Page<AppStateKeyed> {
static get styles() {
// language=CSS
return css`
:host {
display: flex;
align-items: start;
flex-direction: column;
width: 100%;
--or-icon-fill: var(--or-app-color4);
}
`;
}
get name(): string {
return "custom-dashboard";
}
constructor(store: EnhancedStore<AppStateKeyed>) {
super(store);
}
protected render(): TemplateResult | void {
const addAsset = html`
<h1>Test: <b>Dashboard</b></h1>
<div>
<or-mwc-input id="assetid-input" .type="${InputType.TEXT}" .value="${(this.idAsset && this.idAsset) ? this.idAsset : undefined}" .label="Asset ID" pattern="\\w+" required @keyup="${(ev: KeyboardEvent) => this.WriteAssetId((ev.target as OrMwcInput).currentValue)}" @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.WriteAssetId(ev.detail.value)}"></or-mwc-input>
<or-mwc-input id ="assetid-button" class="button" .type="${InputType.BUTTON}" label="Kiosk by ID" @click="${() => this.callAction('GAI')}"></or-mwc-input>
</div>
${
this.assetArray.map((asset: Asset)=> html `
<div>
<p>${asset.id}</p>
<p>${asset.name}</p>
<p>${asset.realm}</p>
</div>
`
)}
`
return html `${addAsset}`
}
@property()
protected idAsset: string;
@property()
protected assetArray: Array<Asset> ;
And here is the basic function that makes the API request and minimally handles the data.
protected WriteAssetId(assetId: string) {
this.idAsset = assetId;
};
callAction(button:string): void {
switch (button) {
case "GAQ":
// this.byAssetQuery();
break;
case "GAI":
this.GetbyAssetId();
break;
case "DAI":
this.RemoveAsset();
break;
default:
break;
}
}
async GetbyAssetId() {
const response = await manager.rest.api.AssetResource.get(this.idAsset);
let success = response.status === 204 || response.status === 200;
if (success) {
this.assetArray.push(response.data);
}
}
If there is already data in:
@property()
protected assetArray: Array<Asset> = [];
everything works fine, but if I put some of aditional data in assetArray variable the map doesn’t render it.
I know this is probably the basics of the paradigm in which the platform was developed, but I would like your help to see where I am going wrong and in what direction I should go to become more proficient in this reactive paradigm.
Finally, what my dashboard will do is show different icons according to the state of some attributes. For example: one closed barrier (false) will show its closed icon, when opened it will show the respective icon. This multiplied by an undetermined number of kiosks (that’s why I need the map to create those structures according to the number of inputs)
Any help is welcome 
, I’m not able to get all the assets by their type using AssetQuery.