mirror of
https://github.com/beestat/app.git
synced 2025-05-24 02:14:03 -04:00
462 lines
13 KiB
JavaScript
462 lines
13 KiB
JavaScript
/**
|
|
* Visualize settings.
|
|
*/
|
|
beestat.component.card.visualize_settings = function() {
|
|
const self = this;
|
|
beestat.dispatcher.addEventListener([
|
|
'cache.floor_plan',
|
|
'cache.data.three_d__runtime_sensor'
|
|
],
|
|
function() {
|
|
self.rerender();
|
|
});
|
|
|
|
beestat.component.card.apply(this, arguments);
|
|
};
|
|
beestat.extend(beestat.component.card.visualize_settings, beestat.component.card);
|
|
|
|
/**
|
|
* Decorate
|
|
*
|
|
* @param {rocket.Elements} parent
|
|
*/
|
|
beestat.component.card.visualize_settings.prototype.decorate_contents_ = function(parent) {
|
|
const grid = document.createElement('div');
|
|
Object.assign(grid.style, {
|
|
'display': 'grid',
|
|
'grid-template-columns': 'repeat(auto-fit, minmax(min(350px, 100%), 1fr))',
|
|
'grid-gap': `${beestat.style.size.gutter}px`,
|
|
'margin-bottom': `${beestat.style.size.gutter}px`
|
|
});
|
|
parent.appendChild(grid);
|
|
|
|
const left_container = document.createElement('div');
|
|
grid.appendChild(left_container);
|
|
const right_container = document.createElement('div');
|
|
grid.appendChild(right_container);
|
|
|
|
const data_type_container = document.createElement('div');
|
|
Object.assign(data_type_container.style, {
|
|
'margin-bottom': `${beestat.style.size.gutter}px`
|
|
});
|
|
this.decorate_data_type_(data_type_container);
|
|
left_container.appendChild(data_type_container);
|
|
|
|
const heat_map_values_container = document.createElement('div');
|
|
this.decorate_heat_map_values_(heat_map_values_container);
|
|
left_container.appendChild(heat_map_values_container);
|
|
|
|
const time_period_container = document.createElement('div');
|
|
this.decorate_time_period_(time_period_container);
|
|
right_container.appendChild(time_period_container);
|
|
|
|
// If at least one sensor is on the floor plan and the data is loading.
|
|
if (
|
|
beestat.cache.data.three_d__runtime_sensor === undefined &&
|
|
Object.keys(beestat.floor_plan.get_sensor_ids_map(
|
|
beestat.setting('visualize.floor_plan_id')
|
|
)).length > 0
|
|
) {
|
|
this.show_loading_('Fetching');
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Decorate the type options.
|
|
*
|
|
* @param {HTMLDivElement} parent
|
|
*/
|
|
beestat.component.card.visualize_settings.prototype.decorate_data_type_ = function(parent) {
|
|
const self = this;
|
|
|
|
(new beestat.component.title('Data Type')).render($(parent));
|
|
|
|
const types = [
|
|
{
|
|
'code': 'temperature',
|
|
'name': 'Temperature',
|
|
'icon': 'thermometer'
|
|
},
|
|
{
|
|
'code': 'occupancy',
|
|
'name': 'Occupancy',
|
|
'icon': 'eye'
|
|
}
|
|
];
|
|
|
|
const color = beestat.style.color.green.base;
|
|
const tile_group = new beestat.component.tile_group();
|
|
types.forEach(function(type) {
|
|
const tile = new beestat.component.tile()
|
|
.set_background_hover_color(color)
|
|
.set_text_color('#fff')
|
|
.set_icon(type.icon)
|
|
.set_text(type.name);
|
|
|
|
if (beestat.setting('visualize.data_type') === type.code) {
|
|
tile.set_background_color(color);
|
|
} else {
|
|
tile
|
|
.set_background_color(beestat.style.color.bluegray.light)
|
|
.addEventListener('click', function() {
|
|
beestat.setting('visualize.data_type', type.code);
|
|
self.rerender();
|
|
});
|
|
}
|
|
tile_group.add_tile(tile);
|
|
});
|
|
|
|
tile_group.render($(parent));
|
|
};
|
|
/**
|
|
* Decorate the type options.
|
|
*
|
|
* @param {HTMLDivElement} parent
|
|
*/
|
|
beestat.component.card.visualize_settings.prototype.decorate_heat_map_values_ = function(parent) {
|
|
const self = this;
|
|
|
|
(new beestat.component.title('Heat Map Values')).render($(parent));
|
|
|
|
const types = [
|
|
{
|
|
'code': 'dynamic',
|
|
'name': 'Dynamic',
|
|
'icon': 'arrow_expand_horizontal'
|
|
},
|
|
{
|
|
'code': 'static',
|
|
'name': 'Static',
|
|
'icon': 'arrow_horizontal_lock'
|
|
}
|
|
];
|
|
|
|
const container = document.createElement('div');
|
|
Object.assign(container.style, {
|
|
'display': 'flex',
|
|
'flex-wrap': 'wrap',
|
|
'grid-gap': `${beestat.style.size.gutter}px`
|
|
});
|
|
parent.appendChild(container);
|
|
|
|
const color = beestat.style.color.orange.base;
|
|
const tile_group = new beestat.component.tile_group();
|
|
|
|
types.forEach(function(type) {
|
|
const tile = new beestat.component.tile()
|
|
.set_background_hover_color(color)
|
|
.set_text_color('#fff')
|
|
.set_icon(type.icon)
|
|
.set_text(type.name);
|
|
|
|
if (beestat.setting('visualize.heat_map_values') === type.code) {
|
|
tile.set_background_color(color);
|
|
} else {
|
|
tile
|
|
.set_background_color(beestat.style.color.bluegray.light)
|
|
.addEventListener('click', function() {
|
|
beestat.setting('visualize.heat_map_values', type.code);
|
|
self.rerender();
|
|
});
|
|
}
|
|
tile_group.add_tile(tile);
|
|
});
|
|
tile_group.render($(container));
|
|
|
|
if (beestat.setting('visualize.heat_map_values') === 'static') {
|
|
const min_max_container = document.createElement('div');
|
|
container.appendChild(min_max_container);
|
|
|
|
let type;
|
|
let inputmode;
|
|
if (beestat.setting('visualize.data_type') === 'temperature') {
|
|
type = 'decimal';
|
|
inputmode = 'decimal';
|
|
} else {
|
|
type = 'integer';
|
|
inputmode = 'numeric';
|
|
}
|
|
|
|
const min = new beestat.component.input.text()
|
|
.set_maxlength('5')
|
|
.set_inputmode(inputmode)
|
|
.set_requirements({
|
|
'type': type,
|
|
'required': true
|
|
})
|
|
.set_transform({
|
|
'type': 'round',
|
|
'decimals': 1
|
|
})
|
|
.set_value(
|
|
beestat.temperature(beestat.setting(
|
|
'visualize.heat_map_static.' + beestat.setting('visualize.data_type') + '.min'
|
|
))
|
|
)
|
|
.set_width(50);
|
|
min.addEventListener('change', function() {
|
|
if (min.meets_requirements() === true) {
|
|
beestat.setting(
|
|
'visualize.heat_map_static.' + beestat.setting('visualize.data_type') + '.min',
|
|
beestat.temperature({
|
|
'temperature': min.get_value(),
|
|
'input_temperature_unit': beestat.setting('units.temperature'),
|
|
'output_temperature_unit': '°F'
|
|
})
|
|
);
|
|
} else {
|
|
min.set_value(
|
|
beestat.temperature(beestat.setting(
|
|
'visualize.heat_map_static.' + beestat.setting('visualize.data_type') + '.min'
|
|
)),
|
|
false
|
|
);
|
|
}
|
|
});
|
|
|
|
const max = new beestat.component.input.text()
|
|
.set_maxlength('5')
|
|
.set_inputmode(inputmode)
|
|
.set_requirements({
|
|
'type': type,
|
|
'required': true
|
|
})
|
|
.set_value(
|
|
beestat.temperature(beestat.setting(
|
|
'visualize.heat_map_static.' + beestat.setting('visualize.data_type') + '.max'
|
|
)),
|
|
false
|
|
)
|
|
.set_width(50);
|
|
max.addEventListener('change', function() {
|
|
if (max.meets_requirements() === true) {
|
|
// Round to one decimal.
|
|
const value = Math.round(max.get_value() * 10) / 10;
|
|
max.set_value(value, false);
|
|
|
|
beestat.setting(
|
|
'visualize.heat_map_static.' + beestat.setting('visualize.data_type') + '.max',
|
|
beestat.temperature({
|
|
'temperature': max.get_value(),
|
|
'input_temperature_unit': beestat.setting('units.temperature'),
|
|
'output_temperature_unit': '°F'
|
|
})
|
|
);
|
|
} else {
|
|
max.set_value(
|
|
beestat.temperature(beestat.setting(
|
|
'visualize.heat_map_static.' + beestat.setting('visualize.data_type') + '.max'
|
|
)),
|
|
false
|
|
);
|
|
}
|
|
});
|
|
|
|
let span;
|
|
|
|
span = document.createElement('span');
|
|
span.style.display = 'inline-block';
|
|
min.render($(span));
|
|
min_max_container.appendChild(span);
|
|
|
|
span = document.createElement('span');
|
|
span.innerText = 'to';
|
|
Object.assign(span.style, {
|
|
'display': 'inline-block',
|
|
'margin-left': `${beestat.style.size.gutter}px`,
|
|
'margin-right': `${beestat.style.size.gutter}px`
|
|
});
|
|
min_max_container.appendChild(span);
|
|
|
|
span = document.createElement('span');
|
|
span.style.display = 'inline-block';
|
|
max.render($(span));
|
|
min_max_container.appendChild(span);
|
|
|
|
span = document.createElement('span');
|
|
switch (beestat.setting('visualize.data_type')) {
|
|
case 'temperature':
|
|
span.innerText = beestat.setting('units.temperature');
|
|
break;
|
|
case 'occupancy':
|
|
span.innerText = '%';
|
|
break;
|
|
}
|
|
|
|
Object.assign(span.style, {
|
|
'display': 'inline-block',
|
|
'margin-left': `${beestat.style.size.gutter}px`
|
|
});
|
|
min_max_container.appendChild(span);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Decorate the type options.
|
|
*
|
|
* @param {HTMLDivElement} parent
|
|
*/
|
|
beestat.component.card.visualize_settings.prototype.decorate_time_period_ = function(parent) {
|
|
const self = this;
|
|
|
|
(new beestat.component.title('Time Period')).render($(parent));
|
|
|
|
const color = beestat.style.color.purple.base;
|
|
|
|
const tile_group_dynamic = new beestat.component.tile_group();
|
|
|
|
// Current Day
|
|
const current_day_tile = new beestat.component.tile()
|
|
.set_background_hover_color(color)
|
|
.set_text_color('#fff')
|
|
.set_icon('calendar')
|
|
.set_text('Today');
|
|
|
|
if (
|
|
beestat.setting('visualize.range_type') === 'dynamic' &&
|
|
beestat.setting('visualize.range_dynamic') === 0
|
|
) {
|
|
current_day_tile.set_background_color(color);
|
|
} else {
|
|
current_day_tile
|
|
.set_background_color(beestat.style.color.bluegray.light)
|
|
.addEventListener('click', function() {
|
|
beestat.setting({
|
|
'visualize.range_type': 'dynamic',
|
|
'visualize.range_dynamic': 0
|
|
});
|
|
beestat.cache.delete('data.three_d__runtime_sensor');
|
|
self.rerender();
|
|
});
|
|
}
|
|
tile_group_dynamic.add_tile(current_day_tile);
|
|
|
|
// Yesterday
|
|
const yesterday_tile = new beestat.component.tile()
|
|
.set_background_hover_color(color)
|
|
.set_text_color('#fff')
|
|
.set_icon('calendar')
|
|
.set_text('Yesterday');
|
|
|
|
if (
|
|
beestat.setting('visualize.range_type') === 'dynamic' &&
|
|
beestat.setting('visualize.range_dynamic') === 1
|
|
) {
|
|
yesterday_tile.set_background_color(color);
|
|
} else {
|
|
yesterday_tile
|
|
.set_background_color(beestat.style.color.bluegray.light)
|
|
.addEventListener('click', function() {
|
|
beestat.setting({
|
|
'visualize.range_type': 'dynamic',
|
|
'visualize.range_dynamic': 1
|
|
});
|
|
beestat.cache.delete('data.three_d__runtime_sensor');
|
|
self.rerender();
|
|
});
|
|
}
|
|
tile_group_dynamic.add_tile(yesterday_tile);
|
|
|
|
// Current Week
|
|
const week_tile = new beestat.component.tile()
|
|
.set_background_hover_color(color)
|
|
.set_text_color('#fff')
|
|
.set_icon('calendar_week')
|
|
.set_text('7 Day Average');
|
|
|
|
if (
|
|
beestat.setting('visualize.range_type') === 'dynamic' &&
|
|
beestat.setting('visualize.range_dynamic') === 7
|
|
) {
|
|
week_tile.set_background_color(color);
|
|
} else {
|
|
week_tile
|
|
.set_background_color(beestat.style.color.bluegray.light)
|
|
.addEventListener('click', function() {
|
|
beestat.setting({
|
|
'visualize.range_type': 'dynamic',
|
|
'visualize.range_dynamic': 7
|
|
});
|
|
beestat.cache.delete('data.three_d__runtime_sensor');
|
|
self.rerender();
|
|
});
|
|
}
|
|
tile_group_dynamic.add_tile(week_tile);
|
|
|
|
// Custom
|
|
const tile_group_static = new beestat.component.tile_group();
|
|
const custom_tile = new beestat.component.tile()
|
|
.set_background_hover_color(color)
|
|
.set_text_color('#fff')
|
|
.set_icon('calendar_edit')
|
|
.set_text('Custom');
|
|
|
|
custom_tile
|
|
.addEventListener('click', function() {
|
|
new beestat.component.modal.visualize_custom().render();
|
|
});
|
|
|
|
if (beestat.setting('visualize.range_type') === 'static') {
|
|
custom_tile.set_background_color(color);
|
|
} else {
|
|
custom_tile.set_background_color(beestat.style.color.bluegray.light);
|
|
}
|
|
tile_group_static.add_tile(custom_tile);
|
|
|
|
// Static range
|
|
if (beestat.setting('visualize.range_type') === 'static') {
|
|
const static_range_tile = new beestat.component.tile()
|
|
.set_shadow(false)
|
|
.set_text(
|
|
beestat.date(beestat.setting('visualize.range_static.begin')) +
|
|
' to ' +
|
|
beestat.date(beestat.setting('visualize.range_static.end'))
|
|
);
|
|
tile_group_static.add_tile(static_range_tile);
|
|
|
|
const static_range_edit_tile = new beestat.component.tile()
|
|
.set_background_color(beestat.style.color.bluegray.light)
|
|
.set_background_hover_color(color)
|
|
.set_text_color('#fff')
|
|
.set_icon('pencil');
|
|
static_range_edit_tile
|
|
.addEventListener('click', function() {
|
|
new beestat.component.modal.visualize_custom().render();
|
|
});
|
|
tile_group_static.add_tile(static_range_edit_tile);
|
|
}
|
|
|
|
tile_group_dynamic
|
|
.style({
|
|
'margin-bottom': `${beestat.style.size.gutter}px`
|
|
})
|
|
.render($(parent));
|
|
tile_group_static.render($(parent));
|
|
};
|
|
|
|
/**
|
|
* Get the title of the card.
|
|
*
|
|
* @return {string} The title of the card.
|
|
*/
|
|
beestat.component.card.visualize_settings.prototype.get_title_ = function() {
|
|
return 'Visualize Settings';
|
|
};
|
|
|
|
/**
|
|
* Decorate the menu.
|
|
*
|
|
* @param {rocket.Elements} parent
|
|
*/
|
|
beestat.component.card.visualize_settings.prototype.decorate_top_right_ = function(parent) {
|
|
var menu = (new beestat.component.menu()).render(parent);
|
|
|
|
menu.add_menu_item(new beestat.component.menu_item()
|
|
.set_text('Help')
|
|
.set_icon('help_circle')
|
|
.set_callback(function() {
|
|
window.open('https://doc.beestat.io/24f548ddd7fc464d846e113470f80c35');
|
|
}));
|
|
};
|
|
|