add search function to edit page
This commit is contained in:
parent
12b6c90481
commit
14901477a3
26
app.py
26
app.py
@ -232,5 +232,31 @@ def item_image(tpl):
|
||||
details = get_item_details_cached(tpl)
|
||||
return jsonify({'image512pxLink': details.get('image512pxLink', ''), 'name': details.get('name', '')})
|
||||
|
||||
@app.route('/search_items', methods=['GET'])
|
||||
def search_items():
|
||||
query = request.args.get('query', '')
|
||||
if not query:
|
||||
return jsonify([])
|
||||
|
||||
search_query = f'''
|
||||
{{
|
||||
items(name: "{query}") {{
|
||||
id
|
||||
name
|
||||
gridImageLink
|
||||
}}
|
||||
}}
|
||||
'''
|
||||
|
||||
try:
|
||||
response = requests.post(TARKOV_API_URL, json={'query': search_query})
|
||||
data = response.json()
|
||||
items = data['data'].get('items', [])
|
||||
return jsonify(items)
|
||||
except Exception as e:
|
||||
logging.error(f"Error searching for items with query '{query}': {e}")
|
||||
logging.error(traceback.format_exc())
|
||||
return jsonify([]), 500
|
||||
|
||||
if __name__ == '__main__':
|
||||
app.run(debug=True)
|
||||
|
@ -55,6 +55,18 @@
|
||||
width: 30px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.search-result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.search-result-item img {
|
||||
width: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.search-result-item button {
|
||||
margin-left: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -130,6 +142,13 @@
|
||||
{% endif %}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
<!-- Add the search form and results section -->
|
||||
<h2>Search Items</h2>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" id="item-search" placeholder="Search for items...">
|
||||
</div>
|
||||
<div id="search-results" class="mt-3"></div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
@ -173,6 +192,50 @@
|
||||
$(`#barter_img_${index}`).attr('src', data.image512pxLink);
|
||||
});
|
||||
});
|
||||
|
||||
$('#item-search').on('input', function() {
|
||||
const query = $(this).val();
|
||||
if (query.length > 2) {
|
||||
$.get('/search_items', { query: query }, function(data) {
|
||||
let resultsHtml = '';
|
||||
data.forEach(item => {
|
||||
resultsHtml += `
|
||||
<div class="search-result-item" data-id="${item.id}" data-name="${item.name}" data-img="${item.gridImageLink}">
|
||||
<img src="${item.gridImageLink}" alt="${item.name}" style="width: 30px;">
|
||||
<span>${item.name}</span>
|
||||
<button class="btn btn-primary btn-sm add-search-item" type="button">Add</button>
|
||||
</div>`;
|
||||
});
|
||||
$('#search-results').html(resultsHtml);
|
||||
});
|
||||
} else {
|
||||
$('#search-results').empty();
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', '.add-search-item', function() {
|
||||
const itemId = $(this).closest('.search-result-item').data('id');
|
||||
const itemName = $(this).closest('.search-result-item').data('name');
|
||||
const itemImg = $(this).closest('.search-result-item').data('img');
|
||||
|
||||
const newItem = `
|
||||
<div class="form-group barter-item" data-index="${barterIndex}">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">
|
||||
<img src="${itemImg}" alt="${itemName}" style="width: 30px;" id="barter_img_${barterIndex}">
|
||||
</span>
|
||||
</div>
|
||||
<input type="text" class="form-control barter_tpl" id="barter_tpl_${barterIndex}" name="barter_tpl" value="${itemId}" required>
|
||||
<input type="number" class="form-control barter_count" id="barter_count_${barterIndex}" name="barter_count" value="1" required>
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-danger remove-barter-item" type="button">Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
$('#barter-scheme').append(newItem);
|
||||
barterIndex++;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
Loading…
x
Reference in New Issue
Block a user