mhu/shimatta-kenkyusho
2
0
Fork 0
Code Issues 15 Pull Requests 1 Releases Wiki Activity

Implement edit componant form and adapt UI

Browse Source
This commit is contained in:
Mario Hüttel
2021-11-11 20:51:02 +01:00
parent e2aba765d4
commit 69ed1092e0
15 changed files with 276 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
shimatta_kenkyusho/static/js/add-stock-modal.js
View File

@@ -36,23 +36,8 @@ function(search, autocomplete_obj) {
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);
@@ -64,8 +49,7 @@ function(search, autocomplete_obj) {
text_container.appendChild(document.createTextNode(' by '+c.ro_manufacturer_name));
}
node.appendChild(img_container);
node.appendChild(text_container);
node = AutocompleteCustomUi.create_media_div(c.ro_image, [text_container])
test.push({'ui': node, 'data': c})
}

32
shimatta_kenkyusho/static/js/autocomplete.js
View File

@@ -1,6 +1,36 @@
const autocomplete_query_delay_ms = 60;
class AutocompleteCustomUi {
static create_media_div(img_src, text_nodes) {
var ui = document.createElement('div');
ui.setAttribute('class', 'd-flex align-items-center');
var img_div = document.createElement('div');
img_div.setAttribute('class', 'flex-shrink-0');
var img = document.createElement('img');
if (img_src != null && img_src != undefined && img_src != '') {
img.setAttribute('src', img_src);
img.setAttribute('class', 'component-img-small');
} else {
img.setAttribute('src', fallback_img_path);
img.setAttribute('class', 'component-img-def-small');
}
img_div.appendChild(img);
ui.appendChild(img_div);
var text_div = document.createElement('div');
text_div.setAttribute('class', 'flex-grow-1 ms-3');
if (text_nodes != undefined) {
for (var i = 0; i < text_nodes.length; i++) {
text_div.appendChild(text_nodes[i]);
}
}
ui.appendChild(text_div)
return ui
}
constructor(text_id, dropdown_id, query_function)
{
this.text_id = text_id;
@@ -17,7 +47,7 @@ class AutocompleteCustomUi {
/**
*
* @param {*} nodes_to_add A liust of dictionaries containing the shown objects and the data called when clicked.
* @param {*} nodes_to_add A list of dictionaries containing the shown objects and the data called when clicked.
*
* The list: {{'ui': <nodes>, 'data': 'my_data'}, {}, ...}
*

81
shimatta_kenkyusho/static/js/edit-component-modal.js Normal file
View File

@@ -0,0 +1,81 @@
document.addEventListener("DOMContentLoaded", function(){
// Create the autocompletion stuff
new AutocompleteText(edit_comp_modal_ids['component_type'], edit_comp_modal_ids['component_type']+'-ac-ul',
function(search, autocomplete) {
api_search_component_types(search, function(result) {
type_names = [];
for(var i = 0; i < result.results.length; i++) {
var r = result.results[i];
type_names.push(r.class_name);
}
autocomplete.show_results(type_names)
}, function() {
// Nothing to do---
})
});
new AutocompleteCustomUi(edit_comp_modal_ids['manufacturer'], edit_comp_modal_ids['manufacturer']+'-ac-ul',
function(search, autocomplete) {
api_search_manufacturer(search, function(result) {
nodes = [];
for (var i = 0; i < result.results.length; i++) {
var manu = result.results[i];
// Construct the ui:
ui = AutocompleteCustomUi.create_media_div(manu.image, [document.createTextNode(manu.name)])
nodes.push({'ui': ui, 'data': manu.name});
}
autocomplete.show_results(nodes, function(data) {
document.getElementById(edit_comp_modal_ids['manufacturer']).value = data;
})
}, function() {
// Nothing to do---
})
});
new AutocompleteCustomUi(edit_comp_modal_ids['pref_distri'], edit_comp_modal_ids['pref_distri']+'-ac-ul',
function(search, autocomplete) {
api_search_distributor(search, function(result) {
nodes = [];
for (var i = 0; i < result.results.length; i++) {
var distri = result.results[i];
// Construct the ui:
ui = AutocompleteCustomUi.create_media_div(distri.image, [document.createTextNode(distri.name)])
nodes.push({'ui': ui, 'data': distri.name});
}
autocomplete.show_results(nodes, function(data) {
document.getElementById(edit_comp_modal_ids['pref_distri']).value = data;
})
}, function() {
// Nothing to do---
})
});
new AutocompleteCustomUi(edit_comp_modal_ids['package'], edit_comp_modal_ids['package']+'-ac-ul',
function(search, autocomplete) {
api_search_package(search, function(result) {
nodes = [];
for (var i = 0; i < result.results.length; i++) {
var pkg = result.results[i];
// Construct the ui:
ui = AutocompleteCustomUi.create_media_div(pkg.image, [document.createTextNode(pkg.name)])
nodes.push({'ui': ui, 'data': pkg.name});
}
autocomplete.show_results(nodes, function(data) {
document.getElementById(edit_comp_modal_ids['package']).value = data;
})
}, function() {
// Nothing to do---
})
});
});

16
shimatta_kenkyusho/static/js/kenyusho-api-v1.js
View File

@@ -35,4 +35,20 @@ function api_search_component(search, onSuccess, onFail) {
function api_get_component_from_id(id, onSuccess, onFail) {
return api_ajax_request_without_send('GET', api_urls_v1['component-list']+`?search=${encodeURIComponent(id)}`, function(method, url, json) {onSuccess(json.results[0]);}, onFail);
}
function api_search_component_types(search, onSuccess, onFail) {
return api_ajax_request_without_send('GET', api_urls_v1['component-type-list']+`?search=${encodeURIComponent(search)}`, function(method, url, json) {onSuccess(json);}, onFail);
}
function api_search_package(search, onSuccess, onFail) {
return api_ajax_request_without_send('GET', api_urls_v1['package-list']+`?search=${encodeURIComponent(search)}`, function(method, url, json) {onSuccess(json);}, onFail);
}
function api_search_manufacturer(search, onSuccess, onFail) {
return api_ajax_request_without_send('GET', api_urls_v1['manufacturer-list']+`?search=${encodeURIComponent(search)}`, function(method, url, json) {onSuccess(json);}, onFail);
}
function api_search_distributor(search, onSuccess, onFail) {
return api_ajax_request_without_send('GET', api_urls_v1['distributor-list']+`?search=${encodeURIComponent(search)}`, function(method, url, json) {onSuccess(json);}, onFail);
}