Skip to content
Permalink
Browse files

UI updates: Fix model references and styling

  • Loading branch information...
richturner committed Sep 6, 2019
1 parent dbb7ecd commit d1db277f92469be2e147c01a12999c13c9bbad40
@@ -69,5 +69,7 @@
"status": "Status",
"name": "Name",
"deleteAssetsNoChildrenAllowed": "Only assets that have no descendants can be deleted, please remove descendents first.",
"confirmDeleteAssets": "Remove assets?"
"confirmDeleteAssets": "Remove assets?",
"ok": "ok",
"cancel": "cancel"
}
@@ -69,5 +69,7 @@
"status": "Status",
"name": "Naam",
"deleteAssetsNoChildrenAllowed": "Only assets that have no descendants can be deleted, please remove descendents first.",
"confirmDeleteAssets": "Asset verwijderen?"
"confirmDeleteAssets": "Asset verwijderen?",
"ok": "ok",
"cancel": "cancel"
}
@@ -238,7 +238,7 @@ export class OrAssetTree extends LitElement {
<or-translate value="deleteAssetsNoChildrenAllowed"></or-translate>
</p>
<div class="modal-btns">
<span class="btn" @click="${() => this._deleteNotAllowedModal.toggleAttribute("data-visible")}">OK</span>
<span class="btn" @click="${() => this._deleteNotAllowedModal.toggleAttribute("data-visible")}"><or-translate value="ok"></or-translate></span>
</div>
</div>
</div>
@@ -250,8 +250,8 @@ export class OrAssetTree extends LitElement {
<or-translate value="confirmDeleteAssets"></or-translate>
</p>
<div class="modal-btns">
<span class="btn" @click="${() => this._deleteConfirmModal.toggleAttribute("data-visible")}">CANCEL</span>
<span class="btn" @click="${() => this._doDelete()}">OK</span>
<span class="btn" @click="${() => this._deleteConfirmModal.toggleAttribute("data-visible")}"><or-translate value="cancel"></or-translate></span>
<span class="btn" @click="${() => this._doDelete()}"><or-translate value="ok"></or-translate></span>
</div>
</div>
</div>
@@ -165,10 +165,11 @@ export const style = css`
.modal-btns .btn {
font-weight: bolder;
cursor: pointer;
text-transform: uppercase;
}
.modal-btns .btn + .btn {
margin-left: 30px;
margin-left: 15px;
}
#sort-menu {
@@ -221,7 +222,7 @@ export const style = css`
.node-container {
display: flex;
flex-direction: row;
border-left: 4px solid transparent;
border-left: 6px solid transparent;
user-select: none;
cursor: pointer;
height: var(--internal-or-asset-tree-item-height);
@@ -7,7 +7,7 @@ export const style = css`
:host {
--internal-or-header-color: var(--or-header-color, var(--or-app-color1, ${unsafeCSS(DefaultColor1)}));
--internal-or-header-selected-color: var(--or-header-selected-color, var(--or-app-color4, ${unsafeCSS(DefaultColor4)}));
--internal-or-header-text-color: var(--or-header-text-color, var(--or-app-color3, ${unsafeCSS(DefaultColor3)}));
--internal-or-header-text-color: var(--or-header-text-color, var(--or-app-color3, inherit));
--internal-or-header-height: var(--or-header-height, ${unsafeCSS(DefaultHeaderHeight)});
--internal-or-header-logo-margin: var(--or-header-logo-margin, 0);
--internal-or-header-logo-height: var(--or-header-logo-height, var(--internal-or-header-height, ${unsafeCSS(DefaultHeaderHeight)}));
@@ -6,13 +6,13 @@ import {
AssetDescriptor,
AttributeDescriptor,
AttributeValueDescriptor,
AssetQueryOperator,
AssetQueryOperator as AQO,
JsonRulesetDefinition,
LogicGroup,
MetaItemDescriptor,
MetaItemType,
NewAssetQuery,
Rule,
AssetQuery,
JsonRule,
RuleActionTarget,
RuleActionUnion,
RuleCondition,
@@ -115,11 +115,11 @@ export interface RulesConfig {
action?: RulesDescriptorSection;
};
templates?: {
rule?: Rule;
rule?: JsonRule;
rulesetName?: string;
whenGroup?: LogicGroup<RuleCondition>;
whenCondition?: RuleCondition;
whenAssetQuery?: NewAssetQuery;
whenAssetQuery?: AssetQuery;
then?: RuleActionUnion;
};
}
@@ -178,7 +178,7 @@ export function getDescriptorValueType(descriptor?: AttributeDescriptor) {
return descriptor.valueDescriptor.valueType;
}

export function getAssetTypeFromQuery(query?: NewAssetQuery) {
export function getAssetTypeFromQuery(query?: AssetQuery) {
return query && query.types && query.types.length > 0 && query.types[0] ? query.types[0].value : undefined;
}

@@ -346,7 +346,7 @@ class OrRulesEditor extends translate(i18next)(LitElement) {
private isValidRule?: boolean;

private _activeRuleset?: TenantRuleset;
private _activeRules?: Rule[];
private _activeRules?: JsonRule[];
private _activeModified: boolean = false;
private _whenAssetDescriptors?: AssetDescriptor[];
private _actionAssetDescriptors?: AssetDescriptor[];
@@ -384,7 +384,7 @@ class OrRulesEditor extends translate(i18next)(LitElement) {
this.addEventListener("rules:delete-rule", this.deleteRuleset);
}

protected ruleEditorPanelTemplate(rule: Rule) {
protected ruleEditorPanelTemplate(rule: JsonRule) {
const thenTemplate = this.config && this.config.templates && this.config.templates.then ? this.config.templates.then : undefined;
const targetTypeMap = this.getTargetTypeMap();
const whenDescriptors = this.getAssetDescriptors(false);
@@ -538,7 +538,7 @@ class OrRulesEditor extends translate(i18next)(LitElement) {
return true;
}

protected validateRuleActions(rule: Rule, actions?: RuleActionUnion[]): boolean {
protected validateRuleActions(rule: JsonRule, actions?: RuleActionUnion[]): boolean {
if (!actions) {
return true;
}
@@ -580,7 +580,7 @@ class OrRulesEditor extends translate(i18next)(LitElement) {
return true;
}

protected validateAssetTarget(rule: Rule, target?: RuleActionTarget): boolean {
protected validateAssetTarget(rule: JsonRule, target?: RuleActionTarget): boolean {
if (!target) {
return true;
}
@@ -601,7 +601,7 @@ class OrRulesEditor extends translate(i18next)(LitElement) {
return true;
}

protected validateAssetQuery(query?: NewAssetQuery): boolean {
protected validateAssetQuery(query?: AssetQuery): boolean {
if (!query) {
return true;
}
@@ -646,7 +646,7 @@ class OrRulesEditor extends translate(i18next)(LitElement) {
return valuePredicate.predicates !== undefined && valuePredicate.predicates.length > 0 && valuePredicate.predicates.findIndex((p) => !p.match || p.value === undefined) === 0;
case "datetime":
case "number":
return valuePredicate.operator !== undefined && valuePredicate.value !== undefined && (valuePredicate.operator !== AssetQueryOperator.BETWEEN || valuePredicate.rangeValue !== undefined);
return valuePredicate.operator !== undefined && valuePredicate.value !== undefined && (valuePredicate.operator !== AQO.BETWEEN || valuePredicate.rangeValue !== undefined);
case "radial":
return valuePredicate.radius !== undefined && valuePredicate.lat !== undefined && valuePredicate.lng !== undefined;
case "rect":
@@ -688,7 +688,7 @@ class OrRulesEditor extends translate(i18next)(LitElement) {

if (this._rulesets) {

let rule = this.config && this.config.templates && this.config.templates.rule ? JSON.parse(JSON.stringify(this.config.templates.rule)) as Rule : undefined;
let rule = this.config && this.config.templates && this.config.templates.rule ? JSON.parse(JSON.stringify(this.config.templates.rule)) as JsonRule : undefined;

if (!rule) {
rule = {};
@@ -4,13 +4,13 @@ import {
AttributePredicate,
AttributeValueType,
AssetQueryMatch,
AssetQueryOperator,
NewAssetQuery,
AssetQueryOperator as AQO,
AssetQuery,
ValuePredicateUnion,
ValueType,
AttributeValueDescriptor,
AssetDescriptor,
RuleOperator,
LogicGroupOperator,
LogicGroup
} from "@openremote/model";
import {
@@ -31,7 +31,7 @@ import i18next from "i18next";
class OrRuleAssetQuery extends LitElement {

@property({type: Object})
public query?: NewAssetQuery;
public query?: AssetQuery;

public readonly?: boolean;

@@ -87,7 +87,7 @@ class OrRuleAssetQuery extends LitElement {
case "datetime":
return html `<span>NOT IMPLEMENTED</span>`;
case "number":
if (valuePredicate.operator === AssetQueryOperator.BETWEEN) {
if (valuePredicate.operator === AQO.BETWEEN) {
return html`
<or-input required type="${InputType.NUMBER}" @or-input-changed="${(e: OrInputChangedEvent) => this.setValuePredicateProperty(valuePredicate, "value", e.detail.value)}" .assetType="${getAssetTypeFromQuery(this.query)}" .attributeName="${attributeName}" .attributeDescriptor="${descriptor}" .value="${valuePredicate.value ? valuePredicate.value : null}" ?readonly="${this.readonly}"></or-input>
<span style="display: inline-flex; align-items: center;">&</span>
@@ -157,7 +157,7 @@ class OrRuleAssetQuery extends LitElement {
return html`
<div class="attribute-item">
<button @click="${() => this.toggleAttributeGroup(this.query!.attributes!)}" class="button-clear operator"><span>${i18next.t(!this.query!.attributes!.operator || this.query!.attributes!.operator === RuleOperator.AND ? "and" : "or")}</span></button>
<button @click="${() => this.toggleAttributeGroup(this.query!.attributes!)}" class="button-clear operator"><span>${i18next.t(!this.query!.attributes!.operator || this.query!.attributes!.operator === LogicGroupOperator.AND ? "and" : "or")}</span></button>
<div class="attribute">
${this.attributePredicateEditorTemplate(assetDescriptor, attributePredicate)}
${showRemoveAttribute ? html`
@@ -294,17 +294,17 @@ class OrRuleAssetQuery extends LitElement {
case "datetime":
case "number":
switch (valuePredicate.operator) {
case AssetQueryOperator.EQUALS:
case AQO.EQUALS:
return valuePredicate.negate ? AssetQueryOperator.NOT_EQUALS : AssetQueryOperator.EQUALS;
case AssetQueryOperator.GREATER_THAN:
case AQO.GREATER_THAN:
return valuePredicate.negate ? AssetQueryOperator.LESS_EQUALS : AssetQueryOperator.GREATER_THAN;
case AssetQueryOperator.GREATER_EQUALS:
case AQO.GREATER_EQUALS:
return valuePredicate.negate ? AssetQueryOperator.LESS_THAN : AssetQueryOperator.GREATER_EQUALS;
case AssetQueryOperator.LESS_THAN:
case AQO.LESS_THAN:
return valuePredicate.negate ? AssetQueryOperator.GREATER_EQUALS : AssetQueryOperator.LESS_THAN;
case AssetQueryOperator.LESS_EQUALS:
case AQO.LESS_EQUALS:
return valuePredicate.negate ? AssetQueryOperator.GREATER_THAN : AssetQueryOperator.LESS_EQUALS;
case AssetQueryOperator.BETWEEN:
case AQO.BETWEEN:
return valuePredicate.negate ? AssetQueryOperator.NOT_BETWEEN : AssetQueryOperator.BETWEEN;
}
return;
@@ -458,14 +458,14 @@ class OrRuleAssetQuery extends LitElement {
if (valueType === ValueType.NUMBER) {
predicate = {
predicateType: "number",
operator: AssetQueryOperator.BETWEEN,
operator: AQO.BETWEEN,
negate: true
};
} else {
// Assume datetime
predicate = {
predicateType: "datetime",
operator: AssetQueryOperator.BETWEEN,
operator: AQO.BETWEEN,
negate: true
};
}
@@ -480,13 +480,13 @@ class OrRuleAssetQuery extends LitElement {
if (valueType === ValueType.NUMBER) {
predicate = {
predicateType: "number",
operator: key as AssetQueryOperator
operator: key as AQO
};
} else {
// Assume datetime
predicate = {
predicateType: "datetime",
operator: key as AssetQueryOperator
operator: key as AQO
};
}
break;
@@ -498,13 +498,13 @@ class OrRuleAssetQuery extends LitElement {
predicate = {
predicateType: "datetime",
negate: value === AssetQueryOperator.NOT_EQUALS,
operator: AssetQueryOperator.EQUALS
operator: AQO.EQUALS
};
} else if (valueType === ValueType.NUMBER) {
predicate = {
predicateType: "number",
negate: value === AssetQueryOperator.NOT_EQUALS,
operator: AssetQueryOperator.EQUALS
operator: AQO.EQUALS
};
} else if (valueType === ValueType.STRING) {
predicate = {
@@ -578,10 +578,10 @@ class OrRuleAssetQuery extends LitElement {
}

protected toggleAttributeGroup(group: LogicGroup<AttributePredicate>) {
if (group.operator === RuleOperator.OR) {
group.operator = RuleOperator.AND;
if (group.operator === LogicGroupOperator.OR) {
group.operator = LogicGroupOperator.AND;
} else {
group.operator = RuleOperator.OR;
group.operator = LogicGroupOperator.OR;
}
this.dispatchEvent(new OrRuleChangedEvent());
this.requestUpdate();
@@ -1,9 +1,9 @@
import {html, LitElement, property, customElement} from "lit-element";
import {customElement, html, LitElement, property} from "lit-element";
import "@openremote/or-translate";
import "@openremote/or-input";
import "@openremote/or-select";
import "@openremote/or-icon";
import {TenantRuleset, Rule} from "@openremote/model";
import {TenantRuleset} from "@openremote/model";

import {headerStyle} from "./style";
import {OrRuleChangedEvent} from "./index";
@@ -1,5 +1,5 @@
import {html, LitElement, property} from "lit-element";
import {TenantRuleset, Rule, RuleCondition} from "@openremote/model";
import {TenantRuleset, JsonRule, RuleCondition} from "@openremote/model";
import {ruleListStyle} from "./style";
import moment from "moment";

@@ -47,7 +47,7 @@ class OrRulesList extends LitElement {
let status = ruleset.enabled ? "bg-green" : "bg-red";

if(ruleset.rules && ruleset.enabled) {
const rule: Rule = JSON.parse(ruleset.rules).rules[0];
const rule: JsonRule = JSON.parse(ruleset.rules).rules[0];

// HACK/WIP: the status of a rule should be better thought over see issue #95
// currently only checks the date of the first whenCondition

0 comments on commit d1db277

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