Igor Kulikov
7 years ago
30 changed files with 3188 additions and 169 deletions
@ -0,0 +1,123 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Observable } from 'rxjs'; |
|||
import { EntityId } from '@app/shared/models/id/entity-id'; |
|||
import { WidgetActionDescriptor, widgetType } from '@shared/models/widget.models'; |
|||
import { TimeService } from '../services/time.service'; |
|||
import { DeviceService } from '../http/device.service'; |
|||
import { AlarmService } from '../http/alarm.service'; |
|||
import { UtilsService } from '@core/services/utils.service'; |
|||
|
|||
export interface TimewindowFunctions { |
|||
onUpdateTimewindow: (startTimeMs: number, endTimeMs: number, interval: number) => void; |
|||
onResetTimewindow: () => void; |
|||
} |
|||
|
|||
export interface WidgetSubscriptionApi { |
|||
createSubscription: (options: WidgetSubscriptionOptions, subscribe: boolean) => Observable<IWidgetSubscription>; |
|||
createSubscriptionFromInfo: (type: widgetType, subscriptionsInfo: Array<SubscriptionInfo>, |
|||
options: WidgetSubscriptionOptions, useDefaultComponents: boolean, subscribe: boolean) |
|||
=> Observable<IWidgetSubscription>; |
|||
removeSubscription: (id: string) => void; |
|||
} |
|||
|
|||
export interface RpcApi { |
|||
sendOneWayCommand: (method: string, params?: any, timeout?: number) => Observable<any>; |
|||
sendTwoWayCommand: (method: string, params?: any, timeout?: number) => Observable<any>; |
|||
} |
|||
|
|||
export interface IWidgetUtils { |
|||
formatValue: (value: any, dec?: number, units?: string, showZeroDecimals?: boolean) => string | undefined; |
|||
} |
|||
|
|||
export interface WidgetActionsApi { |
|||
actionDescriptorsBySourceId: {[sourceId: string]: Array<WidgetActionDescriptor>}; |
|||
getActionDescriptors: (actionSourceId: string) => Array<WidgetActionDescriptor>; |
|||
handleWidgetAction: ($event: Event, descriptor: WidgetActionDescriptor, |
|||
entityId?: EntityId, entityName?: string, additionalParams?: any) => void; |
|||
elementClick: ($event: Event) => void; |
|||
} |
|||
|
|||
export interface IAliasController { |
|||
[key: string]: any | null; |
|||
// TODO:
|
|||
} |
|||
|
|||
export interface StateObject { |
|||
id?: string; |
|||
params?: StateParams; |
|||
} |
|||
|
|||
export interface StateParams { |
|||
entityName?: string; |
|||
targetEntityParamName?: string; |
|||
entityId?: EntityId; |
|||
[key: string]: any | null; |
|||
} |
|||
|
|||
export interface IStateController { |
|||
getStateParams: () => StateParams; |
|||
openState: (id: string, params?: StateParams, openRightLayout?: boolean) => void; |
|||
updateState: (id?: string, params?: StateParams, openRightLayout?: boolean) => void; |
|||
// TODO:
|
|||
} |
|||
|
|||
export interface EntityInfo { |
|||
entityId: EntityId; |
|||
entityName: string; |
|||
} |
|||
|
|||
export interface SubscriptionInfo { |
|||
[key: string]: any; |
|||
// TODO:
|
|||
} |
|||
|
|||
export interface WidgetSubscriptionContext { |
|||
timeService: TimeService; |
|||
deviceService: DeviceService; |
|||
alarmService: AlarmService; |
|||
utils: UtilsService; |
|||
widgetUtils: IWidgetUtils; |
|||
dashboardTimewindowApi: TimewindowFunctions; |
|||
getServerTimeDiff: Observable<number>; |
|||
aliasController: IAliasController; |
|||
[key: string]: any; |
|||
// TODO:
|
|||
} |
|||
|
|||
export interface WidgetSubscriptionOptions { |
|||
[key: string]: any; |
|||
// TODO:
|
|||
} |
|||
|
|||
export interface IWidgetSubscription { |
|||
|
|||
onUpdateTimewindow: (startTimeMs: number, endTimeMs: number, interval: number) => void; |
|||
onResetTimewindow: () => void; |
|||
|
|||
sendOneWayCommand: (method: string, params?: any, timeout?: number) => Observable<any>; |
|||
sendTwoWayCommand: (method: string, params?: any, timeout?: number) => Observable<any>; |
|||
|
|||
clearRpcError: () => void; |
|||
|
|||
getFirstEntityInfo: () => EntityInfo; |
|||
|
|||
destroy(): void; |
|||
|
|||
[key: string]: any; |
|||
// TODO:
|
|||
} |
|||
@ -0,0 +1,688 @@ |
|||
/* |
|||
* Copyright © 2016-2019 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
/* eslint-disable */ |
|||
|
|||
/* jshint unused:false */ |
|||
/* global base64_decode, CSSWizardView, window, console, jQuery */ |
|||
var fi = function () { |
|||
|
|||
this.cssImportStatements = []; |
|||
this.cssKeyframeStatements = []; |
|||
|
|||
this.cssRegex = new RegExp('([\\s\\S]*?){([\\s\\S]*?)}', 'gi'); |
|||
this.cssMediaQueryRegex = '((@media [\\s\\S]*?){([\\s\\S]*?}\\s*?)})'; |
|||
this.cssKeyframeRegex = '((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})'; |
|||
this.combinedCSSRegex = '((\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})'; //to match css & media queries together
|
|||
this.cssCommentsRegex = '(\\/\\*[\\s\\S]*?\\*\\/)'; |
|||
this.cssImportStatementRegex = new RegExp('@import .*?;', 'gi'); |
|||
}; |
|||
|
|||
/* |
|||
Strip outs css comments and returns cleaned css string |
|||
|
|||
@param css, the original css string to be stipped out of comments |
|||
|
|||
@return cleanedCSS contains no css comments |
|||
*/ |
|||
fi.prototype.stripComments = function (cssString) { |
|||
var regex = new RegExp(this.cssCommentsRegex, 'gi'); |
|||
|
|||
return cssString.replace(regex, ''); |
|||
}; |
|||
|
|||
/* |
|||
Parses given css string, and returns css object |
|||
keys as selectors and values are css rules |
|||
eliminates all css comments before parsing |
|||
|
|||
@param source css string to be parsed |
|||
|
|||
@return object css |
|||
*/ |
|||
fi.prototype.parseCSS = function (source) { |
|||
|
|||
if (source === undefined) { |
|||
return []; |
|||
} |
|||
|
|||
var css = []; |
|||
//strip out comments
|
|||
//source = this.stripComments(source);
|
|||
|
|||
//get import statements
|
|||
|
|||
while (true) { |
|||
var imports = this.cssImportStatementRegex.exec(source); |
|||
if (imports !== null) { |
|||
this.cssImportStatements.push(imports[0]); |
|||
css.push({ |
|||
selector: '@imports', |
|||
type: 'imports', |
|||
styles: imports[0] |
|||
}); |
|||
} else { |
|||
break; |
|||
} |
|||
} |
|||
source = source.replace(this.cssImportStatementRegex, ''); |
|||
//get keyframe statements
|
|||
var keyframesRegex = new RegExp(this.cssKeyframeRegex, 'gi'); |
|||
var arr; |
|||
while (true) { |
|||
arr = keyframesRegex.exec(source); |
|||
if (arr === null) { |
|||
break; |
|||
} |
|||
css.push({ |
|||
selector: '@keyframes', |
|||
type: 'keyframes', |
|||
styles: arr[0] |
|||
}); |
|||
} |
|||
source = source.replace(keyframesRegex, ''); |
|||
|
|||
//unified regex
|
|||
var unified = new RegExp(this.combinedCSSRegex, 'gi'); |
|||
|
|||
while (true) { |
|||
arr = unified.exec(source); |
|||
if (arr === null) { |
|||
break; |
|||
} |
|||
var selector = ''; |
|||
if (arr[2] === undefined) { |
|||
selector = arr[5].split('\r\n').join('\n').trim(); |
|||
} else { |
|||
selector = arr[2].split('\r\n').join('\n').trim(); |
|||
} |
|||
|
|||
/* |
|||
fetch comments and associate it with current selector |
|||
*/ |
|||
var commentsRegex = new RegExp(this.cssCommentsRegex, 'gi'); |
|||
var comments = commentsRegex.exec(selector); |
|||
if (comments !== null) { |
|||
selector = selector.replace(commentsRegex, '').trim(); |
|||
} |
|||
|
|||
//determine the type
|
|||
if (selector.indexOf('@media') !== -1) { |
|||
//we have a media query
|
|||
var cssObject = { |
|||
selector: selector, |
|||
type: 'media', |
|||
subStyles: this.parseCSS(arr[3] + '\n}') //recursively parse media query inner css
|
|||
}; |
|||
if (comments !== null) { |
|||
cssObject.comments = comments[0]; |
|||
} |
|||
css.push(cssObject); |
|||
} else { |
|||
//we have standart css
|
|||
var rules = this.parseRules(arr[6]); |
|||
var style = { |
|||
selector: selector, |
|||
rules: rules |
|||
}; |
|||
if (selector === '@font-face') { |
|||
style.type = 'font-face'; |
|||
} |
|||
if (comments !== null) { |
|||
style.comments = comments[0]; |
|||
} |
|||
css.push(style); |
|||
} |
|||
} |
|||
|
|||
return css; |
|||
}; |
|||
|
|||
/* |
|||
parses given string containing css directives |
|||
and returns an array of objects containing ruleName:ruleValue pairs |
|||
|
|||
@param rules, css directive string example |
|||
\n\ncolor:white;\n font-size:18px;\n |
|||
*/ |
|||
fi.prototype.parseRules = function (rules) { |
|||
//convert all windows style line endings to unix style line endings
|
|||
rules = rules.split('\r\n').join('\n'); |
|||
var ret = []; |
|||
|
|||
// Split all rules but keep semicolon for base64 url data
|
|||
rules = rules.split(/;(?![^\(]*\))/); |
|||
|
|||
//proccess rules line by line
|
|||
for (var i = 0; i < rules.length; i++) { |
|||
var line = rules[i]; |
|||
|
|||
//determine if line is a valid css directive, ie color:white;
|
|||
line = line.trim(); |
|||
if (line.indexOf(':') !== -1) { |
|||
//line contains :
|
|||
line = line.split(':'); |
|||
var cssDirective = line[0].trim(); |
|||
var cssValue = line.slice(1).join(':').trim(); |
|||
|
|||
//more checks
|
|||
if (cssDirective.length < 1 || cssValue.length < 1) { |
|||
continue; //there is no css directive or value that is of length 1 or 0
|
|||
// PLAIN WRONG WHAT ABOUT margin:0; ?
|
|||
} |
|||
|
|||
//push rule
|
|||
ret.push({ |
|||
directive: cssDirective, |
|||
value: cssValue |
|||
}); |
|||
} else { |
|||
//if there is no ':', but what if it was mis splitted value which starts with base64
|
|||
if (line.trim().substr(0, 7) == 'base64,') { //hack :)
|
|||
ret[ret.length - 1].value += line.trim(); |
|||
} else { |
|||
//add rule, even if it is defective
|
|||
if (line.length > 0) { |
|||
ret.push({ |
|||
directive: '', |
|||
value: line, |
|||
defective: true |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
return ret; //we are done!
|
|||
}; |
|||
/* |
|||
just returns the rule having given directive |
|||
if not found returns false; |
|||
*/ |
|||
fi.prototype.findCorrespondingRule = function (rules, directive, value) { |
|||
if (value === undefined) { |
|||
value = false; |
|||
} |
|||
var ret = false; |
|||
for (var i = 0; i < rules.length; i++) { |
|||
if (rules[i].directive == directive) { |
|||
ret = rules[i]; |
|||
if (value === rules[i].value) { |
|||
break; |
|||
} |
|||
} |
|||
} |
|||
return ret; |
|||
}; |
|||
|
|||
/* |
|||
Finds styles that have given selector, compress them, |
|||
and returns them |
|||
*/ |
|||
fi.prototype.findBySelector = function (cssObjectArray, selector, contains) { |
|||
if (contains === undefined) { |
|||
contains = false; |
|||
} |
|||
|
|||
var found = []; |
|||
for (var i = 0; i < cssObjectArray.length; i++) { |
|||
if (contains === false) { |
|||
if (cssObjectArray[i].selector === selector) { |
|||
found.push(cssObjectArray[i]); |
|||
} |
|||
} else { |
|||
if (cssObjectArray[i].selector.indexOf(selector) !== -1) { |
|||
found.push(cssObjectArray[i]); |
|||
} |
|||
} |
|||
|
|||
} |
|||
if (found.length < 2) { |
|||
return found; |
|||
} else { |
|||
var base = found[0]; |
|||
for (i = 1; i < found.length; i++) { |
|||
this.intelligentCSSPush([base], found[i]); |
|||
} |
|||
return [base]; //we are done!! all properties merged into base!
|
|||
} |
|||
}; |
|||
|
|||
/* |
|||
deletes cssObjects having given selector, and returns new array |
|||
*/ |
|||
fi.prototype.deleteBySelector = function (cssObjectArray, selector) { |
|||
var ret = []; |
|||
for (var i = 0; i < cssObjectArray.length; i++) { |
|||
if (cssObjectArray[i].selector !== selector) { |
|||
ret.push(cssObjectArray[i]); |
|||
} |
|||
} |
|||
return ret; |
|||
}; |
|||
|
|||
/* |
|||
Compresses given cssObjectArray and tries to minimize |
|||
selector redundence. |
|||
*/ |
|||
fi.prototype.compressCSS = function (cssObjectArray) { |
|||
var compressed = []; |
|||
var done = {}; |
|||
for (var i = 0; i < cssObjectArray.length; i++) { |
|||
var obj = cssObjectArray[i]; |
|||
if (done[obj.selector] === true) { |
|||
continue; |
|||
} |
|||
|
|||
var found = this.findBySelector(cssObjectArray, obj.selector); //found compressed
|
|||
if (found.length !== 0) { |
|||
compressed.push(found[0]); |
|||
done[obj.selector] = true; |
|||
} |
|||
} |
|||
return compressed; |
|||
}; |
|||
|
|||
/* |
|||
Received 2 css objects with following structure |
|||
{ |
|||
rules : [{directive:"", value:""}, {directive:"", value:""}, ...] |
|||
selector : "SOMESELECTOR" |
|||
} |
|||
|
|||
returns the changed(new,removed,updated) values on css1 parameter, on same structure |
|||
|
|||
if two css objects are the same, then returns false |
|||
|
|||
if a css directive exists in css1 and css2, and its value is different, it is included in diff |
|||
if a css directive exists in css1 and not css2, it is then included in diff |
|||
if a css directive exists in css2 but not css1, then it is deleted in css1, it would be included in diff but will be marked as type='DELETED' |
|||
|
|||
@object css1 css object |
|||
@object css2 css object |
|||
|
|||
@return diff css object contains changed values in css1 in regards to css2 see test input output in /test/data/css.js |
|||
*/ |
|||
fi.prototype.cssDiff = function (css1, css2) { |
|||
if (css1.selector !== css2.selector) { |
|||
return false; |
|||
} |
|||
|
|||
//if one of them is media query return false, because diff function can not operate on media queries
|
|||
if ((css1.type === 'media' || css2.type === 'media')) { |
|||
return false; |
|||
} |
|||
|
|||
var diff = { |
|||
selector: css1.selector, |
|||
rules: [] |
|||
}; |
|||
var rule1, rule2; |
|||
for (var i = 0; i < css1.rules.length; i++) { |
|||
rule1 = css1.rules[i]; |
|||
//find rule2 which has the same directive as rule1
|
|||
rule2 = this.findCorrespondingRule(css2.rules, rule1.directive, rule1.value); |
|||
if (rule2 === false) { |
|||
//rule1 is a new rule in css1
|
|||
diff.rules.push(rule1); |
|||
} else { |
|||
//rule2 was found only push if its value is different too
|
|||
if (rule1.value !== rule2.value) { |
|||
diff.rules.push(rule1); |
|||
} |
|||
} |
|||
} |
|||
|
|||
//now for rules exists in css2 but not in css1, which means deleted rules
|
|||
for (var ii = 0; ii < css2.rules.length; ii++) { |
|||
rule2 = css2.rules[ii]; |
|||
//find rule2 which has the same directive as rule1
|
|||
rule1 = this.findCorrespondingRule(css1.rules, rule2.directive); |
|||
if (rule1 === false) { |
|||
//rule1 is a new rule
|
|||
rule2.type = 'DELETED'; //mark it as a deleted rule, so that other merge operations could be true
|
|||
diff.rules.push(rule2); |
|||
} |
|||
} |
|||
|
|||
|
|||
if (diff.rules.length === 0) { |
|||
return false; |
|||
} |
|||
return diff; |
|||
}; |
|||
|
|||
/* |
|||
Merges 2 different css objects together |
|||
using intelligentCSSPush, |
|||
|
|||
@param cssObjectArray, target css object array |
|||
@param newArray, source array that will be pushed into cssObjectArray parameter |
|||
@param reverse, [optional], if given true, first parameter will be traversed on reversed order |
|||
effectively giving priority to the styles in newArray |
|||
*/ |
|||
fi.prototype.intelligentMerge = function (cssObjectArray, newArray, reverse) { |
|||
if (reverse === undefined) { |
|||
reverse = false; |
|||
} |
|||
|
|||
|
|||
for (var i = 0; i < newArray.length; i++) { |
|||
this.intelligentCSSPush(cssObjectArray, newArray[i], reverse); |
|||
} |
|||
for (i = 0; i < cssObjectArray.length; i++) { |
|||
var cobj = cssObjectArray[i]; |
|||
if (cobj.type === 'media' || (cobj.type === 'keyframes')) { |
|||
continue; |
|||
} |
|||
cobj.rules = this.compactRules(cobj.rules); |
|||
} |
|||
}; |
|||
|
|||
/* |
|||
inserts new css objects into a bigger css object |
|||
with same selectors groupped together |
|||
|
|||
@param cssObjectArray, array of bigger css object to be pushed into |
|||
@param minimalObject, single css object |
|||
@param reverse [optional] default is false, if given, cssObjectArray will be reversly traversed |
|||
resulting more priority in minimalObject's styles |
|||
*/ |
|||
fi.prototype.intelligentCSSPush = function (cssObjectArray, minimalObject, reverse) { |
|||
var pushSelector = minimalObject.selector; |
|||
//find correct selector if not found just push minimalObject into cssObject
|
|||
var cssObject = false; |
|||
|
|||
if (reverse === undefined) { |
|||
reverse = false; |
|||
} |
|||
|
|||
if (reverse === false) { |
|||
for (var i = 0; i < cssObjectArray.length; i++) { |
|||
if (cssObjectArray[i].selector === minimalObject.selector) { |
|||
cssObject = cssObjectArray[i]; |
|||
break; |
|||
} |
|||
} |
|||
} else { |
|||
for (var j = cssObjectArray.length - 1; j > -1; j--) { |
|||
if (cssObjectArray[j].selector === minimalObject.selector) { |
|||
cssObject = cssObjectArray[j]; |
|||
break; |
|||
} |
|||
} |
|||
} |
|||
|
|||
if (cssObject === false) { |
|||
cssObjectArray.push(minimalObject); //just push, because cssSelector is new
|
|||
} else { |
|||
if (minimalObject.type !== 'media') { |
|||
for (var ii = 0; ii < minimalObject.rules.length; ii++) { |
|||
var rule = minimalObject.rules[ii]; |
|||
//find rule inside cssObject
|
|||
var oldRule = this.findCorrespondingRule(cssObject.rules, rule.directive); |
|||
if (oldRule === false) { |
|||
cssObject.rules.push(rule); |
|||
} else if (rule.type == 'DELETED') { |
|||
oldRule.type = 'DELETED'; |
|||
} else { |
|||
//rule found just update value
|
|||
|
|||
oldRule.value = rule.value; |
|||
} |
|||
} |
|||
} else { |
|||
cssObject.subStyles = minimalObject.subStyles; //TODO, make this intelligent too
|
|||
} |
|||
|
|||
} |
|||
}; |
|||
|
|||
/* |
|||
filter outs rule objects whose type param equal to DELETED |
|||
|
|||
@param rules, array of rules |
|||
|
|||
@returns rules array, compacted by deleting all unneccessary rules |
|||
*/ |
|||
fi.prototype.compactRules = function (rules) { |
|||
var newRules = []; |
|||
for (var i = 0; i < rules.length; i++) { |
|||
if (rules[i].type !== 'DELETED') { |
|||
newRules.push(rules[i]); |
|||
} |
|||
} |
|||
return newRules; |
|||
}; |
|||
/* |
|||
computes string for ace editor using this.css or given cssBase optional parameter |
|||
|
|||
@param [optional] cssBase, if given computes cssString from cssObject array |
|||
*/ |
|||
fi.prototype.getCSSForEditor = function (cssBase, depth) { |
|||
if (depth === undefined) { |
|||
depth = 0; |
|||
} |
|||
var ret = ''; |
|||
if (cssBase === undefined) { |
|||
cssBase = this.css; |
|||
} |
|||
//append imports
|
|||
for (var i = 0; i < cssBase.length; i++) { |
|||
if (cssBase[i].type == 'imports') { |
|||
ret += cssBase[i].styles + '\n\n'; |
|||
} |
|||
} |
|||
for (i = 0; i < cssBase.length; i++) { |
|||
var tmp = cssBase[i]; |
|||
if (tmp.selector === undefined) { //temporarily omit media queries
|
|||
continue; |
|||
} |
|||
var comments = ""; |
|||
if (tmp.comments !== undefined) { |
|||
comments = tmp.comments + '\n'; |
|||
} |
|||
|
|||
if (tmp.type == 'media') { //also put media queries to output
|
|||
ret += comments + tmp.selector + '{\n'; |
|||
ret += this.getCSSForEditor(tmp.subStyles, depth + 1); |
|||
ret += '}\n\n'; |
|||
} else if (tmp.type !== 'keyframes' && tmp.type !== 'imports') { |
|||
ret += this.getSpaces(depth) + comments + tmp.selector + ' {\n'; |
|||
ret += this.getCSSOfRules(tmp.rules, depth + 1); |
|||
ret += this.getSpaces(depth) + '}\n\n'; |
|||
} |
|||
} |
|||
|
|||
//append keyFrames
|
|||
for (i = 0; i < cssBase.length; i++) { |
|||
if (cssBase[i].type == 'keyframes') { |
|||
ret += cssBase[i].styles + '\n\n'; |
|||
} |
|||
} |
|||
|
|||
return ret; |
|||
}; |
|||
|
|||
fi.prototype.getImports = function (cssObjectArray) { |
|||
var imps = []; |
|||
for (var i = 0; i < cssObjectArray.length; i++) { |
|||
if (cssObjectArray[i].type == 'imports') { |
|||
imps.push(cssObjectArray[i].styles); |
|||
} |
|||
} |
|||
return imps; |
|||
}; |
|||
/* |
|||
given rules array, returns visually formatted css string |
|||
to be used inside editor |
|||
*/ |
|||
fi.prototype.getCSSOfRules = function (rules, depth) { |
|||
var ret = ''; |
|||
for (var i = 0; i < rules.length; i++) { |
|||
if (rules[i] === undefined) { |
|||
continue; |
|||
} |
|||
if (rules[i].defective === undefined) { |
|||
ret += this.getSpaces(depth) + rules[i].directive + ' : ' + rules[i].value + ';\n'; |
|||
} else { |
|||
ret += this.getSpaces(depth) + rules[i].value + ';\n'; |
|||
} |
|||
|
|||
} |
|||
return ret || '\n'; |
|||
}; |
|||
|
|||
/* |
|||
A very simple helper function returns number of spaces appended in a single string, |
|||
the number depends input parameter, namely input*2 |
|||
*/ |
|||
fi.prototype.getSpaces = function (num) { |
|||
var ret = ''; |
|||
for (var i = 0; i < num * 4; i++) { |
|||
ret += ' '; |
|||
} |
|||
return ret; |
|||
}; |
|||
|
|||
/* |
|||
Given css string or objectArray, parses it and then for every selector, |
|||
prepends this.cssPreviewNamespace to prevent css collision issues |
|||
|
|||
@returns css string in which this.cssPreviewNamespace prepended |
|||
*/ |
|||
fi.prototype.applyNamespacing = function (css, forcedNamespace) { |
|||
var cssObjectArray = css; |
|||
var namespaceClass = '.' + this.cssPreviewNamespace; |
|||
if (forcedNamespace !== undefined) { |
|||
namespaceClass = forcedNamespace; |
|||
} |
|||
|
|||
if (typeof css === 'string') { |
|||
cssObjectArray = this.parseCSS(css); |
|||
} |
|||
|
|||
for (var i = 0; i < cssObjectArray.length; i++) { |
|||
var obj = cssObjectArray[i]; |
|||
|
|||
//bypass namespacing for @font-face @keyframes @import
|
|||
if (obj.selector.indexOf('@font-face') > -1 || obj.selector.indexOf('keyframes') > -1 || obj.selector.indexOf('@import') > -1 || obj.selector.indexOf('.form-all') > -1 || obj.selector.indexOf('#stage') > -1) { |
|||
continue; |
|||
} |
|||
|
|||
if (obj.type !== 'media') { |
|||
var selector = obj.selector.split(','); |
|||
var newSelector = []; |
|||
for (var j = 0; j < selector.length; j++) { |
|||
if (selector[j].indexOf('.supernova') === -1) { //do not apply namespacing to selectors including supernova
|
|||
newSelector.push(namespaceClass + ' ' + selector[j]); |
|||
} else { |
|||
newSelector.push(selector[j]); |
|||
} |
|||
} |
|||
obj.selector = newSelector.join(','); |
|||
} else { |
|||
obj.subStyles = this.applyNamespacing(obj.subStyles, forcedNamespace); //handle media queries as well
|
|||
} |
|||
} |
|||
|
|||
return cssObjectArray; |
|||
}; |
|||
|
|||
/* |
|||
given css string or object array, clears possible namespacing from |
|||
all of the selectors inside the css |
|||
*/ |
|||
fi.prototype.clearNamespacing = function (css, returnObj) { |
|||
if (returnObj === undefined) { |
|||
returnObj = false; |
|||
} |
|||
var cssObjectArray = css; |
|||
var namespaceClass = '.' + this.cssPreviewNamespace; |
|||
if (typeof css === 'string') { |
|||
cssObjectArray = this.parseCSS(css); |
|||
} |
|||
|
|||
for (var i = 0; i < cssObjectArray.length; i++) { |
|||
var obj = cssObjectArray[i]; |
|||
|
|||
if (obj.type !== 'media') { |
|||
var selector = obj.selector.split(','); |
|||
var newSelector = []; |
|||
for (var j = 0; j < selector.length; j++) { |
|||
newSelector.push(selector[j].split(namespaceClass + ' ').join('')); |
|||
} |
|||
obj.selector = newSelector.join(','); |
|||
} else { |
|||
obj.subStyles = this.clearNamespacing(obj.subStyles, true); //handle media queries as well
|
|||
} |
|||
} |
|||
if (returnObj === false) { |
|||
return this.getCSSForEditor(cssObjectArray); |
|||
} else { |
|||
return cssObjectArray; |
|||
} |
|||
|
|||
}; |
|||
|
|||
/* |
|||
creates a new style tag (also destroys the previous one) |
|||
and injects given css string into that css tag |
|||
*/ |
|||
fi.prototype.createStyleElement = function (id, css, format) { |
|||
if (format === undefined) { |
|||
format = false; |
|||
} |
|||
|
|||
if (this.testMode === false && format !== 'nonamespace') { |
|||
//apply namespacing classes
|
|||
css = this.applyNamespacing(css); |
|||
} |
|||
|
|||
if (typeof css != 'string') { |
|||
css = this.getCSSForEditor(css); |
|||
} |
|||
//apply formatting for css
|
|||
if (format === true) { |
|||
css = this.getCSSForEditor(this.parseCSS(css)); |
|||
} |
|||
|
|||
if (this.testMode !== false) { |
|||
return this.testMode('create style #' + id, css); //if test mode, just pass result to callback
|
|||
} |
|||
|
|||
var __el = document.getElementById(id); |
|||
if (__el) { |
|||
__el.parentNode.removeChild(__el); |
|||
} |
|||
|
|||
var head = document.head || document.getElementsByTagName('head')[0], |
|||
style = document.createElement('style'); |
|||
|
|||
style.id = id; |
|||
style.type = 'text/css'; |
|||
|
|||
head.appendChild(style); |
|||
|
|||
if (style.styleSheet && !style.sheet) { |
|||
style.styleSheet.cssText = css; |
|||
} else { |
|||
style.appendChild(document.createTextNode(css)); |
|||
} |
|||
}; |
|||
|
|||
export default fi; |
|||
|
|||
/* eslint-enable */ |
|||
@ -0,0 +1,83 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Injectable, Inject } from '@angular/core'; |
|||
import { DOCUMENT } from '@angular/common'; |
|||
import { ReplaySubject, Observable, throwError } from 'rxjs'; |
|||
|
|||
@Injectable({ |
|||
providedIn: 'root' |
|||
}) |
|||
export class ResourcesService { |
|||
|
|||
private loadedResources: { [url: string]: ReplaySubject<any> } = {}; |
|||
|
|||
private anchor = this.document.getElementsByTagName('head')[0] || this.document.getElementsByTagName('body')[0]; |
|||
|
|||
constructor(@Inject(DOCUMENT) private readonly document: any) {} |
|||
|
|||
public loadResource(url: string): Observable<any> { |
|||
if (this.loadedResources[url]) { |
|||
return this.loadedResources[url].asObservable(); |
|||
} |
|||
|
|||
let fileType; |
|||
const match = /[.](css|less|html|htm|js)?((\?|#).*)?$/.exec(url); |
|||
if (match !== null) { |
|||
fileType = match[1]; |
|||
} |
|||
if (!fileType) { |
|||
return throwError(new Error(`Unable to detect file type from url: ${url}`)); |
|||
} else if (fileType !== 'css' && fileType !== 'js') { |
|||
return throwError(new Error(`Unsupported file type: ${fileType}`)); |
|||
} |
|||
return this.loadResourceByType(fileType, url); |
|||
} |
|||
|
|||
private loadResourceByType(type: 'css' | 'js', url: string): Observable<any> { |
|||
const subject = new ReplaySubject(); |
|||
this.loadedResources[url] = subject; |
|||
let el; |
|||
let loaded = false; |
|||
switch (type) { |
|||
case 'js': |
|||
el = this.document.createElement('script'); |
|||
el.type = 'text/javascript'; |
|||
el.async = true; |
|||
el.src = url; |
|||
break; |
|||
case 'css': |
|||
el = this.document.createElement('link'); |
|||
el.type = 'text/css'; |
|||
el.rel = 'stylesheet'; |
|||
el.href = url; |
|||
break; |
|||
} |
|||
el.onload = el.onreadystatechange = (e) => { |
|||
if (el.readyState && !/^c|loade/.test(el.readyState) || loaded) { return; } |
|||
el.onload = el.onreadystatechange = null; |
|||
loaded = true; |
|||
this.loadedResources[url].next(); |
|||
this.loadedResources[url].complete(); |
|||
}; |
|||
el.onerror = () => { |
|||
this.loadedResources[url].error(new Error(`Unable to load ${url}`)); |
|||
delete this.loadedResources[url]; |
|||
}; |
|||
this.anchor.appendChild(el); |
|||
return subject.asObservable(); |
|||
} |
|||
} |
|||
@ -0,0 +1,116 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Inject, Injectable } from '@angular/core'; |
|||
import { WINDOW } from '@core/services/window.service'; |
|||
import { WidgetInfo } from '@shared/models/widget.models'; |
|||
import { ExceptionData } from '@app/shared/models/error.models'; |
|||
import { isUndefined } from '@core/utils'; |
|||
import { WindowMessage } from '@shared/models/window-message.model'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
import { customTranslationsPrefix } from '@app/shared/models/constants'; |
|||
|
|||
@Injectable({ |
|||
providedIn: 'root' |
|||
}) |
|||
export class UtilsService { |
|||
|
|||
iframeMode = false; |
|||
widgetEditMode = false; |
|||
editWidgetInfo: WidgetInfo = null; |
|||
|
|||
constructor(@Inject(WINDOW) private window: Window, |
|||
private translate: TranslateService) { |
|||
let frame: Element = null; |
|||
try { |
|||
frame = window.frameElement; |
|||
} catch (e) { |
|||
// ie11 fix
|
|||
} |
|||
if (frame) { |
|||
this.iframeMode = true; |
|||
const dataWidgetAttr = frame.getAttribute('data-widget'); |
|||
if (dataWidgetAttr && dataWidgetAttr.length) { |
|||
this.editWidgetInfo = JSON.parse(dataWidgetAttr); |
|||
this.widgetEditMode = true; |
|||
} |
|||
} |
|||
} |
|||
|
|||
public processWidgetException(exception: any): ExceptionData { |
|||
const data = this.parseException(exception, -5); |
|||
if (this.widgetEditMode) { |
|||
const message: WindowMessage = { |
|||
type: 'widgetException', |
|||
data |
|||
}; |
|||
this.window.parent.postMessage(message, '*'); |
|||
} |
|||
return data; |
|||
} |
|||
|
|||
public parseException(exception: any, lineOffset?: number): ExceptionData { |
|||
const data: ExceptionData = {}; |
|||
if (exception) { |
|||
if (typeof exception === 'string') { |
|||
data.message = exception; |
|||
} else if (exception instanceof String) { |
|||
data.message = exception.toString(); |
|||
} else { |
|||
if (exception.name) { |
|||
data.name = exception.name; |
|||
} else { |
|||
data.name = 'UnknownError'; |
|||
} |
|||
if (exception.message) { |
|||
data.message = exception.message; |
|||
} |
|||
if (exception.lineNumber) { |
|||
data.lineNumber = exception.lineNumber; |
|||
if (exception.columnNumber) { |
|||
data.columnNumber = exception.columnNumber; |
|||
} |
|||
} else if (exception.stack) { |
|||
const lineInfoRegexp = /(.*<anonymous>):(\d*)(:)?(\d*)?/g; |
|||
const lineInfoGroups = lineInfoRegexp.exec(exception.stack); |
|||
if (lineInfoGroups != null && lineInfoGroups.length >= 3) { |
|||
if (isUndefined(lineOffset)) { |
|||
lineOffset = -2; |
|||
} |
|||
data.lineNumber = Number(lineInfoGroups[2]) + lineOffset; |
|||
if (lineInfoGroups.length >= 5) { |
|||
data.columnNumber = Number(lineInfoGroups[4]); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
return data; |
|||
} |
|||
|
|||
public customTranslation(translationValue: string, defaultValue: string): string { |
|||
let result = ''; |
|||
const translationId = customTranslationsPrefix + translationValue; |
|||
const translation = this.translate.instant(translationId); |
|||
if (translation !== translationId) { |
|||
result = translation + ''; |
|||
} else { |
|||
result = defaultValue; |
|||
} |
|||
return result; |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,100 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { |
|||
Compiler, |
|||
Component, |
|||
ComponentFactory, |
|||
Injectable, |
|||
Injector, |
|||
NgModule, |
|||
NgModuleRef, |
|||
Type, |
|||
ViewEncapsulation |
|||
} from '@angular/core'; |
|||
import { |
|||
DynamicWidgetComponent, |
|||
DynamicWidgetComponentModule |
|||
} from '@home/components/widget/dynamic-widget.component'; |
|||
import { CommonModule } from '@angular/common'; |
|||
import { SharedModule } from '@shared/shared.module'; |
|||
import { Observable, ReplaySubject } from 'rxjs'; |
|||
import { HomeComponentsModule } from '../home-components.module'; |
|||
import { WidgetComponentsModule } from './widget-components.module'; |
|||
|
|||
interface DynamicWidgetComponentModuleData { |
|||
moduleRef: NgModuleRef<DynamicWidgetComponentModule>; |
|||
moduleType: Type<DynamicWidgetComponentModule>; |
|||
} |
|||
|
|||
@Injectable() |
|||
export class DynamicWidgetComponentFactoryService { |
|||
|
|||
private dynamicComponentModulesMap = new Map<ComponentFactory<DynamicWidgetComponent>, DynamicWidgetComponentModuleData>(); |
|||
|
|||
constructor(private compiler: Compiler, |
|||
private injector: Injector) { |
|||
} |
|||
|
|||
public createDynamicWidgetComponentFactory(template: string): Observable<ComponentFactory<DynamicWidgetComponent>> { |
|||
const dymamicWidgetComponentFactorySubject = new ReplaySubject<ComponentFactory<DynamicWidgetComponent>>(); |
|||
const comp = this.createDynamicWidgetComponent(template); |
|||
// noinspection AngularInvalidImportedOrDeclaredSymbol,AngularInvalidEntryComponent
|
|||
@NgModule({ |
|||
declarations: [comp], |
|||
entryComponents: [comp], |
|||
imports: [CommonModule, SharedModule, WidgetComponentsModule], |
|||
}) |
|||
class DynamicWidgetComponentInstanceModule extends DynamicWidgetComponentModule {} |
|||
this.compiler.compileModuleAsync(DynamicWidgetComponentInstanceModule).then( |
|||
(module) => { |
|||
const moduleRef = module.create(this.injector); |
|||
const factory = moduleRef.componentFactoryResolver.resolveComponentFactory(comp); |
|||
this.dynamicComponentModulesMap.set(factory, { |
|||
moduleRef, |
|||
moduleType: module.moduleType |
|||
}); |
|||
dymamicWidgetComponentFactorySubject.next(factory); |
|||
dymamicWidgetComponentFactorySubject.complete(); |
|||
} |
|||
).catch( |
|||
(e) => { |
|||
dymamicWidgetComponentFactorySubject.error(`Failed to create dynamic widget component factory: ${e}`); |
|||
} |
|||
); |
|||
return dymamicWidgetComponentFactorySubject.asObservable(); |
|||
} |
|||
|
|||
public destroyDynamicWidgetComponentFactory(factory: ComponentFactory<DynamicWidgetComponent>) { |
|||
const moduleData = this.dynamicComponentModulesMap.get(factory); |
|||
if (moduleData) { |
|||
moduleData.moduleRef.destroy(); |
|||
this.compiler.clearCacheFor(moduleData.moduleType); |
|||
this.dynamicComponentModulesMap.delete(factory); |
|||
} |
|||
} |
|||
|
|||
private createDynamicWidgetComponent(template: string): Type<DynamicWidgetComponent> { |
|||
// noinspection AngularMissingOrInvalidDeclarationInModule
|
|||
@Component({ |
|||
template |
|||
}) |
|||
class DynamicWidgetInstanceComponent extends DynamicWidgetComponent { } |
|||
|
|||
return DynamicWidgetInstanceComponent; |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,63 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { Input, OnDestroy, OnInit } from '@angular/core'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { WidgetContext, IDynamicWidgetComponent } from '@home/models/widget-component.models'; |
|||
import { ExceptionData } from '@shared/models/error.models'; |
|||
|
|||
export abstract class DynamicWidgetComponentModule implements OnDestroy { |
|||
|
|||
ngOnDestroy(): void { |
|||
console.log('Module destroyed!'); |
|||
} |
|||
|
|||
} |
|||
|
|||
export abstract class DynamicWidgetComponent extends PageComponent implements IDynamicWidgetComponent, OnInit, OnDestroy { |
|||
|
|||
@Input() |
|||
widgetContext: WidgetContext; |
|||
|
|||
@Input() |
|||
widgetErrorData: ExceptionData; |
|||
|
|||
@Input() |
|||
loadingData: boolean; |
|||
|
|||
[key: string]: any; |
|||
|
|||
constructor(protected store: Store<AppState>) { |
|||
super(store); |
|||
} |
|||
|
|||
ngOnInit() { |
|||
|
|||
} |
|||
|
|||
ngOnDestroy(): void { |
|||
console.log('Component destroyed!'); |
|||
} |
|||
|
|||
clearRpcError() { |
|||
if (this.widgetContext.defaultSubscription) { |
|||
this.widgetContext.defaultSubscription.clearRpcError(); |
|||
} |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,42 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2019 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<table class="tb-legend"> |
|||
<thead> |
|||
<tr class="tb-legend-header" *ngIf="!isRowDirection"> |
|||
<th colspan="2"></th> |
|||
<th *ngIf="legendConfig.showMin === true">{{ 'legend.min' | translate }}</th> |
|||
<th *ngIf="legendConfig.showMax === true">{{ 'legend.max' | translate }}</th> |
|||
<th *ngIf="legendConfig.showAvg === true">{{ 'legend.avg' | translate }}</th> |
|||
<th *ngIf="legendConfig.showTotal === true">{{ 'legend.total' | translate }}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr class="tb-legend-keys" *ngFor="let legendKey of legendData.keys" [ngClass]="{ 'tb-row-direction': isRowDirection }"> |
|||
<td><span class="tb-legend-line" [ngStyle]="{backgroundColor: legendKey.dataKey.color}"></span></td> |
|||
<td class="tb-legend-label" |
|||
(click)="toggleHideData(legendKey.dataIndex)" |
|||
[ngClass]="{ 'tb-hidden-label': legendData.keys[legendKey.dataIndex].dataKey.hidden, 'tb-horizontal': isHorizontal }"> |
|||
{{ legendKey.dataKey.label }} |
|||
</td> |
|||
<td class="tb-legend-value" *ngIf="legendConfig.showMin === true">{{ legendData.data[legendKey.dataIndex].min }}</td> |
|||
<td class="tb-legend-value" *ngIf="legendConfig.showMax === true">{{ legendData.data[legendKey.dataIndex].max }}</td> |
|||
<td class="tb-legend-value" *ngIf="legendConfig.showAvg === true">{{ legendData.data[legendKey.dataIndex].avg }}</td> |
|||
<td class="tb-legend-value" *ngIf="legendConfig.showTotal === true">{{ legendData.data[legendKey.dataIndex].total }}</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
@ -0,0 +1,68 @@ |
|||
/** |
|||
* Copyright © 2016-2019 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
|
|||
:host { |
|||
table.tb-legend { |
|||
width: 100%; |
|||
font-size: 12px; |
|||
|
|||
.tb-legend-header, |
|||
.tb-legend-value { |
|||
text-align: right; |
|||
} |
|||
|
|||
.tb-legend-header { |
|||
th { |
|||
padding: 0 10px 1px 0; |
|||
color: rgb(255, 110, 64); |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
|
|||
.tb-legend-keys { |
|||
td.tb-legend-label, |
|||
td.tb-legend-value { |
|||
padding: 2px 10px; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.tb-legend-line { |
|||
display: inline-block; |
|||
width: 15px; |
|||
height: 3px; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
.tb-legend-label { |
|||
text-align: left; |
|||
outline: none; |
|||
|
|||
&.tb-horizontal { |
|||
width: 95%; |
|||
} |
|||
|
|||
&.tb-hidden-label { |
|||
text-decoration: line-through; |
|||
opacity: .6; |
|||
} |
|||
} |
|||
|
|||
&.tb-row-direction { |
|||
display: inline-block; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,55 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component, Input, OnInit } from '@angular/core'; |
|||
import { LegendConfig, LegendData, LegendDirection, LegendPosition } from '@shared/models/widget.models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-legend', |
|||
templateUrl: './legend.component.html', |
|||
styleUrls: ['./legend.component.scss'] |
|||
}) |
|||
export class LegendComponent implements OnInit { |
|||
|
|||
@Input() |
|||
legendConfig: LegendConfig; |
|||
|
|||
@Input() |
|||
legendData: LegendData; |
|||
|
|||
displayHeader: boolean; |
|||
|
|||
isHorizontal: boolean; |
|||
|
|||
isRowDirection: boolean; |
|||
|
|||
ngOnInit(): void { |
|||
this.displayHeader = this.legendConfig.showMin === true || |
|||
this.legendConfig.showMax === true || |
|||
this.legendConfig.showAvg === true || |
|||
this.legendConfig.showTotal === true; |
|||
|
|||
this.isHorizontal = this.legendConfig.position === LegendPosition.bottom || |
|||
this.legendConfig.position === LegendPosition.top; |
|||
|
|||
this.isRowDirection = this.legendConfig.direction === LegendDirection.row; |
|||
} |
|||
|
|||
toggleHideData(index: number) { |
|||
this.legendData.keys[index].dataKey.hidden = !this.legendData.keys[index].dataKey.hidden; |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,38 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { NgModule } from '@angular/core'; |
|||
import { CommonModule } from '@angular/common'; |
|||
import { SharedModule } from '@app/shared/shared.module'; |
|||
import { AlarmDetailsDialogComponent } from '@home/components/alarm/alarm-details-dialog.component'; |
|||
import { LegendComponent } from '@home/components/widget/legend.component'; |
|||
|
|||
@NgModule({ |
|||
entryComponents: [ |
|||
], |
|||
declarations: |
|||
[ |
|||
LegendComponent |
|||
], |
|||
imports: [ |
|||
CommonModule, |
|||
SharedModule |
|||
], |
|||
exports: [ |
|||
LegendComponent |
|||
] |
|||
}) |
|||
export class WidgetComponentsModule { } |
|||
@ -0,0 +1,18 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2019 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<ng-container #widgetContent></ng-container> |
|||
@ -0,0 +1,47 @@ |
|||
/** |
|||
* Copyright © 2016-2019 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
|
|||
.tb-widget { |
|||
.tb-widget-error { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: rgba(255, 255, 255, .5); |
|||
|
|||
span { |
|||
color: #f00; |
|||
} |
|||
} |
|||
|
|||
.tb-widget-loading { |
|||
z-index: 3; |
|||
background: rgba(255, 255, 255, .15); |
|||
} |
|||
|
|||
.tb-widget-error-container { |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.tb-widget-error-msg { |
|||
padding: 5px; |
|||
font-size: 16px; |
|||
color: #f00; |
|||
word-wrap: break-word; |
|||
} |
|||
} |
|||
@ -0,0 +1,758 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { |
|||
AfterViewInit, |
|||
Component, |
|||
ComponentFactory, |
|||
ComponentFactoryResolver, |
|||
ComponentRef, |
|||
ElementRef, |
|||
Injector, |
|||
Input, |
|||
OnChanges, |
|||
OnDestroy, |
|||
OnInit, |
|||
SimpleChanges, |
|||
ViewChild, |
|||
ViewContainerRef, |
|||
ViewEncapsulation |
|||
} from '@angular/core'; |
|||
import { DashboardWidget, IDashboardComponent } from '@home/models/dashboard-component.models'; |
|||
import { |
|||
LegendConfig, |
|||
LegendData, |
|||
LegendPosition, |
|||
Widget, |
|||
WidgetActionDescriptor, |
|||
WidgetActionType, |
|||
WidgetInfo, WidgetResource, |
|||
widgetType, |
|||
WidgetTypeInstance, |
|||
widgetActionSources |
|||
} from '@shared/models/widget.models'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { WidgetService } from '@core/http/widget.service'; |
|||
import { UtilsService } from '@core/services/utils.service'; |
|||
import { DynamicWidgetComponent } from '@home/components/widget/dynamic-widget.component'; |
|||
import { forkJoin, Observable, of, ReplaySubject, throwError } from 'rxjs'; |
|||
import { DynamicWidgetComponentFactoryService } from '@home/components/widget/dynamic-widget-component-factory.service'; |
|||
import { isDefined, objToBase64 } from '@core/utils'; |
|||
import * as $ from 'jquery'; |
|||
import { WidgetContext, WidgetHeaderAction } from '@home/models/widget-component.models'; |
|||
import { |
|||
EntityInfo, |
|||
IWidgetSubscription, |
|||
SubscriptionInfo, |
|||
WidgetSubscriptionOptions, |
|||
StateObject, |
|||
StateParams, |
|||
WidgetSubscriptionContext |
|||
} from '@core/api/widget-api.models'; |
|||
import { EntityId } from '@shared/models/id/entity-id'; |
|||
import { ActivatedRoute, Router, UrlSegment } from '@angular/router'; |
|||
import cssjs from '@core/css/css'; |
|||
import { ResourcesService } from '@core/services/resources.service'; |
|||
import { catchError, switchMap } from 'rxjs/operators'; |
|||
import { ActionNotificationShow } from '@core/notification/notification.actions'; |
|||
import { TimeService } from '@core/services/time.service'; |
|||
import { DeviceService } from '@app/core/http/device.service'; |
|||
import { AlarmService } from '@app/core/http/alarm.service'; |
|||
import { ExceptionData } from '@shared/models/error.models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-widget', |
|||
templateUrl: './widget.component.html', |
|||
styleUrls: ['./widget.component.scss'], |
|||
encapsulation: ViewEncapsulation.None |
|||
}) |
|||
export class WidgetComponent extends PageComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy { |
|||
|
|||
@Input() |
|||
isEdit: boolean; |
|||
|
|||
@Input() |
|||
isMobile: boolean; |
|||
|
|||
@Input() |
|||
dashboard: IDashboardComponent; |
|||
|
|||
@Input() |
|||
dashboardWidget: DashboardWidget; |
|||
|
|||
@ViewChild('widgetContent', {read: ViewContainerRef, static: true}) widgetContentContainer: ViewContainerRef; |
|||
|
|||
widget: Widget; |
|||
widgetInfo: WidgetInfo; |
|||
widgetContext: WidgetContext; |
|||
widgetType: any; |
|||
widgetTypeInstance: WidgetTypeInstance; |
|||
widgetErrorData: ExceptionData; |
|||
|
|||
dynamicWidgetComponentFactory: ComponentFactory<DynamicWidgetComponent>; |
|||
dynamicWidgetComponentRef: ComponentRef<DynamicWidgetComponent>; |
|||
dynamicWidgetComponent: DynamicWidgetComponent; |
|||
|
|||
subscriptionContext: WidgetSubscriptionContext; |
|||
|
|||
subscriptionInited = false; |
|||
widgetSizeDetected = false; |
|||
|
|||
onResizeListener = this.onResize.bind(this); |
|||
|
|||
private cssParser = new cssjs(); |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private route: ActivatedRoute, |
|||
private router: Router, |
|||
private dynamicWidgetComponentFactoryService: DynamicWidgetComponentFactoryService, |
|||
private componentFactoryResolver: ComponentFactoryResolver, |
|||
private elementRef: ElementRef, |
|||
private injector: Injector, |
|||
private widgetService: WidgetService, |
|||
private resources: ResourcesService, |
|||
private timeService: TimeService, |
|||
private deviceService: DeviceService, |
|||
private alarmService: AlarmService, |
|||
private utils: UtilsService) { |
|||
super(store); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.widget = this.dashboardWidget.widget; |
|||
|
|||
const actionDescriptorsBySourceId: {[actionSourceId: string]: Array<WidgetActionDescriptor>} = {}; |
|||
if (this.widget.config.actions) { |
|||
for (const actionSourceId of Object.keys(this.widget.config.actions)) { |
|||
const descriptors = this.widget.config.actions[actionSourceId]; |
|||
const actionDescriptors: Array<WidgetActionDescriptor> = []; |
|||
descriptors.forEach((descriptor) => { |
|||
const actionDescriptor: WidgetActionDescriptor = {...descriptor}; |
|||
actionDescriptor.displayName = this.utils.customTranslation(descriptor.name, descriptor.name); |
|||
actionDescriptors.push(actionDescriptor); |
|||
}); |
|||
actionDescriptorsBySourceId[actionSourceId] = actionDescriptors; |
|||
} |
|||
} |
|||
|
|||
this.widgetContext = this.dashboardWidget.widgetContext; |
|||
this.widgetContext.inited = false; |
|||
this.widgetContext.hideTitlePanel = false; |
|||
this.widgetContext.isEdit = this.isEdit; |
|||
this.widgetContext.isMobile = this.isMobile; |
|||
this.widgetContext.dashboard = this.dashboard; |
|||
this.widgetContext.widgetConfig = this.widget.config; |
|||
this.widgetContext.settings = this.widget.config.settings; |
|||
this.widgetContext.units = this.widget.config.units || ''; |
|||
this.widgetContext.decimals = isDefined(this.widget.config.decimals) ? this.widget.config.decimals : 2; |
|||
this.widgetContext.subscriptions = {}; |
|||
this.widgetContext.defaultSubscription = null; |
|||
this.widgetContext.dashboardTimewindow = this.dashboard.dashboardTimewindow; |
|||
this.widgetContext.timewindowFunctions = { |
|||
onUpdateTimewindow: (startTimeMs, endTimeMs, interval) => { |
|||
if (this.widgetContext.defaultSubscription) { |
|||
this.widgetContext.defaultSubscription.onUpdateTimewindow(startTimeMs, endTimeMs, interval); |
|||
} |
|||
}, |
|||
onResetTimewindow: () => { |
|||
if (this.widgetContext.defaultSubscription) { |
|||
this.widgetContext.defaultSubscription.onResetTimewindow(); |
|||
} |
|||
} |
|||
}; |
|||
this.widgetContext.subscriptionApi = { |
|||
createSubscription: this.createSubscription.bind(this), |
|||
createSubscriptionFromInfo: this.createSubscriptionFromInfo.bind(this), |
|||
removeSubscription: (id) => { |
|||
const subscription = this.widgetContext.subscriptions[id]; |
|||
if (subscription) { |
|||
subscription.destroy(); |
|||
delete this.widgetContext.subscriptions[id]; |
|||
} |
|||
} |
|||
}; |
|||
this.widgetContext.controlApi = { |
|||
sendOneWayCommand: (method, params, timeout) => { |
|||
if (this.widgetContext.defaultSubscription) { |
|||
return this.widgetContext.defaultSubscription.sendOneWayCommand(method, params, timeout); |
|||
} else { |
|||
return of(null); |
|||
} |
|||
}, |
|||
sendTwoWayCommand: (method, params, timeout) => { |
|||
if (this.widgetContext.defaultSubscription) { |
|||
return this.widgetContext.defaultSubscription.sendTwoWayCommand(method, params, timeout); |
|||
} else { |
|||
return of(null); |
|||
} |
|||
} |
|||
}; |
|||
this.widgetContext.utils = { |
|||
formatValue: this.formatValue |
|||
}; |
|||
this.widgetContext.actionsApi = { |
|||
actionDescriptorsBySourceId, |
|||
getActionDescriptors: this.getActionDescriptors.bind(this), |
|||
handleWidgetAction: this.handleWidgetAction.bind(this), |
|||
elementClick: this.elementClick.bind(this) |
|||
}; |
|||
this.widgetContext.stateController = this.dashboard.stateController; |
|||
this.widgetContext.aliasController = this.dashboard.aliasController; |
|||
|
|||
this.widgetContext.customHeaderActions = []; |
|||
const headerActionsDescriptors = this.getActionDescriptors(widgetActionSources.headerButton.value); |
|||
headerActionsDescriptors.forEach((descriptor) => { |
|||
const headerAction: WidgetHeaderAction = { |
|||
name: descriptor.name, |
|||
displayName: descriptor.displayName, |
|||
icon: descriptor.icon, |
|||
descriptor, |
|||
onAction: $event => { |
|||
const entityInfo = this.getActiveEntityInfo(); |
|||
const entityId = entityInfo ? entityInfo.entityId : null; |
|||
const entityName = entityInfo ? entityInfo.entityName : null; |
|||
this.handleWidgetAction($event, descriptor, entityId, entityName); |
|||
} |
|||
}; |
|||
this.widgetContext.customHeaderActions.push(headerAction); |
|||
}); |
|||
|
|||
|
|||
this.subscriptionContext = { |
|||
timeService: this.timeService, |
|||
deviceService: this.deviceService, |
|||
alarmService: this.alarmService, |
|||
utils: this.utils, |
|||
widgetUtils: this.widgetContext.utils, |
|||
dashboardTimewindowApi: null, // TODO:
|
|||
getServerTimeDiff: null, // TODO:
|
|||
aliasController: this.dashboard.aliasController |
|||
}; |
|||
|
|||
this.widgetService.getWidgetInfo(this.widget.bundleAlias, this.widget.typeAlias, this.widget.isSystemType).subscribe( |
|||
(widgetInfo) => { |
|||
this.widgetInfo = widgetInfo; |
|||
this.loadFromWidgetInfo(); |
|||
} |
|||
); |
|||
|
|||
} |
|||
|
|||
ngAfterViewInit(): void { |
|||
} |
|||
|
|||
ngOnDestroy(): void { |
|||
|
|||
for (const id of Object.keys(this.widgetContext.subscriptions)) { |
|||
const subscription = this.widgetContext.subscriptions[id]; |
|||
subscription.destroy(); |
|||
} |
|||
this.subscriptionInited = false; |
|||
this.widgetContext.subscriptions = {}; |
|||
if (this.widgetContext.inited) { |
|||
this.widgetContext.inited = false; |
|||
// TODO:
|
|||
try { |
|||
this.widgetTypeInstance.onDestroy(); |
|||
} catch (e) { |
|||
this.handleWidgetException(e); |
|||
} |
|||
} |
|||
this.destroyDynamicWidgetComponent(); |
|||
} |
|||
|
|||
ngOnChanges(changes: SimpleChanges): void { |
|||
for (const propName of Object.keys(changes)) { |
|||
const change = changes[propName]; |
|||
if (!change.firstChange && change.currentValue !== change.previousValue) { |
|||
if (propName === 'isEdit') { |
|||
console.log(`isEdit changed: ${this.isEdit}`); |
|||
this.onEditModeChanged(); |
|||
} else if (propName === 'isMobile') { |
|||
console.log(`isMobile changed: ${this.isMobile}`); |
|||
this.onMobileModeChanged(); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
private onEditModeChanged() { |
|||
if (this.widgetContext.isEdit !== this.isEdit) { |
|||
this.widgetContext.isEdit = this.isEdit; |
|||
if (this.widgetContext.inited) { |
|||
// TODO:
|
|||
} |
|||
} |
|||
} |
|||
|
|||
private onMobileModeChanged() { |
|||
if (this.widgetContext.isMobile !== this.isMobile) { |
|||
this.widgetContext.isMobile = this.isMobile; |
|||
if (this.widgetContext.inited) { |
|||
// TODO:
|
|||
} |
|||
} |
|||
} |
|||
|
|||
private onResize() { |
|||
if (this.checkSize()) { |
|||
if (this.widgetContext.inited) { |
|||
// TODO:
|
|||
} |
|||
} |
|||
} |
|||
|
|||
private loadFromWidgetInfo() { |
|||
const widgetNamespace = `widget-type-${(this.widget.isSystemType ? 'sys-' : '')}${this.widget.bundleAlias}-${this.widget.typeAlias}`; |
|||
const elem = this.elementRef.nativeElement; |
|||
elem.classList.add('tb-widget'); |
|||
elem.classList.add(widgetNamespace); |
|||
this.widgetType = this.widgetInfo.widgetTypeFunction; |
|||
|
|||
if (!this.widgetType) { |
|||
this.widgetTypeInstance = {}; |
|||
} else { |
|||
try { |
|||
this.widgetTypeInstance = new this.widgetType(this.widgetContext); |
|||
} catch (e) { |
|||
this.handleWidgetException(e); |
|||
this.widgetTypeInstance = {}; |
|||
} |
|||
} |
|||
if (!this.widgetTypeInstance.onInit) { |
|||
this.widgetTypeInstance.onInit = () => {}; |
|||
} |
|||
if (!this.widgetTypeInstance.onDataUpdated) { |
|||
this.widgetTypeInstance.onDataUpdated = () => {}; |
|||
} |
|||
if (!this.widgetTypeInstance.onResize) { |
|||
this.widgetTypeInstance.onResize = () => {}; |
|||
} |
|||
if (!this.widgetTypeInstance.onEditModeChanged) { |
|||
this.widgetTypeInstance.onEditModeChanged = () => {}; |
|||
} |
|||
if (!this.widgetTypeInstance.onMobileModeChanged) { |
|||
this.widgetTypeInstance.onMobileModeChanged = () => {}; |
|||
} |
|||
if (!this.widgetTypeInstance.onDestroy) { |
|||
this.widgetTypeInstance.onDestroy = () => {}; |
|||
} |
|||
|
|||
this.initialize(); |
|||
} |
|||
|
|||
private reInit() { |
|||
this.ngOnDestroy(); |
|||
this.initialize(); |
|||
// TODO:
|
|||
} |
|||
|
|||
private initialize() { |
|||
this.configureDynamicWidgetComponent().subscribe( |
|||
() => { |
|||
this.dynamicWidgetComponent.loadingData = false; |
|||
}, |
|||
(error) => { |
|||
// TODO:
|
|||
} |
|||
); |
|||
} |
|||
|
|||
private destroyDynamicWidgetComponent() { |
|||
if (this.widgetContext.$containerParent) { |
|||
// @ts-ignore
|
|||
removeResizeListener(this.widgetContext.$containerParent[0], this.onResizeListener); |
|||
} |
|||
if (this.dynamicWidgetComponentRef) { |
|||
this.dynamicWidgetComponentRef.destroy(); |
|||
} |
|||
if (this.dynamicWidgetComponentFactory) { |
|||
this.dynamicWidgetComponentFactoryService.destroyDynamicWidgetComponentFactory(this.dynamicWidgetComponentFactory); |
|||
} |
|||
} |
|||
|
|||
private handleWidgetException(e) { |
|||
console.error(e); |
|||
this.widgetErrorData = this.utils.processWidgetException(e); |
|||
if (this.dynamicWidgetComponent) { |
|||
this.dynamicWidgetComponent.widgetErrorData = this.widgetErrorData; |
|||
} |
|||
} |
|||
|
|||
private configureDynamicWidgetComponent(): Observable<any> { |
|||
|
|||
const dynamicWidgetComponentSubject = new ReplaySubject(); |
|||
|
|||
let html = '<div class="tb-absolute-fill tb-widget-error" *ngIf="widgetErrorData">' + |
|||
'<span>Widget Error: {{ widgetErrorData.name + ": " + widgetErrorData.message}}</span>' + |
|||
'</div>' + |
|||
'<div class="tb-absolute-fill tb-widget-loading" [fxShow]="loadingData" fxLayout="column" fxLayoutAlign="center center">' + |
|||
'<mat-spinner color="accent" md-mode="indeterminate" diameter="40"></mat-spinner>' + |
|||
'</div>'; |
|||
|
|||
let containerHtml = `<div id="container">${this.widgetInfo.templateHtml}</div>`; |
|||
|
|||
const displayLegend = isDefined(this.widget.config.showLegend) ? this.widget.config.showLegend |
|||
: this.widget.type === widgetType.timeseries; |
|||
|
|||
let legendConfig: LegendConfig; |
|||
let legendData: LegendData; |
|||
if (displayLegend) { |
|||
legendConfig = this.widget.config.legendConfig || |
|||
{ |
|||
position: LegendPosition.bottom, |
|||
showMin: false, |
|||
showMax: false, |
|||
showAvg: this.widget.type === widgetType.timeseries, |
|||
showTotal: false |
|||
}; |
|||
legendData = { |
|||
keys: [], |
|||
data: [] |
|||
}; |
|||
let layoutType; |
|||
if (legendConfig.position === LegendPosition.top || |
|||
legendConfig.position === LegendPosition.bottom) { |
|||
layoutType = 'column'; |
|||
} else { |
|||
layoutType = 'row'; |
|||
} |
|||
let legendStyle; |
|||
switch (legendConfig.position) { |
|||
case LegendPosition.top: |
|||
legendStyle = 'padding-bottom: 8px; max-height: 50%; overflow-y: auto;'; |
|||
break; |
|||
case LegendPosition.bottom: |
|||
legendStyle = 'padding-top: 8px; max-height: 50%; overflow-y: auto;'; |
|||
break; |
|||
case LegendPosition.left: |
|||
legendStyle = 'padding-right: 0px; max-width: 50%; overflow-y: auto;'; |
|||
break; |
|||
case LegendPosition.right: |
|||
legendStyle = 'padding-left: 0px; max-width: 50%; overflow-y: auto;'; |
|||
break; |
|||
} |
|||
|
|||
const legendHtml = `<tb-legend style="${legendStyle}" [legendConfig]="legendConfig" [legendData]="legendData"></tb-legend>`; |
|||
containerHtml = `<div fxFlex id="widget-container">${containerHtml}</div>`; |
|||
html += `<div class="tb-absolute-fill" fxLayout="${layoutType}">`; |
|||
if (legendConfig.position === LegendPosition.top || |
|||
legendConfig.position === LegendPosition.left) { |
|||
html += legendHtml; |
|||
html += containerHtml; |
|||
} else { |
|||
html += containerHtml; |
|||
html += legendHtml; |
|||
} |
|||
html += '</div>'; |
|||
} else { |
|||
html += containerHtml; |
|||
} |
|||
|
|||
this.dynamicWidgetComponentFactoryService.createDynamicWidgetComponentFactory(html).subscribe( |
|||
(componentFactory) => { |
|||
this.dynamicWidgetComponentFactory = componentFactory; |
|||
this.widgetContentContainer.clear(); |
|||
this.dynamicWidgetComponentRef = this.widgetContentContainer.createComponent(this.dynamicWidgetComponentFactory); |
|||
this.dynamicWidgetComponent = this.dynamicWidgetComponentRef.instance; |
|||
|
|||
this.dynamicWidgetComponent.loadingData = true; |
|||
this.dynamicWidgetComponent.widgetContext = this.widgetContext; |
|||
this.dynamicWidgetComponent.widgetErrorData = this.widgetErrorData; |
|||
this.dynamicWidgetComponent.displayLegend = displayLegend; |
|||
this.dynamicWidgetComponent.legendConfig = legendConfig; |
|||
this.dynamicWidgetComponent.legendData = legendData; |
|||
|
|||
this.widgetContext.$scope = this.dynamicWidgetComponent; |
|||
|
|||
const containerElement = displayLegend ? $(this.elementRef.nativeElement.querySelector('#widget-container')) |
|||
: $(this.elementRef.nativeElement); |
|||
|
|||
this.widgetContext.$container = $('#container', containerElement); |
|||
this.widgetContext.$containerParent = $(containerElement); |
|||
|
|||
if (this.widgetSizeDetected) { |
|||
this.widgetContext.$container.css('height', this.widgetContext.height + 'px'); |
|||
this.widgetContext.$container.css('width', this.widgetContext.width + 'px'); |
|||
} |
|||
|
|||
// @ts-ignore
|
|||
addResizeListener(this.widgetContext.$containerParent[0], this.onResizeListener); |
|||
|
|||
dynamicWidgetComponentSubject.next(); |
|||
dynamicWidgetComponentSubject.complete(); |
|||
}, |
|||
(e) => { |
|||
dynamicWidgetComponentSubject.error(e); |
|||
} |
|||
); |
|||
return dynamicWidgetComponentSubject.asObservable(); |
|||
} |
|||
|
|||
private createSubscription(options: WidgetSubscriptionOptions, subscribe: boolean): Observable<IWidgetSubscription> { |
|||
// TODO:
|
|||
return of(null); |
|||
} |
|||
|
|||
private createSubscriptionFromInfo(type: widgetType, subscriptionsInfo: Array<SubscriptionInfo>, |
|||
options: WidgetSubscriptionOptions, useDefaultComponents: boolean, |
|||
subscribe: boolean): Observable<IWidgetSubscription> { |
|||
// TODO:
|
|||
return of(null); |
|||
} |
|||
|
|||
private isNumeric(value: any): boolean { |
|||
return (value - parseFloat( value ) + 1) >= 0; |
|||
} |
|||
|
|||
private formatValue(value: any, dec?: number, units?: string, showZeroDecimals?: boolean): string | undefined { |
|||
if (isDefined(value) && |
|||
value != null && this.isNumeric(value)) { |
|||
let formatted: string | number = Number(value); |
|||
if (isDefined(dec)) { |
|||
formatted = formatted.toFixed(dec); |
|||
} |
|||
if (!showZeroDecimals) { |
|||
formatted = (Number(formatted) * 1); |
|||
} |
|||
formatted = formatted.toString(); |
|||
if (isDefined(units) && units.length > 0) { |
|||
formatted += ' ' + units; |
|||
} |
|||
return formatted; |
|||
} else { |
|||
return value; |
|||
} |
|||
} |
|||
|
|||
private getActionDescriptors(actionSourceId: string): Array<WidgetActionDescriptor> { |
|||
let result = this.widgetContext.actionsApi.actionDescriptorsBySourceId[actionSourceId]; |
|||
if (!result) { |
|||
result = []; |
|||
} |
|||
return result; |
|||
} |
|||
|
|||
private handleWidgetAction($event: Event, descriptor: WidgetActionDescriptor, |
|||
entityId?: EntityId, entityName?: string, additionalParams?: any): void { |
|||
const type = descriptor.type; |
|||
const targetEntityParamName = descriptor.stateEntityParamName; |
|||
let targetEntityId: EntityId; |
|||
if (descriptor.setEntityId) { |
|||
targetEntityId = entityId; |
|||
} |
|||
switch (type) { |
|||
case WidgetActionType.openDashboardState: |
|||
case WidgetActionType.updateDashboardState: |
|||
let targetDashboardStateId = descriptor.targetDashboardStateId; |
|||
const params = {...this.widgetContext.stateController.getStateParams()}; |
|||
this.updateEntityParams(params, targetEntityParamName, targetEntityId, entityName); |
|||
if (type === WidgetActionType.openDashboardState) { |
|||
this.widgetContext.stateController.openState(targetDashboardStateId, params, descriptor.openRightLayout); |
|||
} else { |
|||
this.widgetContext.stateController.updateState(targetDashboardStateId, params, descriptor.openRightLayout); |
|||
} |
|||
break; |
|||
case WidgetActionType.openDashboard: |
|||
const targetDashboardId = descriptor.targetDashboardId; |
|||
targetDashboardStateId = descriptor.targetDashboardStateId; |
|||
const stateObject: StateObject = {}; |
|||
stateObject.params = {}; |
|||
this.updateEntityParams(stateObject.params, targetEntityParamName, targetEntityId, entityName); |
|||
if (targetDashboardStateId) { |
|||
stateObject.id = targetDashboardStateId; |
|||
} |
|||
const stateParams = { |
|||
dashboardId: targetDashboardId, |
|||
state: objToBase64([ stateObject ]) |
|||
}; |
|||
const state = objToBase64([ stateObject ]); |
|||
const currentUrl = this.route.snapshot.url; |
|||
let url; |
|||
if (currentUrl.length > 1) { |
|||
if (currentUrl[currentUrl.length - 2].path === 'dashboard') { |
|||
url = `/dashboard/${targetDashboardId}?state=${state}`; |
|||
} else { |
|||
url = `/dashboards/${targetDashboardId}?state=${state}`; |
|||
} |
|||
} |
|||
if (url) { |
|||
const urlTree = this.router.parseUrl(url); |
|||
this.router.navigateByUrl(url); |
|||
} |
|||
break; |
|||
case WidgetActionType.custom: |
|||
const customFunction = descriptor.customFunction; |
|||
if (isDefined(customFunction) && customFunction.length > 0) { |
|||
try { |
|||
if (!additionalParams) { |
|||
additionalParams = {}; |
|||
} |
|||
const customActionFunction = new Function('$event', 'widgetContext', 'entityId', |
|||
'entityName', 'additionalParams', customFunction); |
|||
customActionFunction($event, this.widgetContext, entityId, entityName, additionalParams); |
|||
} catch (e) { |
|||
//
|
|||
} |
|||
} |
|||
break; |
|||
case WidgetActionType.customPretty: |
|||
const customPrettyFunction = descriptor.customFunction; |
|||
const customHtml = descriptor.customHtml; |
|||
const customCss = descriptor.customCss; |
|||
const customResources = descriptor.customResources; |
|||
const actionNamespace = `custom-action-pretty-${descriptor.name.toLowerCase()}`; |
|||
let htmlTemplate = ''; |
|||
if (isDefined(customHtml) && customHtml.length > 0) { |
|||
htmlTemplate = customHtml; |
|||
} |
|||
this.loadCustomActionResources(actionNamespace, customCss, customResources).subscribe( |
|||
() => { |
|||
if (isDefined(customPrettyFunction) && customPrettyFunction.length > 0) { |
|||
try { |
|||
if (!additionalParams) { |
|||
additionalParams = {}; |
|||
} |
|||
const customActionPrettyFunction = new Function('$event', 'widgetContext', 'entityId', |
|||
'entityName', 'htmlTemplate', 'additionalParams', customPrettyFunction); |
|||
customActionPrettyFunction($event, this.widgetContext, entityId, entityName, htmlTemplate, additionalParams); |
|||
} catch (e) { |
|||
//
|
|||
} |
|||
} |
|||
}, |
|||
(errorMessages: string[]) => { |
|||
this.processResourcesLoadErrors(errorMessages); |
|||
} |
|||
); |
|||
break; |
|||
} |
|||
} |
|||
|
|||
private elementClick($event: Event) { |
|||
$event.stopPropagation(); |
|||
const e = ($event.target || $event.srcElement) as Element; |
|||
if (e.id) { |
|||
const descriptors = this.getActionDescriptors('elementClick'); |
|||
if (descriptors.length) { |
|||
descriptors.forEach((descriptor) => { |
|||
if (descriptor.name === e.id) { |
|||
const entityInfo = this.getActiveEntityInfo(); |
|||
const entityId = entityInfo ? entityInfo.entityId : null; |
|||
const entityName = entityInfo ? entityInfo.entityName : null; |
|||
this.handleWidgetAction(event, descriptor, entityId, entityName); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
|
|||
private updateEntityParams(params: StateParams, targetEntityParamName?: string, targetEntityId?: EntityId, entityName?: string) { |
|||
if (targetEntityId) { |
|||
let targetEntityParams: StateParams; |
|||
if (targetEntityParamName && targetEntityParamName.length) { |
|||
targetEntityParams = params[targetEntityParamName]; |
|||
if (!targetEntityParams) { |
|||
targetEntityParams = {}; |
|||
params[targetEntityParamName] = targetEntityParams; |
|||
params.targetEntityParamName = targetEntityParamName; |
|||
} |
|||
} else { |
|||
targetEntityParams = params; |
|||
} |
|||
targetEntityParams.entityId = targetEntityId; |
|||
if (entityName) { |
|||
targetEntityParams.entityName = entityName; |
|||
} |
|||
} |
|||
} |
|||
|
|||
private loadCustomActionResources(actionNamespace: string, customCss: string, customResources: Array<WidgetResource>): Observable<any> { |
|||
if (isDefined(customCss) && customCss.length > 0) { |
|||
this.cssParser.cssPreviewNamespace = actionNamespace; |
|||
this.cssParser.createStyleElement(actionNamespace, customCss, 'nonamespace'); |
|||
} |
|||
const resourceTasks: Observable<string>[] = []; |
|||
if (customResources.length > 0) { |
|||
customResources.forEach((resource) => { |
|||
resourceTasks.push( |
|||
this.resources.loadResource(resource.url).pipe( |
|||
catchError(e => of(`Failed to load custom action resource: '${resource.url}'`)) |
|||
) |
|||
); |
|||
}); |
|||
return forkJoin(resourceTasks).pipe( |
|||
switchMap(msgs => { |
|||
let errors: string[]; |
|||
if (msgs && msgs.length) { |
|||
errors = msgs.filter(msg => msg && msg.length > 0); |
|||
} |
|||
if (errors && errors.length) { |
|||
return throwError(errors); |
|||
} else { |
|||
return of(null); |
|||
} |
|||
} |
|||
)); |
|||
} else { |
|||
return of(null); |
|||
} |
|||
} |
|||
|
|||
private processResourcesLoadErrors(errorMessages: string[]) { |
|||
let messageToShow = ''; |
|||
errorMessages.forEach(error => { |
|||
messageToShow += `<div>${error}</div>`; |
|||
}); |
|||
this.store.dispatch(new ActionNotificationShow({message: messageToShow, type: 'error'})); |
|||
} |
|||
|
|||
private getActiveEntityInfo(): EntityInfo { |
|||
let entityInfo = this.widgetContext.activeEntityInfo; |
|||
if (!entityInfo) { |
|||
for (const id of Object.keys(this.widgetContext.subscriptions)) { |
|||
const subscription = this.widgetContext.subscriptions[id]; |
|||
entityInfo = subscription.getFirstEntityInfo(); |
|||
if (entityInfo) { |
|||
break; |
|||
} |
|||
} |
|||
} |
|||
return entityInfo; |
|||
} |
|||
|
|||
private checkSize(): boolean { |
|||
const width = this.widgetContext.$containerParent.width(); |
|||
const height = this.widgetContext.$containerParent.height(); |
|||
let sizeChanged = false; |
|||
|
|||
if (!this.widgetContext.width || this.widgetContext.width !== width || |
|||
!this.widgetContext.height || this.widgetContext.height !== height) { |
|||
if (width > 0 && height > 0) { |
|||
this.widgetContext.$container.css('height', height + 'px'); |
|||
this.widgetContext.$container.css('width', width + 'px'); |
|||
this.widgetContext.width = width; |
|||
this.widgetContext.height = height; |
|||
sizeChanged = true; |
|||
this.widgetSizeDetected = true; |
|||
} |
|||
} |
|||
return sizeChanged; |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,23 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
|
|||
export interface ExceptionData { |
|||
message?: string; |
|||
name?: string; |
|||
lineNumber?: number; |
|||
columnNumber?: number; |
|||
} |
|||
@ -0,0 +1,22 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
export type WindowMessageType = 'widgetException'; |
|||
|
|||
export interface WindowMessage { |
|||
type: WindowMessageType; |
|||
data: any; |
|||
} |
|||
Loading…
Reference in new issue