1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<div class="row">
<div class="col-12">
<div class="container mt-4">
<div class="row justify-content-center">
<div class="col-12 col-md-8">
<form class="form-inline">
<div class="row">
<div class="col-sm-6">
<label style="font-weight: 700;">Name:</label>
<input class="form-control input-sm" id="edtname">
</div>
<div class="col-sm-6">
<label class= 'pe-2'style="font-weight: 700;">Description:</label>
<input class="form-control input-sm" id="edtdescription">
</div>
</div>
</form>
<div class="row">
<div class="col-sm">
<form class='form-inline'>
<div class="col-sm">
<div class="form-cells"><input type="checkbox" id="cbstatus"></div>
<div class="form-cells ps-1 py-2"><label style="font-weight: 700;font-size: 15px" id="lblactive">Active?</label></div>
</div>
</form>
</div>
</div>
<form class="form-inline">
<div class= "row">
<div class="col-sm-5">
<label class="py-2" style="font-weight: 700;">Show <select class="custom-select" id="wcbpagesize" style="font-size: 1.00rem;"></select> entries</label>
</div>
<div class="col-sm-5">
<button class= "ps-3" id="btnapply"></button>
</div>
</div>
</form>
<table class="table table-responsive table-striped table-bordered" id="tblPhoneGrid">
<thead class="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<!-- Rows will be added dynamically via Delphi code -->
</tbody>
</table>
<label id="lblentries"></label>
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center" id="pagination">
<!-- Pagination items will be added dynamically via Delphi code -->
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="audioModal" tabindex="-1" aria-labelledby="audioModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="audioModalLabel">Audio Player</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="stopAudio()"></button>
</div>
<div class="modal-body">
<audio controls id="audioPlayer">
<source src="" type="audio/mp3" id="audioSource">
Your browser does not support the audio element.
</audio>
</div>
</div>
</div>
</div>
<script>
document.getElementById('tblPhoneGrid').addEventListener('click', function(event) {
// Check if the clicked element is a table cell (td)
if (event.target.tagName === 'TD') {
const row = event.target.parentNode;
const cells = row.getElementsByTagName('td');
// Extract data from the row
const id = cells[0].textContent;
const name = cells[1].textContent;
const description = cells[2].textContent;
const status = cells[3].textContent.trim().toLowerCase();
// Populate form fields
document.getElementById('edtname').value = name;
document.getElementById('edtdescription').value = description;
// Set the checkbox based on the status
const isActive = status === 'active';
document.getElementById('cbstatus').checked = isActive;
console.log(`Row clicked! ID: ${id}, Name: ${name}, Description: ${description}, Status: ${status}`);
}
});
</script>