Skip to content
Permalink
Browse files

UI updates

- Mapwidget flyTo default behavior
- or-rule-list status based on datetime
  • Loading branch information...
robin-dekkers committed Aug 6, 2019
1 parent 988d1cb commit 6a6e899a8e1f81b57fcb83c0bacbcec0ecf4cab0
@@ -169,9 +169,9 @@ export class OrMap extends LitElement {
this._loaded = true;
}

public flyTo(LngLat: LngLatLike) {
public flyTo(coordinates?: LngLatLike, zoom?: number) {
if (this._map) {
this._map.flyTo(LngLat);
this._map.flyTo(coordinates, zoom);
}
}

@@ -27,7 +27,7 @@ export class MapWidget {
protected _markersJs: Map<OrMapMarker, MarkerJS> = new Map();
protected _markersGl: Map<OrMapMarker, MarkerGL> = new Map();
protected _viewSettings?: ViewSettings;
protected _center?: LngLat;
protected _center?: LngLat | LngLatLike;
protected _zoom?: number;
protected _clickHandlers: Map<OrMapMarker, (ev: MouseEvent) => void> = new Map();

@@ -60,19 +60,33 @@ export class MapWidget {
return this;
}

public flyTo(LngLat:LngLatLike): this {
public flyTo(coordinates?:LngLatLike, zoom?: number): this {
switch (this._type) {
case Type.RASTER:
if (this._mapJs) {
//TODO implement fylTo
}
break;
case Type.VECTOR:
if (this._mapGl && LngLat) {
this._mapGl.flyTo({
center: LngLat,
zoom: 15
});
if (this._mapGl) {
if(this._viewSettings) {
if (!coordinates) {
coordinates = this._center ? this._center : this._viewSettings.center;
}

if (!zoom) {
zoom = this._zoom ? this._zoom : this._viewSettings.zoom ? this._viewSettings.zoom : 18;
}
}

// Only do flyTo if it has valid LngLat value
if(coordinates) {
this._mapGl.flyTo({
center: coordinates,
zoom: zoom
});
}

}
break;
}
@@ -200,6 +214,10 @@ export class MapWidget {
}
if (this._center) {
options.center = this._center;
} else {
if(this._viewSettings) {
this._center = this._viewSettings.center;
}
}
if (this._zoom) {
options.zoom = this._zoom;
@@ -242,6 +260,7 @@ export class MapWidget {
}

public removeMarker(marker: OrMapMarker) {
this._removeMarkerRadius(marker);
this._updateMarkerElement(marker, false);
}

@@ -311,10 +330,11 @@ export class MapWidget {

this._markersJs.set(marker, m);
}
if(marker.radius) {
this._createMarkerRadius(marker);
}
}
if(marker.radius) {
this._createMarkerRadius(marker);
}

break;
case Type.VECTOR:
let mGl = this._markersGl.get(marker);
@@ -346,23 +366,33 @@ export class MapWidget {



}
if(marker.radius) {
this._createMarkerRadius(marker);
}
}

if(marker.radius) {
this._createMarkerRadius(marker);
}

break;
}
}

protected _createMarkerRadius(marker:OrMapMarker){
if(this._mapGl && this._loaded && marker.radius && marker.lat && marker.lng){
protected _removeMarkerRadius(marker:OrMapMarker){

if(this._mapGl && this._loaded && marker.radius && marker.lat && marker.lng) {

if (this._mapGl.getSource('circleData')) {
this._mapGl.removeLayer('marker-radius-circle');
this._mapGl.removeSource('circleData');
}
}

}

protected _createMarkerRadius(marker:OrMapMarker){
if(this._mapGl && this._loaded && marker.radius && marker.lat && marker.lng){

this._removeMarkerRadius(marker);

this._mapGl.addSource('circleData', {
type: 'geojson',
@@ -1,6 +1,7 @@
import {html, LitElement, property} from "lit-element";
import {TenantRuleset} from "@openremote/model";
import {TenantRuleset, Rule, RuleCondition} from "@openremote/model";
import {ruleListStyle} from "./style";
import moment from "moment";

class OrRulesList extends LitElement {
@property({type: Array})
@@ -30,7 +31,7 @@ class OrRulesList extends LitElement {
${this.rulesets && this.rulesets.map((ruleset: TenantRuleset, index: number) => {
return html`
<a ?selected="${this.ruleset && ruleset.id === this.ruleset.id}" class="d-flex list-item" @click="${() => this.setActiveRule(this.rulesets[index])}">
<span class="${ruleset.enabled ? "bg-green" : "bg-red"}"></span>
<span class="${this.checkRuleStatus(ruleset)}"></span>
<div class="flex">
<span>${ruleset.name}<span>${!ruleset.id ? " [concept]" : ""}</span></span>
</div>
@@ -41,6 +42,37 @@ class OrRulesList extends LitElement {
`;
}


checkRuleStatus(ruleset: TenantRuleset){
let status = ruleset.enabled ? "bg-green" : "bg-red";

if(ruleset.rules && ruleset.enabled) {
const rule: Rule = 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
if(rule && rule.when && rule.when.items && rule.when.items.length > 0) {
const ruleCondition: RuleCondition = rule.when.items[0];
if(ruleCondition.datetime) {
const today = moment();
const startDate = ruleCondition.datetime.value;
const endDate = ruleCondition.datetime.rangeValue;

if (today.diff(startDate) < 0) {
// before startDate, show blue
status = "bg-blue";
} else if (today.diff(endDate) > 0) {
// after endDate, show grey
status = "bg-grey";
}
}
}
}

return status;

}

}

window.customElements.define("or-rule-list", OrRulesList);
@@ -68,6 +68,7 @@ export const rulesEditorStyle = css`
}
or-rule-header {
min-height: var(--internal-or-rules-editor-header-height);
height: var(--internal-or-rules-editor-header-height);
}
@@ -235,12 +236,20 @@ export const ruleListStyle = css`
}
.bg-green {
background-color: green;
background-color: #28b328;
}
.bg-red {
background-color: red
}
.bg-blue {
background-color: #3e92dc;
}
.bg-grey {
background-color: #b7b7b7;
}
`;

// language=CSS

0 comments on commit 6a6e899

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