From ea9deeb128ab4e52276fff176ea3fb68856f2af1 Mon Sep 17 00:00:00 2001
From: Harsh Rao <harshraocodesup@gmail.com>
Date: Mon, 27 Jan 2025 03:37:30 +0530
Subject: [PATCH] refactor : jquery removal and ts integration

---
 .../DialogBox/CombinationalAnalysis.vue       | 363 +++++++++---------
 1 file changed, 178 insertions(+), 185 deletions(-)

diff --git a/src/components/DialogBox/CombinationalAnalysis.vue b/src/components/DialogBox/CombinationalAnalysis.vue
index b4826594..ebc7542e 100644
--- a/src/components/DialogBox/CombinationalAnalysis.vue
+++ b/src/components/DialogBox/CombinationalAnalysis.vue
@@ -10,41 +10,58 @@
         :table-body="tableBody"
         message-text="Boolean Logic Table"
         @button-click="
-            (selectedOption, circuitItem, circuitNameVal) =>
+            (selectedOption: string, circuitItem: any, circuitNameVal: any) =>
                 dialogBoxConformation(selectedOption)
         "
     />
-    <v-alert v-if="showAlert" :type="alertType" class="alertStyle">{{
-        alertMessage
-    }}</v-alert>
+    <v-alert v-if="showAlert" :type="alertType" class="alertStyle">{{ alertMessage }}</v-alert>
 </template>
 
 <script lang="ts" setup>
-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 { stripTags } from '#/simulator/src/utils';
+import { useState } from '#/store/SimulatorStore/state';
+import messageBox from '@/MessageBox/messageBox.vue';
+import { ref, onMounted } from 'vue';
 
 /* imports from combinationalAnalysis.js */
-import { GenerateCircuit, solveBooleanFunction } from '#/simulator/src/combinationalAnalysis'
+import { GenerateCircuit, solveBooleanFunction } from '#/simulator/src/combinationalAnalysis';
 
-const SimulatorState = useState()
+// Define types for better type safety
+type InputItem = {
+    text: string;
+    val: string | boolean;
+    placeholder: string;
+    id: string;
+    style: string;
+    class: string;
+    type: string;
+};
+
+type ButtonItem = {
+    text: string;
+    emitOption: string;
+};
+
+type TableRow = (string | number | boolean)[];
+
+const SimulatorState = useState();
 onMounted(() => {
-    SimulatorState.dialogBox.combinationalanalysis_dialog = false
-})
-const inputArr = ref([{}])
-const buttonArr = ref([{}])
-const showAlert = ref(false)
-const alertType = ref('error')
-const alertMessage = ref('')
-const outputListNamesInteger = ref([])
-const inputListNames = ref([])
-const outputListNames = ref([])
-const tableHeader = ref([])
-const tableBody = ref([])
-const output = ref([])
+    SimulatorState.dialogBox.combinationalanalysis_dialog = false;
+});
 
+const inputArr = ref<InputItem[]>([]);
+const buttonArr = ref<ButtonItem[]>([]);
+const showAlert = ref<boolean>(false);
+const alertType = ref<string>('error');
+const alertMessage = ref<string>('');
+const outputListNamesInteger = ref<number[]>([]);
+const inputListNames = ref<string[]>([]);
+const outputListNames = ref<string[]>([]);
+const tableHeader = ref<string[]>([]);
+const tableBody = ref<TableRow[]>([]);
+const output = ref<(string | number | boolean)[] | null>(null);
+
+// Initialize inputArr
 inputArr.value = [
     {
         text: 'Enter Input names separated by commas: ',
@@ -83,16 +100,17 @@ inputArr.value = [
     },
     {
         text: 'I need a decimal column.',
-        val: '',
+        val: false,
         placeholder: '',
         id: 'decimalColumnBox',
         style: '',
         class: 'cAinput',
         type: 'checkbox',
     },
-]
+];
 
-const buttonArray = [
+// Initialize buttonArr
+const buttonArray: ButtonItem[] = [
     {
         text: 'Next',
         emitOption: 'showLogicTable',
@@ -101,178 +119,151 @@ const buttonArray = [
         text: 'Close',
         emitOption: 'closeMessageBox',
     },
-]
-buttonArr.value = buttonArray
+];
+buttonArr.value = buttonArray;
 
-function clearData() {
-    inputArr.value[0].val = ''
-    inputArr.value[1].val = ''
-    inputArr.value[3].val = ''
-    inputArr.value[4].val = ''
-    buttonArr.value = buttonArray
-    outputListNamesInteger.value = []
-    inputListNames.value = []
-    outputListNames.value = []
-    tableHeader.value = []
-    tableBody.value = []
-    output.value = []
+function clearData(): void {
+    inputArr.value[0].val = '';
+    inputArr.value[1].val = '';
+    inputArr.value[3].val = '';
+    inputArr.value[4].val = false;
+    buttonArr.value = buttonArray;
+    outputListNamesInteger.value = [];
+    inputListNames.value = [];
+    outputListNames.value = [];
+    tableHeader.value = [];
+    tableBody.value = [];
+    output.value = [];
 }
 
-function dialogBoxConformation(selectedOption, circuitItem) {
-    // SimulatorState.dialogBox.combinationalanalysis_dialog = false
-    // use the above value to show tables and later clear it all
-    if (selectedOption == 'showLogicTable') {
-        createLogicTable()
+function dialogBoxConformation(selectedOption: string, circuitItem?: any): void {
+    if (selectedOption === 'showLogicTable') {
+        createLogicTable();
     }
-    if (selectedOption == 'closeMessageBox') {
-        for (var ind = 0; ind < inputArr.value.length; ind++) {
-            if (inputArr.value[ind].type == 'text') {
-                inputArr.value[ind].val = ''
+    if (selectedOption === 'closeMessageBox') {
+        inputArr.value.forEach((item) => {
+            if (item.type === 'text') {
+                item.val = '';
             }
-            if (inputArr.value[ind].type == 'checkbox') {
-                inputArr.value[ind].val = false
+            if (item.type === 'checkbox') {
+                item.val = false;
             }
-        }
-        clearData()
-        SimulatorState.dialogBox.combinationalanalysis_dialog = false
+        });
+        clearData();
+        SimulatorState.dialogBox.combinationalanalysis_dialog = false;
     }
-    if (selectedOption == 'generateCircuit') {
-        SimulatorState.dialogBox.combinationalanalysis_dialog = false
-        GenerateCircuit()
-        clearData()
-        SimulatorState.dialogBox.combinationalanalysis_dialog = false
+    if (selectedOption === 'generateCircuit') {
+        SimulatorState.dialogBox.combinationalanalysis_dialog = false;
+        GenerateCircuit();
+        clearData();
+        SimulatorState.dialogBox.combinationalanalysis_dialog = false;
     }
-    if (selectedOption == 'printTruthTable') {
-        printBooleanTable()
-        clearData()
-        SimulatorState.dialogBox.combinationalanalysis_dialog = false
+    if (selectedOption === 'printTruthTable') {
+        printBooleanTable();
+        clearData();
+        SimulatorState.dialogBox.combinationalanalysis_dialog = false;
     }
 }
 
-function createLogicTable() {
-    let inputList = stripTags(inputArr.value[0].val).split(',')
-    let outputList = stripTags(inputArr.value[1].val).split(',')
-    let booleanExpression = inputArr.value[3].val
+function createLogicTable(): void {
+    let inputList = stripTags(inputArr.value[0].val as string).split(',');
+    let outputList = stripTags(inputArr.value[1].val as string).split(',');
+    let booleanExpression = inputArr.value[3].val as string;
 
-    inputList = inputList.map((x) => x.trim())
-    inputList = inputList.filter((e) => e)
-    outputList = outputList.map((x) => x.trim())
-    outputList = outputList.filter((e) => e)
-    booleanExpression = booleanExpression.replace(/ /g, '')
-    booleanExpression = booleanExpression.toUpperCase()
+    inputList = inputList.map((x) => x.trim()).filter((e) => e);
+    outputList = outputList.map((x) => x.trim()).filter((e) => e);
+    booleanExpression = booleanExpression.replace(/ /g, '').toUpperCase();
 
-    var booleanInputVariables = []
-    for (var i = 0; i < booleanExpression.length; i++) {
+    const booleanInputVariables: string[] = [];
+    for (let i = 0; i < booleanExpression.length; i++) {
         if (booleanExpression[i] >= 'A' && booleanExpression[i] <= 'Z') {
-            if (booleanExpression.indexOf(booleanExpression[i]) == i) {
-                booleanInputVariables.push(booleanExpression[i])
+            if (booleanExpression.indexOf(booleanExpression[i]) === i) {
+                booleanInputVariables.push(booleanExpression[i]);
             }
         }
     }
-    booleanInputVariables.sort()
+    booleanInputVariables.sort();
 
-    if (
-        inputList.length > 0 &&
-        outputList.length > 0 &&
-        booleanInputVariables.length == 0
-    ) {
-        // $(this).dialog('close')
-        SimulatorState.dialogBox.combinationalanalysis_dialog = false
-
-        createBooleanPrompt(inputList, outputList, null)
-    } else if (
-        booleanInputVariables.length > 0 &&
-        inputList.length == 0 &&
-        outputList.length == 0
-    ) {
-        // $(this).dialog('close')
-        SimulatorState.dialogBox.combinationalanalysis_dialog = false
-        output.value = []
-        solveBooleanFunction(booleanInputVariables, booleanExpression)
-        if (output.value != null) {
-            createBooleanPrompt(booleanInputVariables, booleanExpression)
+    if (inputList.length > 0 && outputList.length > 0 && booleanInputVariables.length === 0) {
+        SimulatorState.dialogBox.combinationalanalysis_dialog = false;
+        createBooleanPrompt(inputList, outputList, null);
+    } else if (booleanInputVariables.length > 0 && inputList.length === 0 && outputList.length === 0) {
+        SimulatorState.dialogBox.combinationalanalysis_dialog = false;
+        output.value = [];
+        solveBooleanFunction(booleanInputVariables, booleanExpression);
+        if (output.value !== null) {
+            createBooleanPrompt(booleanInputVariables, booleanExpression);
         }
-    } else if (
-        (inputList.length == 0 || outputList.length == 0) &&
-        booleanInputVariables == 0
-    ) {
-        showAlert.value = true
-        alertType.value = 'info'
-        alertMessage.value =
-            'Enter Input / Output Variable(s) OR Boolean Function!'
+    } else if ((inputList.length === 0 || outputList.length === 0) && booleanInputVariables.length === 0) {
+        showAlert.value = true;
+        alertType.value = 'info';
+        alertMessage.value = 'Enter Input / Output Variable(s) OR Boolean Function!';
         setTimeout(() => {
-            showAlert.value = false
-        }, 2000)
+            showAlert.value = false;
+        }, 2000);
     } else {
-        showAlert.value = true
-        alertType.value = 'warning'
-        alertMessage.value =
-            'Use Either Combinational Analysis Or Boolean Function To Generate Circuit!'
+        showAlert.value = true;
+        alertType.value = 'warning';
+        alertMessage.value = 'Use Either Combinational Analysis Or Boolean Function To Generate Circuit!';
         setTimeout(() => {
-            showAlert.value = false
-        }, 2000)
+            showAlert.value = false;
+        }, 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(',')
-    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
+function createBooleanPrompt(inputList: string[], outputList: string[], scope: any = globalScope): void {
+    inputListNames.value = inputList || prompt('Enter inputs separated by commas')?.split(',') || [];
+    outputListNames.value = outputList || prompt('Enter outputs separated by commas')?.split(',') || [];
+
+    if (output.value === null) {
+        outputListNamesInteger.value = outputListNames.value.map((_, i) => 7 * i + 13);
     } else {
-        outputListNamesInteger.value = [13]
-    }
-    tableBody.value = []
-    tableHeader.value = []
-    let fw = 0
-    if (inputArr.value[4].val == true) {
-        fw = 1
-        tableHeader.value.push('dec')
+        outputListNamesInteger.value = [13];
     }
-    for (var i = 0; i < inputListNames.value.length; i++) {
-        tableHeader.value.push(inputListNames.value[i])
+
+    tableBody.value = [];
+    tableHeader.value = [];
+    let fw = 0;
+    if (inputArr.value[4].val === true) {
+        fw = 1;
+        tableHeader.value.push('dec');
     }
-    if (output.value == null) {
-        for (var i = 0; i < outputListNames.value.length; i++) {
-            tableHeader.value.push(outputListNames.value[i])
-        }
+
+    tableHeader.value.push(...inputListNames.value);
+    if (output.value === null) {
+        tableHeader.value.push(...outputListNames.value);
     } else {
-        tableHeader.value.push(outputListNames.value)
+        tableHeader.value.push(outputListNames.value.join(', '));
     }
 
-    for (var i = 0; i < 1 << inputListNames.value.length; i++) {
-        tableBody.value[i] = new Array(tableHeader.value.length)
+    for (let 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
-            )
+
+    for (let i = 0; i < inputListNames.value.length; i++) {
+        for (let j = 0; j < 1 << inputListNames.value.length; j++) {
+            tableBody.value[j][i + fw] = +((j & (1 << (inputListNames.value.length - i - 1))) !== 0);
         }
     }
-    if (inputArr.value[4].val == true) {
-        for (var j = 0; j < 1 << inputListNames.value.length; j++) {
-            tableBody.value[j][0] = j
+
+    if (inputArr.value[4].val === true) {
+        for (let 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'
+
+    for (let j = 0; j < 1 << inputListNames.value.length; j++) {
+        for (let 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]
+        if (output.value !== null) {
+            tableBody.value[j][inputListNames.value.length + fw] = output.value[j];
         }
     }
-    // display Message Box
-    SimulatorState.dialogBox.combinationalanalysis_dialog = true
+
+    SimulatorState.dialogBox.combinationalanalysis_dialog = true;
     buttonArr.value = [
         {
             text: 'Generate Circuit',
@@ -282,46 +273,48 @@ function createBooleanPrompt(inputList, outputList, scope = globalScope) {
             text: 'Print Truth Table',
             emitOption: 'printTruthTable',
         },
-    ]
+    ];
 }
 
-function printBooleanTable() {
-    var sTable = $('.messageBox .v-card-text')[0].innerHTML
+function printBooleanTable(): void {
+    const messageBoxElement = document.querySelector('.messageBox .v-card-text');
+    if (!messageBoxElement) return;
 
-    var style =
-        `<style>
+    const sTable = messageBoxElement.innerHTML;
+
+    const 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()
+    </style>`.replace(/\n/g, '');
+
+    const win = window.open('', '', 'height=700,width=700');
+    if (!win) return;
+
+    const 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();
 }
 </script>
 
 <style scoped>
 .alertStyle {
     position: absolute;
-    /* top: 50%; */
     top: 100px;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 10000;
 }
-</style>
-
-<!--
-    some errors due to output.value
-    output.value == null not working
--->
+</style>
\ No newline at end of file