Merge branch 'main' into main

CircuitVerse · Jan 16, 2024 · 61c928b · 61c928b
2 parents e079811 + ad52f65
commit 61c928b
Show file tree

Hide file tree

Showing 7 changed files with 169 additions and 202 deletions.
diff --git a/README.md b/README.md
@@ -20,6 +20,18 @@ npm install
 npm run dev
 ```
 
+## Setting up on cloud with Stackblitz
+[StackBlitz](https://developer.stackblitz.com/guides/user-guide/what-is-stackblitz) is an instant fullstack web IDE for the JavaScript ecosystem.
+
+1. Initiate the setup process by clicking on the following button:
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/~/github.com/CircuitVerse/cv-frontend-vue)
+
+2. Once the setup is complete, a Preview URL will be displayed in the browser window. Append `/simulatorvue/` to your URL to access the simulator.
+```
+https://<preview_url>/simulatorvue/
+```
+
 ## To Dos -
 1. **Creating the mobile version of the vue simulator** 
 2. **Testing and bug fixing**

diff --git a/src/components/DialogBox/BooleanTable.vue b/src/components/DialogBox/BooleanTable.vue
@@ -1,6 +1,6 @@
 <template>
     <table class="content-table">
-        <tbody style="display: block; max-height: 70vh; overflow-y: scroll">
+        <tbody style="display: block; max-height: 70vh;">
             <tr>
                 <th v-for="tableHeading in tableHeader" :key="tableHeading">
                     {{ tableHeading }}

diff --git a/src/components/DialogBox/CombinationalAnalysis.vue b/src/components/DialogBox/CombinationalAnalysis.vue
@@ -8,7 +8,7 @@
         :is-persistent="true"
         :table-header="tableHeader"
         :table-body="tableBody"
-        message-text="BooleanLogicTable"
+        message-text="Boolean Logic Table"
         @button-click="
             (selectedOption, circuitItem, circuitNameVal) =>
                 dialogBoxConformation(selectedOption)
@@ -690,9 +690,15 @@ function generateCircuit() {
 function printBooleanTable() {
     console.log($('.messageBox .v-card-text')[0])
     var sTable = $('.messageBox .v-card-text')[0].innerHTML
+    console.log('This is the table')
     console.log(sTable)
+
     var style =
-        '<style> table {font: 20px Calibri;} table, th, td {border: solid 1px #DDD;border-collapse: collapse;} padding: 2px 3px;text-align: center;} </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>\

diff --git a/src/components/DialogBox/HexBinDec.vue b/src/components/DialogBox/HexBinDec.vue
@@ -5,7 +5,7 @@
     >
         <v-card class="messageBoxContent">
             <v-card-text>
-                <p class="dialogHeader">Hex-Bin-Dec Convertor</p>
+                <p class="dialogHeader">Hex-Bin-Dec Converter</p>
                 <v-btn
                     size="x-small"
                     icon
@@ -17,20 +17,20 @@
                     <v-icon>mdi-close</v-icon>
                 </v-btn>
                 <div
-                    v-for="inputEle in inputArr"
+                    v-for="(value, index) in Object.entries(inputArr)"
                     id="bitconverterprompt"
-                    :key="inputEle.inputId"
+                    :key="value[0]"
                     title="Dec-Bin-Hex-Converter"
                 >
-                    <label>{{ inputEle.label }}</label>
+                    <label>{{ value[1].label }}</label>
                     <br />
                     <input
-                        :id="inputEle.inputId"
+                        :id="value[0]"
                         type="text"
-                        :value="inputEle.val"
-                        :label="inputEle.label"
+                        :value="value[1].val"
+                        :label="value[1].label"
                         name="text1"
-                        @keyup="() => converter(inputEle.inputId)"
+                        @keyup="(payload) => converter(payload)"
                     />
                     <br /><br />
                 </div>
@@ -42,95 +42,178 @@
             </v-card-actions>
         </v-card>
     </v-dialog>
+  <v-dialog
+      v-model="SimulatorState.dialogBox.hex_bin_dec_converter_dialog"
+      :persistent="false"
+  >
+      <v-card class="messageBoxContent">
+          <v-card-text>
+              <p class="dialogHeader">Hex-Bin-Dec Converter</p>
+              <v-btn
+                  size="x-small"
+                  icon
+                  class="dialogClose"
+                  @click="
+                      SimulatorState.dialogBox.hex_bin_dec_converter_dialog = false
+                  "
+              >
+                  <v-icon>mdi-close</v-icon>
+              </v-btn>
+              <div
+              v-for="(value, index) in Object.entries(inputArr)"
+                  id="bitconverterprompt"
+                  :key="value[0]"
+                  title="Dec-Bin-Hex-Converter"
+              >
+                  <label>{{ value[1].label }}</label>
+                  <br />
+                  <input
+                      :id="value[0]"
+                      type="text"
+                      :value="value[1].val"
+                      :label="value[1].label"
+                      name="text1"
+                      @keyup="(payload) => converter(payload)"
+                  />
+                  <br /><br />
+              </div>
+          </v-card-text>
+          <v-card-actions>
+              <v-btn class="messageBtn" block @click="setBaseValues(0)">
+                  Reset
+              </v-btn>
+          </v-card-actions>
+      </v-card>
+  </v-dialog>
 </template>
 
 <script lang="ts" setup>
 import { useState } from '#/store/SimulatorStore/state'
 const SimulatorState = useState()
-import { setBaseValues } from '#/simulator/src/utils'
 import { onMounted, ref } from '@vue/runtime-core'
 
-const inputArr = ref([])
-inputArr.value = [
-    {
-        inputId: 'decimalInput',
+const inputArr = ref({
+    decimalInput: {
         val: '16',
         label: 'Decimal value',
     },
-    {
-        inputId: 'binaryInput',
+    binaryInput: {
         val: '0b10000',
         label: 'Binary value',
     },
-    {
-        inputId: 'bcdInput',
-        val: '10110',
-        label: 'Binary-coded decimal vlaue',
+    bcdInput: {
+        val: '00010110',
+        label: 'Binary-coded decimal value',
     },
-    {
-        inputId: 'octalInput',
+    octalInput: {
         val: '020',
         label: 'Octal value',
     },
-    {
-        inputId: 'hexInput',
+    hexInput: {
         val: '0x10',
         label: 'Hexadecimal value',
     },
-]
+})
 
 onMounted(() => {
     SimulatorState.dialogBox.hex_bin_dec_converter_dialog = false
 })
 
-function converter(feildChange) {
-    if (feildChange == 'decimalInput') decimalConvertor()
-    if (feildChange == 'binaryInput') binaryConvertor()
-    if (feildChange == 'bcdInput') bcdConvertor()
-    if (feildChange == 'octalInput') octalConvertor()
-    if (feildChange == 'hexInput') hexConvertor()
+function converter(e: KeyboardEvent) {
+    const target = <HTMLInputElement>e.target!
+    let value = target.value
+
+    // Regular expressions for validating input
+    const regexBinary = /[^01]/g
+    const regexOctal = /[^0-7]/g
+    const regexDecimal = /[^0-9]/g
+    const regexHex = /[^0-9A-Fa-f]/g
+
+    switch (target.id) {
+        case 'decimalInput':
+            value = value.replace(regexDecimal, '')
+            decimalConverter(value)
+            break
+        case 'binaryInput':
+            value = value.replace(regexBinary, '')
+            binaryConverter(value)
+            break
+        case 'bcdInput':
+            value = value.replace(regexBinary, '')
+            bcdConverter(value)
+            break
+        case 'octalInput':
+            value = value.replace(regexOctal, '')
+            octalConverter(value)
+            break
+        case 'hexInput':
+            value = value.replace(regexHex, '')
+            hexConverter(value)
+            break
+    }
+
+    // Update the input field with the cleaned value
+    target.value = value
+}
+
+function convertToBCD(value: number) {
+    let digits = value.toString().split('')
+    let bcdOfDigits = digits.map(function (digit) {
+        return parseInt(digit).toString(2).padStart(4, '0')
+    })
+    return bcdOfDigits.join('')
+}
+
+function setBaseValues(x: number) {
+    if (isNaN(x)) {
+        return
+    }
+    inputArr.value.binaryInput.val = '0b' + x.toString(2)
+    inputArr.value.bcdInput.val = convertToBCD(x)
+    inputArr.value.octalInput.val = '0' + x.toString(8)
+    inputArr.value.hexInput.val = '0x' + x.toString(16)
+    inputArr.value.decimalInput.val = x.toString(10)
 }
 
-function decimalConvertor() {
-    var x = parseInt($('#decimalInput').val(), 10)
+function decimalConverter(input: string) {
+    const x = parseInt(input, 10)
     setBaseValues(x)
 }
 
-function binaryConvertor() {
-    var inp = $('#binaryInput').val()
-    var x
-    if (inp.slice(0, 2) == '0b') x = parseInt(inp.slice(2), 2)
-    else x = parseInt(inp, 2)
+function binaryConverter(input: string) {
+    let x
+    if (input.slice(0, 2) == '0b') {
+        x = parseInt(input.slice(2), 2)
+    } else {
+        x = parseInt(input, 2)
+    }
     setBaseValues(x)
 }
 
-function bcdConvertor() {
-    var input = $('#bcdInput').val()
-    var num = 0
+function bcdConverter(input: string) {
+    let num = 0
     while (input.length % 4 !== 0) {
         input = '0' + input
     }
-    if (input !== 0) {
-        var i = 0
-        while (i < input.length / 4) {
-            if (parseInt(input.slice(4 * i, 4 * (i + 1)), 2) < 10)
-                num = num * 10 + parseInt(input.slice(4 * i, 4 * (i + 1)), 2)
-            else return setBaseValues(NaN)
-            i++
+    let i = 0
+    while (i < input.length / 4) {
+        if (parseInt(input.slice(4 * i, 4 * (i + 1)), 2) < 10) {
+            num = num * 10 + parseInt(input.slice(4 * i, 4 * (i + 1)), 2)
+        } else {
+            return setBaseValues(NaN)
         }
+        i++
     }
     return setBaseValues(num)
 }
 
-function octalConvertor() {
-    var x = parseInt($('#octalInput').val(), 8)
+function octalConverter(input: string) {
+    let x = parseInt(input, 8)
     setBaseValues(x)
 }
 
-function hexConvertor() {
-    var x = parseInt($('#hexInput').val(), 16)
+function hexConverter(input: string) {
+    let x = parseInt(input, 16)
     setBaseValues(x)
 }
 </script>
-
-<style scoped></style>
diff --git a/src/components/Panels/ElementsPanel/ElementsPanel.vue b/src/components/Panels/ElementsPanel/ElementsPanel.vue
@@ -35,6 +35,7 @@
                     :title="element.label"
                     class="icon logixModules"
                     @click="createElement(element.name)"
+                    @mousedown="createElement(element.name)"
                     @mouseover="getTooltipText(element.name)"
                     @mouseleave="tooltipText = 'null'"
                 >
@@ -74,6 +75,7 @@
                                 :title="element.label"
                                 class="icon logixModules"
                                 @click="createElement(element.name)"
+                                @mousedown="createElement(element.name)"
                                 @mouseover="getTooltipText(element.name)"
                                 @mouseleave="tooltipText = 'null'"
                             >