add search function to edit page

This commit is contained in:
archon0ne 2024-07-03 17:43:00 +02:00
parent 12b6c90481
commit 14901477a3
2 changed files with 89 additions and 0 deletions

26
app.py
View File

@ -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)

View File

@ -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>