Skip to content
Permalink
Browse files

WIP Rules editor

  • Loading branch information...
robin-dekkers committed Apr 9, 2019
1 parent 5eed920 commit cbfc0c0c1c0015fefb45f6264e3c1d67b9f98778
@@ -0,0 +1,14 @@
import {
AttributeDescriptor,
ValueType
} from "@openremote/model";

export const attributeDescriptors: AttributeDescriptor[] = [
{name: "flightProfiles", valueDescriptor: {name: "STRING", valueType: ValueType.STRING}},
{name: "airportIata", valueDescriptor: {name: "STRING", valueType: ValueType.STRING}},
{name: "airlineIata", valueDescriptor: {name: "STRING", valueType: ValueType.STRING}},
{name: "originRegion", valueDescriptor: {name: "STRING", valueType: ValueType.STRING}},
{name: "languageCodes", valueDescriptor: {name: "STRING", valueType: ValueType.STRING}},
{name: "passengerCapacity", valueDescriptor: {name: "NUMBER", valueType: ValueType.NUMBER}},
{name: "countryCode", valueDescriptor: {name: "STRING", valueType: ValueType.STRING}}
];
@@ -0,0 +1,45 @@
import openremote from "@openremote/core";
import {
Rule,
RulesetLang,
TenantRuleset
} from "@openremote/model";

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

export const rulesetModel: TenantRuleset = {
name: "New Rule",
type: "tenant",
lang: RulesetLang.JSON,
realm: openremote.getRealm(),
accessPublicRead: true,
rules: JSON.stringify({rules: [ruleModel]})
};

export const rulesEditorConfig = {
options: {
attributeValueDescriptors: {
flightProfiles: {},
airportIata: {},
airlineIata: {},
originRegion: {},
passengerCapacity: {},
languageCodes: {
options: [
"Dutch",
"English",
]
},
countryCode: {
options: [
"NL",
"GB",
]
}
}
}
};
@@ -3,12 +3,10 @@ import {customElement, html, LitElement, property, TemplateResult} from "lit-ele
import "@openremote/or-select";
import "@openremote/or-icon";
import {
AttributeDescriptor,
Rule,
RuleActionWriteAttribute,
RulesetLang,
TenantRuleset,
ValueType
TenantRuleset
} from "@openremote/model";
import openremote from "@openremote/core";
import rest from "@openremote/rest";
@@ -21,46 +19,8 @@ import "./or-rule-header";
import {style} from "./style";
import findIndex from "lodash-es/findIndex";

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

const rulesetModel: TenantRuleset = {
name: "New Rule",
type: "tenant",
lang: RulesetLang.JSON,
realm: openremote.getRealm(),
accessPublicRead: true,
rules: JSON.stringify({rules: [ruleModel]})
};


const attributeDescriptors: AttributeDescriptor[] = [
{name: "profiles", valueDescriptor: {name: "STRING", valueType: ValueType.STRING}},
{name: "airportIata", valueDescriptor: {name: "STRING", valueType: ValueType.STRING}},
{name: "airlineIata", valueDescriptor: {name: "STRING", valueType: ValueType.STRING}},
{name: "originRegion", valueDescriptor: {name: "STRING", valueType: ValueType.STRING}},
{name: "languageCodes", valueDescriptor: {name: "STRING", valueType: ValueType.STRING}},
{name: "passengerCapacity", valueDescriptor: {name: "NUMBER", valueType: ValueType.NUMBER}},
{name: "countryCode", valueDescriptor: {name: "STRING", valueType: ValueType.STRING}}
];

const rulesEditorConfig = {
languageCodes: {
options: [
"Dutch",
"English",
]
},
countryCode: {
options: [
"NL",
"GB",
]
},
};
import {attributeDescriptors} from "./const/attribute-descriptors";
import {ruleModel, rulesetModel, rulesEditorConfig} from "./const/rule-config";

class InputHandlers {
public handlers: Array<(condition: RuleActionWriteAttribute) => TemplateResult | undefined> = [];
@@ -79,6 +39,14 @@ class InputHandlers {

export default new InputHandlers();

function confirmDialog(msg: string) {
return new Promise( (resolve, reject) => {
const confirmed = window.confirm(msg);

return confirmed ? resolve(true) : reject(false);
});
}

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

@@ -106,14 +74,44 @@ class OrRulesEditor extends LitElement {
constructor() {
super();
this.readRules();

this.addEventListener("rules:set-active-rule", this.setActiveRule);
this.addEventListener("rules:write-rule", this.writeRule);
this.addEventListener("rules:create-rule", this.createRule);
this.addEventListener("rules:update-rule", this.updateRule);
this.addEventListener("rules:delete-rule", this.deleteRule);

}

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}" .rule="${this.rule}"></or-rule-header>
${this.rule ? html`
<div class="content">
<or-rule-when .rule="${this.rule}" .attributeDescriptors="${attributeDescriptors}"></or-rule-when>
<or-rule-then .rule="${this.rule}" .attributeDescriptors="${attributeDescriptors}"></or-rule-then>
</div>
` : ``}
</or-body>
` : html``}
</div>
`;
}

public readRules() {
private readRules() {
rest.api.RulesResource.getTenantRulesets(openremote.config.realm, {
language: RulesetLang.JSON,
fullyPopulate: true
@@ -141,19 +139,21 @@ class OrRulesEditor extends LitElement {
});
}

public createRule() {
if (this.rulesets) {
private createRule() {
const shouldContinue = this.shouldShowModal();
if (!shouldContinue) {
return;
}

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


}
}

public writeRule() {
private writeRule() {
if (this.ruleset && this.rule) {
this.rule.name = this.ruleset.name;
this.ruleset.rules = JSON.stringify({rules: [this.rule]});
@@ -163,7 +163,7 @@ class OrRulesEditor extends LitElement {
}
}

public updateRule(e: any) {
private updateRule(e: any) {
this.ruleset = e.detail.ruleset;
if (this.ruleset && this.ruleset.id && this.rule) {
delete this.ruleset.lastModified;
@@ -183,24 +183,37 @@ class OrRulesEditor extends LitElement {

}

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]);
this.rulesets.splice(index, 1);
this.rulesets = [...this.rulesets];
this.ruleset = undefined;
this.rule = undefined;
this.requestUpdate();
}
private deleteRule() {

if (!this.ruleset || !this.ruleset.id) {
return;
}
const id = this.ruleset.id;

confirmDialog("Weet je zeker dat je deze regel wilt verwijderen?")
.then(() => {
rest.api.RulesResource.deleteTenantRuleset(id).then(() => {
this.cleanRule();
});
})
.catch(() => {
// do something when canceled?
});

}

private cleanRule() {
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;
this.rule = undefined;
this.requestUpdate();
}
}

public computeRuleset() {
private computeRuleset() {
if (this.ruleset && this.ruleset.rules) {
this.rule = JSON.parse(this.ruleset.rules).rules[0];
} else if (this.ruleset && !this.ruleset.rules) {
@@ -210,38 +223,30 @@ class OrRulesEditor extends LitElement {
this.requestUpdate();
}

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

this.computeRuleset();
private setActiveRule(e: any) {
const shouldContinue = this.shouldShowModal();
if (!shouldContinue) {
return;
}
this.ruleset = e.detail.ruleset;
this.computeRuleset();
}

protected render() {
private shouldShowModal() {
if (this.ruleset && this.ruleset.rules !== JSON.stringify({rules: [this.rule]})) {
confirmDialog("Weet je zeker dat je deze regel niet wilt opslaan?")
.then(() => {
this.readRules();
return true;
})
.catch(() => {
return false;
});
} else {
return true;
}

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}" .rule="${this.rule}"></or-rule-header>
${this.rule ? html`
<div class="content">
<or-rule-when .rule="${this.rule}" .attributeDescriptors="${attributeDescriptors}"></or-rule-when>
<or-rule-then .rule="${this.rule}" .attributeDescriptors="${attributeDescriptors}"></or-rule-then>
</div>
` : ``}
</or-body>
` : html``}
</div>
`;
}
}


}
@@ -37,7 +37,8 @@ class OrRuleHeader extends LitElement {
<span @click="${this.toggleEditmode}"><or-icon style="margin:10px;" icon="pencil-outline"></or-icon></span>
<span class="rule-status ${this.ruleset && this.ruleset.enabled ? 'bg-green' : 'bg-red'}"></span>
<or-toggle @click="${this.toggleEnabled}">toggle</or-toggle>
<button class="button-simple" @click="${this.toggleEnabled}">${this.ruleset!.enabled ? 'deactiveren' : 'publiceren'}</button>
${this.ruleset && this.ruleset.id ? html`
<button @click="${this.updateRule}">opslaan</button>
` : html`
@@ -58,7 +59,6 @@ class OrRuleHeader extends LitElement {
const value = e.detail.value;
if(this.ruleset) {
this.ruleset.name = value;
console.log(this.ruleset);
}
}

@@ -33,8 +33,16 @@ export const style = css`
margin-left: auto;
color: var(--app-white-color, #FFF);
font-weight: bold;
cursor: pointer;
}
.button-simple {
margin-left: 10px;
border: none;
color: var(--app-primary-color);
background-color: var(--app-white-color);
}
or-input {
padding: 10px;
}
@@ -83,7 +83,9 @@ class OrRuleWhen extends LitElement {
super.updated(_changedProperties);
if(this.rule && !this.rule.when) {
this.rule.when = defaultWhenCondition;
this.addPredicate();
if(this.rule!.when!.asset!.attributes!.predicates!.length === 0) {
this.addPredicate();
}
this.requestUpdate();
}
}
@@ -164,7 +164,6 @@ class OrTimeline extends LitElement {
`;
}
// default value in minutes
@property({type: Function})
private onChange: any;

0 comments on commit cbfc0c0

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