From 6e0296a977dbe6156505b17f63b9c20c74f46130 Mon Sep 17 00:00:00 2001 From: Antriksh Date: Sun, 31 Dec 2023 01:39:40 +0530 Subject: [PATCH] refactor: removed-jquery --- src/simulator/src/testCreator.js | 448 ++++++++++++++++++------------- 1 file changed, 265 insertions(+), 183 deletions(-) diff --git a/src/simulator/src/testCreator.js b/src/simulator/src/testCreator.js index 4a1708c2..0f026938 100644 --- a/src/simulator/src/testCreator.js +++ b/src/simulator/src/testCreator.js @@ -34,20 +34,24 @@ window.onload = () => { if (query.has('popUp')) { if (query.get('popUp') == 'true') { creatorMode = CREATORMODE.SIMULATOR_POPUP - $('.right-button-group').append( - '' - ) + let rightButtonGroup = document.querySelector('.right-button-group') + let button = document.createElement('button') + button.className = 'lower-button save-buton' + button.textContent = 'Attach' + button.addEventListener('click', saveData) + rightButtonGroup.appendChild(button) } } + let creatorHead = document.querySelector('#tb-creator-head') if (query.has('data')) { - $('#tb-creator-head').html('Edit Test') + creatorHead.innerHTML = 'Edit Test' circuitScopeID = query.get('scopeID') loadData(query.get('data')) return } if (query.has('result')) { - $('#tb-creator-head').html('Test Result') + creatorHead.innerHTML = 'Test Result' loadResult(query.get('result')) readOnlyUI() return @@ -64,18 +68,19 @@ function changeTestMode(m) { if (testMode === m) return false dataReset() testMode = m - $('#combSelect').removeClass('tab-selected') - $('#seqSelect').removeClass('tab-selected') - $('#tb-new-group').css('visibility', m === 'seq' ? 'visible' : 'hidden') - $(`#${m}Select`).addClass('tab-selected') - $('#dataGroup').empty() + document.querySelector('#combSelect').classList.remove('tab-selected') + document.querySelector('#seqSelect').classList.remove('tab-selected') + document.querySelector('#tb-new-group').style.visibility = + m === 'seq' ? 'visible' : 'hidden' + document.querySelector(`#${m}Select`).classList.add('tab-selected') + document.querySelector('#dataGroup').innerHTML = '' return true } /* Adds case to a group */ function addCase(grp) { - const currentGroupTable = $(`#data-table-${grp + 1}`) + const currentGroupTable = document.querySelector(`#data-table-${grp + 1}`) let s = '
\n' @@ -84,8 +89,8 @@ function addCase(grp) { s += '' // Sortable hack - currentGroupTable.find('tbody').remove() - currentGroupTable.append(s) + currentGroupTable.querySelector('tbody').remove() + currentGroupTable.appendChild(s) } /* Deletes case from a group */ @@ -101,7 +106,7 @@ function deleteCase(element) { function addGroup( groupName = `${testMode === 'comb' ? 'Group' : 'Set'} ${groupIndex + 2}` ) { - $('.plus-button').removeClass('latest-button') + document.querySelector('.plus-button').classList.remove('latest-button') groupIndex++ const s = ` @@ -121,7 +126,7 @@ function addGroup( ` cases[groupIndex] = 0 - $('#dataGroup').append(s) + document.querySelector('#dataGroup').appendChild(s) makeSortable() } @@ -149,38 +154,44 @@ function addInput( const sData = `${escapeHtml( bitwidth.toString() )}` - $('#testBenchTable') - .find('tr') - .eq(1) - .find('th') - .eq(inputCount - 1) - .after(sHead) - $('#testBenchTable') - .find('tr') - .eq(2) - .find('td') - .eq(inputCount - 1) - .after(sData) - $('#tb-inputs-head').attr('colspan', inputCount) + let testBenchTable = document.querySelector('#testBenchTable') + testBenchTable + .querySelector('tr')[1] + .querySelector('th') + [inputCount - 1].insertAdjacentHTML('afterend', sHead) + testBenchTable + .querySelector('tr')[2] + .querySelector('td') + [inputCount - 1].insertAdjacentHTML('afterend', sData) + + let inputHead = document.querySelector('#tb-inputs-head') + inputHead.setAttribute('colspan', inputCount) // Change data tables' contents - $('#dataGroup') - .find('table') - .each(function (group_i) { - $(this) - .find('tr') - .each(function (case_i) { - const s = `${ - inputData.length - ? escapeHtml(inputData[group_i][case_i]) - : 0 - }` - $(this) - .find('td') - .eq(inputCount - 1) - .after(s) - }) - }) + + let dataGroup = document.querySelector('#dataGroup') + let tables = dataGroup.querySelector('table') + + for (let group_i = 0; group_i < tables.length; group_i++) { + let currentTable = tables[group_i] + + let rows = currentTable.querySelector('tr') + + for (let case_i = 0; case_i < rows.length; case_i++) { + let currentRow = rows[case_i] + + let newTd = document.createElement('td') + newTd.setAttribute('contenteditable', 'true') + + let content = inputData.length + ? escapeHtml(inputData[group_i][case_i]) + : 0 + newTd.innerHTML = content + + let targetTd = currentRow.getElementsByTagName('td')[inputCount - 1] + targetTd.parentNode.insertBefore(newTd, targetTd.nextSibling) + } + } } /* Adds output with default value 0 or values supplied in @param outputData */ @@ -212,81 +223,90 @@ function addOutput( bitwidth.toString() )}` } - - $('#testBenchTable') - .find('tr') - .eq(1) - .find('th') - .eq(inputCount + outputCount - 1) - .after(sHead) - $('#testBenchTable') - .find('tr') - .eq(2) - .find('td') - .eq(inputCount + outputCount - 1) - .after(sData) + testBenchTable + .querySelector('tr')[1] + .querySelector('th') + [inputCount + outputCount - 1].insertAdjacentHTML('afterend', sHead) + testBenchTable + .querySelector('tr')[2] + .querySelector('td') + [inputCount + outputCount - 1].insertAdjacentHTML('afterend', sData) // If not result then colspan is outputCount - $('#tb-outputs-head').attr('colspan', outputCount) + let outputHead = document.querySelector('tb-outputs-head') + outputHead.setAttribute('colspan', outputCount) // else it's 2*outputCount if (result) { - $('#tb-outputs-head').attr('colspan', 2 * outputCount) + outputHead.setAttribute('colspan', 2 * outputCount) } // Change data tables' contents // If not result just add the outputs + if (!result) { - $('#dataGroup') - .find('table') - .each(function (group_i) { - $(this) - .find('tr') - .each(function (case_i) { - const s = `${ - outputData.length - ? escapeHtml(outputData[group_i][case_i]) - : 0 - }` - $(this) - .find('td') - .eq(inputCount + outputCount - 1) - .after(s) - }) - }) + for (let group_i = 0; group_i < tables.length; group_i++) { + let currentTable = tables[group_i] + + let rows = currentTable.querySelector('tr') + + for (let case_i = 0; case_i < rows.length; case_i++) { + let currentRow = rows[case_i] + + let newTd = document.createElement('td') + newTd.setAttribute('contenteditable', 'true') + + let content = outputData.length + ? escapeHtml(outputData[group_i][case_i]) + : 0 + newTd.innerHTML = content + + let targetTd = + currentRow.getElementsByTagName('td')[ + inputCount + outputCount - 1 + ] + targetTd.parentNode.insertBefore(newTd, targetTd.nextSibling) + } + } // If result then add results besides the outputs // Hacky } else { - $('#dataGroup') - .find('table') - .each(function (group_i) { - $(this) - .find('tr') - .each(function (case_i) { - // Add the outputs (expected values) - const outputCellData = `${escapeHtml( - outputData[group_i][case_i] - )}` - $(this) - .find('td') - .eq(inputCount + 2 * (outputCount - 1)) - .after(outputCellData) - - // Add the actual values - const resultColor = - resultData[group_i][case_i] === - outputData[group_i][case_i] - ? 'green' - : 'red' - const resultCellData = `${escapeHtml( - resultData[group_i][case_i] - )}` - $(this) - .find('td') - .eq(inputCount + 2 * outputCount - 1) - .after(resultCellData) - }) - }) + for (let group_i = 0; group_i < tables.length; group_i++) { + let currentTable = tables[group_i] + + let rows = currentTable.getElementsByTagName('tr') + + for (let case_i = 0; case_i < rows.length; case_i++) { + let currentRow = rows[case_i] + + let outputCellData = document.createElement('td') + outputCellData.innerHTML = escapeHtml( + outputData[group_i][case_i] + ) + currentRow.insertBefore( + outputCellData, + currentRow.getElementsByTagName('td')[ + inputCount + 2 * (outputCount - 1) + ].nextSibling + ) + + let resultColor = + resultData[group_i][case_i] === outputData[group_i][case_i] + ? 'green' + : 'red' + let resultCellData = document.createElement('td') + resultCellData.style.color = resultColor + resultCellData.innerHTML = escapeHtml( + resultData[group_i][case_i] + ) + currentRow.insertBefore( + resultCellData, + currentRow.getElementsByTagName('td')[ + inputCount + 2 * outputCount - 1 + ].nextSibling + ) + } + } } } @@ -295,14 +315,21 @@ function deleteInput(element) { if (inputCount === 1) return const columnIndex = element.parent().eq(0).index() - $('#testBenchTable tr, .data-group tr') - .slice(1) - .each(function () { - $(this).find('td, th').eq(columnIndex).remove() - }) + let testBenchTableRows = document.querySelectorAll( + '#testBenchTable tr, .data-group tr' + ) + + for (let i = 1; i < testBenchTableRows.length; i++) { + let currentRow = testBenchTableRows[i] + + let cells = currentRow.querySelectorAll('td, th') + + let targetCell = cells[columnIndex] + targetCell.parentNode.removeChild(targetCell) + } inputCount-- - $('#tb-inputs-head').attr('colspan', inputCount) + inputHead.setAttribute('colspan', inputCount) } /* Deletes output unless there's only one output */ @@ -310,36 +337,37 @@ function deleteOutput(element) { if (outputCount === 1) return const columnIndex = element.parent().eq(0).index() - $('#testBenchTable tr, .data-group tr') - .slice(1) - .each(function () { - $(this).find('td, th').eq(columnIndex).remove() - }) + for (let i = 1; i < testBenchTableRows.length; i++) { + let currentRow = testBenchTableRows[i] + + let cells = currentRow.querySelectorAll('td, th') + + let targetCell = cells[columnIndex] + targetCell.parentNode.removeChild(targetCell) + } outputCount-- - $('#tb-outputs-head').attr('colspan', outputCount) + outputHead.setAttribute('colspan', outputCount) } /* Returns input/output(keys) and their bitwidths(values) */ /* Called by getData() */ function getBitWidths() { const bitwidths = {} - $('#testBenchTable') - .find('tr') - .eq(1) - .find('th') - .slice(1) - .each(function (index) { - const inp = $(this).text() - const bw = $('#testBenchTable') - .find('tr') - .eq(2) - .find('td') - .slice(1) - .eq(index) - .html() - bitwidths[inp] = Number(bw) - }) + let secondRow = testBenchTable.querySelector('tr')[1] + let thElements = secondRow.querySelectorAll('th') + thElements = Array.from(thElements).slice(1) + + thElements.forEach(function (th, index) { + let inp = th.textContent + + let tdElement = testBenchTable + .querySelector('tr')[2] + .querySelectorAll('td')[index + 1] + + let bw = tdElement.innerHTML + bitwidths[inp] = Number(bw) + }) return bitwidths } @@ -348,15 +376,15 @@ function getBitWidths() { function getData() { const bitwidths = getBitWidths() const groups = [] - const groupCount = $('#dataGroup').children().length + const groupCount = document.querySelector('#dataGroup').childElementCount for (let group_i = 0; group_i < groupCount; group_i++) { const group = {} group.label = getGroupTitle(group_i) group.inputs = [] group.outputs = [] - const group_table = $(`#data-table-${group_i + 1}`) - group.n = group_table.find('tr').length + const group_table = document.querySelector(`#data-table-${group_i + 1}`) + group.n = group_table.querySelectorAll('tr').length // Push all the inputs in the group for (let inp_i = 0; inp_i < inputCount; inp_i++) { @@ -366,8 +394,13 @@ function getData() { bitWidth: bitwidths[label], values: [], } - group_table.find('tr').each(function () { - input.values.push($(this).find('td').slice(1).eq(inp_i).html()) + + group_table.querySelectorAll('tr').forEach((row) => { + let cells = row.querySelectorAll('td') + cells = Array.from(cells).slice(1) + + let cellValue = cells[inp_i].innerHTML + input.push(cellValue) }) group.inputs.push(input) @@ -381,14 +414,14 @@ function getData() { bitWidth: bitwidths[label], values: [], } - group_table.find('tr').each(function () { - output.values.push( - $(this) - .find('td') - .slice(1) - .eq(inputCount + out_i) - .html() - ) + + group_table.querySelectorAll('tr').forEach((row) => { + let cells = row.querySelectorAll('td') + cells = Array.from(cells).slice(1) + + let cellValue = cells[inputCount + out_i].innerHTML + + output.push(cellValue) }) group.outputs.push(output) @@ -401,11 +434,12 @@ function getData() { } function getTestTitle() { - return $('#test-title-label').text() + return document.querySelector('#test-title-label').textContent } function getGroupTitle(group_i) { - return $(`#data-group-title-${group_i + 1}`).text() + return document.querySelector(`#data-group-title-${group_i + 1}`) + .textContent } /* Parse UI table into Javascript Object */ @@ -423,14 +457,16 @@ function exportAsCSV() { let csvData = '' csvData += 'Title,Test Type,Input Count,Output Count\n' csvData += `${getTestTitle()},${testMode},${inputCount},${outputCount}\n\n\n` - csvData += $('table').eq(0).table2CSV() + csvData += document.querySelector('table')[0].table2CSV() csvData += '\n\n' - $('table') - .slice(1) - .each(function (group_i) { + + document + .querySelectorAll('table:not(:first-of-type)') + .forEach(function (table, group_i) { csvData += getGroupTitle(group_i) csvData += '\n' - csvData += $(this).table2CSV() + + csvData += tableToCSV(table) csvData += '\n\n' }) @@ -443,7 +479,7 @@ function exportAsCSV() { To achieve this, first converts to JSON then uses request param to load json to table */ function importFromCSV() { - const file = $('#csvFileInput').prop('files')[0] + const file = document.querySelector('csvFileInput').files[0] const reader = new FileReader() // If circuitScopeID exists, ie. if popup opened from testbench, then use that to redirect @@ -467,7 +503,7 @@ function importFromCSV() { // Clicks the hidden upload file button, entrypoint into importFromCSV() // The hidden button in-turn calls importFromCSV() function clickUpload() { - $('#csvFileInput').click() + document.querySelector('csvFileInput').click() } /* Converts CSV to JSON to be loaded into the table */ @@ -587,7 +623,9 @@ function saveData() { /* Loads data from JSON string into the table */ function loadData(dataJSON) { const data = JSON.parse(dataJSON) - if (data.title) $('#test-title-label').text(data.title) + if (data.title) { + document.querySelector('#test-title-label').textContent = data.title + } changeTestMode() changeTestMode(data.type) for (let group_i = 0; group_i < data.groups.length; group_i++) { @@ -626,7 +664,9 @@ function loadData(dataJSON) { */ function loadResult(dataJSON) { const data = JSON.parse(dataJSON) - if (data.title) $('#test-title-label').text(data.title) + if (data.title) { + document.querySelector('#test-title-label').textContent = data.title + } changeTestMode() changeTestMode(data.type) for (let group_i = 0; group_i < data.groups.length; group_i++) { @@ -688,18 +728,27 @@ function loadResult(dataJSON) { function readOnlyUI() { makeContentUneditable() makeUnsortable() - $('.lower-button, .table-button, .tb-minus').hide() - $('.tablink').attr('disabled', 'disabled') - $('.tablink').removeClass('tablink-no-override') - $('.data-group-info').text('') + document.querySelectorAll( + '.lower-button, .table-button, .tb-minus' + ).style.display = 'none' + document.querySelectorAll('.tablink').forEach((tablink) => { + tablink.disabled = true + }) + + document.querySelectorAll('.tablink').forEach((tablink) => { + tablink.classList.remove('tablink-no-override') + }) + document.querySelector('.data-group-info').textContent = ' ' } function makeContentUneditable() { - $('body') - .find('td, th, span, h3, div') - .each(function () { - $(this).attr('contenteditable', 'false') - }) + let elements = document.querySelectorAll( + 'body td, body th, body span, body h3, body div' + ) + + elements.forEach(function (element) { + element.setAttribute('contenteditable', 'false') + }) } function makeSortable() { @@ -725,31 +774,64 @@ function makeSortable() { if the table has no rows, and once table gets rows, we remove that tbody */ function removeTbody(e, ui) { - $(e.target).find('tbody').remove() + e.target.querySelectorAll('tbody').forEach((tbodyElement) => { + tbodyElement.parentNode.removeChild(tbodyElement) + }) } function createTbody(e, ui) { - if ($(e.target).find('tr, tbody').length === 0) { - $(e.target).append('') + if (e.target.querySelectorAll('tr, body').length === 0) { + e.target.appendChild(document.createElement('tbody')) } } - $('.data-group table').sortable({ - handle: '.tb-handle', - helper, - start: makePlaceholder, - placeholder: 'clone', - connectWith: 'table', - receive: removeTbody, // For sortable hack - remove: createTbody, // For sortable hack - items: 'tr', - revert: 50, - scroll: false, + var dataGroupTables = document.querySelectorAll('.data-group table') + + dataGroupTables.forEach(function (table) { + table.addEventListener('dragstart', function (event) { + var tr = event.target.closest('tr') + if (tr) { + event.dataTransfer.setData('text/plain', '') + event.dataTransfer.effectAllowed = 'move' + tr.classList.add('dragging') + } + }) + + table.addEventListener('dragover', function (event) { + event.preventDefault() + var tr = event.target.closest('tr') + var draggingElement = table.querySelector('.dragging') + if (tr && draggingElement) { + var rect = tr.getBoundingClientRect() + var offsetY = event.clientY - rect.top + if (offsetY > rect.height / 2) { + tr.parentNode.insertBefore(draggingElement, tr.nextSibling) + } else { + tr.parentNode.insertBefore(draggingElement, tr) + } + } + }) + + table.addEventListener('dragend', function (event) { + var draggingElement = table.querySelector('.dragging') + if (draggingElement) { + draggingElement.classList.remove('dragging') + } + }) }) } function makeUnsortable() { - $('.data-group table').sortable({ disabled: true }) +var dataGroupTables = document.querySelectorAll('.data-group table'); + +dataGroupTables.forEach(function(table) { + table.draggable = false; + + table.addEventListener('dragstart', (event) => { + event.preventDefault(); + }); +}); + } function escapeHtml(unsafe) {