Skip to content

Refactor Codebase: Replace jQuery with Vue.js in Key Components #465

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.

Sign up for GitHub

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
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Refactor Codebase: Replace jQuery with Vue.js in Key Components #465

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3e895dd
Changed jquery to vue in applythemes
rxiddhi Feb 8, 2025
14d6645
Changed jquery to vue in combinationalanalysis
rxiddhi Feb 8, 2025
9d95a2a
Merge branch 'main' into main
Arnabdaz Feb 10, 2025
5e544c0
Refactor: Replace setTimeout and setInterval with Vue Lifecycle Hooks…
rxiddhi Feb 10, 2025
8ddf661
Merge branch 'CircuitVerse:main' into main
rxiddhi Feb 10, 2025
2ea13ac
Update src/components/DialogBox/CombinationalAnalysis.vue
rxiddhi Feb 10, 2025
4bdaf63
Merge branch 'main' into main
rxiddhi Apr 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
163 changes: 95 additions & 68 deletions src/components/DialogBox/CombinationalAnalysis.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,7 @@
import { stripTags } from '#/simulator/src/utils'
import { useState } from '#/store/SimulatorStore/state'
import messageBox from '@/MessageBox/messageBox.vue'
import { ref } from 'vue'
import { onMounted } from 'vue'
import { ref, onMounted, watch } from 'vue'

/* imports from combinationalAnalysis.js */
import { GenerateCircuit, solveBooleanFunction } from '#/simulator/src/combinationalAnalysis'
Expand Down Expand Up @@ -200,78 +199,83 @@ function createLogicTable() {
alertType.value = 'info'
alertMessage.value =
'Enter Input / Output Variable(s) OR Boolean Function!'
setTimeout(() => {
watch(showAlert, () => {
showAlert.value = false
}, 2000)
}, { timeout: 2000 })
} else {
showAlert.value = true
alertType.value = 'warning'
alertMessage.value =
'Use Either Combinational Analysis Or Boolean Function To Generate Circuit!'
setTimeout(() => {
watch(showAlert, () => {
showAlert.value = false
}, 2000)
}, { timeout: 2000 })
}
}

function createBooleanPrompt(inputList, outputList, scope = globalScope) {
inputListNames.value =
inputList || prompt('Enter inputs separated by commas').split(',')
outputListNames.value =
outputList || prompt('Enter outputs separated by commas').split(',')
inputListNames.value = inputList || prompt('Enter inputs separated by commas')?.split(',') || []
outputListNames.value = outputList || prompt('Enter outputs separated by commas')?.split(',') || []

if (output.value == null) {
for (var i = 0; i < outputListNames.value.length; i++) {
outputListNamesInteger.value[i] = 7 * i + 13
} // assigning an integer to the value, 7*i + 13 is random
outputListNamesInteger.value = outputListNames.value.map((_, i) => 7 * i + 13)
} else {
outputListNamesInteger.value = [13]
}

// Reset table data
tableBody.value = []
tableHeader.value = []
let fw = 0
if (inputArr.value[4].val == true) {
fw = 1

// Add decimal column if checkbox is checked
let columnOffset = 0
if (inputArr.value[4].val === true) {
columnOffset = 1
tableHeader.value.push('dec')
}
for (var i = 0; i < inputListNames.value.length; i++) {
tableHeader.value.push(inputListNames.value[i])
}

// Add input headers
inputListNames.value.forEach(name => {
tableHeader.value.push(name)
})

// Add output headers
if (output.value == null) {
for (var i = 0; i < outputListNames.value.length; i++) {
tableHeader.value.push(outputListNames.value[i])
}
outputListNames.value.forEach(name => {
tableHeader.value.push(name)
})
} else {
tableHeader.value.push(outputListNames.value)
}

for (var i = 0; i < 1 << inputListNames.value.length; i++) {
tableBody.value[i] = new Array(tableHeader.value.length)
}
for (var i = 0; i < inputListNames.value.length; i++) {
for (var j = 0; j < 1 << inputListNames.value.length; j++) {
tableBody.value[j][i + fw] = +(
(j & (1 << (inputListNames.value.length - i - 1))) !=
0
)
// Generate table body
const rowCount = 1 << inputListNames.value.length
tableBody.value = Array(rowCount).fill(null).map((_, rowIndex) => {
const row = new Array(tableHeader.value.length).fill(null)

// Add decimal column if needed
if (columnOffset) {
row[0] = rowIndex
}
}
if (inputArr.value[4].val == true) {
for (var j = 0; j < 1 << inputListNames.value.length; j++) {
tableBody.value[j][0] = j
}
}
for (var j = 0; j < 1 << inputListNames.value.length; j++) {
for (var i = 0; i < outputListNamesInteger.value.length; i++) {
if (output.value == null) {
tableBody.value[j][inputListNames.value.length + fw + i] = 'x'
}
}
if (output.value != null) {
tableBody.value[j][inputListNames.value.length + fw] =
output.value[j]

// Add input columns
inputListNames.value.forEach((_, colIndex) => {
row[colIndex + columnOffset] = +((rowIndex & (1 << (inputListNames.value.length - colIndex - 1))) !== 0)
})

// Add output columns
if (output.value == null) {
outputListNamesInteger.value.forEach((_, i) => {
row[inputListNames.value.length + columnOffset + i] = 'x'
})
} else {
row[inputListNames.value.length + columnOffset] = output.value[rowIndex]
}
}
// display Message Box

return row
})

// Update UI
SimulatorState.dialogBox.combinationalanalysis_dialog = true
buttonArr.value = [
{
Expand All @@ -286,27 +290,50 @@ function createBooleanPrompt(inputList, outputList, scope = globalScope) {
}

function printBooleanTable() {
var sTable = $('.messageBox .v-card-text')[0].innerHTML
// Get the table content using Vue refs
const messageBoxContent = document.querySelector('.messageBox .v-card-text')?.innerHTML || ''

const style = `
<style>
table { font: 40px Calibri; }
table, th, td { border: solid 1px #DDD; border-collapse: collapse; }
tbody { padding: 2px 3px; text-align: center; }
</style>
`.replace(/\n\s*/g, '')

const htmlBody = `
<!DOCTYPE html>
<html>
<head>
<title>Boolean Logic Table</title>
${style}
</head>
<body>
<center>${messageBoxContent}</center>
</body>
</html>
`

var style =
`<style>
table {font: 40px Calibri;}
table, th, td {border: solid 1px #DDD;border-collapse: 0;}
tbody {padding: 2px 3px;text-align: center;}
</style>`.replace(/\n/g, "")
var win = window.open('', '', 'height=700,width=700')
var htmlBody = `
<html><head>\
<title>Boolean Logic Table</title>\
${style}\
</head>\
<body>\
<center>${sTable}</center>\
</body></html>
`
win.document.write(htmlBody)
win.document.close()
win.print()
// Create a new window for printing
const printWindow = window.open('', '_blank', 'height=700,width=700')
if (printWindow) {
printWindow.document.write(htmlBody)
printWindow.document.close()
// Wait for resources to load before printing
printWindow.onload = () => {
printWindow.print()
printWindow.onafterprint = () => {
printWindow.close()
}
}
} else {
showAlert.value = true
alertType.value = 'error'
alertMessage.value = 'Please allow popups to print the truth table'
watch(showAlert, () => {
showAlert.value = false
}, { timeout: 3000 })
}
}
</script>

Expand Down
22 changes: 10 additions & 12 deletions src/components/DialogBox/Themes/ApplyThemes.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,10 @@
:id="theme"
:key="theme"
class="theme"
:class="
theme == selectedTheme ? 'selected set' : ''
"
:class="{
selected: theme === selectedTheme,
set: theme === selectedThemeRef
}"
>
<div
class="themeSel"
Expand Down Expand Up @@ -161,6 +162,7 @@ const customThemes = ref<((keyof typeof customThemesList)[]) | undefined>(undefi
const customThemesList: Themes = reactive({})
const selectedTheme = ref('default-theme')
const iscustomTheme = ref(false)
const selectedThemeRef = ref<string | null>(null)

onMounted(() => {
SimulatorState.dialogBox.theme_dialog = false
Expand Down Expand Up @@ -195,36 +197,32 @@ function changeCustomTheme(e: InputEvent) {

function applyTheme() {
if (iscustomTheme.value == false) {
if ($('.selected label').text()) {
if (selectedTheme.value) {
localStorage.removeItem('Custom Theme')
localStorage.setItem('theme', $('.selected label').text())
localStorage.setItem('theme', selectedTheme.value)
}
} else {
// update theme to Custom Theme
localStorage.setItem('theme', 'Custom Theme')
// add Custom theme to custom theme object
localStorage.setItem(
'Custom Theme',
JSON.stringify(themeOptions['Custom Theme'])
)
}
$('.set').removeClass('set')
$('.selected').addClass('set')
selectedThemeRef.value = selectedTheme.value
SimulatorState.dialogBox.theme_dialog = false
setTimeout(() => (iscustomTheme.value = false), 1000)
}

function applyCustomTheme() {
iscustomTheme.value = true
updateThemeForStyle(localStorage.getItem('theme'))
updateBG()
localStorage.setItem('theme', 'Custom Theme')
// add Custom theme to custom theme object
localStorage.setItem(
'Custom Theme',
JSON.stringify(themeOptions['Custom Theme'])
)
$('.set').removeClass('set')
$('.selected').addClass('set')
selectedThemeRef.value = selectedTheme.value
}

function receivedText(e: ProgressEvent<FileReader>) {
Expand Down