admin/39021-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

9

Browse Source
This commit is contained in:
Flatlogic Bot 2026-03-06 00:25:48 +00:00
parent f70acc8a33
commit 9e1e9c23fb
1 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/pages/calculator.tsx
View File

@ -8,7 +8,6 @@ import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton
import { getPageTitle } from '../config' import { getPageTitle } from '../config'
import BaseButton from '../components/BaseButton' import BaseButton from '../components/BaseButton'
import BaseButtons from '../components/BaseButtons' import BaseButtons from '../components/BaseButtons'
import FormField from '../components/FormField'
const CalculatorPage = () => { const CalculatorPage = () => {
const [val1, setVal1] = useState('') const [val1, setVal1] = useState('')
@ -22,6 +21,7 @@ const CalculatorPage = () => {
const baseMap = { hex: 16, dec: 10, oct: 8, bin: 2 } const baseMap = { hex: 16, dec: 10, oct: 8, bin: 2 }
const calculate = (v1: string, v2: string, op: string) => { const calculate = (v1: string, v2: string, op: string) => {
if (!v1 || !v2) return ''
const num1 = parseInt(v1, baseMap[base]) const num1 = parseInt(v1, baseMap[base])
const num2 = parseInt(v2, baseMap[base]) const num2 = parseInt(v2, baseMap[base])
let res: number let res: number
@ -33,7 +33,7 @@ const CalculatorPage = () => {
case 'AND': res = num1 & num2; break case 'AND': res = num1 & num2; break
case 'OR': res = num1 | num2; break case 'OR': res = num1 | num2; break
case 'XOR': res = num1 ^ num2; break case 'XOR': res = num1 ^ num2; break
default: res = num1 default: res = 0
} }
return res.toString(baseMap[base]).toUpperCase() return res.toString(baseMap[base]).toUpperCase()
} }
@ -48,14 +48,15 @@ const CalculatorPage = () => {
setActiveInput('val2') setActiveInput('val2')
} }
} catch (e) { } catch (e) {
console.error(e)
alert('Error: Invalid calculation') alert('Error: Invalid calculation')
} }
} }
const keys = base === 'hex' const keys = base === 'hex'
? ['7', '8', '9', 'A', '4', '5', '6', 'B', '1', '2', '3', 'C', '0', 'D', 'E', 'F'] ? ['F', 'E', 'D', 'C', 'B', 'A', '9', '8', '7', '6', '5', '4', '3', '2', '1', '0']
: base === 'dec' : base === 'dec'
? ['7', '8', '9', '4', '5', '6', '1', '2', '3', '0'] ? ['9', '8', '7', '6', '5', '4', '3', '2', '1', '0']
: base === 'oct' : base === 'oct'
? ['7', '6', '5', '4', '3', '2', '1', '0'] ? ['7', '6', '5', '4', '3', '2', '1', '0']
: ['1', '0'] : ['1', '0']
@ -75,14 +76,15 @@ const CalculatorPage = () => {
{''} {''}
</SectionTitleLineWithButton> </SectionTitleLineWithButton>
<CardBox className="mb-6"> <CardBox className="mb-6">
<div className="flex gap-2 mb-4"> <div className="flex flex-wrap gap-2 mb-4">
{(['hex', 'dec', 'oct', 'bin'] as const).map(b => ( {(['hex', 'dec', 'oct', 'bin'] as const).map(b => (
<BaseButton key={b} color={base === b ? 'info' : 'light'} label={b.toUpperCase()} onClick={() => { setBase(b); setVal1(''); setVal2(''); setResult(null); }} /> <BaseButton key={b} color={base === b ? 'info' : 'light'} label={b.toUpperCase()} onClick={() => { setBase(b); setVal1(''); setVal2(''); setResult(null); }} />
))} ))}
<BaseButton color={isSequential ? 'success' : 'light'} label="Sequential Mode" onClick={() => setIsSequential(!isSequential)} /> <BaseButton color={isSequential ? 'success' : 'light'} label={isSequential ? "Sequential: ON" : "Sequential: OFF"} onClick={() => setIsSequential(!isSequential)} />
<BaseButton color="warning" label="CLR ALL" onClick={() => { setVal1(''); setVal2(''); setResult(null); }} />
</div> </div>
<div className="flex gap-4 mb-4"> <div className="flex gap-4 mb-4">
<div className="flex-1 cursor-pointer p-2 border-2 rounded" onClick={() => setActiveInput('val1')} style={{ borderColor: activeInput === 'val1' ? '#53F6C7' : '#ccc' }}> <div className={`flex-1 cursor-pointer p-2 border-2 rounded ${activeInput === 'val1' ? 'border-info-500 bg-info-50' : 'border-gray-300'}`} onClick={() => setActiveInput('val1')}>
<label className="text-xs">Value 1</label> <label className="text-xs">Value 1</label>
<div className="text-xl">{val1 || '...'}</div> <div className="text-xl">{val1 || '...'}</div>
</div> </div>
@ -93,7 +95,7 @@ const CalculatorPage = () => {
<option value="AND">AND</option><option value="OR">OR</option><option value="XOR">XOR</option> <option value="AND">AND</option><option value="OR">OR</option><option value="XOR">XOR</option>
</select> </select>
</div> </div>
<div className="flex-1 cursor-pointer p-2 border-2 rounded" onClick={() => setActiveInput('val2')} style={{ borderColor: activeInput === 'val2' ? '#53F6C7' : '#ccc' }}> <div className={`flex-1 cursor-pointer p-2 border-2 rounded ${activeInput === 'val2' ? 'border-info-500 bg-info-50' : 'border-gray-300'}`} onClick={() => setActiveInput('val2')}>
<label className="text-xs">Value 2</label> <label className="text-xs">Value 2</label>
<div className="text-xl">{val2 || '...'}</div> <div className="text-xl">{val2 || '...'}</div>
</div> </div>
@ -106,7 +108,7 @@ const CalculatorPage = () => {
</div> </div>
<BaseButtons> <BaseButtons>
<BaseButton color="info" label="Calculate" onClick={handleCalculate} /> <BaseButton color="info" label="Calculate (=)" onClick={handleCalculate} />
</BaseButtons> </BaseButtons>
</CardBox> </CardBox>