You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
3.1 KiB
99 lines
3.1 KiB
// `
|
|
class SelectedContainer {
|
|
constructor($container, data) {
|
|
this.$self = $container;
|
|
this.elements_id = []; // [spec_id, spec_id, ...]
|
|
this.tree_data = new SpecTree(data);
|
|
this.$input = this.$self.find('input[type="hidden"]');
|
|
this.restoreElements();
|
|
}
|
|
|
|
restoreElements(){
|
|
const self = this;
|
|
if (this.$input && this.$input.val()){
|
|
let data = this.$input.val().split(',').filter((el) => el);
|
|
console.log("restore data = ", data);
|
|
this.elements_id = [];
|
|
data.forEach((el) => self.add(el));
|
|
}
|
|
}
|
|
|
|
static getTemplate(header, name, id) {
|
|
let htmlTemplate =
|
|
`
|
|
<div class="selected-element">
|
|
<div class="header">
|
|
${header}
|
|
</div>
|
|
<div class="name">
|
|
${name}
|
|
</div>
|
|
<span data-id="${id}" class="icon-remove"></span>
|
|
</div>
|
|
`;
|
|
return htmlTemplate
|
|
}
|
|
|
|
static getHeader(spec_chain, separator, max_len) {
|
|
function toShortString(string, max_len) {
|
|
return string.slice(0, max_len) + (string.length > max_len ? "..." : "");
|
|
}
|
|
|
|
separator = separator || ' / ';
|
|
let str_chain = "";
|
|
|
|
spec_chain.forEach(function (el) {
|
|
str_chain = (max_len ? toShortString(el.name, max_len) : el.name) + (str_chain ? separator : "") + str_chain;
|
|
});
|
|
|
|
return str_chain;
|
|
}
|
|
|
|
_removeById(spec_id) {
|
|
let index = this.elements_id.indexOf(spec_id);
|
|
if (index >= 0) {
|
|
this.elements_id.splice(index, 1);
|
|
}
|
|
$(`span[data-id='${spec_id}']`).parents('.selected-element').remove();
|
|
}
|
|
|
|
remove(e) {
|
|
let spec_id = $(e.target).data("id");
|
|
this._removeById(spec_id);
|
|
if (this.$input) this.$input.val(this.elements_id.join(','));
|
|
e.preventDefault();
|
|
}
|
|
|
|
add(_id, max_len) {
|
|
const id = Number(_id);
|
|
let self = this;
|
|
|
|
let has_already = this.elements_id.filter(function (el) {
|
|
return self.tree_data.hasChildren(el, id)
|
|
});
|
|
|
|
// console.log(has_already);
|
|
if (has_already.length || (this.elements_id).indexOf(Number(id)) != -1) {
|
|
//TODO: do popup messages
|
|
console.log("Not actually");
|
|
return;
|
|
}
|
|
|
|
let not_valid = this.elements_id.filter(function (el) {
|
|
return self.tree_data.hasChildren(id, el)
|
|
});
|
|
|
|
not_valid.forEach(function (el) {
|
|
self._removeById(el);
|
|
});
|
|
|
|
const header = SelectedContainer.getHeader(this.tree_data.getSpecChain(id), "", max_len);
|
|
// console.log("header = ", header);
|
|
const name = this.tree_data.getElementById(id).name;
|
|
this.elements_id.push(id);
|
|
if (this.$input) this.$input.val(this.elements_id.join(','));
|
|
this.$self.append(SelectedContainer.getTemplate(header || "root", name, id));
|
|
this.btn_remove = this.$self.find('.icon-remove');
|
|
this.btn_remove.on("click", this.remove.bind(self));
|
|
}
|
|
}
|
|
|