-
Notifications
You must be signed in to change notification settings - Fork 4
Add/cobi 153 #168
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
CIGbalance
wants to merge
10
commits into
push-zmvqzzrwnlup
Choose a base branch
from
add/cobi_153
base: push-zmvqzzrwnlup
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Add/cobi 153 #168
Changes from all commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
eb883fa
Update UI of the table
Dvermetten 5d1c6b9
Remove gradient because Koen doesn't like it
Dvermetten ec7576d
Further separation of html from conversion script
Dvermetten caeb10b
trying out new template
CIGbalance 945de9a
able to render now
CIGbalance a696186
removing unused imports
CIGbalance ae904d1
Merge pull request #160 from OpenOptimizationOrg/UI_update
Dvermetten c9d37c8
adding merge script (#138)
CIGbalance 8cdd2a4
Merge branch 'main' into add/cobi_153
CIGbalance e1db708
trying unbounded value ranges
CIGbalance File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,150 @@ | ||
|
|
||
|
|
||
| <script> | ||
| new DataTable('#problems', { | ||
| const table = new DataTable('#problems', { | ||
| layout: { | ||
| topStart: 'search', | ||
| topEnd: null, | ||
| bottomStart: 'info', | ||
| bottom: 'paging', | ||
| bottomEnd: 'pageLength' | ||
| }, | ||
| lengthMenu: [15, 25, 50, -1], | ||
| }, | ||
| lengthMenu: [10, 15, 25, 50, -1], | ||
| initComplete: function () { | ||
| this.api() | ||
| .columns() | ||
| .every(function () { | ||
| let column = this; | ||
| let title = column.footer().textContent; | ||
|
|
||
| // Create input element | ||
| let input = document.createElement('input'); | ||
| input.placeholder = title; | ||
| const column = this; | ||
| const title = column.footer().textContent; | ||
| const input = document.createElement('input'); | ||
| input.placeholder = `Filter ${title}`; | ||
| column.footer().replaceChildren(input); | ||
|
|
||
| // Event listener for user input | ||
|
|
||
| input.addEventListener('keyup', () => { | ||
| if (column.search() !== this.value) { | ||
| if (column.search() !== input.value) { | ||
| column.search(input.value).draw(); | ||
| } | ||
| }); | ||
|
|
||
| // Stop search boxes from applying sorting | ||
| input.addEventListener('click', (e) => { | ||
| e.stopPropagation(); | ||
| // Prevent sorting when interacting with filter inputs. | ||
| input.addEventListener('click', (event) => { | ||
| event.stopPropagation(); | ||
| }); | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| // Move row with search boxes to second row | ||
| $('#problems tfoot tr').appendTo('#problems thead'); | ||
| const footerRow = document.querySelector('#problems tfoot tr'); | ||
| const thead = document.querySelector('#problems thead'); | ||
| if (footerRow && thead) { | ||
| thead.appendChild(footerRow); | ||
| } | ||
|
|
||
| const detailsHint = document.getElementById('problem-details-hint'); | ||
| const detailsContent = document.getElementById('problem-details-content'); | ||
|
|
||
| const stripHtml = (value) => { | ||
| const wrapper = document.createElement('div'); | ||
| wrapper.innerHTML = value || ''; | ||
| return wrapper.textContent || wrapper.innerText || ''; | ||
| }; | ||
|
|
||
| const escapeHtml = (value) => { | ||
| const wrapper = document.createElement('div'); | ||
| wrapper.textContent = value || ''; | ||
| return wrapper.innerHTML; | ||
| }; | ||
|
|
||
| const renderRowDetails = (rowApi) => { | ||
| const rowData = rowApi.data(); | ||
| if (!rowData || !detailsContent) { | ||
| return; | ||
| } | ||
|
|
||
| const headers = table | ||
| .columns() | ||
| .header() | ||
| .toArray() | ||
| .map((header) => header.textContent.trim()); | ||
|
|
||
| const detailsHtml = headers | ||
| .map((label, index) => { | ||
| const value = rowData[index] || '<span class="details-empty">n/a</span>'; | ||
| return `<div class="detail-item"><dt>${escapeHtml(label)}</dt><dd>${value}</dd></div>`; | ||
| }) | ||
| .join(''); | ||
|
|
||
| const name = stripHtml(rowData[0]); | ||
| if (detailsHint) { | ||
| detailsHint.textContent = name ? `Selected: ${name}` : 'Selected row'; | ||
| } | ||
|
|
||
| detailsContent.innerHTML = detailsHtml; | ||
| }; | ||
|
|
||
| const applyColumnVisibility = (redraw = true) => { | ||
| document.querySelectorAll('.col-toggle').forEach((toggle) => { | ||
| const index = Number(toggle.getAttribute('data-column')); | ||
| const chip = toggle.closest('.column-chip'); | ||
|
|
||
| if (chip) { | ||
| chip.classList.toggle('is-off', !toggle.checked); | ||
| } | ||
|
|
||
| table.column(index).visible(toggle.checked, false); | ||
| }); | ||
|
|
||
| table.columns.adjust().draw(redraw); | ||
| }; | ||
|
|
||
| document.querySelectorAll('.col-toggle').forEach((toggle) => { | ||
| toggle.addEventListener('change', () => { | ||
| applyColumnVisibility(false); | ||
| }); | ||
| }); | ||
|
|
||
| const setAllColumns = (visible) => { | ||
| document.querySelectorAll('.col-toggle').forEach((toggle) => { | ||
| toggle.checked = visible; | ||
| }); | ||
|
|
||
| applyColumnVisibility(false); | ||
| }; | ||
|
|
||
| const showAllButton = document.getElementById('show-all-columns'); | ||
| if (showAllButton) { | ||
| showAllButton.addEventListener('click', () => setAllColumns(true)); | ||
| } | ||
|
|
||
| const hideAllButton = document.getElementById('hide-all-columns'); | ||
| if (hideAllButton) { | ||
| hideAllButton.addEventListener('click', () => setAllColumns(false)); | ||
| } | ||
|
|
||
| const tableBody = document.querySelector('#problems tbody'); | ||
| if (tableBody) { | ||
| tableBody.addEventListener('click', (event) => { | ||
| const targetRow = event.target.closest('tr'); | ||
| if (!targetRow) { | ||
| return; | ||
| } | ||
|
|
||
| const rowApi = table.row(targetRow); | ||
| if (!rowApi || !rowApi.any()) { | ||
| return; | ||
| } | ||
|
|
||
| document.querySelectorAll('#problems tbody tr.is-active').forEach((row) => { | ||
| row.classList.remove('is-active'); | ||
| }); | ||
|
|
||
| targetRow.classList.add('is-active'); | ||
| renderRowDetails(rowApi); | ||
| }); | ||
| } | ||
|
|
||
| // Honor default checkbox states (some columns start hidden). | ||
| applyColumnVisibility(false); | ||
|
|
||
| </script> | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
renderRowDetails()builds HTML usingrowData[index]and then assigns it viainnerHTML. Because table cell content ultimately comes from YAML andyaml_to_html.pyrenders cells withescape=False, this enables XSS if any YAML string contains HTML/script. Consider sanitizing values before injecting (e.g., escape everything and only allow safe link markup, or use a sanitizer like DOMPurify).