zydronium/py-kms
1
0
Fork 0
mirror of https://github.com/Py-KMS-Organization/py-kms.git synced 2025-07-24 10:38:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

filter and button

Browse source 
Added a name filter and a "copy" button
This commit is contained in:
konk22 2024-08-04 23:42:01 +03:00 • committed by GitHub
parent 646f4766f4
commit c04182aa62
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 68 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

81
py-kms/templates/products.html
View file

@ -1,6 +1,6 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% block title %}clients{% endblock %} {% block title %}Clients{% endblock %}
{% block content %} {% block content %}
<nav class="level"> <nav class="level">
@ -32,22 +32,77 @@
<hr> <hr>
<!-- Search Input -->
<div class="field">
<div class="control">
<input class="input" type="text" id="search" placeholder="Search by Name" />
</div>
</div>
<!-- Table -->
<table class="table is-bordered is-striped is-hoverable is-fullwidth"> <table class="table is-bordered is-striped is-hoverable is-fullwidth">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th><abbr title="Group Volume License Key">GVLK</abbr></th> <th><abbr title="Group Volume License Key">GVLK</abbr></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody id="product-table-body">
{% for name, gvlk in products | dictsort %} {% for name, gvlk in products | dictsort %}
{% if gvlk %} {% if gvlk %}
<tr> <tr>
<td>{{ name }}</td> <td class="product-name">{{ name }}</td>
<td><pre>{{ gvlk }}</pre></td> <td>
</tr> <div style="position: relative; display: flex; align-items: center;">
{% endif %} <pre class="gvlk-value">{{ gvlk }}</pre>
{% endfor %} <button class="button is-small is-primary copy-button" data-clipboard-text="{{ gvlk }}" title="Copy to clipboard">
Copy
</button>
</div>
</td>
</tr>
{% endif %}
{% endfor %}
</tbody> </tbody>
</table> </table>
{% endblock %}
<!-- Include the clipboard.js library -->
<script src="{{ url_for('static', filename='scripts/2.0.8/clipboard.min.js') }}"></script>
<script>
// Initialize Clipboard.js
var clipboard = new ClipboardJS('.copy-button');
clipboard.on('success', function(e) {
e.trigger.innerText = 'Copied!';
setTimeout(function() {
e.trigger.innerText = 'Copy';
}, 1000);
e.clearSelection();
});
clipboard.on('error', function(e) {
e.trigger.innerText = 'Failed';
setTimeout(function() {
e.trigger.innerText = 'Copy';
}, 1000);
});
// Search functionality
document.getElementById('search').addEventListener('input', function() {
var searchValue = this.value.toLowerCase();
var rows = document.querySelectorAll('#product-table-body tr');
rows.forEach(function(row) {
var nameCell = row.querySelector('.product-name');
var nameText = nameCell.textContent.toLowerCase();
if (nameText.includes(searchValue)) {
row.style.display = '';
} else {
row.style.display = 'none';
}
});
});
</script>
{% endblock %}