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

7

Browse Source
This commit is contained in:
Flatlogic Bot 2026-03-06 00:08:18 +00:00
parent 537c499699
commit 0ba706f6b9
1 changed files with 39 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,14 +16,14 @@ const CalculatorPage = () => {
const [base, setBase] = useState<'hex' | 'dec' | 'oct' | 'bin'>('dec')
const [operation, setOperation] = useState<'+' | '-' | '*' | '/' | 'AND' | 'OR' | 'XOR'>('+')
const [result, setResult] = useState<string | null>(null)
const [activeInput, setActiveInput] = useState<'val1' | 'val2'>('val1')
const parseInput = (val: string, base: number) => parseInt(val, base)
const baseMap = { hex: 16, dec: 10, oct: 8, bin: 2 }
const handleCalculate = () => {
try {
const baseMap = { hex: 16, dec: 10, oct: 8, bin: 2 }
const v1 = parseInput(val1, baseMap[base])
const v2 = parseInput(val2, baseMap[base])
const v1 = parseInt(val1, baseMap[base])
const v2 = parseInt(val2, baseMap[base])
if (isNaN(v1) || (val2 && isNaN(v2))) throw new Error('Invalid input')
@ -41,10 +41,23 @@ const CalculatorPage = () => {
setResult(res.toString(baseMap[base]).toUpperCase())
} catch (e) {
alert('Error: Invalid operation')
alert('Error: Invalid calculation')
}
}
const keys = base === 'hex'
? ['7', '8', '9', 'A', '4', '5', '6', 'B', '1', '2', '3', 'C', '0', 'D', 'E', 'F']
: base === 'dec'
? ['7', '8', '9', '4', '5', '6', '1', '2', '3', '0']
: base === 'oct'
? ['7', '6', '5', '4', '3', '2', '1', '0']
: ['1', '0']
const handleKeyClick = (key: string) => {
if (activeInput === 'val1') setVal1(val1 + key)
else setVal2(val2 + key)
}
return (
<>
<Head>
@ -57,19 +70,33 @@ const CalculatorPage = () => {
<CardBox className="mb-6">
<div className="flex gap-2 mb-4">
{(['hex', 'dec', 'oct', 'bin'] as const).map(b => (
<BaseButton key={b} color={base === b ? 'info' : 'light'} label={b.toUpperCase()} onClick={() => setBase(b)} />
<BaseButton key={b} color={base === b ? 'info' : 'light'} label={b.toUpperCase()} onClick={() => { setBase(b); setVal1(''); setVal2(''); setResult(null); }} />
))}
</div>
<div className="flex gap-4">
<FormField label="Value 1" className="flex-1"><input value={val1} onChange={(e) => setVal1(e.target.value)} className="w-full p-2 border rounded" /></FormField>
<FormField label="Operation" className="w-24">
<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' }}>
<label className="text-xs">Value 1</label>
<div className="text-xl">{val1 || '...'}</div>
</div>
<div className="w-24">
<label className="text-xs">Op</label>
<select value={operation} onChange={(e) => setOperation(e.target.value as any)} className="w-full p-2 border rounded">
<option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option>
<option value="AND">AND</option><option value="OR">OR</option><option value="XOR">XOR</option>
</select>
</FormField>
<FormField label="Value 2" className="flex-1"><input value={val2} onChange={(e) => setVal2(e.target.value)} className="w-full p-2 border rounded" /></FormField>
</div>
<div className="flex-1 cursor-pointer p-2 border-2 rounded" onClick={() => setActiveInput('val2')} style={{ borderColor: activeInput === 'val2' ? '#53F6C7' : '#ccc' }}>
<label className="text-xs">Value 2</label>
<div className="text-xl">{val2 || '...'}</div>
</div>
</div>
<div className="grid grid-cols-4 gap-2 mb-4">
{keys.map(k => <BaseButton key={k} label={k} onClick={() => handleKeyClick(k)} />)}
<BaseButton label="DEL" color="danger" onClick={() => activeInput === 'val1' ? setVal1(val1.slice(0, -1)) : setVal2(val2.slice(0, -1))} />
<BaseButton label="CLR" color="warning" onClick={() => activeInput === 'val1' ? setVal1('') : setVal2('')} />
</div>
<BaseButtons>
<BaseButton color="info" label="Calculate" onClick={handleCalculate} />
</BaseButtons>
@ -87,4 +114,4 @@ const CalculatorPage = () => {
CalculatorPage.getLayout = (page: ReactElement) => <LayoutAuthenticated>{page}</LayoutAuthenticated>
export default CalculatorPage
export default CalculatorPage