Skip to content
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

Removing jQuery from and cleaning up HexBinDec.vue #245

Merged
merged 7 commits into from
Jan 5, 2024
Merged

Removing jQuery from and cleaning up HexBinDec.vue #245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d389ba0
Removing jQuery from and cleaning up HexBinDec.vue
JoshVarga Jan 3, 2024
f1301dd
Merge branch 'main' into upstream
Arnabdaz Jan 3, 2024
6248996
Update HexBinDec.vue per review
JoshVarga Jan 3, 2024
a716eac
Format HexBinDec.vue with Prettier
JoshVarga Jan 3, 2024
04cded9
Update src/components/DialogBox/HexBinDec.vue
JoshVarga Jan 5, 2024
e1d244e
Updates per review
JoshVarga Jan 5, 2024
81571f2
Merge branch 'main' into upstream
Arnabdaz Jan 5, 2024
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
189 changes: 136 additions & 53 deletions src/components/DialogBox/HexBinDec.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand All @@ -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>
69 changes: 2 additions & 67 deletions src/simulator/src/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,20 +216,8 @@ export function truncateString(str, num) {
}

export function bitConverterDialog() {
console.log('Open dialog box')
const simulatorStore = SimulatorStore()
simulatorStore.dialogBox.hex_bin_dec_converter_dialog = true
console.log(simulatorStore.dialogBox.hex_bin_dec_converter_dialog)
// $('#bitconverterprompt').dialog({
// buttons: [
// {
// text: 'Reset',
// click: function () {
// setBaseValues(0)
// },
// },
// ],
// })
const simulatorStore = SimulatorStore();
simulatorStore.dialogBox.hex_bin_dec_converter_dialog = true;
}

export function getImageDimensions(file) {
Expand All @@ -250,15 +238,6 @@ export var convertors = {
dec2bcd: (x) => parseInt(x.toString(10), 16).toString(2),
}

export function setBaseValues(x) {
if (isNaN(x)) return
$('#binaryInput').val(convertors.dec2bin(x))
$('#bcdInput').val(convertors.dec2bcd(x))
$('#octalInput').val(convertors.dec2octal(x))
$('#hexInput').val(convertors.dec2hex(x))
$('#decimalInput').val(x)
}

export function parseNumber(num) {
if (num instanceof Number) return num
if (num.slice(0, 2).toLocaleLowerCase() == '0b')
Expand All @@ -269,50 +248,6 @@ export function parseNumber(num) {
return parseInt(num)
}

export function setupBitConvertor() {
console.log('check bit convertor')
$('#decimalInput').on('keyup', function () {
JoshVarga marked this conversation as resolved.
Show resolved Hide resolved
var x = parseInt($('#decimalInput').val(), 10)
setBaseValues(x)
})

$('#binaryInput').on('keyup', function () {
var inp = $('#binaryInput').val()
var x
if (inp.slice(0, 2) == '0b') x = parseInt(inp.slice(2), 2)
else x = parseInt(inp, 2)
setBaseValues(x)
})
$('#bcdInput').on('keyup', function () {
var input = $('#bcdInput').val()
var 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++
}
}
return setBaseValues(x)
})

$('#hexInput').on('keyup', function () {
var x = parseInt($('#hexInput').val(), 16)
setBaseValues(x)
})

$('#octalInput').on('keyup', function () {
var x = parseInt($('#octalInput').val(), 8)
setBaseValues(x)
})
}

export function promptFile(contentType, multiple) {
var input = document.createElement('input')
input.type = 'file'
Expand Down
Loading
Loading