shimatta-kenkyusho/shimatta_kenkyusho/static/js/add-stock-modal.js

72 lines
3.2 KiB
JavaScript

function fill_add_stock_modal_component(data) {
// component has been selected. Process it:
document.getElementById('add-stock-search').value = '';
console.log(data);
var template = document.querySelector('#add-stock-modal-component-template');
var container = document.querySelector('#add-stock-modal-component-container');
container.innerHTML = '';
var comp_elem = template.content.cloneNode(true);
if (data.ro_image) {
comp_elem.querySelector('#add-stock-cmp-img').setAttribute('src', data.ro_image);
}
var description_container = comp_elem.querySelector('#add-stock-cmp-desc-container');
var heading = document.createElement('h6');
heading.appendChild(document.createTextNode(data.name));
description_container.appendChild(heading);
if (data.package_data && data.package_data.name) {
description_container.appendChild(document.createTextNode('in '+data.package_data.name));
}
if (data.ro_manufacturer_name) {
description_container.appendChild(document.createElement('br'));
description_container.appendChild(document.createTextNode('by '+data.ro_manufacturer_name));
}
document.querySelector('#add-stock-modal-comp-uuid').value = data.id;
console.log("Selected element: "+data.id);
container.appendChild(comp_elem);
}
new AutocompleteCustomUi('add-stock-search', 'add-stock-search-ac-dropdown',
function(search, autocomplete_obj) {
api_search_component(search, function(results) {
components = results.results;
var test = [];
for (var i = 0; i < components.length; i++) {
var c = components[i];
var node = document.createElement('div');
node.setAttribute('class', 'd-flex align-items-center');
var img_container = document.createElement('div');
img_container.setAttribute('class', 'flex-shrink-0');
var text_container = document.createElement('div');
text_container.setAttribute('class', 'flex-grow-1 ms-1');
var img = document.createElement('img');
var img_path = fallback_img_path;
var style = "width:64px;max-height:64px;";
if (c.ro_image != null) {
img_path = c.ro_image;
style = "max-width:64px;max-height:64px;";
}
img.setAttribute('src', img_path);
img.setAttribute('style', style)
img_container.appendChild(img);
var name_text = document.createTextNode(c.name);
var heading = document.createElement('h6');
heading.appendChild(name_text);
text_container.appendChild(heading);
if (c.package_data != null) {
text_container.appendChild(document.createTextNode('in '+c.package_data.name));
}
if (c.ro_manufacturer_name) {
text_container.appendChild(document.createTextNode(' by '+c.ro_manufacturer_name));
}
node.appendChild(img_container);
node.appendChild(text_container);
test.push({'ui': node, 'data': c})
}
autocomplete_obj.show_results(test,
function(data){fill_add_stock_modal_component(data);});
}, function(){});
});