Skip to content
Permalink
Browse files

Applied TSLint to or-rules-editor and updated extension mechanism

  • Loading branch information...
richturner committed Apr 8, 2019
1 parent 9486aa8 commit cbd52064e41155842698584189eecde0d42c7a88
@@ -1,26 +1,26 @@
import {customElement, html, LitElement, property, TemplateResult} from 'lit-element';
import {customElement, html, LitElement, property, TemplateResult} from "lit-element";

import '@openremote/or-select';
import '@openremote/or-icon';
import {Rule, RuleActionWriteAttribute, RulesetLang, TenantRuleset} from '@openremote/model';
import "@openremote/or-select";
import "@openremote/or-icon";
import {Rule, RuleActionWriteAttribute, RulesetLang, TenantRuleset} from "@openremote/model";
import openremote from "@openremote/core";
import rest from "@openremote/rest";

import './or-rule-list';
import './or-rule-when';
import './or-rule-then';
import './or-rule-header';
import "./or-rule-list";
import "./or-rule-when";
import "./or-rule-then";
import "./or-rule-header";

import {style} from "./style";
import findIndex from 'lodash-es/findIndex';
import findIndex from "lodash-es/findIndex";

const ruleModel:Rule = {
const ruleModel: Rule = {
name: "",
when: undefined,
then: undefined
};

const rulesetModel:TenantRuleset = {
const rulesetModel: TenantRuleset = {
name: "New Rule",
type: "tenant",
lang: RulesetLang.JSON,
@@ -29,57 +29,30 @@ const rulesetModel:TenantRuleset = {
rules: JSON.stringify({rules: [ruleModel]})
};


class InputHandlers {
handlers: ((condition:RuleActionWriteAttribute) => TemplateResult)[] = [];
public handlers: Array<(condition: RuleActionWriteAttribute) => TemplateResult | undefined> = [];

public addInputHandler(callback:(condition:RuleActionWriteAttribute) => TemplateResult) {
public addInputHandler(callback: (condition: RuleActionWriteAttribute) => TemplateResult | undefined) {
this.handlers.push(callback);
}

public removeInputHandler() {

public removeInputHandler(callback: (condition: RuleActionWriteAttribute) => TemplateResult | undefined) {
const i = this.handlers.indexOf(callback);
if (i <= 0) {
this.handlers.splice(i, 1);
}
}
}

export default new InputHandlers();


@customElement('or-rules-editor')
@customElement("or-rules-editor")
class OrRulesEditor extends LitElement {

static get styles() {
return [
style
]
}

protected render() {

return html`
<div class="rule-editor-container">
<side-menu class="bg-white shadow">
<or-rule-list .rulesets="${this.rulesets}" .ruleset="${this.ruleset}"></or-rule-list>
<div class="bottom-toolbar">
<icon class="small-icon" @click="${this.deleteRule}"><or-icon icon="delete"></or-icon></icon>
<icon class="small-icon" @click="${this.createRule}"><or-icon icon="plus"></or-icon></icon>
</div>
</side-menu>
${this.ruleset ? html`
<or-body>
<or-rule-header class="bg-white shadow" .ruleset="${this.ruleset}"></or-rule-header>
${this.rule ? html`
<div class="content">
<or-rule-when .rule="${this.rule}"></or-rule-when>
<or-rule-then .rule="${this.rule}"></or-rule-then>
</div>
` : ``}
</or-body>
` : html``}
</div>
`;
];
}

@property({type: Number})
@@ -97,30 +70,28 @@ class OrRulesEditor extends LitElement {
@property({type: Object})
private rule?: Rule;


constructor() {
super();
this.readRules();
this.addEventListener('rules:set-active-rule', this.setActiveRule);
this.addEventListener('rules:create-rule', this.createRule);
this.addEventListener('rules:update-rule', this.updateRule);
this.addEventListener('rules:delete-rule', this.deleteRule);
this.addEventListener("rules:set-active-rule", this.setActiveRule);
this.addEventListener("rules:create-rule", this.createRule);
this.addEventListener("rules:update-rule", this.updateRule);
this.addEventListener("rules:delete-rule", this.deleteRule);
}


readRules() {
public readRules() {
rest.api.RulesResource.getTenantRulesets(openremote.config.realm, { language: RulesetLang.JSON, fullyPopulate: true }).then((response: any) => {
if (response && response.data) {
this.rulesets = response.data;
if(this.ruleset && this.rulesets) {
const index = findIndex(this.rulesets, ['id', this.ruleset.id]);
if (this.ruleset && this.rulesets) {
const index = findIndex(this.rulesets, ["id", this.ruleset.id]);
let updatedRuleset;

// ID is not found when a new ruleset is added
if(index > 0) {
if (index > 0) {
updatedRuleset = this.rulesets[index];
} else {
updatedRuleset = this.rulesets[this.rulesets.length-1];
updatedRuleset = this.rulesets[this.rulesets.length - 1];
}

this.ruleset = updatedRuleset;
@@ -133,46 +104,46 @@ class OrRulesEditor extends LitElement {
});
}

createRule() {
if(this.rulesets) {
public createRule() {
if (this.rulesets) {

const newRule = rulesetModel;
this.rulesets = [...this.rulesets, rulesetModel];
this.ruleset = newRule;
this.computeRuleset();

rest.api.RulesResource.createTenantRuleset(newRule).then((response:any)=> {
rest.api.RulesResource.createTenantRuleset(newRule).then((response: any) => {
this.readRules();
});
}
}

updateRule(e:any) {
public updateRule(e: any) {
this.ruleset = e.detail.ruleset;
if(this.ruleset && this.ruleset.id && this.rule){
if (this.ruleset && this.ruleset.id && this.rule) {
delete this.ruleset.lastModified;
delete this.ruleset.createdOn;
delete this.ruleset.status;
delete this.ruleset.error;

// Parse rule to string of array of rules
this.rule.name = this.ruleset.name;
this.ruleset.rules = JSON.stringify({"rules": [this.rule] });
this.ruleset.rules = JSON.stringify({rules: [this.rule] });

//this.ruleset.rules = JSON.stringify(this.rules);
rest.api.RulesResource.updateTenantRuleset(this.ruleset.id, this.ruleset).then((response:any)=> {
// this.ruleset.rules = JSON.stringify(this.rules);
rest.api.RulesResource.updateTenantRuleset(this.ruleset.id, this.ruleset).then((response: any) => {
this.readRules();
});
}

}

deleteRule() {
if(this.ruleset && this.ruleset.id) {
public deleteRule() {
if (this.ruleset && this.ruleset.id) {
rest.api.RulesResource.deleteTenantRuleset(this.ruleset.id).then((response: any) => {

if(this.rulesets && this.ruleset) {
const index = findIndex(this.rulesets, ['id', this.ruleset.id]);
if (this.rulesets && this.ruleset) {
const index = findIndex(this.rulesets, ["id", this.ruleset.id]);
this.rulesets.splice(index, 1);
this.rulesets = [...this.rulesets];
this.ruleset = undefined;
@@ -184,22 +155,49 @@ class OrRulesEditor extends LitElement {
}
}

computeRuleset () {
if(this.ruleset && this.ruleset.rules){
public computeRuleset() {
if (this.ruleset && this.ruleset.rules) {
this.rule = JSON.parse(this.ruleset.rules).rules[0];
}
else if(this.ruleset && !this.ruleset.rules){
} else if (this.ruleset && !this.ruleset.rules) {
this.rule = ruleModel;
this.rule.name = this.ruleset.name;
}

this.requestUpdate();
}

setActiveRule(e:any) {
public setActiveRule(e: any) {
this.ruleset = e.detail.ruleset;

this.computeRuleset();
}

protected render() {

return html`
<div class="rule-editor-container">
<side-menu class="bg-white shadow">
<or-rule-list .rulesets="${this.rulesets}" .ruleset="${this.ruleset}"></or-rule-list>
<div class="bottom-toolbar">
<icon class="small-icon" @click="${this.deleteRule}"><or-icon icon="delete"></or-icon></icon>
<icon class="small-icon" @click="${this.createRule}"><or-icon icon="plus"></or-icon></icon>
</div>
</side-menu>
${this.ruleset ? html`
<or-body>
<or-rule-header class="bg-white shadow" .ruleset="${this.ruleset}"></or-rule-header>
${this.rule ? html`
<div class="content">
<or-rule-when .rule="${this.rule}"></or-rule-when>
<or-rule-then .rule="${this.rule}"></or-rule-then>
</div>
` : ``}
</or-body>
` : html``}
</div>
`;
}
}

@@ -1,74 +1,70 @@
import {html, LitElement, property, customElement, TemplateResult} from 'lit-element';
import {html, LitElement, property, customElement, TemplateResult} from "lit-element";
import "../selects/or-select-operator";
import "../selects/or-select-asset-attribute";

import '../selects/or-select-operator';
import '../selects/or-select-asset-attribute';

import '@openremote/or-input';
import '@openremote/or-select';
import '@openremote/or-icon';
import handler from '../index';
import {style} from './style';
import "@openremote/or-input";
import "@openremote/or-select";
import "@openremote/or-icon";
import handler from "../index";
import {style} from "./style";

import {RuleActionUnion, RuleActionWriteAttribute} from "@openremote/model";


// TODO use create select option to
@customElement('or-rule-then-condition')
@customElement("or-rule-then-condition")
class OrRuleThenCondition extends LitElement {

static get styles() {
return [
style
]
}

protected render() {

return html`
<div class="rule-container">
${this.condition ? html`
<or-select-asset-attribute disabled type="${this.condition}" value="${this.condition.attributeName}"></or-select-asset-attribute>
<or-select-operator disabled type="${this.condition}" value="EQUAL"></or-select-operator>
${this.createInputControl(this.condition)}
` : ``}
</div>
`;
];
}

@property({type: Object})
condition?: RuleActionWriteAttribute;
public condition?: RuleActionWriteAttribute;

@property({type: Number})
private value: number = 0;

protected createInputControl(condition:RuleActionWriteAttribute):TemplateResult {
for (let i=0; i< handler.handlers.length; i++) {
let h = handler.handlers[i];

let result = h(condition);
constructor() {
super();

if(result) {
return result
}
}
return html`<or-input type="text" value="${condition.value}"></or-input>`;
this.addEventListener("or-input:changed", this.setValue);
}

setValue(e:any) {
public setValue(e: any) {
const value = e.detail.value;

if(this.condition && this.condition.value) {
if (this.condition && this.condition.value) {
this.condition.value = value;
this.requestUpdate();
}
}

constructor() {
super();
protected render() {

this.addEventListener('or-input:changed', this.setValue);
return html`
<div class="rule-container">
${this.condition ? html`
<or-select-asset-attribute disabled type="${this.condition}" value="${this.condition.attributeName}"></or-select-asset-attribute>
<or-select-operator disabled type="${this.condition}" value="EQUAL"></or-select-operator>
${this.createInputControl(this.condition!)}
` : ``}
</div>
`;
}

protected createInputControl(condition: RuleActionWriteAttribute): TemplateResult {
for (const h of handler.handlers) {

const result = h(this.condition!);
if (result) {
return html`${result}`;
}
}

return html`<or-input type="text" value="${this.condition!.value}"></or-input>`;
}

}

Oops, something went wrong.

0 comments on commit cbd5206

Please sign in to comment.
You can’t perform that action at this time.