Kea2-python 1.0.6b0__py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.


This version of Kea2-python might be problematic. Click here for more details.

Files changed (52) hide show
  1. kea2/__init__.py +3 -0
  2. kea2/absDriver.py +56 -0
  3. kea2/adbUtils.py +554 -0
  4. kea2/assets/config_version.json +16 -0
  5. kea2/assets/fastbot-thirdpart.jar +0 -0
  6. kea2/assets/fastbot_configs/abl.strings +2 -0
  7. kea2/assets/fastbot_configs/awl.strings +3 -0
  8. kea2/assets/fastbot_configs/max.config +7 -0
  9. kea2/assets/fastbot_configs/max.fuzzing.strings +699 -0
  10. kea2/assets/fastbot_configs/max.schema.strings +1 -0
  11. kea2/assets/fastbot_configs/max.strings +3 -0
  12. kea2/assets/fastbot_configs/max.tree.pruning +27 -0
  13. kea2/assets/fastbot_configs/teardown.py +18 -0
  14. kea2/assets/fastbot_configs/widget.block.py +38 -0
  15. kea2/assets/fastbot_libs/arm64-v8a/libfastbot_native.so +0 -0
  16. kea2/assets/fastbot_libs/armeabi-v7a/libfastbot_native.so +0 -0
  17. kea2/assets/fastbot_libs/x86/libfastbot_native.so +0 -0
  18. kea2/assets/fastbot_libs/x86_64/libfastbot_native.so +0 -0
  19. kea2/assets/framework.jar +0 -0
  20. kea2/assets/kea2-thirdpart.jar +0 -0
  21. kea2/assets/monkeyq.jar +0 -0
  22. kea2/assets/quicktest.py +126 -0
  23. kea2/cli.py +320 -0
  24. kea2/fastbotManager.py +267 -0
  25. kea2/fastbotx/ActivityTimes.py +52 -0
  26. kea2/fastbotx/ReuseEntry.py +74 -0
  27. kea2/fastbotx/ReuseModel.py +63 -0
  28. kea2/fastbotx/__init__.py +7 -0
  29. kea2/fbm_parser.py +871 -0
  30. kea2/fs_lock.py +131 -0
  31. kea2/kea2_api.py +166 -0
  32. kea2/keaUtils.py +1112 -0
  33. kea2/kea_launcher.py +319 -0
  34. kea2/logWatcher.py +92 -0
  35. kea2/mixin.py +22 -0
  36. kea2/report/__init__.py +0 -0
  37. kea2/report/bug_report_generator.py +793 -0
  38. kea2/report/mixin.py +482 -0
  39. kea2/report/report_merger.py +797 -0
  40. kea2/report/templates/bug_report_template.html +3876 -0
  41. kea2/report/templates/merged_bug_report_template.html +3333 -0
  42. kea2/report/utils.py +10 -0
  43. kea2/resultSyncer.py +65 -0
  44. kea2/u2Driver.py +610 -0
  45. kea2/utils.py +184 -0
  46. kea2/version_manager.py +102 -0
  47. kea2_python-1.0.6b0.dist-info/METADATA +447 -0
  48. kea2_python-1.0.6b0.dist-info/RECORD +52 -0
  49. kea2_python-1.0.6b0.dist-info/WHEEL +5 -0
  50. kea2_python-1.0.6b0.dist-info/entry_points.txt +2 -0
  51. kea2_python-1.0.6b0.dist-info/licenses/LICENSE +16 -0
  52. kea2_python-1.0.6b0.dist-info/top_level.txt +1 -0
@@ -0,0 +1,3876 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Kea2 Test Report</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <style>
11
+ :root {
12
+ --primary-color: #3498db;
13
+ --secondary-color: #2ecc71;
14
+ --warning-color: #f39c12;
15
+ --danger-color: #e74c3c;
16
+ --dark-color: #2c3e50;
17
+ --light-color: #ecf0f1;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Segoe UI', Roboto, -apple-system, sans-serif;
22
+ background-color: #f8f9fa;
23
+ color: #333;
24
+ line-height: 1.6;
25
+ }
26
+
27
+ /* Custom container width - wider than Bootstrap default */
28
+ .container {
29
+ max-width: 98% !important;
30
+ width: 98% !important;
31
+ }
32
+
33
+ @media (min-width: 1200px) {
34
+ .container {
35
+ max-width: 1800px !important;
36
+ width: 95% !important;
37
+ }
38
+ }
39
+
40
+ @media (min-width: 1400px) {
41
+ .container {
42
+ max-width: 2000px !important;
43
+ width: 92% !important;
44
+ }
45
+ }
46
+
47
+ @media (min-width: 1600px) {
48
+ .container {
49
+ max-width: 2200px !important;
50
+ width: 90% !important;
51
+ }
52
+ }
53
+
54
+ @media (min-width: 1800px) {
55
+ .container {
56
+ max-width: 2400px !important;
57
+ width: 88% !important;
58
+ }
59
+ }
60
+
61
+ @media (min-width: 2000px) {
62
+ .container {
63
+ max-width: 2600px !important;
64
+ width: 85% !important;
65
+ }
66
+ }
67
+
68
+ .header {
69
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
70
+ color: white;
71
+ padding: 2.5rem 0;
72
+ margin-bottom: 3rem;
73
+ border-radius: 0 0 20px 20px;
74
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
75
+ }
76
+
77
+ .stats-card {
78
+ border-radius: 12px;
79
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
80
+ transition: transform 0.3s, box-shadow 0.3s;
81
+ height: 100%;
82
+ overflow: hidden;
83
+ padding: 1rem;
84
+ }
85
+
86
+ .stats-card:hover {
87
+ transform: translateY(-5px);
88
+ box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
89
+ }
90
+
91
+ .card-header {
92
+ font-weight: 600;
93
+ padding: 1.25rem 1.5rem;
94
+ }
95
+
96
+ .card-body {
97
+ padding: 1.5rem;
98
+ }
99
+
100
+ .screenshots-container {
101
+ display: flex;
102
+ overflow-x: auto;
103
+ gap: 15px;
104
+ padding: 15px 0;
105
+ scrollbar-width: thin;
106
+ scrollbar-color: var(--primary-color) #eee;
107
+ }
108
+
109
+ .screenshots-container::-webkit-scrollbar {
110
+ height: 8px;
111
+ }
112
+
113
+ .screenshots-container::-webkit-scrollbar-track {
114
+ background: #eee;
115
+ border-radius: 10px;
116
+ }
117
+
118
+ .screenshots-container::-webkit-scrollbar-thumb {
119
+ background-color: var(--primary-color);
120
+ border-radius: 10px;
121
+ }
122
+
123
+ .screenshot-item {
124
+ flex: 0 0 auto;
125
+ width: 300px;
126
+ position: relative;
127
+ transition: transform 0.2s;
128
+ margin-bottom: 10px;
129
+ }
130
+
131
+ .screenshot-item:hover {
132
+ transform: scale(1.03);
133
+ }
134
+
135
+ .screenshot-img {
136
+ width: 300px;
137
+ height: 400px;
138
+ object-fit: contain;
139
+ border-radius: 8px;
140
+ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
141
+ margin-bottom: 8px;
142
+ }
143
+
144
+ .screenshot-placeholder {
145
+ width: 300px;
146
+ height: 400px;
147
+ border-radius: 8px;
148
+ background: linear-gradient(180deg, rgba(52, 152, 219, 0.08), rgba(255, 255, 255, 0.98));
149
+ border: 1px solid rgba(52, 152, 219, 0.18);
150
+ box-shadow: 0 8px 24px rgba(44, 62, 80, 0.08);
151
+ display: flex;
152
+ align-items: center;
153
+ justify-content: center;
154
+ margin-bottom: 8px;
155
+ color: #6c757d;
156
+ }
157
+
158
+ .screenshot-placeholder::before {
159
+ content: "";
160
+ position: absolute;
161
+ inset: 10px;
162
+ border-radius: 10px;
163
+ border: 1px dashed rgba(52, 152, 219, 0.25);
164
+ pointer-events: none;
165
+ }
166
+
167
+ .screenshot-item .screenshot-placeholder {
168
+ position: relative;
169
+ overflow: hidden;
170
+ }
171
+
172
+ .screenshot-placeholder::after {
173
+ content: "";
174
+ position: absolute;
175
+ inset: 0;
176
+ background:
177
+ radial-gradient(circle at 20% 25%, rgba(46, 204, 113, 0.18), transparent 42%),
178
+ radial-gradient(circle at 80% 70%, rgba(52, 152, 219, 0.16), transparent 48%);
179
+ pointer-events: none;
180
+ opacity: 0.9;
181
+ }
182
+
183
+ .screenshot-placeholder .placeholder-content {
184
+ position: relative;
185
+ z-index: 1;
186
+ display: flex;
187
+ flex-direction: column;
188
+ align-items: center;
189
+ gap: 12px;
190
+ text-align: center;
191
+ }
192
+
193
+ .screenshot-placeholder .placeholder-icon {
194
+ width: 92px;
195
+ height: 92px;
196
+ border-radius: 999px;
197
+ display: inline-flex;
198
+ align-items: center;
199
+ justify-content: center;
200
+ box-shadow: 0 16px 32px rgba(52, 152, 219, 0.22);
201
+ border: 1px solid rgba(52, 152, 219, 0.22);
202
+ background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(52, 152, 219, 0.10));
203
+ }
204
+
205
+ .screenshot-placeholder .placeholder-icon i {
206
+ font-size: 40px;
207
+ color: var(--primary-color);
208
+ }
209
+
210
+ .screenshot-placeholder .placeholder-icon.info i {
211
+ color: #6c757d;
212
+ }
213
+
214
+ .screenshot-placeholder .placeholder-icon.reboot {
215
+ background: conic-gradient(from 210deg, rgba(46, 204, 113, 0.22), rgba(52, 152, 219, 0.22), rgba(46, 204, 113, 0.22));
216
+ }
217
+
218
+ .screenshot-placeholder .placeholder-text {
219
+ font-size: 13px;
220
+ font-weight: 600;
221
+ letter-spacing: 0.2px;
222
+ color: rgba(44, 62, 80, 0.78);
223
+ padding: 6px 10px;
224
+ border-radius: 999px;
225
+ background: rgba(255, 255, 255, 0.72);
226
+ border: 1px solid rgba(52, 152, 219, 0.14);
227
+ box-shadow: 0 6px 18px rgba(44, 62, 80, 0.06);
228
+ }
229
+
230
+ .screenshot-item:hover .screenshot-placeholder {
231
+ border-color: rgba(52, 152, 219, 0.28);
232
+ box-shadow: 0 12px 30px rgba(44, 62, 80, 0.10);
233
+ }
234
+
235
+ .screenshot-item:hover .placeholder-icon.reboot i {
236
+ animation: reboot-spin 1.4s ease-in-out infinite;
237
+ }
238
+
239
+ @keyframes reboot-spin {
240
+ 0% { transform: rotate(0deg); }
241
+ 60% { transform: rotate(220deg); }
242
+ 100% { transform: rotate(360deg); }
243
+ }
244
+
245
+ .screenshot-caption {
246
+ font-size: 13px;
247
+ color: #555;
248
+ padding: 12px 8px;
249
+ font-weight: 500;
250
+ text-align: center;
251
+ background-color: white;
252
+ border-radius: 8px;
253
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
254
+ line-height: 1.5;
255
+ white-space: normal;
256
+ word-wrap: break-word;
257
+ min-height: 50px;
258
+ display: flex;
259
+ flex-direction: column;
260
+ justify-content: center;
261
+ align-items: center;
262
+ }
263
+
264
+ .screenshot-caption .step-number {
265
+ display: block;
266
+ font-weight: 600;
267
+ color: var(--primary-color);
268
+ font-size: 12px;
269
+ margin-bottom: 4px;
270
+ }
271
+
272
+ .screenshot-caption .step-action {
273
+ display: block;
274
+ font-size: 13px;
275
+ color: #666;
276
+ font-weight: 400;
277
+ line-height: 1.3;
278
+ }
279
+
280
+ .table-custom {
281
+ border-radius: 10px;
282
+ overflow: hidden;
283
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
284
+ width: 100%;
285
+ table-layout: auto;
286
+ }
287
+
288
+ .crash-analysis-panel {
289
+ background-color: #ffffff;
290
+ border-radius: 14px;
291
+ padding: 1.75rem;
292
+ box-shadow: 0 6px 15px rgba(44, 62, 80, 0.08);
293
+ border: 1px solid rgba(0, 0, 0, 0.05);
294
+ }
295
+
296
+ .crash-analysis-panel .btn-group .btn {
297
+ font-weight: 600;
298
+ }
299
+
300
+ .table-custom thead {
301
+ background-color: #495057;
302
+ color: white;
303
+ }
304
+
305
+ .table-custom th {
306
+ font-weight: 600;
307
+ padding: 15px 12px;
308
+ white-space: nowrap;
309
+ text-align: center;
310
+ }
311
+
312
+ .table-custom td {
313
+ padding: 15px 12px;
314
+ vertical-align: middle;
315
+ text-align: center;
316
+ }
317
+
318
+ /* Override text alignment for stack trace containers */
319
+ .table-custom td .bg-light {
320
+ text-align: left;
321
+ }
322
+
323
+ .table-custom td .bg-light pre {
324
+ text-align: left !important;
325
+ }
326
+
327
+ /* Enhanced Error Details styling for Property Statistics */
328
+ .table-custom tr.collapse {
329
+ position: relative;
330
+ z-index: 10;
331
+ }
332
+
333
+ .table-custom tr.collapse td {
334
+ border-top: none;
335
+ padding-top: 0;
336
+ }
337
+
338
+ .table-custom tr.collapse .bg-light {
339
+ max-width: none;
340
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
341
+ border: 1px solid #e9ecef;
342
+ }
343
+
344
+ .table-custom tr.collapse pre {
345
+ font-size: 0.85rem;
346
+ line-height: 1.4;
347
+ background-color: #f8f9fa;
348
+ border: 1px solid #e9ecef;
349
+ border-radius: 4px;
350
+ padding: 0.75rem;
351
+ white-space: pre-wrap;
352
+ word-wrap: break-word;
353
+ }
354
+
355
+ .table-custom tr.collapse details {
356
+ margin-top: 0.5rem;
357
+ }
358
+
359
+ .table-custom tr.collapse summary {
360
+ cursor: pointer;
361
+ margin-bottom: 0.5rem;
362
+ }
363
+
364
+ /* Specific column widths for property statistics table */
365
+ .table-custom th:nth-child(1), .table-custom td:nth-child(1) { /* Index */
366
+ width: 5%;
367
+ min-width: 50px;
368
+ }
369
+
370
+ .table-custom th:nth-child(2), .table-custom td:nth-child(2) { /* Property Name */
371
+ width: 18%;
372
+ min-width: 180px;
373
+ text-align: left;
374
+ }
375
+
376
+ .table-custom th:nth-child(3), .table-custom td:nth-child(3) { /* Precondition Satisfied */
377
+ width: 9%;
378
+ min-width: 85px;
379
+ }
380
+
381
+ .table-custom th:nth-child(4), .table-custom td:nth-child(4) { /* Executed */
382
+ width: 8%;
383
+ min-width: 70px;
384
+ }
385
+
386
+ .table-custom th:nth-child(5), .table-custom td:nth-child(5) { /* Fails */
387
+ width: 7%;
388
+ min-width: 65px;
389
+ }
390
+
391
+ .table-custom th:nth-child(6), .table-custom td:nth-child(6) { /* Errors */
392
+ width: 8%;
393
+ min-width: 70px;
394
+ }
395
+
396
+ .table-custom th:nth-child(7), .table-custom td:nth-child(7) { /* Error Details */
397
+ width: 45%;
398
+ min-width: 400px;
399
+ text-align: center;
400
+ position: relative;
401
+ }
402
+
403
+ /* Property Checking Statistics specific adjustments */
404
+ .table-property-stats th,
405
+ .table-property-stats td {
406
+ padding: 20px 14px;
407
+ line-height: 1.65;
408
+ }
409
+
410
+ .table-property-stats th:nth-child(1),
411
+ .table-property-stats td:nth-child(1) {
412
+ width: 6%;
413
+ min-width: 60px;
414
+ }
415
+
416
+ .table-property-stats th:nth-child(2),
417
+ .table-property-stats td:nth-child(2) {
418
+ width: 22%;
419
+ min-width: 200px;
420
+ text-align: left;
421
+ }
422
+
423
+ .table-property-stats th:nth-child(3),
424
+ .table-property-stats td:nth-child(3) {
425
+ width: 10%;
426
+ min-width: 90px;
427
+ }
428
+
429
+ .table-property-stats th:nth-child(4),
430
+ .table-property-stats td:nth-child(4) {
431
+ width: 9%;
432
+ min-width: 80px;
433
+ }
434
+
435
+ .table-property-stats th:nth-child(5),
436
+ .table-property-stats td:nth-child(5) {
437
+ width: 9%;
438
+ min-width: 80px;
439
+ }
440
+
441
+ .table-property-stats th:nth-child(6),
442
+ .table-property-stats td:nth-child(6) {
443
+ width: 9%;
444
+ min-width: 80px;
445
+ }
446
+
447
+ .table-property-stats th:nth-child(7),
448
+ .table-property-stats td:nth-child(7) {
449
+ width: 9%;
450
+ min-width: 80px;
451
+ }
452
+
453
+ .table-property-stats th:nth-child(8),
454
+ .table-property-stats td:nth-child(8) {
455
+ width: 26%;
456
+ min-width: 260px;
457
+ text-align: left;
458
+ }
459
+
460
+ .table-property-stats td:nth-child(8) {
461
+ display: flex;
462
+ justify-content: flex-start;
463
+ align-items: center;
464
+ gap: 0.75rem;
465
+ }
466
+
467
+ .table-custom tbody tr:nth-of-type(odd) {
468
+ background-color: rgba(0, 0, 0, 0.02);
469
+ }
470
+
471
+ .table-custom tbody tr:hover {
472
+ background-color: rgba(0, 0, 0, 0.05);
473
+ }
474
+
475
+ .stat-value {
476
+ font-size: 2.2rem;
477
+ font-weight: 700;
478
+ display: block;
479
+ margin-bottom: 0.8rem;
480
+ line-height: 1.2;
481
+ }
482
+
483
+ .stat-label {
484
+ font-size: 1rem;
485
+ color: #666;
486
+ display: block;
487
+ margin-top: 5px;
488
+ }
489
+
490
+ .summary-grid {
491
+ display: grid;
492
+ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
493
+ gap: 24px;
494
+ }
495
+
496
+ .summary-item {
497
+ text-align: center;
498
+ padding: 20px 16px;
499
+ border-radius: 12px;
500
+ background-color: #f8fafc;
501
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
502
+ }
503
+
504
+ .summary-item:hover {
505
+ transform: translateY(-4px);
506
+ box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08);
507
+ }
508
+
509
+ .summary-item i {
510
+ font-size: 2rem;
511
+ display: block;
512
+ margin-bottom: 12px;
513
+ }
514
+
515
+ .chart-container {
516
+ background-color: white;
517
+ border-radius: 12px;
518
+ padding: 30px;
519
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
520
+ margin-bottom: 40px;
521
+ }
522
+
523
+ .section-title {
524
+ position: relative;
525
+ padding-bottom: 15px;
526
+ margin-bottom: 30px;
527
+ font-weight: 600;
528
+ color: var(--dark-color);
529
+ }
530
+
531
+ .section-title::after {
532
+ content: '';
533
+ position: absolute;
534
+ bottom: 0;
535
+ left: 0;
536
+ height: 3px;
537
+ width: 50px;
538
+ background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
539
+ border-radius: 3px;
540
+ }
541
+
542
+ .section-block {
543
+ margin-bottom: 70px;
544
+ }
545
+
546
+ .value-highlight {
547
+ color: var(--primary-color);
548
+ }
549
+
550
+ .value-danger {
551
+ color: var(--danger-color);
552
+ }
553
+
554
+ .value-warning {
555
+ color: var(--warning-color);
556
+ }
557
+
558
+ .value-success {
559
+ color: var(--secondary-color);
560
+ }
561
+
562
+ .summary-card {
563
+ border-radius: 12px;
564
+ background-color: white;
565
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
566
+ padding: 30px;
567
+ margin-bottom: 40px;
568
+ }
569
+
570
+ .link-button {
571
+ color: var(--primary-color);
572
+ text-decoration: none;
573
+ font-weight: 500;
574
+ transition: color 0.2s;
575
+ }
576
+
577
+ .link-button:hover {
578
+ color: var(--secondary-color);
579
+ text-decoration: underline;
580
+ }
581
+
582
+ .badge-custom {
583
+ padding: 6px 12px;
584
+ border-radius: 50px;
585
+ font-weight: 500;
586
+ font-size: 0.9rem;
587
+ margin: 0 2px;
588
+ }
589
+
590
+ .activity-list {
591
+ height: 550px;
592
+ overflow-y: auto;
593
+ border-radius: 8px;
594
+ border: 1px solid rgba(0,0,0,0.1);
595
+ padding: 15px;
596
+ background-color: rgba(255,255,255,0.5);
597
+ scrollbar-width: thin;
598
+ scrollbar-color: var(--primary-color) #eee;
599
+ margin-bottom: 15px;
600
+ }
601
+
602
+ .activity-list::-webkit-scrollbar {
603
+ width: 8px;
604
+ }
605
+
606
+ .activity-list::-webkit-scrollbar-track {
607
+ background: #eee;
608
+ border-radius: 10px;
609
+ }
610
+
611
+ .activity-list::-webkit-scrollbar-thumb {
612
+ background-color: var(--primary-color);
613
+ border-radius: 10px;
614
+ }
615
+
616
+ .activities-container {
617
+ display: flex;
618
+ flex-direction: column;
619
+ height: 650px;
620
+ }
621
+
622
+ .pagination-container {
623
+ padding: 10px 0;
624
+ background-color: white;
625
+ border-radius: 0 0 8px 8px;
626
+ box-shadow: 0 2px 4px rgba(0,0,0,0.05);
627
+ }
628
+
629
+ .pagination-container.pagination-violations {
630
+ padding: 10px 16px;
631
+ }
632
+
633
+ .activity-item {
634
+ padding: 10px 15px;
635
+ border-radius: 6px;
636
+ margin-bottom: 10px;
637
+ font-size: 0.95rem;
638
+ word-break: break-all;
639
+ background-color: white;
640
+ box-shadow: 0 1px 3px rgba(0,0,0,0.05);
641
+ transition: all 0.2s;
642
+ line-height: 1.5;
643
+ display: flex;
644
+ align-items: center;
645
+ justify-content: space-between;
646
+ }
647
+
648
+ .activity-item .activity-content {
649
+ display: flex;
650
+ align-items: center;
651
+ flex: 1;
652
+ min-width: 0;
653
+ }
654
+
655
+ .activity-item .activity-name {
656
+ flex: 1;
657
+ word-break: break-all;
658
+ margin-right: 10px;
659
+ }
660
+
661
+ .activity-item .traversal-badge {
662
+ flex-shrink: 0;
663
+ font-size: 0.85rem;
664
+ font-weight: 500;
665
+ }
666
+
667
+ .activity-item:hover {
668
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
669
+ transform: translateX(3px);
670
+ }
671
+
672
+ .nav-tabs .nav-link {
673
+ color: #666;
674
+ border: 1px solid transparent;
675
+ border-radius: 6px 6px 0 0;
676
+ font-weight: 500;
677
+ transition: all 0.3s ease;
678
+ }
679
+
680
+ .nav-tabs .nav-link:hover {
681
+ color: var(--primary-color);
682
+ border-color: rgba(52, 152, 219, 0.2);
683
+ background-color: rgba(52, 152, 219, 0.05);
684
+ }
685
+
686
+ .nav-tabs .nav-link.active {
687
+ color: var(--primary-color);
688
+ background-color: white;
689
+ border-color: #dee2e6 #dee2e6 #fff;
690
+ font-weight: 600;
691
+ }
692
+
693
+ .tab-content {
694
+ border: 1px solid #dee2e6;
695
+ border-top: none;
696
+ border-radius: 0 0 8px 8px;
697
+ padding: 20px;
698
+ background-color: #fafafa;
699
+ }
700
+
701
+ .sorting-controls {
702
+ background-color: #f8f9fa;
703
+ border: 1px solid #e9ecef;
704
+ border-radius: 8px;
705
+ padding: 15px;
706
+ margin-bottom: 20px;
707
+ }
708
+
709
+ .sorting-controls .form-select {
710
+ min-width: 140px;
711
+ }
712
+
713
+ .sorting-controls .btn {
714
+ transition: all 0.3s ease;
715
+ }
716
+
717
+ .sorting-controls .btn:hover {
718
+ transform: translateY(-1px);
719
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
720
+ }
721
+
722
+ .sort-icon {
723
+ margin-left: 8px;
724
+ transition: all 0.3s ease;
725
+ font-size: 1.4rem;
726
+ color: #ffffff !important;
727
+ opacity: 0.6;
728
+ text-shadow: 0 0 3px rgba(0,0,0,0.3);
729
+ }
730
+
731
+ .sort-icon:hover {
732
+ opacity: 1;
733
+ transform: scale(1.2);
734
+ text-shadow: 0 0 5px rgba(0,0,0,0.5);
735
+ }
736
+
737
+ .sort-icon.active {
738
+ opacity: 1;
739
+ font-weight: bold;
740
+ text-shadow: 0 0 5px rgba(0,0,0,0.5);
741
+ }
742
+
743
+ .sort-icon.asc.active {
744
+ color: #40e0d0 !important;
745
+ }
746
+
747
+ .sort-icon.desc.active {
748
+ color: #ff6b6b !important;
749
+ }
750
+
751
+ .table-violations thead {
752
+ background-color: #dc3545 !important;
753
+ color: white;
754
+ }
755
+
756
+ .table-violations .sort-icon {
757
+ color: #ffffff !important;
758
+ text-shadow: 0 0 3px rgba(0,0,0,0.4);
759
+ }
760
+
761
+ .table-violations .sort-icon:hover {
762
+ opacity: 1;
763
+ transform: scale(1.2);
764
+ text-shadow: 0 0 5px rgba(0,0,0,0.6);
765
+ }
766
+
767
+ /* Specific column widths for property violations table */
768
+ .table-violations th:nth-child(1), .table-violations td:nth-child(1) { /* Index */
769
+ width: 10%;
770
+ min-width: 60px;
771
+ text-align: center;
772
+ }
773
+
774
+ .table-violations th:nth-child(2), .table-violations td:nth-child(2) { /* Property Name */
775
+ width: 40%;
776
+ min-width: 200px;
777
+ text-align: left;
778
+ }
779
+
780
+ .table-violations th:nth-child(3), .table-violations td:nth-child(3) { /* Interaction Scenario Pages */
781
+ width: 50%;
782
+ min-width: 150px;
783
+ text-align: center;
784
+ }
785
+
786
+ @media (max-width: 768px) {
787
+ .container {
788
+ max-width: 98% !important;
789
+ width: 98% !important;
790
+ padding-left: 10px !important;
791
+ padding-right: 10px !important;
792
+ }
793
+
794
+ .stat-value {
795
+ font-size: 1.5rem;
796
+ }
797
+
798
+ .screenshot-item {
799
+ width: 280px;
800
+ }
801
+
802
+ .screenshot-img {
803
+ width: 280px;
804
+ height: 400px;
805
+ }
806
+
807
+ .table-custom {
808
+ font-size: 0.9rem;
809
+ }
810
+
811
+ .table-custom th, .table-custom td {
812
+ padding: 10px 6px;
813
+ }
814
+
815
+ .badge-custom {
816
+ font-size: 0.8rem;
817
+ padding: 4px 8px;
818
+ }
819
+ }
820
+
821
+ @media (max-width: 576px) {
822
+ .container {
823
+ max-width: 100% !important;
824
+ width: 100% !important;
825
+ padding-left: 5px !important;
826
+ padding-right: 5px !important;
827
+ }
828
+
829
+ .screenshot-item {
830
+ width: 260px;
831
+ }
832
+
833
+ .screenshot-img {
834
+ width: 260px;
835
+ height: 380px;
836
+ }
837
+
838
+ .table-custom {
839
+ font-size: 0.8rem;
840
+ }
841
+
842
+ .table-custom th, .table-custom td {
843
+ padding: 8px 4px;
844
+ white-space: normal;
845
+ }
846
+ }
847
+
848
+ /* Modern Sorting Controls Styling */
849
+ .sorting-controls-modern {
850
+ background: #ffffff;
851
+ border: 1px solid #e5e7eb;
852
+ border-radius: 16px;
853
+ padding: 20px 24px;
854
+ margin-bottom: 16px;
855
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
856
+ transition: all 0.2s ease;
857
+ position: relative;
858
+ }
859
+
860
+ .sorting-controls-modern:hover {
861
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
862
+ border-color: #d1d5db;
863
+ }
864
+
865
+ .sort-label-section {
866
+ display: flex;
867
+ align-items: center;
868
+ gap: 16px;
869
+ }
870
+
871
+ .sort-icon-wrapper {
872
+ width: 48px;
873
+ height: 48px;
874
+ background: linear-gradient(135deg, #3498db, #2980b9);
875
+ border-radius: 12px;
876
+ display: flex;
877
+ align-items: center;
878
+ justify-content: center;
879
+ box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
880
+ }
881
+
882
+ .sort-icon-wrapper i {
883
+ color: white;
884
+ font-size: 20px;
885
+ }
886
+
887
+ .sort-text {
888
+ display: flex;
889
+ flex-direction: column;
890
+ gap: 4px;
891
+ }
892
+
893
+ .sort-title {
894
+ font-size: 16px;
895
+ font-weight: 600;
896
+ color: #2c3e50;
897
+ line-height: 1.2;
898
+ }
899
+
900
+ .sort-subtitle {
901
+ font-size: 13px;
902
+ color: #7f8c8d;
903
+ font-weight: 400;
904
+ line-height: 1.2;
905
+ }
906
+
907
+ .sort-button-section {
908
+ display: flex;
909
+ align-items: center;
910
+ }
911
+
912
+ .btn-sort-modern {
913
+ background: linear-gradient(135deg, #27ae60, #2ecc71);
914
+ border: none;
915
+ border-radius: 10px;
916
+ padding: 12px 20px;
917
+ color: white;
918
+ font-weight: 500;
919
+ font-size: 14px;
920
+ cursor: pointer;
921
+ transition: all 0.3s ease;
922
+ box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
923
+ position: relative;
924
+ overflow: hidden;
925
+ }
926
+
927
+ .btn-sort-modern::before {
928
+ content: '';
929
+ position: absolute;
930
+ top: 0;
931
+ left: -100%;
932
+ width: 100%;
933
+ height: 100%;
934
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
935
+ transition: left 0.5s ease;
936
+ }
937
+
938
+ .btn-sort-modern:hover {
939
+ transform: translateY(-2px);
940
+ box-shadow: 0 4px 16px rgba(46, 204, 113, 0.4);
941
+ }
942
+
943
+ .btn-sort-modern:hover::before {
944
+ left: 100%;
945
+ }
946
+
947
+ .btn-sort-modern:active {
948
+ transform: translateY(0px);
949
+ box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
950
+ }
951
+
952
+ .btn-content {
953
+ display: flex;
954
+ align-items: center;
955
+ gap: 8px;
956
+ position: relative;
957
+ z-index: 1;
958
+ }
959
+
960
+ .btn-icon {
961
+ font-size: 16px;
962
+ opacity: 0.9;
963
+ }
964
+
965
+ .btn-text {
966
+ font-size: 14px;
967
+ font-weight: 500;
968
+ white-space: nowrap;
969
+ }
970
+
971
+ .btn-arrow {
972
+ font-size: 14px;
973
+ transition: transform 0.3s ease;
974
+ opacity: 0.8;
975
+ }
976
+
977
+ .btn-sort-modern:hover .btn-arrow {
978
+ transform: scale(1.1);
979
+ opacity: 1;
980
+ }
981
+
982
+ /* Responsive design for sorting controls */
983
+ @media (max-width: 768px) {
984
+ .sorting-controls-modern {
985
+ padding: 16px 20px;
986
+ }
987
+
988
+ .sort-label-section {
989
+ gap: 12px;
990
+ }
991
+
992
+ .sort-icon-wrapper {
993
+ width: 40px;
994
+ height: 40px;
995
+ }
996
+
997
+ .sort-icon-wrapper i {
998
+ font-size: 16px;
999
+ }
1000
+
1001
+ .sort-title {
1002
+ font-size: 14px;
1003
+ }
1004
+
1005
+ .sort-subtitle {
1006
+ font-size: 12px;
1007
+ }
1008
+
1009
+ .btn-sort-modern {
1010
+ padding: 10px 16px;
1011
+ }
1012
+
1013
+ .btn-text {
1014
+ font-size: 13px;
1015
+ }
1016
+ }
1017
+
1018
+ @media (max-width: 576px) {
1019
+ .sorting-controls-modern {
1020
+ flex-direction: column;
1021
+ text-align: center;
1022
+ gap: 16px;
1023
+ }
1024
+
1025
+ .sorting-controls-modern .d-flex {
1026
+ flex-direction: column;
1027
+ gap: 16px;
1028
+ }
1029
+
1030
+ .sort-label-section {
1031
+ justify-content: center;
1032
+ }
1033
+ }
1034
+
1035
+ /* Search Controls Styling */
1036
+ .search-controls-modern {
1037
+ background: #ffffff;
1038
+ border: 1px solid #e5e7eb;
1039
+ border-radius: 16px;
1040
+ padding: 20px 24px;
1041
+ margin-bottom: 20px;
1042
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
1043
+ transition: all 0.2s ease;
1044
+ position: relative;
1045
+ }
1046
+
1047
+ .search-controls-modern:hover {
1048
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
1049
+ border-color: #d1d5db;
1050
+ }
1051
+
1052
+ /* Property search container with outline */
1053
+ .property-search-container {
1054
+ position: relative;
1055
+ display: flex;
1056
+ align-items: center;
1057
+ border: 1px solid #d1d5db;
1058
+ border-radius: 6px;
1059
+ background-color: #f8f9fa;
1060
+ transition: all 0.2s ease;
1061
+ overflow: hidden;
1062
+ }
1063
+
1064
+ .property-search-container:hover {
1065
+ border-color: #9ca3af;
1066
+ }
1067
+
1068
+ .property-search-container:focus-within {
1069
+ border-color: #3b82f6;
1070
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
1071
+ background-color: #ffffff;
1072
+ }
1073
+
1074
+ /* Simple search input styling for Property Statistics */
1075
+ .property-stats-search-simple {
1076
+ border: none !important;
1077
+ box-shadow: none !important;
1078
+ background-color: transparent !important;
1079
+ border-radius: 0 !important;
1080
+ padding: 8px 12px !important;
1081
+ font-size: 14px;
1082
+ flex: 1;
1083
+ outline: none;
1084
+ }
1085
+
1086
+ .property-stats-search-simple:focus {
1087
+ background-color: transparent !important;
1088
+ box-shadow: none !important;
1089
+ border: none !important;
1090
+ outline: none;
1091
+ }
1092
+
1093
+ .property-stats-search-simple::placeholder {
1094
+ color: #9ca3af;
1095
+ font-style: italic;
1096
+ }
1097
+
1098
+ /* Search icon button */
1099
+ .property-search-icon-btn {
1100
+ background: none;
1101
+ border: none;
1102
+ padding: 8px 12px;
1103
+ color: #6b7280;
1104
+ cursor: pointer;
1105
+ display: flex;
1106
+ align-items: center;
1107
+ justify-content: center;
1108
+ transition: color 0.2s ease;
1109
+ border-left: 1px solid #e5e7eb;
1110
+ }
1111
+
1112
+ .property-search-icon-btn:hover {
1113
+ color: #3b82f6;
1114
+ background-color: rgba(59, 130, 246, 0.05);
1115
+ }
1116
+
1117
+ .property-search-icon-btn:active {
1118
+ color: #1d4ed8;
1119
+ }
1120
+
1121
+ /* Activities Coverage table styling */
1122
+ .table-activities thead {
1123
+ background-color: #007bff !important;
1124
+ color: white;
1125
+ }
1126
+
1127
+ .table-activities .sort-icon {
1128
+ color: #ffffff !important;
1129
+ text-shadow: 0 0 3px rgba(0,0,0,0.4);
1130
+ }
1131
+
1132
+ .table-activities .sort-icon:hover {
1133
+ opacity: 1;
1134
+ transform: scale(1.2);
1135
+ text-shadow: 0 0 5px rgba(0,0,0,0.6);
1136
+ }
1137
+
1138
+ .table-activities .activities-sort-icon {
1139
+ color: #ffffff !important;
1140
+ text-shadow: 0 0 3px rgba(0,0,0,0.4);
1141
+ }
1142
+
1143
+ .table-activities .activities-sort-icon:hover {
1144
+ opacity: 1;
1145
+ transform: scale(1.2);
1146
+ text-shadow: 0 0 5px rgba(0,0,0,0.6);
1147
+ }
1148
+
1149
+ /* Column widths for activities table */
1150
+ .table-activities th:nth-child(1), .table-activities td:nth-child(1) { /* Activity Name */
1151
+ width: 70%;
1152
+ min-width: 300px;
1153
+ text-align: left;
1154
+ padding-left: 180px;
1155
+ }
1156
+
1157
+ .table-activities th:nth-child(2), .table-activities td:nth-child(2) { /* Visit Count */
1158
+ width: 30%;
1159
+ min-width: 150px;
1160
+ text-align: center;
1161
+ }
1162
+
1163
+ /* Modern Activity Item Styling */
1164
+ .activity-item {
1165
+ background: #ffffff;
1166
+ border: 1px solid #f3f4f6;
1167
+ border-radius: 12px;
1168
+ padding: 16px 20px;
1169
+ margin-bottom: 8px;
1170
+ transition: all 0.2s ease;
1171
+ display: flex;
1172
+ align-items: center;
1173
+ justify-content: space-between;
1174
+ }
1175
+
1176
+ .activity-item:hover {
1177
+ border-color: #e5e7eb;
1178
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
1179
+ transform: translateY(-1px);
1180
+ }
1181
+
1182
+ .activity-content {
1183
+ display: flex;
1184
+ align-items: center;
1185
+ gap: 12px;
1186
+ }
1187
+
1188
+ .activity-name {
1189
+ font-weight: 500;
1190
+ color: #374151;
1191
+ font-size: 14px;
1192
+ }
1193
+
1194
+ .traversal-badge {
1195
+ background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
1196
+ border: none;
1197
+ border-radius: 20px;
1198
+ padding: 6px 12px;
1199
+ font-size: 12px;
1200
+ font-weight: 500;
1201
+ box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
1202
+ }
1203
+
1204
+ /* Modern Search Input */
1205
+ .activity-search-input {
1206
+ border: 1px solid #e5e7eb;
1207
+ border-radius: 12px;
1208
+ padding: 12px 16px;
1209
+ font-size: 14px;
1210
+ transition: all 0.2s ease;
1211
+ background: #f9fafb;
1212
+ }
1213
+
1214
+ .activity-search-input:focus {
1215
+ border-color: #3b82f6;
1216
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
1217
+ background: #ffffff;
1218
+ }
1219
+
1220
+ .search-btn {
1221
+ border-radius: 12px;
1222
+ padding: 12px 16px;
1223
+ background: linear-gradient(135deg, #3b82f6, #1d4ed8);
1224
+ border: none;
1225
+ transition: all 0.2s ease;
1226
+ }
1227
+
1228
+ .search-btn:hover {
1229
+ background: linear-gradient(135deg, #2563eb, #1e40af);
1230
+ transform: translateY(-1px);
1231
+ box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
1232
+ }
1233
+
1234
+ /* Combined Search and Sort Controls */
1235
+ .search-sort-controls-modern {
1236
+ background: #ffffff;
1237
+ border: 1px solid #e5e7eb;
1238
+ border-radius: 16px;
1239
+ padding: 20px 24px;
1240
+ margin-bottom: 20px;
1241
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
1242
+ transition: all 0.2s ease;
1243
+ position: relative;
1244
+ }
1245
+
1246
+ .search-sort-controls-modern:hover {
1247
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
1248
+ border-color: #d1d5db;
1249
+ }
1250
+
1251
+ .search-section {
1252
+ min-width: 0; /* Allow flex item to shrink */
1253
+ }
1254
+
1255
+ .sort-section {
1256
+ flex-shrink: 0; /* Prevent sort section from shrinking */
1257
+ }
1258
+
1259
+ .sort-label {
1260
+ white-space: nowrap;
1261
+ font-size: 14px;
1262
+ }
1263
+
1264
+ /* Responsive design for combined controls */
1265
+ @media (max-width: 768px) {
1266
+ .search-sort-controls-modern .d-flex {
1267
+ flex-direction: column;
1268
+ gap: 16px !important;
1269
+ }
1270
+
1271
+ .search-section {
1272
+ width: 100% !important;
1273
+ max-width: none !important;
1274
+ flex-shrink: 1 !important;
1275
+ }
1276
+
1277
+ .sort-section {
1278
+ justify-content: center;
1279
+ width: 100%;
1280
+ margin-left: 0 !important;
1281
+ }
1282
+ }
1283
+
1284
+ @media (max-width: 576px) {
1285
+ .search-section {
1286
+ max-width: none !important;
1287
+ }
1288
+
1289
+ .search-icon-wrapper {
1290
+ width: 40px;
1291
+ height: 40px;
1292
+ }
1293
+
1294
+ .search-icon-wrapper i {
1295
+ font-size: 18px;
1296
+ }
1297
+ }
1298
+
1299
+ .search-icon-wrapper {
1300
+ width: 48px;
1301
+ height: 48px;
1302
+ background: linear-gradient(135deg, #17a2b8, #138496);
1303
+ border-radius: 12px;
1304
+ display: flex;
1305
+ align-items: center;
1306
+ justify-content: center;
1307
+ box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);
1308
+ }
1309
+
1310
+ .search-icon-wrapper i {
1311
+ color: white;
1312
+ font-size: 20px;
1313
+ }
1314
+
1315
+ .activity-search-input {
1316
+ border: 1px solid #ced4da;
1317
+ border-radius: 8px 0 0 8px;
1318
+ padding: 12px 16px;
1319
+ font-size: 14px;
1320
+ transition: all 0.3s ease;
1321
+ }
1322
+
1323
+ .activity-search-input:focus {
1324
+ border-color: #17a2b8;
1325
+ box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25);
1326
+ }
1327
+
1328
+ .search-btn {
1329
+ border-radius: 0;
1330
+ border-left: none;
1331
+ border-right: none;
1332
+ padding: 12px 16px;
1333
+ transition: all 0.3s ease;
1334
+ background-color: #17a2b8;
1335
+ border-color: #17a2b8;
1336
+ color: white;
1337
+ }
1338
+
1339
+ .search-btn:hover {
1340
+ background-color: #138496;
1341
+ border-color: #117a8b;
1342
+ color: white;
1343
+ transform: translateY(-1px);
1344
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
1345
+ }
1346
+
1347
+ .search-btn:focus {
1348
+ box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
1349
+ }
1350
+
1351
+ .search-clear-btn {
1352
+ border-radius: 0 8px 8px 0;
1353
+ border-left: none;
1354
+ padding: 12px 16px;
1355
+ transition: all 0.3s ease;
1356
+ }
1357
+
1358
+ .search-clear-btn:hover {
1359
+ background-color: #dc3545;
1360
+ border-color: #dc3545;
1361
+ color: white;
1362
+ }
1363
+
1364
+ .search-results-count {
1365
+ display: block;
1366
+ margin-top: 8px;
1367
+ font-size: 12px;
1368
+ font-style: italic;
1369
+ }
1370
+ </style>
1371
+ </head>
1372
+
1373
+ <body>
1374
+ <!-- Header -->
1375
+ <header class="header text-center">
1376
+ <div class="container">
1377
+ <h1><i class="bi bi-bug"></i> Kea2 Test Report</h1>
1378
+ <p class="lead">Test Time: {{ test_time }}</p>
1379
+ <p class="lead">Log Stamp: {{ log_stamp }}</p>
1380
+ </div>
1381
+ </header>
1382
+
1383
+ <div class="container mb-5">
1384
+ <!-- Test Summary -->
1385
+ <div class="row mb-4">
1386
+ <div class="col-12">
1387
+ <div class="summary-card">
1388
+ <h2 class="section-title">Test Summary</h2>
1389
+ <div class="summary-grid">
1390
+ <div class="summary-item">
1391
+ <i class="bi bi-bug text-danger"></i>
1392
+ <span class="stat-value value-danger">{{ bugs_found }}</span>
1393
+ <span class="stat-label">Property Violations</span>
1394
+ </div>
1395
+ <div class="summary-item">
1396
+ <i class="bi bi-clock-history text-primary"></i>
1397
+ <span class="stat-value value-highlight">{{ total_testing_time }}</span>
1398
+ <span class="stat-label">Total Testing Time</span>
1399
+ </div>
1400
+ <div class="summary-item">
1401
+ <i class="bi bi-activity text-success"></i>
1402
+ <span class="stat-value value-success">{{ executed_events }}</span>
1403
+ <span class="stat-label">Executed Events</span>
1404
+ </div>
1405
+ <div class="summary-item">
1406
+ <i class="bi bi-pie-chart text-warning"></i>
1407
+ <span class="stat-value value-warning">{{ coverage_percent }}%</span>
1408
+ <span class="stat-label">Activity Coverage</span>
1409
+ </div>
1410
+ <div class="summary-item">
1411
+ <i class="bi bi-list-check text-info"></i>
1412
+ <span class="stat-value value-highlight">{{ executed_properties_count }}/{{ all_properties_count }}</span>
1413
+ <span class="stat-label">Executed Properties</span>
1414
+ </div>
1415
+ <div class="summary-item">
1416
+ <i class="bi bi-exclamation-octagon text-danger"></i>
1417
+ <span class="stat-value value-danger">{{ triggered_crash_count }}</span>
1418
+ <span class="stat-label">Triggered Crash</span>
1419
+ </div>
1420
+ <div class="summary-item">
1421
+ <i class="bi bi-hourglass-split text-warning"></i>
1422
+ <span class="stat-value value-warning">{{ triggered_anr_count }}</span>
1423
+ <span class="stat-label">Triggered ANR</span>
1424
+ </div>
1425
+ </div>
1426
+ </div>
1427
+ </div>
1428
+ </div>
1429
+
1430
+ <!-- Coverage Trend Chart -->
1431
+ <div class="section-block">
1432
+ <h2 class="section-title">Coverage Trend</h2>
1433
+ <div class="chart-container">
1434
+ <canvas id="coverageChart"></canvas>
1435
+ </div>
1436
+ </div>
1437
+
1438
+ <!-- Property Execution Trend Chart -->
1439
+ <div class="section-block">
1440
+ <h2 class="section-title">Property Execution Trend</h2>
1441
+ <div class="chart-container">
1442
+ <canvas id="propertyExecutionChart"></canvas>
1443
+ </div>
1444
+ </div>
1445
+
1446
+ <!-- Activities Coverage -->
1447
+ <div class="section-block">
1448
+ <h2 class="section-title">Activities Coverage</h2>
1449
+
1450
+ <!-- Search Controls for Activities -->
1451
+ <div class="mb-4">
1452
+ <div class="d-flex align-items-center">
1453
+ <div style="width: 33%;">
1454
+ <div class="property-search-container">
1455
+ <input type="text" class="form-control property-search-input property-stats-search-simple"
1456
+ id="activities-search"
1457
+ placeholder="Search activities by name..."
1458
+ data-target="activities-container"
1459
+ data-item-class="activity-row"
1460
+ data-pagination="activities-pagination"
1461
+ data-page-size="activities-page-size">
1462
+ <button class="property-search-icon-btn" type="button" id="activities-search-btn">
1463
+ <i class="bi bi-search"></i>
1464
+ </button>
1465
+ </div>
1466
+ </div>
1467
+ <div class="ms-3">
1468
+ <small class="text-muted search-results-count" id="activities-search-results"></small>
1469
+ </div>
1470
+ </div>
1471
+ </div>
1472
+
1473
+ <div class="table-responsive">
1474
+ <table class="table table-custom table-activities">
1475
+ <thead>
1476
+ <tr>
1477
+ <th>Activity Name <span class="badge bg-primary ms-2" style="font-size: 0.9rem; font-weight: 600;">{{ tested_activities_count }}/{{ total_activities_count }}</span></th>
1478
+ <th>Visit Count <i class="bi bi-arrow-down-up text-muted sort-icon activities-sort-icon" id="visit-count-sort" data-column="visit-count" data-order="none" style="cursor: pointer;"></i></th>
1479
+ </tr>
1480
+ </thead>
1481
+ <tbody id="activities-container">
1482
+ {% if total_activities|length > 0 %}
1483
+ {% for activity in total_activities %}
1484
+ <tr class="activity-row" data-page="1"
1485
+ data-activity-name="{{ activity }}"
1486
+ data-visit-count="{{ activity_count_history[activity] if activity in activity_count_history else 0 }}">
1487
+ <td>
1488
+ {% if activity in tested_activities %}
1489
+ <i class="bi bi-check-circle-fill text-success me-2"></i>
1490
+ {% else %}
1491
+ <i class="bi bi-dash-circle text-secondary me-2"></i>
1492
+ {% endif %}
1493
+ <span class="activity-name">{{ activity }}</span>
1494
+ </td>
1495
+ <td>
1496
+ {% if activity in activity_count_history %}
1497
+ <span class="badge bg-info text-white">
1498
+ <i class="bi bi-eye"></i> {{ activity_count_history[activity] }} times
1499
+ </span>
1500
+ {% else %}
1501
+ <span class="badge bg-secondary text-white">
1502
+ <i class="bi bi-dash"></i> 0 times
1503
+ </span>
1504
+ {% endif %}
1505
+ </td>
1506
+ </tr>
1507
+ {% endfor %}
1508
+ {% else %}
1509
+ <tr>
1510
+ <td colspan="2" class="text-center">
1511
+ <div class="alert alert-warning mb-0">
1512
+ No activities information available
1513
+ </div>
1514
+ </td>
1515
+ </tr>
1516
+ {% endif %}
1517
+ </tbody>
1518
+ </table>
1519
+
1520
+ <!-- Pagination for Activities -->
1521
+ <div class="d-flex justify-content-between align-items-center mt-3">
1522
+ <div class="d-flex align-items-center">
1523
+ <label for="activities-page-size" class="form-label me-2 mb-0">Show:</label>
1524
+ <select class="form-select form-select-sm" id="activities-page-size" style="width: auto;">
1525
+ <option value="5">5</option>
1526
+ <option value="10" selected>10</option>
1527
+ <option value="20">20</option>
1528
+ <option value="50">50</option>
1529
+ <option value="100">100</option>
1530
+ </select>
1531
+ </div>
1532
+ <nav aria-label="Activities Pagination">
1533
+ <ul class="pagination pagination-sm mb-0" id="activities-pagination">
1534
+ <!-- Pagination will be generated by JavaScript -->
1535
+ </ul>
1536
+ </nav>
1537
+ </div>
1538
+ </div>
1539
+ </div>
1540
+
1541
+ <!-- Screenshots Section -->
1542
+ {% if take_screenshots %}
1543
+ {% if screenshots or kill_apps_events %}
1544
+ <div class="section-block">
1545
+ <h2 class="section-title">Test Screenshots</h2>
1546
+ <div class="card">
1547
+ <div class="card-body">
1548
+ <div class="screenshots-container" id="screenshots">
1549
+ {% if screenshots %}
1550
+ {% for screenshot in screenshots %}
1551
+ <div class="screenshot-item">
1552
+ {% if screenshot.path %}
1553
+ <a href="{{ screenshot.path }}" target="_blank">
1554
+ <img src="{{ screenshot.path }}" class="screenshot-img" id="{{ screenshot.id }}">
1555
+ </a>
1556
+ {% else %}
1557
+ <div class="screenshot-placeholder" id="{{ screenshot.id }}">
1558
+ {% if screenshot.info == "kill_apps" %}
1559
+ <div class="placeholder-content">
1560
+ <span class="placeholder-icon reboot">
1561
+ <i class="bi bi-bootstrap-reboot"></i>
1562
+ </span>
1563
+ <div class="placeholder-text">Restart app</div>
1564
+ </div>
1565
+ {% else %}
1566
+ <div class="placeholder-content">
1567
+ <span class="placeholder-icon info">
1568
+ <i class="bi bi-info-circle"></i>
1569
+ </span>
1570
+ <div class="placeholder-text">Info event</div>
1571
+ </div>
1572
+ {% endif %}
1573
+ </div>
1574
+ {% endif %}
1575
+ <div class="screenshot-caption">{{ screenshot.caption }}</div>
1576
+ </div>
1577
+ {% endfor %}
1578
+ {% else %}
1579
+ {% for ev in kill_apps_events %}
1580
+ <div class="screenshot-item">
1581
+ <div class="screenshot-placeholder" id="{{ ev.step_index }}">
1582
+ <div class="placeholder-content">
1583
+ <span class="placeholder-icon reboot">
1584
+ <i class="bi bi-bootstrap-reboot"></i>
1585
+ </span>
1586
+ <div class="placeholder-text">Restart app</div>
1587
+ </div>
1588
+ </div>
1589
+ <div class="screenshot-caption">
1590
+ {{ ev.step_index }}. Monkey Step {{ ev.monkey_steps_count }}: restart app
1591
+ </div>
1592
+ </div>
1593
+ {% endfor %}
1594
+ {% endif %}
1595
+ </div>
1596
+ </div>
1597
+ </div>
1598
+ </div>
1599
+ {% else %}
1600
+ <div class="section-block">
1601
+ <h2 class="section-title">Test Screenshots</h2>
1602
+ <div class="alert alert-info text-center">
1603
+ <i class="bi bi-info-circle"></i> No screenshots captured in this test session.
1604
+ </div>
1605
+ </div>
1606
+ {% endif %}
1607
+ {% endif %}
1608
+
1609
+ <!-- Crash Analysis Section -->
1610
+ {% if crash_events or anr_events %}
1611
+ <div class="section-block">
1612
+ <h2 class="section-title">
1613
+ <i class="bi bi-exclamation-triangle text-danger"></i> Crash and ANR Events
1614
+ </h2>
1615
+
1616
+ <!-- Detailed Crash Information -->
1617
+ <div class="crash-analysis-panel">
1618
+ <!-- Event Filter -->
1619
+ <div class="mb-3">
1620
+ <div class="btn-group" role="group" aria-label="Event filter">
1621
+ <input type="radio" class="btn-check" name="event-filter" id="all-events" autocomplete="off" checked>
1622
+ <label class="btn btn-outline-primary" for="all-events">All Events ({{ (crash_events|length) + (anr_events|length) }})</label>
1623
+
1624
+ <input type="radio" class="btn-check" name="event-filter" id="crashes-only" autocomplete="off">
1625
+ <label class="btn btn-outline-danger" for="crashes-only">Crashes Only ({{ crash_events|length }})</label>
1626
+
1627
+ <input type="radio" class="btn-check" name="event-filter" id="anr-only" autocomplete="off">
1628
+ <label class="btn btn-outline-warning" for="anr-only">ANR Only ({{ anr_events|length }})</label>
1629
+ </div>
1630
+ </div>
1631
+
1632
+ <!-- Events Table -->
1633
+ <div class="table-responsive">
1634
+ <table class="table table-custom">
1635
+ <thead>
1636
+ <tr>
1637
+ <th>Type</th>
1638
+ <th>Time</th>
1639
+ <th>Exception</th>
1640
+ <th>Process</th>
1641
+ {% if take_screenshots %}
1642
+ <th>Interaction Scenario Pages</th>
1643
+ {% endif %}
1644
+ <th>Details</th>
1645
+ </tr>
1646
+ </thead>
1647
+ <tbody id="crash-events-container">
1648
+ {% for crash in crash_events %}
1649
+ <tr class="event-row" data-type="crash" data-page="1">
1650
+ <td><span class="badge bg-danger">CRASH</span></td>
1651
+ <td>{{ crash.time }}</td>
1652
+ <td>{{ crash.exception_type }}</td>
1653
+ <td>{{ crash.process }}</td>
1654
+ {% if take_screenshots %}
1655
+ <td>
1656
+ {% if crash.screenshot_id %}
1657
+ <a href="#{{ crash.screenshot_id }}" class="link-button" onclick="scrollToScreenshot('{{ crash.screenshot_id }}')">
1658
+ <i class="bi bi-camera"></i> Screenshot {{ crash.screenshot_id }}
1659
+ </a>
1660
+ {% else %}
1661
+ <span class="text-muted">No screenshot</span>
1662
+ {% endif %}
1663
+ </td>
1664
+ {% endif %}
1665
+ <td>
1666
+ <button class="btn btn-sm btn-outline-primary" type="button"
1667
+ data-bs-toggle="collapse" data-bs-target="#crash-detail-{{ loop.index }}"
1668
+ aria-expanded="false" aria-controls="crash-detail-{{ loop.index }}">
1669
+ <i class="bi bi-eye"></i> Details
1670
+ </button>
1671
+ <button class="btn btn-sm btn-outline-secondary copy-stack-btn"
1672
+ data-stack-index="{{ loop.index }}">
1673
+ <i class="bi bi-clipboard"></i> Copy
1674
+ </button>
1675
+ </td>
1676
+ </tr>
1677
+ <tr class="collapse" id="crash-detail-{{ loop.index }}">
1678
+ <td colspan="{% if take_screenshots %}6{% else %}5{% endif %}">
1679
+ <div class="bg-light p-3 rounded">
1680
+ <h6 class="text-danger">Stack Trace:</h6>
1681
+ <pre class="text-danger mb-0 text-start" id="stack-trace-{{ loop.index }}" style="font-size: 0.9em; white-space: pre-wrap; text-align: left;">{{ crash.stack_trace }}</pre>
1682
+ </div>
1683
+ </td>
1684
+ </tr>
1685
+ {% endfor %}
1686
+
1687
+ {% for anr in anr_events %}
1688
+ <tr class="event-row" data-type="anr" data-page="1">
1689
+ <td><span class="badge bg-warning text-dark">ANR</span></td>
1690
+ <td>{{ anr.time }}</td>
1691
+ <td>{{ anr.reason }}</td>
1692
+ <td>{{ anr.process }}</td>
1693
+ {% if take_screenshots %}
1694
+ <td>
1695
+ {% if anr.screenshot_id %}
1696
+ <a href="#{{ anr.screenshot_id }}" class="link-button" onclick="scrollToScreenshot('{{ anr.screenshot_id }}')">
1697
+ <i class="bi bi-camera"></i> Screenshot {{ anr.screenshot_id }}
1698
+ </a>
1699
+ {% else %}
1700
+ <span class="text-muted">No screenshot</span>
1701
+ {% endif %}
1702
+ </td>
1703
+ {% endif %}
1704
+ <td>
1705
+ <button class="btn btn-sm btn-outline-primary" type="button"
1706
+ data-bs-toggle="collapse" data-bs-target="#anr-detail-{{ loop.index }}"
1707
+ aria-expanded="false" aria-controls="anr-detail-{{ loop.index }}">
1708
+ <i class="bi bi-eye"></i> Details
1709
+ </button>
1710
+ <button class="btn btn-sm btn-outline-secondary copy-stack-btn"
1711
+ data-stack-index="anr-{{ loop.index }}">
1712
+ <i class="bi bi-clipboard"></i> Copy
1713
+ </button>
1714
+ </td>
1715
+ </tr>
1716
+ <tr class="collapse" id="anr-detail-{{ loop.index }}">
1717
+ <td colspan="{% if take_screenshots %}6{% else %}5{% endif %}">
1718
+ <div class="bg-light p-3 rounded">
1719
+ <h6 class="text-dark">ANR Details:</h6>
1720
+ <pre class="text-dark mb-0 text-start" id="stack-trace-anr-{{ loop.index }}" style="font-size: 0.9em; white-space: pre-wrap; text-align: left;">{{ anr.trace }}</pre>
1721
+ </div>
1722
+ </td>
1723
+ </tr>
1724
+ {% endfor %}
1725
+ </tbody>
1726
+ </table>
1727
+ </div>
1728
+
1729
+ <!-- Pagination for Crash Events -->
1730
+ <div class="pagination-container d-flex justify-content-between align-items-center mt-3">
1731
+ <div class="d-flex align-items-center">
1732
+ <label for="events-page-size" class="form-label me-2 mb-0">Show:</label>
1733
+ <select class="form-select form-select-sm" id="events-page-size" style="width: auto;">
1734
+ <option value="5">5</option>
1735
+ <option value="10" selected>10</option>
1736
+ <option value="20">20</option>
1737
+ <option value="50">50</option>
1738
+ <option value="100">100</option>
1739
+ </select>
1740
+ </div>
1741
+ <nav aria-label="Crash Events Pagination">
1742
+ <ul class="pagination pagination-sm mb-0" id="events-pagination">
1743
+ <!-- Pagination will be generated by JavaScript -->
1744
+ </ul>
1745
+ </nav>
1746
+ </div>
1747
+ </div>
1748
+ </div>
1749
+ {% else %}
1750
+ <div class="section-block">
1751
+ <h2 class="section-title">
1752
+ <i class="bi bi-exclamation-triangle text-danger"></i> Crash and ANR Events
1753
+ </h2>
1754
+ <div class="alert alert-info text-center">
1755
+ <i class="bi bi-info-circle"></i> No crash or ANR events detected in this test session.
1756
+ </div>
1757
+ </div>
1758
+ {% endif %}
1759
+
1760
+ <!-- Property Violations List -->
1761
+ {% if take_screenshots %}
1762
+ {% if property_violations %}
1763
+ <div class="section-block">
1764
+ <h2 class="section-title">Property Violations</h2>
1765
+ <div class="table-responsive">
1766
+ <table class="table table-custom table-violations">
1767
+ <thead>
1768
+ <tr>
1769
+ <th>Index</th>
1770
+ <th>Property Name</th>
1771
+ <th>Interaction Scenario Pages</th>
1772
+ </tr>
1773
+ </thead>
1774
+ <tbody id="property-violations-container">
1775
+ {% for violation in property_violations %}
1776
+ <tr class="property-violation-row" data-page="1" data-status="{{ violation.state|default('fail') }}">
1777
+ <td>{{ violation.index }}</td>
1778
+ <td><span class="badge bg-light text-dark badge-custom">{{ violation.property_name }}</span></td>
1779
+ <td>
1780
+ <a href="#{{ violation.interaction_pages|last }}" class="link-button"
1781
+ onclick="scrollToScreenshot('{{ violation.interaction_pages|last }}')">
1782
+ {{ violation.interaction_pages[0] }} ~ {{ violation.interaction_pages[1] }}
1783
+ </a>
1784
+ </td>
1785
+ </tr>
1786
+ {% endfor %}
1787
+ </tbody>
1788
+ </table>
1789
+
1790
+ <!-- Pagination for Property Violations -->
1791
+ <div class="d-flex justify-content-between align-items-center mt-3 pagination-container pagination-violations">
1792
+ <div class="d-flex align-items-center gap-3">
1793
+ <label for="violations-page-size" class="form-label me-2 mb-0">Show:</label>
1794
+ <select class="form-select form-select-sm" id="violations-page-size" style="width: auto;">
1795
+ <option value="5">5</option>
1796
+ <option value="10" selected>10</option>
1797
+ <option value="20">20</option>
1798
+ <option value="50">50</option>
1799
+ <option value="100">100</option>
1800
+ </select>
1801
+ <label for="violations-status-filter" class="form-label mb-0">Status:</label>
1802
+ <select class="form-select form-select-sm" id="violations-status-filter" style="width: auto;">
1803
+ <option value="all" selected>All</option>
1804
+ <option value="fail">Fail only</option>
1805
+ </select>
1806
+ </div>
1807
+ <nav aria-label="Property Violations Pagination">
1808
+ <ul class="pagination pagination-sm mb-0" id="violations-pagination">
1809
+ <!-- Pagination will be generated by JavaScript -->
1810
+ </ul>
1811
+ </nav>
1812
+ </div>
1813
+ </div>
1814
+ </div>
1815
+ {% else %}
1816
+ <div class="section-block">
1817
+ <h2 class="section-title">Property Violations</h2>
1818
+ <div class="alert alert-info text-center">
1819
+ <i class="bi bi-info-circle"></i> No property violations detected in this test session.
1820
+ </div>
1821
+ </div>
1822
+ {% endif %}
1823
+ {% endif %}
1824
+
1825
+ <!-- Property Checking Statistics -->
1826
+ <div class="section-block">
1827
+ <h2 class="section-title">Property Checking Statistics</h2>
1828
+
1829
+ <!-- Search Controls for Property Statistics -->
1830
+ <div class="mb-4">
1831
+ <div class="d-flex align-items-center">
1832
+ <div style="width: 33%;">
1833
+ <div class="property-search-container">
1834
+ <input type="text" class="form-control property-search-input property-stats-search-simple"
1835
+ id="property-stats-search"
1836
+ placeholder="Search properties by name..."
1837
+ data-target="property-stats-container"
1838
+ data-item-class="property-stat-row"
1839
+ data-pagination="stats-pagination"
1840
+ data-page-size="stats-page-size">
1841
+ <button class="property-search-icon-btn" type="button" id="property-search-btn">
1842
+ <i class="bi bi-search"></i>
1843
+ </button>
1844
+ </div>
1845
+ </div>
1846
+ <div class="ms-3">
1847
+ <small class="text-muted search-results-count" id="property-search-results"></small>
1848
+ </div>
1849
+ </div>
1850
+ </div>
1851
+
1852
+ <div class="table-responsive">
1853
+ <table class="table table-custom table-property-stats">
1854
+ <thead>
1855
+ <tr>
1856
+ <th>Index</th>
1857
+ <th>Property Name <span class="badge bg-primary ms-2" style="font-size: 0.9rem; font-weight: 600;">{{ property_stats_summary.total_properties }}</span></th>
1858
+ <th>Precondition Satisfied <span class="badge bg-success ms-2" style="font-size: 0.9rem; font-weight: 600;">{{ property_stats_summary.total_precond_satisfied }}</span></th>
1859
+ <th>Executed <span class="badge bg-info ms-2" style="font-size: 0.9rem; font-weight: 600;">{{ property_stats_summary.total_executed }}</span></th>
1860
+ <th>Passes <span class="badge bg-secondary ms-2" style="font-size: 0.9rem; font-weight: 600;">{{ property_stats_summary.total_passes }}</span></th>
1861
+ <th>Fails <span class="badge bg-danger ms-2" style="font-size: 0.9rem; font-weight: 600;">{{ property_stats_summary.total_fails }}</span> <i class="bi bi-arrow-down-up text-muted sort-icon" id="fails-sort" data-column="fails" data-order="none" style="cursor: pointer;"></i></th>
1862
+ <th>Errors <span class="badge bg-warning ms-2" style="font-size: 0.9rem; font-weight: 600;">{{ property_stats_summary.total_errors }}</span> <i class="bi bi-arrow-down-up text-muted sort-icon" id="errors-sort" data-column="errors" data-order="none" style="cursor: pointer;"></i></th>
1863
+ <th>Error Details</th>
1864
+ </tr>
1865
+ </thead>
1866
+ <tbody id="property-stats-container">
1867
+ {% for property_name, test_result in property_stats.items() %}
1868
+ <tr class="property-stat-row" data-page="1"
1869
+ data-index="{{ loop.index }}"
1870
+ data-property-name="{{ property_name }}"
1871
+ data-precond-satisfied="{{ test_result.precond_satisfied|default(0) }}"
1872
+ data-executed="{{ test_result.executed|default(0) }}"
1873
+ data-pass="{{ test_result.pass_count|default(0) }}"
1874
+ data-fails="{{ test_result.fail|default(0) }}"
1875
+ data-errors="{{ test_result.error|default(0) }}">
1876
+ <td>{{ loop.index }}</td>
1877
+ <td><span class="badge bg-light text-dark badge-custom">{{ property_name }}</span></td>
1878
+ <td>{{ test_result.precond_satisfied|default(0) }}</td>
1879
+ <td>{{ test_result.executed|default(0) }}</td>
1880
+ <td>{{ test_result.pass_count|default(0) }}</td>
1881
+ <td><span class="badge bg-danger text-white">{{ test_result.fail|default(0) }}</span></td>
1882
+ <td><span class="badge bg-warning text-dark">{{ test_result.error|default(0) }}</span></td>
1883
+ <td>
1884
+ {% if (test_result.fail|default(0) > 0 or test_result.error|default(0) > 0) and property_name in property_error_details %}
1885
+ {% set error_list = property_error_details[property_name] %}
1886
+ {% set property_index = loop.index %}
1887
+ {% if error_list|length == 1 %}
1888
+ <!-- Single error - simple display -->
1889
+ <button class="btn btn-sm btn-outline-danger" type="button" data-bs-toggle="collapse"
1890
+ data-bs-target="#single-error-detail-{{ property_index }}" aria-expanded="false"
1891
+ aria-controls="single-error-detail-{{ property_index }}">
1892
+ <i class="bi bi-exclamation-triangle"></i> View Error
1893
+ </button>
1894
+ {% else %}
1895
+ <!-- Multiple errors - tabbed display -->
1896
+ <button class="btn btn-sm btn-outline-danger" type="button" data-bs-toggle="collapse"
1897
+ data-bs-target="#multi-error-detail-{{ property_index }}" aria-expanded="false"
1898
+ aria-controls="multi-error-detail-{{ property_index }}">
1899
+ <i class="bi bi-exclamation-triangle"></i> View {{ error_list|length }} Errors
1900
+ </button>
1901
+ {% endif %}
1902
+ {% else %}
1903
+ <span class="text-muted">-</span>
1904
+ {% endif %}
1905
+ </td>
1906
+ </tr>
1907
+ {% if (test_result.fail|default(0) > 0 or test_result.error|default(0) > 0) and property_name in property_error_details %}
1908
+ {% set error_list = property_error_details[property_name] %}
1909
+ {% set property_index = loop.index %}
1910
+ {% if error_list|length == 1 %}
1911
+ <!-- Single error detail row -->
1912
+ <tr class="collapse property-detail-row" data-detail-for="{{ property_name }}" id="single-error-detail-{{ property_index }}">
1913
+ <td colspan="8">
1914
+ <div class="bg-light p-3 rounded">
1915
+ <div class="mb-2">
1916
+ <span class="badge bg-{{ 'danger' if error_list[0].state == 'fail' else 'warning' }}">
1917
+ {{ error_list[0].state|upper }}
1918
+ </span>
1919
+ {% if error_list[0].occurrence_count > 1 %}
1920
+ <span class="badge bg-info ms-2">
1921
+ Occurred {{ error_list[0].occurrence_count }} times
1922
+ </span>
1923
+ {% endif %}
1924
+ {% if error_list[0].startStepsCountList is defined and error_list[0].startStepsCountList|length > 0 %}
1925
+ <span class="badge bg-secondary ms-2">
1926
+ <i class="bi bi-step-forward"></i> Monkey Steps: {{ error_list[0].startStepsCountList|join(', ') }}
1927
+ </span>
1928
+ {% endif %}
1929
+ </div>
1930
+ {% if error_list[0].short_description %}
1931
+ <div class="mb-2">
1932
+ <strong>Error:</strong> <code>{{ error_list[0].short_description }}</code>
1933
+ </div>
1934
+ {% endif %}
1935
+ <details>
1936
+ <summary class="btn btn-sm btn-outline-secondary mb-2">Show Full Traceback</summary>
1937
+ <pre class="text-danger mb-0 text-start" style="font-size: 0.85rem; white-space: pre-wrap; text-align: left;">{{ error_list[0].traceback }}</pre>
1938
+ </details>
1939
+ </div>
1940
+ </td>
1941
+ </tr>
1942
+ {% else %}
1943
+ <!-- Multiple errors detail row -->
1944
+ <tr class="collapse property-detail-row" data-detail-for="{{ property_name }}" id="multi-error-detail-{{ property_index }}">
1945
+ <td colspan="8">
1946
+ <div class="bg-light p-3 rounded">
1947
+ <!-- Error summary -->
1948
+ <div class="mb-3">
1949
+ <h6 class="text-danger">Multiple Errors Detected</h6>
1950
+ <div class="d-flex flex-wrap gap-1">
1951
+ {% for error in error_list %}
1952
+ <span class="badge bg-{{ 'danger' if error.state == 'fail' else 'warning' }}">
1953
+ {{ error.state|upper }} #{{ loop.index }}
1954
+ {% if error.occurrence_count > 1 %} ({{ error.occurrence_count }}x){% endif %}
1955
+ {% if error.startStepsCountList is defined and error.startStepsCountList|length > 0 %}
1956
+ @{% if error.startStepsCountList|length == 1 %}{{ error.startStepsCountList[0] }}{% else %}{{ error.startStepsCountList[0] }}-{{ error.startStepsCountList[-1] }}{% endif %}
1957
+ {% endif %}
1958
+ </span>
1959
+ {% endfor %}
1960
+ </div>
1961
+ </div>
1962
+
1963
+ <!-- Error tabs -->
1964
+ <ul class="nav nav-pills nav-fill mb-3" id="multi-error-tabs-{{ property_index }}" role="tablist">
1965
+ {% for error in error_list %}
1966
+ <li class="nav-item" role="presentation">
1967
+ <button class="nav-link {{ 'active' if loop.first else '' }} btn-sm"
1968
+ id="multi-error-tab-{{ property_index }}-{{ loop.index }}"
1969
+ data-bs-toggle="pill"
1970
+ data-bs-target="#multi-error-content-{{ property_index }}-{{ loop.index }}"
1971
+ type="button" role="tab"
1972
+ aria-controls="multi-error-content-{{ property_index }}-{{ loop.index }}"
1973
+ aria-selected="{{ 'true' if loop.first else 'false' }}">
1974
+ <span class="badge bg-{{ 'danger' if error.state == 'fail' else 'warning' }} me-1">
1975
+ {{ error.state|upper }}
1976
+ </span>
1977
+ #{{ loop.index }}
1978
+ </button>
1979
+ </li>
1980
+ {% endfor %}
1981
+ </ul>
1982
+
1983
+ <!-- Error content -->
1984
+ <div class="tab-content" id="multi-error-content-{{ property_index }}">
1985
+ {% for error in error_list %}
1986
+ <div class="tab-pane fade {{ 'show active' if loop.first else '' }}"
1987
+ id="multi-error-content-{{ property_index }}-{{ loop.index }}"
1988
+ role="tabpanel"
1989
+ aria-labelledby="multi-error-tab-{{ property_index }}-{{ loop.index }}">
1990
+ <div class="mb-2">
1991
+ <span class="badge bg-{{ 'danger' if error.state == 'fail' else 'warning' }}">
1992
+ {{ error.state|upper }} #{{ loop.index }}
1993
+ </span>
1994
+ <small class="text-muted ms-2">Error {{ loop.index }} of {{ loop.length }}</small>
1995
+ {% if error.occurrence_count > 1 %}
1996
+ <span class="badge bg-info ms-2">
1997
+ {{ error.occurrence_count }} occurrences
1998
+ </span>
1999
+ {% endif %}
2000
+ {% if error.startStepsCountList is defined and error.startStepsCountList|length > 0 %}
2001
+ <span class="badge bg-secondary ms-2">
2002
+ <i class="bi bi-step-forward"></i> Monkey Steps: {{ error.startStepsCountList|join(', ') }}
2003
+ </span>
2004
+ {% endif %}
2005
+ </div>
2006
+ {% if error.short_description %}
2007
+ <div class="mb-2">
2008
+ <strong>Error:</strong> <code>{{ error.short_description }}</code>
2009
+ </div>
2010
+ {% endif %}
2011
+ <details>
2012
+ <summary class="btn btn-sm btn-outline-secondary mb-2">Show Full Traceback</summary>
2013
+ <pre class="text-danger mb-0 text-start" style="font-size: 0.85rem; white-space: pre-wrap; text-align: left;">{{ error.traceback }}</pre>
2014
+ </details>
2015
+ </div>
2016
+ {% endfor %}
2017
+ </div>
2018
+ </div>
2019
+ </td>
2020
+ </tr>
2021
+ {% endif %}
2022
+ {% endif %}
2023
+ {% endfor %}
2024
+ </tbody>
2025
+ </table>
2026
+
2027
+ <!-- Pagination for Property Checking Statistics -->
2028
+ <div class="d-flex justify-content-between align-items-center mt-3">
2029
+ <div class="d-flex align-items-center">
2030
+ <label for="stats-page-size" class="form-label me-2 mb-0">Show:</label>
2031
+ <select class="form-select form-select-sm" id="stats-page-size" style="width: auto;">
2032
+ <option value="5">5</option>
2033
+ <option value="10" selected>10</option>
2034
+ <option value="20">20</option>
2035
+ <option value="50">50</option>
2036
+ <option value="100">100</option>
2037
+ </select>
2038
+ </div>
2039
+ <nav aria-label="Property Stats Pagination">
2040
+ <ul class="pagination pagination-sm mb-0" id="stats-pagination">
2041
+ <!-- Pagination will be generated by JavaScript -->
2042
+ </ul>
2043
+ </nav>
2044
+ </div>
2045
+ </div>
2046
+ </div>
2047
+ </div>
2048
+
2049
+ <!-- Footer -->
2050
+ <footer class="bg-dark text-white text-center py-4">
2051
+ <div class="container">
2052
+ <p class="mb-0">Kea2 Test Report | Generated at: {{ timestamp }}</p>
2053
+ </div>
2054
+ </footer>
2055
+
2056
+ <!-- JavaScript -->
2057
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
2058
+ <script>
2059
+ // Draw coverage trend chart
2060
+ document.addEventListener('DOMContentLoaded', function() {
2061
+ var coverageData = {{ coverage_data|safe }};
2062
+ console.log("Coverage data points:", coverageData.length);
2063
+
2064
+ coverageData.sort(function(a, b) {
2065
+ return a.stepsCount - b.stepsCount;
2066
+ });
2067
+
2068
+ var steps = coverageData.map(function(item) { return item.stepsCount; });
2069
+ var coverages = coverageData.map(function(item) { return item.coverage; });
2070
+ var testedActivities = coverageData.map(function(item) { return item.testedActivitiesCount; });
2071
+
2072
+ if (steps.length > 0 && steps[0] > 0) {
2073
+ steps.unshift(0);
2074
+ coverages.unshift(0);
2075
+ testedActivities.unshift(0);
2076
+ }
2077
+
2078
+ console.log("Steps with zero point:", steps);
2079
+ console.log("Coverage values with zero point:", coverages);
2080
+
2081
+ var ctx = document.getElementById('coverageChart').getContext('2d');
2082
+ var chart = new Chart(ctx, {
2083
+ type: 'line',
2084
+ data: {
2085
+ labels: steps,
2086
+ datasets: [
2087
+ {
2088
+ label: 'Activity Coverage (%)',
2089
+ data: coverages.map((value, index) => ({x: steps[index], y: value})),
2090
+ borderColor: '#3498db',
2091
+ backgroundColor: 'rgba(52, 152, 219, 0.1)',
2092
+ borderWidth: 3,
2093
+ fill: true,
2094
+ tension: 0.4,
2095
+ yAxisID: 'y',
2096
+ pointRadius: 4,
2097
+ pointHoverRadius: 6
2098
+ },
2099
+ {
2100
+ label: 'Tested Activities',
2101
+ data: testedActivities.map((value, index) => ({x: steps[index], y: value})),
2102
+ borderColor: '#2ecc71',
2103
+ backgroundColor: 'rgba(46, 204, 113, 0.1)',
2104
+ borderWidth: 3,
2105
+ fill: true,
2106
+ tension: 0.4,
2107
+ yAxisID: 'y1',
2108
+ pointRadius: 4,
2109
+ pointHoverRadius: 6
2110
+ }
2111
+ ]
2112
+ },
2113
+ options: {
2114
+ responsive: true,
2115
+ maintainAspectRatio: false,
2116
+ aspectRatio: 2,
2117
+ plugins: {
2118
+ legend: {
2119
+ position: 'top',
2120
+ labels: {
2121
+ boxWidth: 15,
2122
+ usePointStyle: true,
2123
+ pointStyle: 'circle'
2124
+ }
2125
+ },
2126
+ tooltip: {
2127
+ mode: 'index',
2128
+ intersect: false,
2129
+ backgroundColor: 'rgba(0, 0, 0, 0.7)',
2130
+ titleColor: '#fff',
2131
+ bodyColor: '#fff',
2132
+ borderColor: 'rgba(255, 255, 255, 0.2)',
2133
+ borderWidth: 1,
2134
+ padding: 10,
2135
+ displayColors: true,
2136
+ callbacks: {
2137
+ label: function(context) {
2138
+ var label = context.dataset.label || '';
2139
+ if (label) {
2140
+ label += ': ';
2141
+ }
2142
+ if (context.datasetIndex === 0) {
2143
+ label += context.parsed.y.toFixed(2) + '%';
2144
+ } else {
2145
+ label += context.parsed.y;
2146
+ }
2147
+ return label;
2148
+ }
2149
+ }
2150
+ }
2151
+ },
2152
+ scales: {
2153
+ x: {
2154
+ type: 'linear',
2155
+ beginAtZero: true,
2156
+ max: steps.length > 0 ? Math.max(...steps) : 10,
2157
+ grid: {
2158
+ display: false
2159
+ },
2160
+ title: {
2161
+ display: true,
2162
+ text: 'Steps Count',
2163
+ font: {
2164
+ size: 14
2165
+ }
2166
+ },
2167
+ ticks: {
2168
+ stepSize: steps.length > 0 ? Math.max(1, Math.ceil(Math.max(...steps) / 10)) : 1,
2169
+ callback: function(value) {
2170
+ if (Number.isInteger(value) && value <= (steps.length > 0 ? Math.max(...steps) : 10)) {
2171
+ return value;
2172
+ }
2173
+ return null;
2174
+ }
2175
+ }
2176
+ },
2177
+ y: {
2178
+ beginAtZero: true,
2179
+ title: {
2180
+ display: true,
2181
+ text: 'Activity Coverage (%)',
2182
+ font: {
2183
+ size: 14
2184
+ }
2185
+ },
2186
+ grid: {
2187
+ borderDash: [5, 5]
2188
+ }
2189
+ },
2190
+ y1: {
2191
+ position: 'right',
2192
+ beginAtZero: true,
2193
+ title: {
2194
+ display: true,
2195
+ text: 'Tested Activities',
2196
+ font: {
2197
+ size: 14
2198
+ }
2199
+ },
2200
+ grid: {
2201
+ display: false
2202
+ }
2203
+ }
2204
+ },
2205
+ interaction: {
2206
+ mode: 'index',
2207
+ intersect: false
2208
+ },
2209
+ hover: {
2210
+ mode: 'index',
2211
+ intersect: false
2212
+ },
2213
+ animation: {
2214
+ duration: 1000,
2215
+ easing: 'easeOutQuart'
2216
+ }
2217
+ }
2218
+ });
2219
+
2220
+ // Draw property execution trend chart
2221
+ var propertyExecutionData = {{ property_execution_data|safe }};
2222
+ console.log("Property execution data points:", propertyExecutionData.length);
2223
+
2224
+ // Ensure we have valid data
2225
+ if (propertyExecutionData.length === 0) {
2226
+ propertyExecutionData = [{"stepsCount": 0, "executedPropertiesCount": 0}];
2227
+ }
2228
+
2229
+ propertyExecutionData.sort(function(a, b) {
2230
+ return a.stepsCount - b.stepsCount;
2231
+ });
2232
+
2233
+ var propSteps = propertyExecutionData.map(function(item) { return item.stepsCount; });
2234
+ var executedProps = propertyExecutionData.map(function(item) { return item.executedPropertiesCount; });
2235
+
2236
+ // Add zero starting point if needed
2237
+ if (propSteps.length > 0 && propSteps[0] > 0) {
2238
+ propSteps.unshift(0);
2239
+ executedProps.unshift(0);
2240
+ }
2241
+
2242
+ console.log("Property execution steps:", propSteps);
2243
+ console.log("Executed properties values:", executedProps);
2244
+
2245
+ var propCtx = document.getElementById('propertyExecutionChart').getContext('2d');
2246
+ var propChart = new Chart(propCtx, {
2247
+ type: 'line',
2248
+ data: {
2249
+ labels: propSteps,
2250
+ datasets: [
2251
+ {
2252
+ label: 'Executed Properties',
2253
+ data: executedProps.map((value, index) => ({x: propSteps[index], y: value})),
2254
+ borderColor: '#e74c3c',
2255
+ backgroundColor: 'rgba(231, 76, 60, 0.1)',
2256
+ borderWidth: 3,
2257
+ fill: true,
2258
+ tension: 0.4,
2259
+ pointRadius: 4,
2260
+ pointHoverRadius: 6
2261
+ }
2262
+ ]
2263
+ },
2264
+ options: {
2265
+ responsive: true,
2266
+ maintainAspectRatio: false,
2267
+ aspectRatio: 2,
2268
+ plugins: {
2269
+ legend: {
2270
+ position: 'top',
2271
+ labels: {
2272
+ boxWidth: 15,
2273
+ usePointStyle: true,
2274
+ pointStyle: 'circle'
2275
+ }
2276
+ },
2277
+ tooltip: {
2278
+ mode: 'index',
2279
+ intersect: false,
2280
+ backgroundColor: 'rgba(0, 0, 0, 0.7)',
2281
+ titleColor: '#fff',
2282
+ bodyColor: '#fff',
2283
+ borderColor: 'rgba(255, 255, 255, 0.2)',
2284
+ borderWidth: 1,
2285
+ padding: 10,
2286
+ displayColors: true,
2287
+ callbacks: {
2288
+ label: function(context) {
2289
+ return 'Executed Properties: ' + context.parsed.y;
2290
+ }
2291
+ }
2292
+ }
2293
+ },
2294
+ scales: {
2295
+ x: {
2296
+ type: 'linear',
2297
+ beginAtZero: true,
2298
+ max: propSteps.length > 0 ? Math.max(...propSteps) : 10,
2299
+ grid: {
2300
+ display: false
2301
+ },
2302
+ title: {
2303
+ display: true,
2304
+ text: 'Steps Count',
2305
+ font: {
2306
+ size: 14
2307
+ }
2308
+ },
2309
+ ticks: {
2310
+ stepSize: propSteps.length > 0 ? Math.max(1, Math.ceil(Math.max(...propSteps) / 10)) : 1,
2311
+ callback: function(value) {
2312
+ if (Number.isInteger(value) && value <= (propSteps.length > 0 ? Math.max(...propSteps) : 10)) {
2313
+ return value;
2314
+ }
2315
+ return null;
2316
+ }
2317
+ }
2318
+ },
2319
+ y: {
2320
+ beginAtZero: true,
2321
+ title: {
2322
+ display: true,
2323
+ text: 'Executed Properties',
2324
+ font: {
2325
+ size: 14
2326
+ }
2327
+ },
2328
+ grid: {
2329
+ borderDash: [5, 5]
2330
+ },
2331
+ ticks: {
2332
+ stepSize: 1,
2333
+ callback: function(value) {
2334
+ if (Number.isInteger(value)) {
2335
+ return value;
2336
+ }
2337
+ return null;
2338
+ }
2339
+ }
2340
+ }
2341
+ },
2342
+ interaction: {
2343
+ mode: 'index',
2344
+ intersect: false
2345
+ },
2346
+ hover: {
2347
+ mode: 'index',
2348
+ intersect: false
2349
+ },
2350
+ animation: {
2351
+ duration: 1000,
2352
+ easing: 'easeOutQuart'
2353
+ }
2354
+ }
2355
+ });
2356
+
2357
+ // Draw crash timeline chart
2358
+ var crashTimelineData = {{ crash_timeline_data|default('{}')|safe }};
2359
+ if (crashTimelineData && Object.keys(crashTimelineData).length > 0) {
2360
+ drawCrashTimelineChart(crashTimelineData);
2361
+ }
2362
+
2363
+ // Initialize crash events functionality
2364
+ initCrashAnalysis();
2365
+
2366
+ // Initialize pagination for Activities table
2367
+ initPagination('activities-container', 'activity-row', 'activities-pagination', 'activities-page-size');
2368
+
2369
+ // Initialize activity sorting
2370
+ initActivitiesSorting();
2371
+
2372
+ // Initialize activity searching
2373
+ initActivitiesSearching();
2374
+
2375
+ // Initialize activities page size selector
2376
+ initActivitiesPageSize();
2377
+
2378
+ // Initialize property statistics searching
2379
+ initPropertySearching();
2380
+
2381
+ // Initialize pagination for Property tables
2382
+ initPagination('property-violations-container', 'property-violation-row', 'violations-pagination', 'violations-page-size');
2383
+ initViolationFilter();
2384
+ initPagination('property-stats-container', 'property-stat-row', 'stats-pagination', 'stats-page-size');
2385
+
2386
+ // Initialize sorting for Property Checking Statistics
2387
+ initSorting();
2388
+
2389
+ // Activity sorting function
2390
+ function initActivitySorting() {
2391
+ const sortButtons = document.querySelectorAll('.activity-sort-btn');
2392
+
2393
+ sortButtons.forEach(function(button) {
2394
+ button.addEventListener('click', function() {
2395
+ const sortType = this.dataset.sort;
2396
+ const currentOrder = this.dataset.order;
2397
+ const parentTab = this.closest('.tab-pane');
2398
+ const isTestedTab = parentTab.id === 'tested-activities';
2399
+
2400
+ // Toggle sort order
2401
+ const newOrder = currentOrder === 'asc' ? 'desc' : 'asc';
2402
+
2403
+ this.dataset.order = newOrder;
2404
+ const icon = this.querySelector('.sort-icon');
2405
+
2406
+ if (newOrder === 'asc') {
2407
+ icon.className = 'bi bi-arrow-up sort-icon btn-arrow';
2408
+ } else {
2409
+ icon.className = 'bi bi-arrow-down sort-icon btn-arrow';
2410
+ }
2411
+
2412
+ // Sort activities
2413
+ sortActivities(sortType, newOrder, isTestedTab);
2414
+ });
2415
+ });
2416
+
2417
+ function sortActivities(sortType, order, isTestedTab) {
2418
+ const containerId = isTestedTab ? 'tested-activities-container' : 'all-activities-container';
2419
+ const itemClass = isTestedTab ? 'tested-activity' : 'all-activity';
2420
+ const paginationId = isTestedTab ? 'tested-pagination' : 'all-pagination';
2421
+ const pageSizeSelectId = isTestedTab ? 'tested-page-size' : 'all-page-size';
2422
+
2423
+ const container = document.getElementById(containerId);
2424
+ const items = Array.from(container.getElementsByClassName(itemClass));
2425
+
2426
+ items.sort(function(a, b) {
2427
+ const badgeA = a.querySelector('.traversal-badge');
2428
+ const badgeB = b.querySelector('.traversal-badge');
2429
+
2430
+ // Extract traversal count from badge text like "👁 5 times"
2431
+ const valueA = badgeA ? parseInt(badgeA.textContent.match(/\d+/)[0]) || 0 : 0;
2432
+ const valueB = badgeB ? parseInt(badgeB.textContent.match(/\d+/)[0]) || 0 : 0;
2433
+
2434
+ if (order === 'asc') {
2435
+ return valueA - valueB;
2436
+ } else {
2437
+ return valueB - valueA;
2438
+ }
2439
+ });
2440
+
2441
+ // Clear container and append sorted items
2442
+ container.innerHTML = '';
2443
+ items.forEach(function(item) {
2444
+ container.appendChild(item);
2445
+ });
2446
+
2447
+ // Check if there's an active search and reapply it
2448
+ const searchInputId = isTestedTab ? 'tested-activity-search' : 'all-activity-search';
2449
+ const searchInput = document.getElementById(searchInputId);
2450
+ if (searchInput && searchInput.value.trim() !== '') {
2451
+ // Reapply search filter after sorting
2452
+ performActivitySearch(searchInput);
2453
+ } else {
2454
+ // No active search, just re-initialize pagination
2455
+ initPagination(containerId, itemClass, paginationId, pageSizeSelectId);
2456
+ }
2457
+ }
2458
+ }
2459
+
2460
+ // Simplified sorting function for Fails and Errors columns (Property Checking Statistics only)
2461
+ function initSorting() {
2462
+ // Only select sort icons that are NOT activities sort icons
2463
+ const sortIcons = document.querySelectorAll('.sort-icon:not(.activities-sort-icon)');
2464
+
2465
+ sortIcons.forEach(function(icon) {
2466
+ icon.addEventListener('click', function() {
2467
+ const column = this.dataset.column;
2468
+ const currentOrder = this.dataset.order;
2469
+
2470
+ // Reset all other property sort icons (not activities)
2471
+ sortIcons.forEach(function(otherIcon) {
2472
+ if (otherIcon !== icon) {
2473
+ otherIcon.dataset.order = 'none';
2474
+ otherIcon.className = 'bi bi-arrow-down-up sort-icon';
2475
+ otherIcon.style.color = '#6c757d';
2476
+ }
2477
+ });
2478
+
2479
+ // Toggle current sort order
2480
+ let newOrder;
2481
+ if (currentOrder === 'none' || currentOrder === 'desc') {
2482
+ newOrder = 'asc';
2483
+ this.className = 'bi bi-arrow-up sort-icon active asc';
2484
+ this.style.color = '#28a745';
2485
+ } else {
2486
+ newOrder = 'desc';
2487
+ this.className = 'bi bi-arrow-down sort-icon active desc';
2488
+ this.style.color = '#dc3545';
2489
+ }
2490
+
2491
+ this.dataset.order = newOrder;
2492
+ sortTable(column, newOrder);
2493
+ });
2494
+ });
2495
+
2496
+ function sortTable(column, order) {
2497
+ const container = document.getElementById('property-stats-container');
2498
+ const rows = Array.from(container.getElementsByClassName('property-stat-row'));
2499
+ const detailRowMap = new Map();
2500
+
2501
+ // Capture current detail rows so they can move with their parent property row
2502
+ const detailRows = Array.from(container.querySelectorAll('.property-detail-row'));
2503
+ detailRows.forEach(function(detailRow) {
2504
+ const key = detailRow.dataset.detailFor;
2505
+ if (!key) return;
2506
+ if (!detailRowMap.has(key)) {
2507
+ detailRowMap.set(key, []);
2508
+ }
2509
+ detailRowMap.get(key).push(detailRow);
2510
+ });
2511
+
2512
+ rows.sort(function(a, b) {
2513
+ let valueA, valueB;
2514
+
2515
+ if (column === 'fails') {
2516
+ valueA = parseInt(a.dataset.fails);
2517
+ valueB = parseInt(b.dataset.fails);
2518
+ } else if (column === 'errors') {
2519
+ valueA = parseInt(a.dataset.errors);
2520
+ valueB = parseInt(b.dataset.errors);
2521
+ }
2522
+
2523
+ if (order === 'asc') {
2524
+ return valueA - valueB;
2525
+ } else {
2526
+ return valueB - valueA;
2527
+ }
2528
+ });
2529
+
2530
+ const fragment = document.createDocumentFragment();
2531
+ rows.forEach(function(row) {
2532
+ fragment.appendChild(row);
2533
+ const detailKey = row.dataset.propertyName;
2534
+ const relatedDetailRows = detailRowMap.get(detailKey) || [];
2535
+ relatedDetailRows.forEach(function(detailRow) {
2536
+ fragment.appendChild(detailRow);
2537
+ });
2538
+ });
2539
+
2540
+ container.innerHTML = '';
2541
+ container.appendChild(fragment);
2542
+
2543
+ // Re-initialize pagination after sorting
2544
+ initPagination('property-stats-container', 'property-stat-row', 'stats-pagination', 'stats-page-size');
2545
+ }
2546
+ }
2547
+
2548
+ // Function to handle page navigation
2549
+ function goToPage(pageNumber, containerId, itemClass, itemsPerPage, paginationId) {
2550
+ const container = document.getElementById(containerId);
2551
+ const allItems = Array.from(container.getElementsByClassName(itemClass));
2552
+ const paginationElement = document.getElementById(paginationId);
2553
+
2554
+ if (containerId === 'property-stats-container') {
2555
+ closePropertyErrorDetails(container);
2556
+ }
2557
+
2558
+ console.log('goToPage called with:', {pageNumber, containerId, itemClass, itemsPerPage, paginationId});
2559
+ console.log('Total items found:', allItems.length);
2560
+
2561
+ // Get items that should be visible based on search filter
2562
+ const filteredItems = allItems.filter(item => {
2563
+ const searchVisible = item.getAttribute('data-search-visible');
2564
+ const shouldShow = searchVisible === null || searchVisible === 'true';
2565
+ return shouldShow;
2566
+ });
2567
+
2568
+ console.log('Filtered items count:', filteredItems.length);
2569
+ console.log('Items with search-visible=true:', allItems.filter(item => item.getAttribute('data-search-visible') === 'true').length);
2570
+ console.log('Items with search-visible=false:', allItems.filter(item => item.getAttribute('data-search-visible') === 'false').length);
2571
+ console.log('Items with search-visible=null:', allItems.filter(item => item.getAttribute('data-search-visible') === null).length);
2572
+
2573
+ // Update pagination active state
2574
+ if (paginationElement) {
2575
+ const pageItems = paginationElement.getElementsByClassName('page-item');
2576
+ for (let i = 0; i < pageItems.length; i++) {
2577
+ if (pageItems[i].textContent.trim() === pageNumber.toString()) {
2578
+ pageItems[i].className = 'page-item active';
2579
+ } else if (pageItems[i].textContent.trim() !== '«' && pageItems[i].textContent.trim() !== '»') {
2580
+ pageItems[i].className = 'page-item';
2581
+ }
2582
+ }
2583
+ }
2584
+
2585
+ // Hide all items first
2586
+ console.log('Hiding all items...');
2587
+ allItems.forEach((item, index) => {
2588
+ item.style.display = 'none';
2589
+ });
2590
+
2591
+ // Show items for current page (only from filtered items)
2592
+ const startIndex = (pageNumber - 1) * itemsPerPage;
2593
+ const endIndex = Math.min(startIndex + itemsPerPage, filteredItems.length);
2594
+
2595
+ console.log('Showing items from index', startIndex, 'to', endIndex - 1);
2596
+
2597
+ for (let i = startIndex; i < endIndex; i++) {
2598
+ if (filteredItems[i]) {
2599
+ filteredItems[i].style.display = '';
2600
+ console.log('Showing item', i, ':', filteredItems[i].querySelector('.activity-name')?.textContent);
2601
+ }
2602
+ }
2603
+
2604
+ console.log('goToPage completed');
2605
+ }
2606
+
2607
+ // Pagination function
2608
+ function initPagination(containerId, itemClass, paginationId, pageSizeSelectId) {
2609
+ const container = document.getElementById(containerId);
2610
+ const pageSizeSelect = document.getElementById(pageSizeSelectId);
2611
+ if (!container) return;
2612
+
2613
+ // Remove existing event listener to prevent duplicate bindings
2614
+ if (pageSizeSelect && !pageSizeSelect.hasAttribute('data-listener-bound')) {
2615
+ pageSizeSelect.addEventListener('change', function() {
2616
+ const newItemsPerPage = parseInt(this.value);
2617
+ renderPagination();
2618
+ goToPage(1, containerId, itemClass, newItemsPerPage, paginationId);
2619
+ });
2620
+ // Mark as having listener bound
2621
+ pageSizeSelect.setAttribute('data-listener-bound', 'true');
2622
+ }
2623
+
2624
+ function renderPagination() {
2625
+ const allItems = Array.from(container.getElementsByClassName(itemClass));
2626
+
2627
+ // Always get current page size from select element
2628
+ const currentPageSizeSelect = document.getElementById(pageSizeSelectId);
2629
+ const currentItemsPerPage = currentPageSizeSelect ? parseInt(currentPageSizeSelect.value) : 10;
2630
+
2631
+ // Use same filtering logic as goToPage function
2632
+ const filteredItems = allItems.filter(item => {
2633
+ const searchVisible = item.getAttribute('data-search-visible');
2634
+ // If no search filter is applied, show all items
2635
+ return searchVisible === null || searchVisible === 'true';
2636
+ });
2637
+
2638
+ const totalItems = filteredItems.length;
2639
+ const totalPages = Math.max(1, Math.ceil(totalItems / currentItemsPerPage));
2640
+
2641
+ // Create pagination
2642
+ const paginationElement = document.getElementById(paginationId);
2643
+ if (!paginationElement) return;
2644
+
2645
+ // Clear pagination
2646
+ paginationElement.innerHTML = '';
2647
+
2648
+ // Don't show pagination if there's only one page or no items
2649
+ if (totalPages <= 1) {
2650
+ // Hide the entire pagination container when not needed
2651
+ const paginationContainer = paginationElement.closest('.pagination-container');
2652
+ if (paginationContainer) {
2653
+ paginationContainer.style.display = 'none';
2654
+ }
2655
+ return;
2656
+ }
2657
+
2658
+ // Show the pagination container when needed
2659
+ const paginationContainer = paginationElement.closest('.pagination-container');
2660
+ if (paginationContainer) {
2661
+ paginationContainer.style.display = '';
2662
+ }
2663
+
2664
+ // Previous button
2665
+ const prevLi = document.createElement('li');
2666
+ prevLi.className = 'page-item disabled';
2667
+ prevLi.innerHTML = '<a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>';
2668
+ paginationElement.appendChild(prevLi);
2669
+
2670
+ // Add page numbers
2671
+ for (let i = 1; i <= totalPages; i++) {
2672
+ const pageLi = document.createElement('li');
2673
+ pageLi.className = i === 1 ? 'page-item active' : 'page-item';
2674
+ pageLi.innerHTML = `<a class="page-link" href="#">${i}</a>`;
2675
+ pageLi.addEventListener('click', function(e) {
2676
+ e.preventDefault();
2677
+ goToPage(i, containerId, itemClass, currentItemsPerPage, paginationId);
2678
+ });
2679
+ paginationElement.appendChild(pageLi);
2680
+ }
2681
+
2682
+ // Next button
2683
+ const nextLi = document.createElement('li');
2684
+ nextLi.className = totalPages <= 1 ? 'page-item disabled' : 'page-item';
2685
+ nextLi.innerHTML = '<a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>';
2686
+ paginationElement.appendChild(nextLi);
2687
+
2688
+ // Add event listeners to prev/next buttons
2689
+ if (paginationElement.firstChild) {
2690
+ paginationElement.firstChild.addEventListener('click', function(e) {
2691
+ e.preventDefault();
2692
+ const activePage = paginationElement.querySelector('.active');
2693
+ if (activePage && activePage.previousElementSibling && activePage.previousElementSibling.previousElementSibling) {
2694
+ const pageNum = parseInt(activePage.textContent) - 1;
2695
+ if (pageNum >= 1) {
2696
+ goToPage(pageNum, containerId, itemClass, currentItemsPerPage, paginationId);
2697
+ }
2698
+ }
2699
+ });
2700
+ }
2701
+
2702
+ if (paginationElement.lastChild) {
2703
+ paginationElement.lastChild.addEventListener('click', function(e) {
2704
+ e.preventDefault();
2705
+ const activePage = paginationElement.querySelector('.active');
2706
+ if (activePage && activePage.nextElementSibling && activePage.nextElementSibling.nextElementSibling) {
2707
+ const pageNum = parseInt(activePage.textContent) + 1;
2708
+ if (pageNum <= totalPages) {
2709
+ goToPage(pageNum, containerId, itemClass, currentItemsPerPage, paginationId);
2710
+ }
2711
+ }
2712
+ });
2713
+ }
2714
+ }
2715
+
2716
+ // Initial render
2717
+ renderPagination();
2718
+ // Always call goToPage to ensure items are displayed correctly, even if no pagination is shown
2719
+ const currentItemsPerPage = pageSizeSelect ? parseInt(pageSizeSelect.value) : 10;
2720
+ goToPage(1, containerId, itemClass, currentItemsPerPage, paginationId);
2721
+ }
2722
+
2723
+ // Scroll functionality
2724
+ const screenshots = document.getElementById('screenshots');
2725
+ if (screenshots) {
2726
+ screenshots.addEventListener('wheel', function(e) {
2727
+ if (e.deltaY !== 0) {
2728
+ e.preventDefault();
2729
+ screenshots.scrollLeft += e.deltaY;
2730
+ }
2731
+ });
2732
+ }
2733
+
2734
+ // Beautify screenshot captions
2735
+ function beautifyScreenshotCaptions() {
2736
+ const captions = document.querySelectorAll('.screenshot-caption');
2737
+ captions.forEach(function(caption) {
2738
+ const originalText = caption.textContent.trim();
2739
+
2740
+ // Handle Monkey Step format: "1. Monkey Step 6: SCROLL_TOP_DOWN"
2741
+ const monkeyStepMatch = originalText.match(/^(\d+)\.\s*Monkey Step (\d+):\s*(.+)$/);
2742
+ if (monkeyStepMatch) {
2743
+ const stepIndex = monkeyStepMatch[1];
2744
+ const monkeyStep = monkeyStepMatch[2];
2745
+ const action = monkeyStepMatch[3];
2746
+
2747
+ caption.innerHTML = `
2748
+ <div class="step-number">${stepIndex}. Monkey Step ${monkeyStep}</div>
2749
+ <div class="step-action">${action}</div>
2750
+ `;
2751
+ return;
2752
+ }
2753
+
2754
+ // Handle Script format: "1. click" or similar
2755
+ const scriptMatch = originalText.match(/^(\d+)\.\s*(.+)$/);
2756
+ if (scriptMatch) {
2757
+ const stepIndex = scriptMatch[1];
2758
+ const action = scriptMatch[2];
2759
+
2760
+ // Check if it's a property info
2761
+ if (action.includes(':')) {
2762
+ const parts = action.split(':');
2763
+ if (parts.length === 2) {
2764
+ caption.innerHTML = `
2765
+ <div class="step-number">${stepIndex}. ${parts[0].trim()}</div>
2766
+ <div class="step-action">${parts[1].trim()}</div>
2767
+ `;
2768
+ return;
2769
+ }
2770
+ }
2771
+
2772
+ // Simple action
2773
+ caption.innerHTML = `
2774
+ <div class="step-number">${stepIndex}. Script Step</div>
2775
+ <div class="step-action">${action}</div>
2776
+ `;
2777
+ }
2778
+ });
2779
+ }
2780
+
2781
+ // Call beautify function after DOM is ready
2782
+ beautifyScreenshotCaptions();
2783
+
2784
+ // Crash analysis functions
2785
+ function initCrashAnalysis() {
2786
+ // Initialize event filtering
2787
+ var filterButtons = document.querySelectorAll('input[name="event-filter"]');
2788
+ filterButtons.forEach(function(button) {
2789
+ button.addEventListener('change', function() {
2790
+ filterCrashEvents(this.id);
2791
+ });
2792
+ });
2793
+
2794
+ // Initialize copy buttons for stack traces
2795
+ var copyButtons = document.querySelectorAll('.copy-stack-btn');
2796
+ copyButtons.forEach(function(button) {
2797
+ button.addEventListener('click', function() {
2798
+ var stackIndex = this.dataset.stackIndex;
2799
+ copyStackTrace(stackIndex);
2800
+ });
2801
+ });
2802
+
2803
+ // Initialize page size selector for crash events
2804
+ var pageSizeSelect = document.getElementById('events-page-size');
2805
+ if (pageSizeSelect) {
2806
+ pageSizeSelect.addEventListener('change', function() {
2807
+ updateCrashEventsPagination();
2808
+ });
2809
+ }
2810
+
2811
+ // Initialize pagination for crash events
2812
+ updateCrashEventsPagination();
2813
+ }
2814
+
2815
+ function filterCrashEvents(filterType) {
2816
+ // Simply update pagination, which will handle filtering and display
2817
+ updateCrashEventsPagination();
2818
+ }
2819
+
2820
+ function updateCrashEventsPagination() {
2821
+ var container = document.getElementById('crash-events-container');
2822
+ var pagination = document.getElementById('events-pagination');
2823
+ var pageSizeSelect = document.getElementById('events-page-size');
2824
+
2825
+ if (!container || !pagination || !pageSizeSelect) return;
2826
+
2827
+ // Get all rows and determine which should be visible based on current filter
2828
+ var allRows = Array.from(container.querySelectorAll('.event-row'));
2829
+ var currentFilter = getCurrentEventFilter();
2830
+
2831
+ var visibleRows = allRows.filter(function(row) {
2832
+ var rowType = row.dataset.type;
2833
+ switch(currentFilter) {
2834
+ case 'all-events':
2835
+ return true;
2836
+ case 'crashes-only':
2837
+ return rowType === 'crash';
2838
+ case 'anr-only':
2839
+ return rowType === 'anr';
2840
+ default:
2841
+ return true;
2842
+ }
2843
+ });
2844
+
2845
+ var pageSize = parseInt(pageSizeSelect.value) || 10;
2846
+ var totalPages = Math.ceil(visibleRows.length / pageSize);
2847
+ var currentPage = 1;
2848
+
2849
+ // Hide all rows first
2850
+ allRows.forEach(function(row) {
2851
+ row.style.display = 'none';
2852
+ var detailRow = row.nextElementSibling;
2853
+ if (detailRow && detailRow.classList.contains('collapse')) {
2854
+ detailRow.style.display = 'none';
2855
+ }
2856
+ });
2857
+
2858
+ // Show rows for current page
2859
+ var startIndex = (currentPage - 1) * pageSize;
2860
+ var endIndex = Math.min(startIndex + pageSize, visibleRows.length);
2861
+
2862
+ for (var i = startIndex; i < endIndex; i++) {
2863
+ visibleRows[i].style.display = '';
2864
+ var detailRow = visibleRows[i].nextElementSibling;
2865
+ if (detailRow && detailRow.classList.contains('collapse')) {
2866
+ detailRow.style.display = '';
2867
+ }
2868
+ }
2869
+
2870
+ // Store current state for pagination callback
2871
+ window.crashEventsState = {
2872
+ visibleRows: visibleRows,
2873
+ pageSize: pageSize,
2874
+ totalPages: totalPages
2875
+ };
2876
+
2877
+ // Update pagination controls
2878
+ updatePaginationControls('events-pagination', currentPage, totalPages, function(page) {
2879
+ showCrashEventsPage(page, window.crashEventsState.visibleRows, window.crashEventsState.pageSize);
2880
+ });
2881
+ }
2882
+
2883
+ function showCrashEventsPage(page, visibleRows, pageSize) {
2884
+ // Hide all visible rows
2885
+ visibleRows.forEach(function(row) {
2886
+ row.style.display = 'none';
2887
+ var detailRow = row.nextElementSibling;
2888
+ if (detailRow && detailRow.classList.contains('collapse')) {
2889
+ detailRow.style.display = 'none';
2890
+ }
2891
+ });
2892
+
2893
+ // Show rows for the specified page
2894
+ var startIndex = (page - 1) * pageSize;
2895
+ var endIndex = Math.min(startIndex + pageSize, visibleRows.length);
2896
+
2897
+ for (var i = startIndex; i < endIndex; i++) {
2898
+ visibleRows[i].style.display = '';
2899
+ var detailRow = visibleRows[i].nextElementSibling;
2900
+ if (detailRow && detailRow.classList.contains('collapse')) {
2901
+ detailRow.style.display = '';
2902
+ }
2903
+ }
2904
+
2905
+ // Update pagination controls to reflect current page
2906
+ var totalPages = Math.ceil(visibleRows.length / pageSize);
2907
+ var pagination = document.getElementById('events-pagination');
2908
+ if (pagination) {
2909
+ // Update active page
2910
+ var pageItems = pagination.querySelectorAll('.page-item');
2911
+ pageItems.forEach(function(item, index) {
2912
+ // Skip first (previous) and last (next) buttons
2913
+ if (index > 0 && index < pageItems.length - 1) {
2914
+ var pageNum = parseInt(item.textContent);
2915
+ if (pageNum === page) {
2916
+ item.classList.add('active');
2917
+ } else {
2918
+ item.classList.remove('active');
2919
+ }
2920
+ }
2921
+ });
2922
+
2923
+ // Update previous button state
2924
+ if (pageItems.length > 0) {
2925
+ var prevButton = pageItems[0];
2926
+ if (page === 1) {
2927
+ prevButton.classList.add('disabled');
2928
+ } else {
2929
+ prevButton.classList.remove('disabled');
2930
+ }
2931
+ }
2932
+
2933
+ // Update next button state
2934
+ if (pageItems.length > 1) {
2935
+ var nextButton = pageItems[pageItems.length - 1];
2936
+ if (page === totalPages) {
2937
+ nextButton.classList.add('disabled');
2938
+ } else {
2939
+ nextButton.classList.remove('disabled');
2940
+ }
2941
+ }
2942
+ }
2943
+ }
2944
+
2945
+ function getCurrentEventFilter() {
2946
+ var filterButtons = document.querySelectorAll('input[name="event-filter"]');
2947
+ for (var i = 0; i < filterButtons.length; i++) {
2948
+ if (filterButtons[i].checked) {
2949
+ return filterButtons[i].id;
2950
+ }
2951
+ }
2952
+ return 'all-events'; // default
2953
+ }
2954
+
2955
+ function updatePaginationControls(paginationId, currentPage, totalPages, onPageClick) {
2956
+ var pagination = document.getElementById(paginationId);
2957
+ if (!pagination) return;
2958
+
2959
+ pagination.innerHTML = '';
2960
+
2961
+ if (totalPages <= 1) {
2962
+ // Hide the entire pagination container when not needed
2963
+ var paginationContainer = pagination.closest('.pagination-container');
2964
+ if (paginationContainer) {
2965
+ paginationContainer.style.display = 'none';
2966
+ }
2967
+ return;
2968
+ }
2969
+
2970
+ // Show the pagination container when needed
2971
+ var paginationContainer = pagination.closest('.pagination-container');
2972
+ if (paginationContainer) {
2973
+ paginationContainer.style.display = '';
2974
+ }
2975
+
2976
+ // Previous button
2977
+ var prevLi = document.createElement('li');
2978
+ prevLi.className = 'page-item' + (currentPage === 1 ? ' disabled' : '');
2979
+ var prevLink = document.createElement('a');
2980
+ prevLink.className = 'page-link';
2981
+ prevLink.href = '#';
2982
+ prevLink.setAttribute('aria-label', 'Previous');
2983
+ prevLink.innerHTML = '<span aria-hidden="true">&laquo;</span>';
2984
+
2985
+ prevLink.addEventListener('click', function(e) {
2986
+ e.preventDefault();
2987
+ e.stopPropagation();
2988
+ // Get current page dynamically to avoid stale closure values
2989
+ var currentActivePage = getCurrentPageNumber(paginationId);
2990
+ if (currentActivePage > 1 && !prevLi.classList.contains('disabled')) {
2991
+ onPageClick(currentActivePage - 1);
2992
+ }
2993
+ });
2994
+
2995
+ prevLi.appendChild(prevLink);
2996
+ pagination.appendChild(prevLi);
2997
+
2998
+ // Page numbers
2999
+ for (var i = 1; i <= totalPages; i++) {
3000
+ var li = document.createElement('li');
3001
+ li.className = 'page-item' + (i === currentPage ? ' active' : '');
3002
+ var link = document.createElement('a');
3003
+ link.className = 'page-link';
3004
+ link.href = '#';
3005
+ link.textContent = i;
3006
+ link.addEventListener('click', (function(page) {
3007
+ return function(e) {
3008
+ e.preventDefault();
3009
+ e.stopPropagation();
3010
+ onPageClick(page);
3011
+ };
3012
+ })(i));
3013
+ li.appendChild(link);
3014
+ pagination.appendChild(li);
3015
+ }
3016
+
3017
+ // Next button
3018
+ var nextLi = document.createElement('li');
3019
+ nextLi.className = 'page-item' + (currentPage === totalPages ? ' disabled' : '');
3020
+ var nextLink = document.createElement('a');
3021
+ nextLink.className = 'page-link';
3022
+ nextLink.href = '#';
3023
+ nextLink.setAttribute('aria-label', 'Next');
3024
+ nextLink.innerHTML = '<span aria-hidden="true">&raquo;</span>';
3025
+
3026
+ nextLink.addEventListener('click', function(e) {
3027
+ e.preventDefault();
3028
+ e.stopPropagation();
3029
+ // Get current page dynamically to avoid stale closure values
3030
+ var currentActivePage = getCurrentPageNumber(paginationId);
3031
+ if (currentActivePage < totalPages && !nextLi.classList.contains('disabled')) {
3032
+ onPageClick(currentActivePage + 1);
3033
+ }
3034
+ });
3035
+
3036
+ nextLi.appendChild(nextLink);
3037
+ pagination.appendChild(nextLi);
3038
+ }
3039
+
3040
+ function getCurrentPageNumber(paginationId) {
3041
+ var pagination = document.getElementById(paginationId);
3042
+ if (!pagination) return 1;
3043
+
3044
+ var activeItem = pagination.querySelector('.page-item.active');
3045
+ if (activeItem) {
3046
+ var pageText = activeItem.textContent.trim();
3047
+ var pageNum = parseInt(pageText);
3048
+ return isNaN(pageNum) ? 1 : pageNum;
3049
+ }
3050
+ return 1;
3051
+ }
3052
+
3053
+ function copyStackTrace(index) {
3054
+ var stackTraceElement = document.getElementById('stack-trace-' + index);
3055
+ if (!stackTraceElement) return;
3056
+
3057
+ var stackTrace = stackTraceElement.textContent;
3058
+
3059
+ if (navigator.clipboard && navigator.clipboard.writeText) {
3060
+ navigator.clipboard.writeText(stackTrace).then(function() {
3061
+ showCopyNotification('Stack trace copied to clipboard!');
3062
+ }).catch(function(err) {
3063
+ console.error('Failed to copy stack trace: ', err);
3064
+ showCopyNotification('Failed to copy stack trace', 'error');
3065
+ });
3066
+ } else {
3067
+ // Fallback for older browsers
3068
+ var textArea = document.createElement('textarea');
3069
+ textArea.value = stackTrace;
3070
+ document.body.appendChild(textArea);
3071
+ textArea.select();
3072
+ try {
3073
+ document.execCommand('copy');
3074
+ showCopyNotification('Stack trace copied to clipboard!');
3075
+ } catch (err) {
3076
+ console.error('Fallback copy failed: ', err);
3077
+ showCopyNotification('Failed to copy stack trace', 'error');
3078
+ }
3079
+ document.body.removeChild(textArea);
3080
+ }
3081
+ }
3082
+
3083
+ function showCopyNotification(message, type) {
3084
+ type = type || 'success';
3085
+
3086
+ // Create notification element
3087
+ var notification = document.createElement('div');
3088
+ notification.className = 'alert alert-' + (type === 'error' ? 'danger' : 'success') + ' position-fixed';
3089
+ notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
3090
+ notification.innerHTML = '<i class="bi bi-' + (type === 'error' ? 'exclamation-triangle' : 'check-circle') + '"></i> ' + message;
3091
+
3092
+ document.body.appendChild(notification);
3093
+
3094
+ // Auto remove after 3 seconds
3095
+ setTimeout(function() {
3096
+ if (notification.parentNode) {
3097
+ notification.parentNode.removeChild(notification);
3098
+ }
3099
+ }, 3000);
3100
+ }
3101
+ });
3102
+
3103
+ // Close opened Property Checking Statistics error details when pagination changes
3104
+ function closePropertyErrorDetails(container) {
3105
+ if (!container) return;
3106
+
3107
+ const openDetails = container.querySelectorAll('.property-detail-row.show');
3108
+ openDetails.forEach(function(detailRow) {
3109
+ const collapseInstance = bootstrap.Collapse.getInstance(detailRow) ||
3110
+ new bootstrap.Collapse(detailRow, { toggle: false });
3111
+ collapseInstance.hide();
3112
+ });
3113
+ }
3114
+
3115
+ // Global activity search functions
3116
+ function performActivitySearch(searchInput) {
3117
+ const searchTerm = searchInput.value.toLowerCase().trim();
3118
+ const containerId = searchInput.dataset.target;
3119
+ const itemClass = searchInput.dataset.itemClass;
3120
+ const paginationId = searchInput.dataset.pagination;
3121
+ const pageSizeSelectId = searchInput.dataset.pageSize;
3122
+
3123
+ const container = document.getElementById(containerId);
3124
+ const items = Array.from(container.getElementsByClassName(itemClass));
3125
+
3126
+ // Filter and count matching items
3127
+ let visibleCount = 0;
3128
+ let totalCount = items.length;
3129
+
3130
+ items.forEach(function(item, index) {
3131
+ const activityName = item.querySelector('.activity-name');
3132
+ if (activityName) {
3133
+ const text = activityName.textContent.toLowerCase();
3134
+ const matches = searchTerm === '' || text.includes(searchTerm);
3135
+
3136
+ if (matches) {
3137
+ item.setAttribute('data-search-visible', 'true');
3138
+ visibleCount++;
3139
+ } else {
3140
+ item.setAttribute('data-search-visible', 'false');
3141
+ }
3142
+ } else {
3143
+ // If no activity name found, hide the item
3144
+ item.setAttribute('data-search-visible', 'false');
3145
+ }
3146
+ });
3147
+
3148
+ // Update search results count
3149
+ updateSearchResultsCount(searchInput, visibleCount, totalCount, searchTerm);
3150
+
3151
+ // Re-initialize pagination and go to first page
3152
+ initPagination(containerId, itemClass, paginationId, pageSizeSelectId);
3153
+
3154
+ // Always go to page 1 after search
3155
+ const currentPageSize = document.getElementById(pageSizeSelectId) ?
3156
+ parseInt(document.getElementById(pageSizeSelectId).value) : 10;
3157
+
3158
+ goToPage(1, containerId, itemClass, currentPageSize, paginationId);
3159
+ }
3160
+
3161
+ function updateSearchResultsCount(searchInput, visibleCount, totalCount, searchTerm) {
3162
+ const isTestedTab = searchInput.id.includes('tested');
3163
+ const resultsElementId = isTestedTab ? 'tested-search-results' : 'all-search-results';
3164
+ const resultsElement = document.getElementById(resultsElementId);
3165
+
3166
+ if (resultsElement) {
3167
+ if (searchTerm === '') {
3168
+ resultsElement.innerHTML = `<span class="text-muted">Showing all ${totalCount} activities - Type and click <i class="bi bi-search"></i> or press Enter to search</span>`;
3169
+ } else if (visibleCount === 0) {
3170
+ resultsElement.innerHTML = `<span class="text-danger">No activities found for "${searchTerm}"</span>`;
3171
+ } else if (visibleCount === totalCount) {
3172
+ resultsElement.innerHTML = `<span class="text-success">All ${totalCount} activities match "${searchTerm}"</span>`;
3173
+ } else {
3174
+ resultsElement.innerHTML = `<span class="text-info">Found ${visibleCount} of ${totalCount} activities for "${searchTerm}"</span>`;
3175
+ }
3176
+ }
3177
+ }
3178
+
3179
+ // Activity searching function
3180
+ function initActivitySearching() {
3181
+ const searchInputs = document.querySelectorAll('.activity-search-input');
3182
+ const searchButtons = document.querySelectorAll('.search-btn');
3183
+ const clearButtons = document.querySelectorAll('.search-clear-btn');
3184
+
3185
+ // Initialize search functionality for each input
3186
+ searchInputs.forEach(function(input) {
3187
+ // Search on Enter key
3188
+ input.addEventListener('keydown', function(e) {
3189
+ if (e.key === 'Enter') {
3190
+ e.preventDefault();
3191
+ performActivitySearch(this);
3192
+ } else if (e.key === 'Escape') {
3193
+ clearActivitySearch(this);
3194
+ }
3195
+ });
3196
+ });
3197
+
3198
+ // Initialize search button functionality
3199
+ searchButtons.forEach(function(button) {
3200
+ button.addEventListener('click', function() {
3201
+ const targetInputId = this.dataset.target;
3202
+ const targetInput = document.getElementById(targetInputId);
3203
+ if (targetInput) {
3204
+ performActivitySearch(targetInput);
3205
+ }
3206
+ });
3207
+ });
3208
+
3209
+ // Initialize clear button functionality
3210
+ clearButtons.forEach(function(button) {
3211
+ button.addEventListener('click', function() {
3212
+ const targetInputId = this.dataset.target;
3213
+ const targetInput = document.getElementById(targetInputId);
3214
+ if (targetInput) {
3215
+ clearActivitySearch(targetInput);
3216
+ }
3217
+ });
3218
+ });
3219
+
3220
+ function clearActivitySearch(searchInput) {
3221
+ searchInput.value = '';
3222
+ performActivitySearch(searchInput);
3223
+ searchInput.focus();
3224
+ }
3225
+ }
3226
+
3227
+ // Property statistics searching function
3228
+ function initPropertySearching() {
3229
+ const searchInput = document.getElementById('property-stats-search');
3230
+ const searchButton = document.getElementById('property-search-btn');
3231
+
3232
+ if (!searchInput) return;
3233
+
3234
+ // Search on Enter key and clear on Escape
3235
+ searchInput.addEventListener('keydown', function(e) {
3236
+ if (e.key === 'Enter') {
3237
+ e.preventDefault();
3238
+ performPropertySearch(this);
3239
+ } else if (e.key === 'Escape') {
3240
+ clearPropertySearch(this);
3241
+ }
3242
+ });
3243
+
3244
+ // Search button functionality
3245
+ if (searchButton) {
3246
+ searchButton.addEventListener('click', function() {
3247
+ performPropertySearch(searchInput);
3248
+ });
3249
+ }
3250
+
3251
+ function performPropertySearch(searchInput) {
3252
+ const searchTerm = searchInput.value.toLowerCase().trim();
3253
+ const container = document.getElementById('property-stats-container');
3254
+ const items = Array.from(container.getElementsByClassName('property-stat-row'));
3255
+
3256
+ let visibleCount = 0;
3257
+ let totalCount = items.length;
3258
+
3259
+ // Filter items based on search term
3260
+ items.forEach(function(item) {
3261
+ const propertyNameElement = item.querySelector('.badge-custom');
3262
+ if (propertyNameElement) {
3263
+ const propertyName = propertyNameElement.textContent.toLowerCase();
3264
+
3265
+ if (searchTerm === '' || propertyName.includes(searchTerm)) {
3266
+ item.setAttribute('data-search-visible', 'true');
3267
+ visibleCount++;
3268
+ } else {
3269
+ item.setAttribute('data-search-visible', 'false');
3270
+ }
3271
+ }
3272
+ });
3273
+
3274
+ // Update search results count
3275
+ updatePropertySearchResults(visibleCount, totalCount, searchTerm);
3276
+
3277
+ // Re-initialize pagination and go to first page
3278
+ initPagination('property-stats-container', 'property-stat-row', 'stats-pagination', 'stats-page-size');
3279
+
3280
+ // Always go to page 1 after search
3281
+ const currentPageSize = document.getElementById('stats-page-size') ?
3282
+ parseInt(document.getElementById('stats-page-size').value) : 10;
3283
+ goToPage(1, 'property-stats-container', 'property-stat-row', currentPageSize, 'stats-pagination');
3284
+ }
3285
+
3286
+ function clearPropertySearch(searchInput) {
3287
+ searchInput.value = '';
3288
+ performPropertySearch(searchInput);
3289
+ searchInput.focus();
3290
+ }
3291
+
3292
+ function updatePropertySearchResults(visibleCount, totalCount, searchTerm) {
3293
+ const resultsElement = document.getElementById('property-search-results');
3294
+
3295
+ if (resultsElement) {
3296
+ if (searchTerm === '') {
3297
+ resultsElement.innerHTML = `<span class="text-muted">Showing all ${totalCount} properties - Type and click <i class="bi bi-search"></i> or press Enter to search</span>`;
3298
+ } else if (visibleCount === 0) {
3299
+ resultsElement.innerHTML = `<span class="text-danger">No properties found for "${searchTerm}"</span>`;
3300
+ } else if (visibleCount === totalCount) {
3301
+ resultsElement.innerHTML = `<span class="text-success">All ${totalCount} properties match "${searchTerm}"</span>`;
3302
+ } else {
3303
+ resultsElement.innerHTML = `<span class="text-info">Found ${visibleCount} of ${totalCount} properties for "${searchTerm}"</span>`;
3304
+ }
3305
+ }
3306
+ }
3307
+ }
3308
+
3309
+ function initViolationFilter() {
3310
+ const filterSelect = document.getElementById('violations-status-filter');
3311
+ const container = document.getElementById('property-violations-container');
3312
+
3313
+ if (!filterSelect || !container) return;
3314
+
3315
+ filterSelect.addEventListener('change', function() {
3316
+ const filterValue = this.value;
3317
+ const rows = Array.from(container.getElementsByClassName('property-violation-row'));
3318
+
3319
+ rows.forEach(function(row) {
3320
+ const status = row.getAttribute('data-status') || 'fail';
3321
+ if (filterValue === 'all') {
3322
+ row.removeAttribute('data-search-visible');
3323
+ } else {
3324
+ row.setAttribute('data-search-visible', status === filterValue ? 'true' : 'false');
3325
+ }
3326
+ });
3327
+
3328
+ initPagination('property-violations-container', 'property-violation-row', 'violations-pagination', 'violations-page-size');
3329
+
3330
+ const currentPageSize = document.getElementById('violations-page-size') ?
3331
+ parseInt(document.getElementById('violations-page-size').value) : 10;
3332
+ goToPage(1, 'property-violations-container', 'property-violation-row', currentPageSize, 'violations-pagination');
3333
+ });
3334
+ }
3335
+
3336
+ // Global pagination and navigation functions
3337
+ function goToPage(pageNumber, containerId, itemClass, itemsPerPage, paginationId) {
3338
+ const container = document.getElementById(containerId);
3339
+ const allItems = Array.from(container.getElementsByClassName(itemClass));
3340
+ const paginationElement = document.getElementById(paginationId);
3341
+
3342
+ if (containerId === 'property-stats-container') {
3343
+ closePropertyErrorDetails(container);
3344
+ }
3345
+
3346
+ // Get items that should be visible based on search filter
3347
+ const filteredItems = allItems.filter(item => {
3348
+ const searchVisible = item.getAttribute('data-search-visible');
3349
+ const shouldShow = searchVisible === null || searchVisible === 'true';
3350
+ return shouldShow;
3351
+ });
3352
+
3353
+ // Update pagination active state
3354
+ if (paginationElement) {
3355
+ const pageItems = paginationElement.getElementsByClassName('page-item');
3356
+ for (let i = 0; i < pageItems.length; i++) {
3357
+ if (pageItems[i].textContent.trim() === pageNumber.toString()) {
3358
+ pageItems[i].className = 'page-item active';
3359
+ } else if (pageItems[i].textContent.trim() !== '«' && pageItems[i].textContent.trim() !== '»') {
3360
+ pageItems[i].className = 'page-item';
3361
+ }
3362
+ }
3363
+ }
3364
+
3365
+ // Hide all items first
3366
+ allItems.forEach((item, index) => {
3367
+ item.style.display = 'none';
3368
+ });
3369
+
3370
+ // Show items for current page (only from filtered items)
3371
+ const startIndex = (pageNumber - 1) * itemsPerPage;
3372
+ const endIndex = Math.min(startIndex + itemsPerPage, filteredItems.length);
3373
+
3374
+ for (let i = startIndex; i < endIndex; i++) {
3375
+ if (filteredItems[i]) {
3376
+ filteredItems[i].style.display = '';
3377
+ }
3378
+ }
3379
+ }
3380
+
3381
+ function initPagination(containerId, itemClass, paginationId, pageSizeSelectId) {
3382
+ const container = document.getElementById(containerId);
3383
+ const pageSizeSelect = document.getElementById(pageSizeSelectId);
3384
+ if (!container) return;
3385
+
3386
+ // Remove existing event listener to prevent duplicate bindings
3387
+ if (pageSizeSelect && !pageSizeSelect.hasAttribute('data-listener-bound')) {
3388
+ pageSizeSelect.addEventListener('change', function() {
3389
+ const newItemsPerPage = parseInt(this.value);
3390
+ renderPagination();
3391
+ goToPage(1, containerId, itemClass, newItemsPerPage, paginationId);
3392
+ });
3393
+ // Mark as having listener bound
3394
+ pageSizeSelect.setAttribute('data-listener-bound', 'true');
3395
+ }
3396
+
3397
+ function renderPagination() {
3398
+ const allItems = Array.from(container.getElementsByClassName(itemClass));
3399
+
3400
+ // Always get current page size from select element
3401
+ const currentPageSizeSelect = document.getElementById(pageSizeSelectId);
3402
+ const currentItemsPerPage = currentPageSizeSelect ? parseInt(currentPageSizeSelect.value) : 10;
3403
+
3404
+ // Use same filtering logic as goToPage function
3405
+ const filteredItems = allItems.filter(item => {
3406
+ const searchVisible = item.getAttribute('data-search-visible');
3407
+ // If no search filter is applied, show all items
3408
+ return searchVisible === null || searchVisible === 'true';
3409
+ });
3410
+
3411
+ const totalItems = filteredItems.length;
3412
+ const totalPages = Math.max(1, Math.ceil(totalItems / currentItemsPerPage));
3413
+
3414
+ // Create pagination
3415
+ const paginationElement = document.getElementById(paginationId);
3416
+ if (!paginationElement) return;
3417
+
3418
+ // Clear pagination
3419
+ paginationElement.innerHTML = '';
3420
+
3421
+ // Don't show pagination if there's only one page or no items
3422
+ if (totalPages <= 1) {
3423
+ // Hide the entire pagination container when not needed
3424
+ const paginationContainer = paginationElement.closest('.pagination-container');
3425
+ if (paginationContainer) {
3426
+ paginationContainer.style.display = 'none';
3427
+ }
3428
+ return;
3429
+ }
3430
+
3431
+ // Show the pagination container when needed
3432
+ const paginationContainer = paginationElement.closest('.pagination-container');
3433
+ if (paginationContainer) {
3434
+ paginationContainer.style.display = '';
3435
+ }
3436
+
3437
+ // Previous button
3438
+ const prevLi = document.createElement('li');
3439
+ prevLi.className = 'page-item disabled';
3440
+ prevLi.innerHTML = '<a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>';
3441
+ paginationElement.appendChild(prevLi);
3442
+
3443
+ // Add page numbers
3444
+ for (let i = 1; i <= totalPages; i++) {
3445
+ const pageLi = document.createElement('li');
3446
+ pageLi.className = i === 1 ? 'page-item active' : 'page-item';
3447
+ pageLi.innerHTML = `<a class="page-link" href="#">${i}</a>`;
3448
+ pageLi.addEventListener('click', function(e) {
3449
+ e.preventDefault();
3450
+ goToPage(i, containerId, itemClass, currentItemsPerPage, paginationId);
3451
+ });
3452
+ paginationElement.appendChild(pageLi);
3453
+ }
3454
+
3455
+ // Next button
3456
+ const nextLi = document.createElement('li');
3457
+ nextLi.className = totalPages <= 1 ? 'page-item disabled' : 'page-item';
3458
+ nextLi.innerHTML = '<a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>';
3459
+ paginationElement.appendChild(nextLi);
3460
+
3461
+ // Add event listeners to prev/next buttons
3462
+ if (paginationElement.firstChild) {
3463
+ paginationElement.firstChild.addEventListener('click', function(e) {
3464
+ e.preventDefault();
3465
+ const activePage = paginationElement.querySelector('.active');
3466
+ if (activePage && activePage.previousElementSibling && activePage.previousElementSibling.previousElementSibling) {
3467
+ const pageNum = parseInt(activePage.textContent) - 1;
3468
+ if (pageNum >= 1) {
3469
+ goToPage(pageNum, containerId, itemClass, currentItemsPerPage, paginationId);
3470
+ }
3471
+ }
3472
+ });
3473
+ }
3474
+
3475
+ if (paginationElement.lastChild) {
3476
+ paginationElement.lastChild.addEventListener('click', function(e) {
3477
+ e.preventDefault();
3478
+ const activePage = paginationElement.querySelector('.active');
3479
+ if (activePage && activePage.nextElementSibling && activePage.nextElementSibling.nextElementSibling) {
3480
+ const pageNum = parseInt(activePage.textContent) + 1;
3481
+ if (pageNum <= totalPages) {
3482
+ goToPage(pageNum, containerId, itemClass, currentItemsPerPage, paginationId);
3483
+ }
3484
+ }
3485
+ });
3486
+ }
3487
+ }
3488
+
3489
+ // Initial render
3490
+ renderPagination();
3491
+ // Always call goToPage to ensure items are displayed correctly, even if no pagination is shown
3492
+ const currentItemsPerPage = pageSizeSelect ? parseInt(pageSizeSelect.value) : 10;
3493
+ goToPage(1, containerId, itemClass, currentItemsPerPage, paginationId);
3494
+ }
3495
+
3496
+ // Activities table searching function
3497
+ function initActivitiesSearching() {
3498
+ const searchInput = document.getElementById('activities-search');
3499
+ const searchButton = document.getElementById('activities-search-btn');
3500
+
3501
+ if (!searchInput) return;
3502
+
3503
+ // Search on Enter key and clear on Escape
3504
+ searchInput.addEventListener('keydown', function(e) {
3505
+ if (e.key === 'Enter') {
3506
+ e.preventDefault();
3507
+ performActivitiesSearch(this);
3508
+ } else if (e.key === 'Escape') {
3509
+ clearActivitiesSearch(this);
3510
+ }
3511
+ });
3512
+
3513
+ // Search button functionality
3514
+ if (searchButton) {
3515
+ searchButton.addEventListener('click', function() {
3516
+ performActivitiesSearch(searchInput);
3517
+ });
3518
+ }
3519
+
3520
+ function performActivitiesSearch(searchInput) {
3521
+ const searchTerm = searchInput.value.toLowerCase().trim();
3522
+ const container = document.getElementById('activities-container');
3523
+ const rows = container.querySelectorAll('.activity-row');
3524
+ const resultsCount = document.getElementById('activities-search-results');
3525
+
3526
+ let visibleCount = 0;
3527
+
3528
+ rows.forEach(function(row) {
3529
+ const activityName = row.querySelector('.activity-name').textContent.toLowerCase();
3530
+
3531
+ // If no search term, show all rows
3532
+ if (!searchTerm) {
3533
+ row.removeAttribute('data-search-visible');
3534
+ visibleCount++;
3535
+ } else {
3536
+ const matches = activityName.includes(searchTerm);
3537
+ if (matches) {
3538
+ row.setAttribute('data-search-visible', 'true');
3539
+ visibleCount++;
3540
+ } else {
3541
+ row.setAttribute('data-search-visible', 'false');
3542
+ }
3543
+ }
3544
+ });
3545
+
3546
+ console.log('Search performed:', {searchTerm, visibleCount, totalRows: rows.length});
3547
+
3548
+ // Update results count
3549
+ if (resultsCount) {
3550
+ if (searchTerm) {
3551
+ resultsCount.textContent = `Found ${visibleCount} of ${rows.length} activities`;
3552
+ } else {
3553
+ resultsCount.textContent = '';
3554
+ }
3555
+ }
3556
+
3557
+ // Immediately show/hide rows based on search before pagination update
3558
+ rows.forEach(function(row) {
3559
+ const searchVisible = row.getAttribute('data-search-visible');
3560
+ if (searchVisible === null || searchVisible === 'true') {
3561
+ row.style.display = '';
3562
+ } else {
3563
+ row.style.display = 'none';
3564
+ }
3565
+ });
3566
+
3567
+ console.log('Rows visibility updated, calling pagination update...');
3568
+
3569
+ // Update pagination after search
3570
+ updateActivitiesPagination();
3571
+ }
3572
+
3573
+ function clearActivitiesSearch(searchInput) {
3574
+ searchInput.value = '';
3575
+ performActivitiesSearch(searchInput);
3576
+ searchInput.focus();
3577
+ }
3578
+ }
3579
+
3580
+ // Initialize Activities page size selector
3581
+ function initActivitiesPageSize() {
3582
+ const pageSizeSelect = document.getElementById('activities-page-size');
3583
+
3584
+ if (!pageSizeSelect) return;
3585
+
3586
+ // Remove existing event listener to prevent duplicate bindings
3587
+ if (!pageSizeSelect.hasAttribute('data-activities-listener-bound')) {
3588
+ pageSizeSelect.addEventListener('change', function() {
3589
+ console.log('Activities page size changed to:', this.value);
3590
+ updateActivitiesPagination();
3591
+ });
3592
+ // Mark as having listener bound
3593
+ pageSizeSelect.setAttribute('data-activities-listener-bound', 'true');
3594
+ }
3595
+ }
3596
+
3597
+ // Activities table sorting function
3598
+ function initActivitiesSorting() {
3599
+ const sortIcon = document.getElementById('visit-count-sort');
3600
+
3601
+ if (!sortIcon) return;
3602
+
3603
+ sortIcon.addEventListener('click', function(e) {
3604
+ e.preventDefault();
3605
+ e.stopPropagation();
3606
+
3607
+ console.log('Sort icon clicked, current order:', this.dataset.order);
3608
+
3609
+ const currentOrder = this.dataset.order || 'none';
3610
+ const container = document.getElementById('activities-container');
3611
+ const rows = Array.from(container.querySelectorAll('.activity-row'));
3612
+
3613
+ console.log('Found rows:', rows.length);
3614
+
3615
+ // Reset only activities sort icons (not property stats sort icons)
3616
+ document.querySelectorAll('.activities-sort-icon').forEach(icon => {
3617
+ if (icon !== this) {
3618
+ icon.className = 'bi bi-arrow-down-up text-muted sort-icon activities-sort-icon';
3619
+ icon.dataset.order = 'none';
3620
+ }
3621
+ });
3622
+
3623
+ let newOrder;
3624
+ if (currentOrder === 'none' || currentOrder === 'desc') {
3625
+ newOrder = 'asc';
3626
+ this.className = 'bi bi-arrow-up text-primary sort-icon activities-sort-icon';
3627
+ } else {
3628
+ newOrder = 'desc';
3629
+ this.className = 'bi bi-arrow-down text-primary sort-icon activities-sort-icon';
3630
+ }
3631
+
3632
+ this.dataset.order = newOrder;
3633
+ console.log('New order set to:', newOrder);
3634
+
3635
+ // Sort rows
3636
+ rows.sort((a, b) => {
3637
+ const aCount = parseInt(a.dataset.visitCount) || 0;
3638
+ const bCount = parseInt(b.dataset.visitCount) || 0;
3639
+
3640
+ if (newOrder === 'asc') {
3641
+ return aCount - bCount;
3642
+ } else {
3643
+ return bCount - aCount;
3644
+ }
3645
+ });
3646
+
3647
+ // Clear container and re-append sorted rows
3648
+ container.innerHTML = '';
3649
+ rows.forEach(row => container.appendChild(row));
3650
+
3651
+ console.log('Sorting completed');
3652
+
3653
+ // Properly update pagination after sorting
3654
+ updateActivitiesPagination();
3655
+ });
3656
+ }
3657
+
3658
+ // Function to update Activities pagination after sorting
3659
+ function updateActivitiesPagination() {
3660
+ const container = document.getElementById('activities-container');
3661
+ const pageSizeSelect = document.getElementById('activities-page-size');
3662
+ const paginationElement = document.getElementById('activities-pagination');
3663
+
3664
+ if (!container || !paginationElement) return;
3665
+
3666
+ const allRows = Array.from(container.querySelectorAll('.activity-row'));
3667
+ const itemsPerPage = pageSizeSelect ? parseInt(pageSizeSelect.value) : 10;
3668
+
3669
+ // Filter visible rows (considering search)
3670
+ const visibleRows = allRows.filter(row => {
3671
+ const searchVisible = row.getAttribute('data-search-visible');
3672
+ return searchVisible === null || searchVisible === 'true';
3673
+ });
3674
+
3675
+ const totalItems = visibleRows.length;
3676
+ const totalPages = Math.max(1, Math.ceil(totalItems / itemsPerPage));
3677
+
3678
+ console.log('Updating pagination:', {totalItems, itemsPerPage, totalPages});
3679
+
3680
+ // Clear pagination
3681
+ paginationElement.innerHTML = '';
3682
+
3683
+ // Find pagination container
3684
+ const paginationContainer = paginationElement.closest('.d-flex');
3685
+
3686
+ // Don't show pagination if there's only one page or no items
3687
+ if (totalPages <= 1) {
3688
+ if (paginationContainer) {
3689
+ paginationContainer.style.display = 'none';
3690
+ }
3691
+ // Show visible rows and hide invisible rows
3692
+ allRows.forEach(row => {
3693
+ const searchVisible = row.getAttribute('data-search-visible');
3694
+ if (searchVisible === null || searchVisible === 'true') {
3695
+ row.style.display = '';
3696
+ } else {
3697
+ row.style.display = 'none';
3698
+ }
3699
+ });
3700
+ return;
3701
+ }
3702
+
3703
+ // Show the pagination container when needed
3704
+ if (paginationContainer) {
3705
+ paginationContainer.style.display = '';
3706
+ }
3707
+
3708
+ // Create Previous button
3709
+ const prevLi = document.createElement('li');
3710
+ prevLi.className = 'page-item';
3711
+ prevLi.id = 'activities-prev-page';
3712
+
3713
+ const prevA = document.createElement('a');
3714
+ prevA.className = 'page-link';
3715
+ prevA.href = '#';
3716
+ prevA.innerHTML = '&laquo;';
3717
+ prevA.addEventListener('click', function(e) {
3718
+ e.preventDefault();
3719
+ const currentPage = getCurrentActivitiesPage();
3720
+ if (currentPage > 1) {
3721
+ goToActivitiesPage(currentPage - 1, totalPages, itemsPerPage);
3722
+ }
3723
+ });
3724
+
3725
+ prevLi.appendChild(prevA);
3726
+ paginationElement.appendChild(prevLi);
3727
+
3728
+ // Create page number buttons
3729
+ for (let i = 1; i <= totalPages; i++) {
3730
+ const li = document.createElement('li');
3731
+ li.className = `page-item ${i === 1 ? 'active' : ''}`;
3732
+ li.setAttribute('data-page', i);
3733
+
3734
+ const a = document.createElement('a');
3735
+ a.className = 'page-link';
3736
+ a.href = '#';
3737
+ a.textContent = i;
3738
+ a.addEventListener('click', function(e) {
3739
+ e.preventDefault();
3740
+ goToActivitiesPage(i, totalPages, itemsPerPage);
3741
+ });
3742
+
3743
+ li.appendChild(a);
3744
+ paginationElement.appendChild(li);
3745
+ }
3746
+
3747
+ // Create Next button
3748
+ const nextLi = document.createElement('li');
3749
+ nextLi.className = 'page-item';
3750
+ nextLi.id = 'activities-next-page';
3751
+
3752
+ const nextA = document.createElement('a');
3753
+ nextA.className = 'page-link';
3754
+ nextA.href = '#';
3755
+ nextA.innerHTML = '&raquo;';
3756
+ nextA.addEventListener('click', function(e) {
3757
+ e.preventDefault();
3758
+ const currentPage = getCurrentActivitiesPage();
3759
+ if (currentPage < totalPages) {
3760
+ goToActivitiesPage(currentPage + 1, totalPages, itemsPerPage);
3761
+ }
3762
+ });
3763
+
3764
+ nextLi.appendChild(nextA);
3765
+ paginationElement.appendChild(nextLi);
3766
+
3767
+ // Show first page and update navigation buttons
3768
+ goToActivitiesPage(1, totalPages, itemsPerPage);
3769
+ }
3770
+
3771
+ // Function to navigate to specific page in Activities table
3772
+ function goToActivitiesPage(pageNumber, totalPages, itemsPerPage) {
3773
+ const container = document.getElementById('activities-container');
3774
+ const paginationElement = document.getElementById('activities-pagination');
3775
+
3776
+ if (!container) return;
3777
+
3778
+ const allRows = Array.from(container.querySelectorAll('.activity-row'));
3779
+
3780
+ // Filter visible rows (considering search)
3781
+ const visibleRows = allRows.filter(row => {
3782
+ const searchVisible = row.getAttribute('data-search-visible');
3783
+ return searchVisible === null || searchVisible === 'true';
3784
+ });
3785
+
3786
+ const startIndex = (pageNumber - 1) * itemsPerPage;
3787
+ const endIndex = startIndex + itemsPerPage;
3788
+
3789
+ console.log('Going to page:', {pageNumber, startIndex, endIndex, totalVisible: visibleRows.length});
3790
+
3791
+ // Hide all rows first
3792
+ allRows.forEach(row => {
3793
+ row.style.display = 'none';
3794
+ });
3795
+
3796
+ // Show rows for current page
3797
+ visibleRows.forEach((row, index) => {
3798
+ if (index >= startIndex && index < endIndex) {
3799
+ row.style.display = '';
3800
+ }
3801
+ });
3802
+
3803
+ // Update pagination active state
3804
+ if (paginationElement) {
3805
+ // Update page number buttons
3806
+ const pageItems = paginationElement.querySelectorAll('.page-item[data-page]');
3807
+ pageItems.forEach((item) => {
3808
+ const page = parseInt(item.getAttribute('data-page'));
3809
+ if (page === pageNumber) {
3810
+ item.classList.add('active');
3811
+ } else {
3812
+ item.classList.remove('active');
3813
+ }
3814
+ });
3815
+
3816
+ // Update Previous button state
3817
+ const prevButton = paginationElement.querySelector('#activities-prev-page');
3818
+ if (prevButton) {
3819
+ if (pageNumber <= 1) {
3820
+ prevButton.classList.add('disabled');
3821
+ } else {
3822
+ prevButton.classList.remove('disabled');
3823
+ }
3824
+ }
3825
+
3826
+ // Update Next button state
3827
+ const nextButton = paginationElement.querySelector('#activities-next-page');
3828
+ if (nextButton) {
3829
+ if (pageNumber >= totalPages) {
3830
+ nextButton.classList.add('disabled');
3831
+ } else {
3832
+ nextButton.classList.remove('disabled');
3833
+ }
3834
+ }
3835
+ }
3836
+ }
3837
+
3838
+ // Function to get current active page in Activities pagination
3839
+ function getCurrentActivitiesPage() {
3840
+ const paginationElement = document.getElementById('activities-pagination');
3841
+ if (!paginationElement) return 1;
3842
+
3843
+ const activeItem = paginationElement.querySelector('.page-item.active[data-page]');
3844
+ if (activeItem) {
3845
+ return parseInt(activeItem.getAttribute('data-page'));
3846
+ }
3847
+ return 1;
3848
+ }
3849
+
3850
+ // Function to scroll to screenshot by ID
3851
+ function scrollToScreenshot(screenshotId) {
3852
+ const screenshotElement = document.getElementById(screenshotId);
3853
+ if (screenshotElement) {
3854
+ // Scroll to the screenshot with smooth behavior
3855
+ screenshotElement.scrollIntoView({
3856
+ behavior: 'smooth',
3857
+ block: 'center'
3858
+ });
3859
+
3860
+ // Add a highlight effect
3861
+ screenshotElement.style.border = '3px solid #007bff';
3862
+ screenshotElement.style.borderRadius = '8px';
3863
+ screenshotElement.style.transition = 'border 0.3s ease';
3864
+
3865
+ // Remove highlight after 3 seconds
3866
+ setTimeout(() => {
3867
+ screenshotElement.style.border = '';
3868
+ screenshotElement.style.borderRadius = '';
3869
+ }, 3000);
3870
+ } else {
3871
+ console.warn('Screenshot with ID', screenshotId, 'not found');
3872
+ }
3873
+ }
3874
+ </script>
3875
+ </body>
3876
+ </html>