def _js__builder__(self):
return '''
if (options.showUI){%(jqId)s.pivotUI(data, options)}
else {%(jqId)s.pivot(data, options)}
''' % {
"jqId": JsQuery.decorate_var("htmlObj", convert_var=False)
}
class ListTournaments(Html.Html):
name = 'Brackets'
requirements = ('jquery-bracket', )
_option_cls = OptList.OptionsListBrackets
def __init__(self, page: primitives.PageModel, records, width: tuple,
height: tuple, options: Optional[dict],
profile: Optional[Union[bool, dict]]):
super(ListTournaments, self).__init__(page,
records,
options=options,
profile=profile,
css_attrs={
"width": width,
"height": height
})
self.css({'overflow': 'auto', "padding": "auto", "margin": "auto"})
_js__builder__ = '''options.init = data; %(jqId)s.bracket(options)
''' % {
"jqId": JsQuery.decorate_var("htmlObj", convert_var=False)
}
def __str__(self):
self.page.properties.js.add_builders(self.refresh())
return "<div %s></div>" % self.get_attrs(
css_class_names=self.style.get_classes())
def var(self):
"""
Description:
-----------
Return the calendar javaScript object reference after the builder.
"""
return JsQuery.decorate_var("#%s" % self.htmlCode)
class PivotUITable(PivotTable):
_option_cls = OptTable.OptionsPivotUI
def __init__(self, page: primitives.PageModel, records, rows, cols, width,
height, html_code, helper, options, profile):
super(PivotUITable,
self).__init__(page, records or [], rows, cols, width, height,
html_code, helper, options, profile)
# to add all the columns in the table if nothing defined
self.options.cols = cols or []
self.options.rows = rows or []
@property
def options(self) -> OptTable.OptionsPivotUI:
"""
Description:
------------
Pivot Table options.
Usage::
:rtype: OptTable.OptionsPivotUI
"""
return super().options
_js__builder__ = '''
%(jqId)s.pivotUI(data, options)
''' % {
"jqId": JsQuery.decorate_var("htmlObj", convert_var=False)
}
class SliderDate(Slider):
name = "Slider Date"
def __init__(self, page: primitives.PageModel, number: Union[float, list], min_val: float, max_val: float,
width: Union[tuple, int], height: Union[tuple, int], helper: str, options: dict, html_code: str,
profile: Union[dict, bool]):
super(SliderDate, self).__init__(page, number, min_val, max_val, width, height, helper, options, html_code, profile)
self.options.min, self.options.max, self.options.step = min_val, max_val, 86400
_js__builder__ = '''
const minDt = new Date(options.min).getTime() / 1000;
const maxDt = new Date(options.max).getTime() / 1000;
options.min = minDt; options.max = maxDt;
options.value = new Date(data).getTime() / 1000;
%(jqId)s.slider(options).css(options.css)
''' % {"jqId": JsQuery.decorate_var("jQuery(htmlObj)", convert_var=False)}
@property
def dom(self) -> JsHtmlJqueryUI.JsHtmlSliderDate:
"""
Description:
-----------
The Javascript Dom object.
:rtype: JsHtmlJqueryUI.JsHtmlSliderDate
"""
if self._dom is None:
self._dom = JsHtmlJqueryUI.JsHtmlSliderDate(self, page=self.page)
return self._dom
class Lookup(Select):
requirements = ('bootstrap-select', )
def __init__(self, report, records, html_code, width, height, profile,
multiple, options):
super(Lookup, self).__init__(report, records, html_code, width, height,
profile, multiple, options)
self._jsStyles['lookups'] = records
_js__builder__ = '''
var selectObj = %s; selectObj.empty(); const lookupData = options.lookups[data];
if (typeof lookupData !== 'undefined') {
for (var idx in lookupData) {
const text = (typeof lookupData[idx].text !== 'undefined')? lookupData[idx].text : lookupData[idx].value;
selectObj.append('<option value=' + lookupData[idx].value + '>' + text + '</option>'); }
selectObj.selectpicker(options).val(lookupData).selectpicker('refresh')}
else {
selectObj.selectpicker(options).selectpicker('refresh')}''' % JsQuery.decorate_var(
"htmlObj", convert_var=False)
def __str__(self):
self.page.properties.js.add_builders(
"%s.selectpicker().selectpicker('refresh')" %
JsQuery.decorate_var(self.dom.varId, convert_var=False))
data_cls = self.get_attrs(
css_class_names=self.style.get_classes()).replace(
'class="', 'data-style="')
return "<select %s></select>" % data_cls
def __str__(self):
self.page.properties.js.add_builders(
"%s.selectpicker().selectpicker('refresh')" %
JsQuery.decorate_var(self.dom.varId, convert_var=False))
data_cls = self.get_attrs(
css_class_names=self.style.get_classes()).replace(
'class="', 'data-style="')
return "<select %s></select>" % data_cls
class Range(Slider):
name = "Slider Range"
is_range = True
_js__builder__ = '''options.values = [Math.min(...data), Math.max(...data)]; %(jqId)s.slider(options).css(options.css)
if (typeof options.handler_css !== 'undefined'){
%(jqId)s.find('.ui-slider-handle').css(options.handler_css)}
''' % {"jqId": JsQuery.decorate_var("htmlObj", convert_var=False)}
def _js__builder__(self):
return '''
const minDt = new Date(options.min).getTime() / 1000;
const maxDt = new Date(options.max).getTime() / 1000;
options.min = minDt; options.max = maxDt;
options.values = [new Date(data[0]).getTime() / 1000, new Date(data[1]).getTime() / 1000];
%(jqId)s.slider(options).css(options.css)
''' % {"jqId": JsQuery.decorate_var("jQuery(htmlObj)", convert_var=False)}
def __str__(self):
self._report._props.setdefault('js', {}).setdefault(
"builders",
[]).append("%s.selectpicker().selectpicker('refresh')" %
JsQuery.decorate_var(self.dom.varId, convert_var=False))
data_cls = self.get_attrs(
pyClassNames=self.style.get_classes()).replace(
'class="', 'data-style="')
return "<select %s></select>" % data_cls
def _js__builder__(self):
return '''
var selectObj = %s; selectObj.empty(); const lookupData = options.lookups[data];
if (typeof lookupData !== 'undefined') {
for (var idx in lookupData) {
const text = (typeof lookupData[idx].text !== 'undefined')? lookupData[idx].text : lookupData[idx].value;
selectObj.append('<option value=' + lookupData[idx].value + '>' + text + '</option>'); }
selectObj.selectpicker(options).val(lookupData).selectpicker('refresh')}
else {selectObj.selectpicker(options).selectpicker('refresh')} ''' % JsQuery.decorate_var(
"htmlObj", convert_var=False)
def __init__(self, report, components, width, height, options, profile):
super(Popup, self).__init__(report, [],
css_attrs={
"width": width,
"height": height
},
profile=profile)
self.__max_height, self.width, self.title = (100, "%"), width, None
self.__options = OptPanel.OptionPopup(self, options)
if not isinstance(components, list):
components = [components]
for component in components:
self.__add__(component)
if self.options.background:
#self.frameWidth = "%s%s" % (width[0], width[1])
self.css({
'width': '100%',
'position': 'fixed',
'height': '100%',
'background-color': 'rgba(0,0,0,0.4)',
'left': 0,
'top': 0
})
self.css({
'display': 'none',
'z-index': '1000',
'text-align':
'center', #'padding-left': self.options.margin, 'padding-right': self.options.margin
})
else:
#self.frameWidth = "100%"
self.css({
'position': 'absolute',
'margin': 0,
'padding': 0,
'display': 'none',
'z-index': '10000'
})
if self.options.draggable:
self.draggable(source_event=JsQuery.decorate_var(
self.dom.querySelector("#%s_content" % self.htmlCode)))
self.set_attrs(name="name", value="report_popup")
self.keyup.escape(self.dom.hide().r, source_event="document")
self.window = self._report.ui.div()
self.window.options.managed = False
self.window.style.background = "white"
self.window.style.position = "absolute"
self.window.style.margin = "auto"
self.window.style.height = "80%"
self.window.style.width = "80%"
self.window.style.top = 0
self.window.style.bottom = 0
self.window.style.left = 0
self.window.style.right = 0
def __str__(self):
header = [
"<th style='width:%s%%;%s'>%s</th>" %
(100 / len(self.labels), Defaults.inline(self.options.header), d)
for d in self.labels
]
body, row = [], []
for i, day in enumerate(self.val):
if 'number' in day:
total_capacity, tooltip = 0, ["<b>%s</b>" % day['date']]
for t in day.get("tasks", []):
c = t.get("capacity", 0)
total_capacity += c
tooltip.append("<div>%s: %s%%</div>" % (t['name'], c))
if total_capacity > 100:
day["total_capacity"] = total_capacity
day["style"] = Defaults.inline(self.options.overload)
numer_day = "<div style='%(style)s' data-html='true' data-toggle='tooltip' title='overload: %(total_capacity)s%%'>%(number)s</div>" % day
else:
day["style"] = Defaults.inline(self.options.number)
numer_day = "<div style='%(style)s'>%(number)s</div>" % day
tasks = "<div>%s</div>" % "".join([
"<div style='width:100%%;height:20px;display:block;vertical-align:middle'><div style='background:%(color)s;width:100%%;height:%(capacity)s%%;display:inline-block' title='%(name)s: %(capacity)s%%'></div></div>"
% t for t in day.get("tasks", [])
])
cell_style = Defaults.inline(self.options.today)
if day.get("today", False):
row.append(
"<td data-placement='right' data-toggle='tooltip' data-html='true' title='<div>%s</div>' style='%s;background:%s'>%s%s</td>"
% ("".join(tooltip), cell_style,
self._report.theme.success[0], numer_day, tasks))
else:
row.append(
"<td data-placement='right' data-toggle='tooltip' data-html='true' title='<div>%s</div>' style='%s'>%s%s</td>"
% ("".join(tooltip), cell_style, numer_day, tasks))
else:
row.append("<td style='padding:0'></td>")
if i % len(self.labels) == 0:
body.append("<tr>%s</tr>" % "".join(row))
row = []
if row:
for i in range(7 - len(row)):
row.append("<td style='padding:0'></td>")
body.append("<tr>%s</tr>" % "".join(row))
self._report._props['js']['onReady'].add(
"%s.tooltip()" %
JsQuery.decorate_var("'[data-toggle=tooltip]'", convert_var=False))
return '<table %(strAttr)s><caption style="text-align:right">%(caption)s</caption><tr>%(header)s</tr>%(content)s</table>' % {
'strAttr': self.get_attrs(pyClassNames=self.style.get_classes()),
'caption': self.caption,
'header': "".join(header),
'content': "".join(body)
}
def jquery_ui(self):
"""
Description:
-----------
Wrapper to the JqueryUI component
:rtype: JsQueryUi.JQueryUI
"""
if self._jquery_ui is None:
self._jquery_ui = JsQueryUi.JQueryUI(self._src, selector=JsQuery.decorate_var("#%s" % self._src.htmlCode), setVar=False)
return self._jquery_ui
def jquery(self):
"""
Description:
-----------
Link to the JQuery functions
:rtype: JsQuery.JQuery
"""
if self._jquery is None:
self._jquery = JsQuery.JQuery(src=self._src, selector=JsQuery.decorate_var("#%s" % self._src.htmlCode), setVar=False)
return self._jquery
def jquery(self) -> JsQuery.JQuery:
"""
Description:
-----------
Link to the JQuery functions.
:rtype: JsQuery.JQuery
"""
if self._jquery is None:
self._jquery = JsQuery.JQuery(component=self.component,
selector=JsQuery.decorate_var("#%s" % self.component.htmlCode), set_var=False)
return self._jquery
def jquery_ui(self):
"""
Description:
------------
:rtype: JsQuery.JQuery
"""
if self._jquery_ui is None:
self._jquery_ui = JsQueryUi.JQueryUI(
self._src,
selector=JsQuery.decorate_var("#%s" % self._src.htmlCode))
return self._jquery_ui
def jquery_ui(self) -> JsQueryUi.JQueryUI:
"""
Description:
------------
:rtype: JsQueryUi.JQueryUI
"""
if self._jquery_ui is None:
self._jquery_ui = JsQueryUi.JQueryUI(
self.component,
selector=JsQuery.decorate_var("#%s" % self.component.htmlCode))
return self._jquery_ui
def jquery(self) -> JsQuery.JQuery:
"""
Description:
------------
:rtype: JsQuery.JQuery
"""
if self._jquery is None:
self._jquery = JsQuery.JQuery(component=self.component,
selector=JsQuery.decorate_var(
"#%s" % self.component.htmlCode))
return self._jquery
def __str__(self):
options, opt_groups = [], {}
for val in self.val:
opt = Option(self._report,
val['value'],
val['name'],
None,
self.options.selected is not None
and self.options.selected == val['value'],
options={
"data": {
"content": val.get('content'),
"icon": val.get('icon')
}
})
opt.options.managed = False
if 'group' in val:
opt_groups.setdefault(val['group'], []).append(opt)
else:
options.append(opt.html())
data = options
for k in sorted(opt_groups):
opt_rp = Optgroup(self._report, opt_groups[k], k)
opt_rp.options.managed = False
data.append(opt_rp.html())
self._report._props.setdefault('js', {}).setdefault(
"builders", []).append(
"%s.selectpicker(%s).selectpicker('refresh')" %
(JsQuery.decorate_var(self.dom.varId, convert_var=False),
json.dumps(self._jsStyles)))
if self.attr.get("data-width") is not None:
self._report.css.customText(
'.%s_width {width: %s !IMPORTANT}' %
(self.htmlCode, self.attr.get("data-width")))
self.attr['class'].add("%s_width" % self.htmlCode)
if self.attr.get("data-background") is not None:
if self.attr.get("data-color") is not None:
self._report.css.customText(
'.%s_background {background: %s !IMPORTANT; color: %s !IMPORTANT}'
% (self.htmlCode, self.attr.get("data-background"),
self.attr.get("data-color")))
else:
self._report.css.customText(
'.%s_background {background: %s !IMPORTANT}' %
(self.htmlCode, self.attr.get("data-background")))
self.attr['class'].add("%s_background" % self.htmlCode)
data_cls = self.get_attrs(
pyClassNames=self.style.get_classes()).replace(
'class="', 'data-style="')
return "<select %s>%s</select>" % (data_cls, "".join(data))
def _js__builder__(self):
return '''
jHtmlObj = %(jquery)s; jHtmlObj.empty();
if (typeof options.currPage == 'undefined'){options.currPage = 0}; var pageNumber = options.pageNumber;
data.slice(options.currPage * pageNumber).forEach( function(rec){
var newItem = $('<div style="margin:5px 10px 5px 10px;"></div>') ;
var title = $('<div>'+ rec['title'] + '</div>').css( options.title );
if (rec['urlTitle'] != undefined){
title.css({'cursor': 'pointer'}); title.click(function(e){window.open(rec['urlTitle'], '_blank')})}
newItem.append(title);
if (rec.icon != undefined){
var item = $('<div></div>').css(options.url);
item.append( $('<i class="'+ rec['icon'] +'" style="margin-right:5px"></i>')).append(rec['url']);
newItem.append(item)}
else if(rec.url != undefined) {newItem.append($('<div>'+ rec['url'] +'</div>').css(options.url))}
newItem.append( $('<div>'+ rec['dsc'] +'</div>').css(options.dsc));
if(rec.visited != undefined){newItem.append($('<div>'+ rec.visited +'</div>').css(options.visited))}
if(rec.links != undefined){
rec.links.forEach(function(link){
if (link.url == undefined) {link.url = link.val};
newItem.append($('<a href='+ link.url +' target="_blank">'+ link.val +'</a><br>').css(options.link))})};
jHtmlObj.append(newItem);
});
if(data.length > 0) {
var reste = data.length/ pageNumber; var currIndex = options.currPage+1; var roundRest = Math.trunc(reste);
if (roundRest > reste) {reste ++};
var paginate = $('<div style="display:inline-block;height:35px;padding:0;width:100%%;text-align:center;margin-top:10px" class="py_cssdivpagination"></div>');
if (currIndex > 1){
var href = $('<a href="#">«</a>');
href.click({page: options.currPage-1, rec: data}, function(e){%(class)s(htmlObj, e.data.rec, options, e.data.page)});
paginate.append(href)};
for (var i = 0; i < reste; i++){
var indexPage = i + 1;
if (options.currPage == i) {
var href = $('<a href="#" style="background-color:'+ options.greyColor +';padding:5px;color:'+ options.whiteColor +'">'+ indexPage +'</a>');
href.click({page: i, rec: data}, function(e) { %(class)s(htmlObj, e.data.rec, options, e.data.page)});
paginate.append(href)}
else{
var href = $('<a href="#" style="padding:5px;">'+ indexPage +'</a>') ;
href.click({page: i, rec: data}, function(e){%(class)s(htmlObj, e.data.rec, options, e.data.page)});
paginate.append(href)}}
if(currIndex < reste){
var href = $('<a href="#">»</a>');
href.click({page: options.currPage+1, rec: data}, function(e){%(class)s(htmlObj, e.data.rec, options, e.data.page)});
paginate.append(href)};
jHtmlObj.append(paginate)
} ''' % {
"class": self.__class__.__name__,
'jquery': JsQuery.decorate_var("htmlObj", convert_var=False)
}
def _js__builder__(self):
"""
else {
if (data.value == ''){data.time = new Date()} else{data.time = data.value};
if (data.options._change.length > 0) {data.options.change = function(time){
let data = {event_val: time.getHours() +':'+ time.getMinutes() +':'+ time.getSeconds(), event_code: htmlCode};
eval(data.options._change.join(";"))}};
jQuery(htmlObj).timepicker(data.options); jQuery(htmlObj).timepicker('setTime', data.time)}
:return:
"""
return '''
if (typeof data == "string"){%(jqId)s.timepicker('setTime', data)}
%(jqId)s.timepicker(options); ''' % {
"jqId": JsQuery.decorate_var("htmlObj", convert_var=False)
}
def _js__builder__(self):
return '''
var selectObj = %s; selectObj.empty();
const attrs = ['icon', 'content'];
for (var idx in data) {
var item = data[idx];
if(typeof data[idx] === 'string'){item = {value: item}};
var opt = document.createElement("OPTION");
opt.value = item.value;
opt.text = (typeof item.name !== 'undefined')? item.name : item.value;
for(var a in attrs){
var attrVal = item[attrs[a]];
if (typeof attrVal !== 'undefined'){opt.setAttribute("data-"+ attrs[a], attrVal) }}
selectObj.append(opt)}
selectObj.selectpicker(options).selectpicker('refresh');''' % JsQuery.decorate_var(
"htmlObj", convert_var=False)
def _js__builder__(self):
return '''
var jqHtmlObj = %(jqId)s; if(options.clearDropDown){jqHtmlObj.empty()};
data.forEach(function(rec){
if (rec.items != undefined) {
var li = $('<li class="dropdown" style="list-style-type:none;display:list-item;text-align:-webkit-match-parent"></li>'); var a = $('<a tabindex=-1>'+ rec.value +'<span class="caret"></span></a>');
li.append(a); var ul = $('<ul class="submenu"></ul>'); ul.css(options.ul); options.clearDropDown = false; a.css(options.a);
%(pyCls)s(ul, rec.items, options); li.append(ul); jqHtmlObj.append(li);
} else {
if (rec.url == undefined){var a = $('<a href="#">'+ rec.value +'</a>')}
else {var a = $('<a href="'+ rec.url +'">'+ rec.value +'</a>')}; a.css(options.a);
a.click(function(event){const value = a.html(); options.click(event, value)} );
var li = $('<li style="list-style-type:none;display:list-item;text-align:-webkit-match-parent"></li>'); li.append(a); jqHtmlObj.append(li)}
})''' % {
"jqId": JsQuery.decorate_var("htmlObj", convert_var=False),
"pyCls": self.__class__.__name__
}
def _js__builder__(self):
'''
if ((typeof data.options.selectedDts !== "undefined") && (data.options.selectedDts.length > 0)){
var selectedDt = {};
data.options.selectedDts.forEach(function(dt){var jsDt = new Date(dt); selectedDt[jsDt.toISOString().split('T')[0]] = jsDt}) ;
if (data.options.excludeDts === true){
function renderCalendarCallbackExc(intDate) {var utc = intDate.getTime() - intDate.getTimezoneOffset()*60000; var newDate = new Date(utc); var Highlight = selectedDt[newDate.toISOString().split('T')[0]]; if(Highlight){return [false, '', '']} else {return [true, '', '']}};
data.options.beforeShowDay = renderCalendarCallbackExc;
} else{
function renderCalendarCallback(intDate) {var utc = intDate.getTime() - intDate.getTimezoneOffset()*60000; var newDate = new Date(utc); var Highlight = selectedDt[newDate.toISOString().split('T')[0]]; if(Highlight){return [true, "%s", '']} else {return [false, '', '']}};
data.options.beforeShowDay = renderCalendarCallback;};
delete data.options.selectedDts};
jQuery(htmlObj).datepicker(data.options).datepicker('setDate', data.value)
:return:
'''
return '''%(jqId)s.datepicker(options).datepicker('setDate', data)''' % {
"jqId": JsQuery.decorate_var("htmlObj", convert_var=False)
}
def js(self) -> JsQueryVectorMap.JQVMap:
"""
Description:
-----------
Usage::
:return: A Javascript Dom object functions.
:rtype: JsQueryVectorMap.JQVMap
"""
if self._js is None:
self._js = JsQueryVectorMap.JQVMap(component=self,
js_code=JsQuery.decorate_var(
self.htmlCode,
convert_var=False),
page=self.page)
return self._js
def jquery(self):
"""
Description:
------------
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.
Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.
Related Pages:
https://jqueryui.com/
:rtype: JsQuery.JQuery
"""
if self._jquery is None:
self._jquery = JsQuery.JQuery(src=self._src,
selector=JsQuery.decorate_var(
"#%s" % self._src.htmlCode))
return self._jquery
class BsDatePicker(Component):
requirements = ('tempusdominus-bootstrap-4', )
css_classes = ["input-group", "date"]
name = "Bootstrap DatePicker"
_option_cls = OptBsDT.DT
str_repr = '''
<div class="form-group">
<div {attrs} data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#{htmlCode}"/>
<div class="input-group-append" data-target="#{htmlCode}" data-toggle="datetimepicker">
<div class="input-group-text" style="height:100%"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>'''
_js__builder__ = '''%(jqId)s.datetimepicker(options)''' % {"jqId": JsQuery.decorate_var("htmlObj", convert_var=False)}
@property
def options(self) -> OptBsDT.DT:
"""
Description:
-----------
The component options.
:rtype: OptBsDT.DT
"""
return super().options
@property
def dom(self) -> DomBsDatePicker.DomDate:
"""
Description:
-----------
The common DOM properties.
:rtype: DomBsDatePicker.DomDate
"""
if self._dom is None:
self._dom = DomBsDatePicker.DomDate(component=self, page=self.page)
return self._dom
def drag(self, js_funcs, profile=None, source_event=None, on_ready=False):
"""
Description:
-----------
Attributes:
----------
:param js_funcs: List | String. A Javascript Python function
:param profile: Boolean. Optional. Set to true to get the profile for the function on the Javascript console.
:param source_event: String. Optional. The source target for the event.
:param on_ready: Boolean. Optional. Specify if the event needs to be trigger when the page is loaded.
"""
source_event = source_event or JsQuery.decorate_var(self.htmlCode,
convert_var=False)
self.on("drag",
js_funcs,
profile,
source_event=source_event,
on_ready=on_ready)
self._browser_data['mouse']["drag"][source_event]['fncType'] = "on"
return self
class SliderDates(SliderDate):
_js__builder__ = '''
const minDt = new Date(options.min).getTime() / 1000;
const maxDt = new Date(options.max).getTime() / 1000;
options.min = minDt; options.max = maxDt;
options.values = [new Date(data[0]).getTime() / 1000, new Date(data[1]).getTime() / 1000];
%(jqId)s.slider(options).css(options.css)
''' % {"jqId": JsQuery.decorate_var("jQuery(htmlObj)", convert_var=False)}
@property
def dom(self) -> JsHtmlJqueryUI.JsHtmlSliderDates:
"""
Description:
-----------
The Javascript Dom object.
:rtype: JsHtmlJqueryUI.JsHtmlSliderDates
"""
if self._dom is None:
self._dom = JsHtmlJqueryUI.JsHtmlSliderDates(self, page=self.page)
return self._dom