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.
74 lines
2.2 KiB
74 lines
2.2 KiB
// `
|
|
class SimpleSelectedContainer {
|
|
constructor($container, data) {
|
|
this.$self = $container;
|
|
this.elements_id = []; // [spec_id, spec_id, ...]
|
|
this.data = 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(name, id) {
|
|
let htmlTemplate =
|
|
`
|
|
<div class="selected-element max-width">
|
|
<div class="name">
|
|
${name}
|
|
</div>
|
|
<span data-id="${id}" class="icon-remove"></span>
|
|
</div>
|
|
`;
|
|
return htmlTemplate
|
|
}
|
|
|
|
|
|
_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();
|
|
}
|
|
|
|
getElementById(id) {
|
|
for (let i = 0; i < this.data.length; i++) {
|
|
if (this.data[i].id == id) return this.data[i]
|
|
}
|
|
}
|
|
|
|
add(_id, max_len) {
|
|
const id = Number(_id);
|
|
// TODO: добавить учет max_len
|
|
let self = this;
|
|
if ((this.elements_id).indexOf(id) != -1) {
|
|
//TODO: do popup messages
|
|
console.log("Not actually");
|
|
return;
|
|
}
|
|
// console.log("!", this.getElementById(id));
|
|
const name = this.getElementById(id).name;
|
|
this.elements_id.push(id);
|
|
if (this.$input) this.$input.val(this.elements_id.join(','));
|
|
this.$self.append(SimpleSelectedContainer.getTemplate(name, id));
|
|
this.btn_remove = this.$self.find('.icon-remove');
|
|
this.btn_remove.on("click", this.remove.bind(self));
|
|
console.log();
|
|
}
|
|
}
|
|
|