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

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

@ -8,7 +8,6 @@ import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton
import { getPageTitle } from '../config'
import BaseButton from '../components/BaseButton'
import BaseButtons from '../components/BaseButtons'
import FormField from '../components/FormField'
const CalculatorPage = () => {
const [val1, setVal1] = useState('')
@ -22,6 +21,7 @@ const CalculatorPage = () => {
const baseMap = { hex: 16, dec: 10, oct: 8, bin: 2 }
const calculate = (v1: string, v2: string, op: string) => {
if (!v1 || !v2) return ''
const num1 = parseInt(v1, baseMap[base])
const num2 = parseInt(v2, baseMap[base])
let res: number
@ -33,7 +33,7 @@ const CalculatorPage = () => {
case 'AND': res = num1 & num2; break
case 'OR': res = num1 | num2; break
case 'XOR': res = num1 ^ num2; break
default: res = num1
default: res = 0
}
return res.toString(baseMap[base]).toUpperCase()
}
@ -48,14 +48,15 @@ const CalculatorPage = () => {
setActiveInput('val2')
}
} catch (e) {
console.error(e)
alert('Error: Invalid calculation')
}
}
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'
? ['7', '8', '9', '4', '5', '6', '1', '2', '3', '0']
? ['9', '8', '7', '6', '5', '4', '3', '2', '1', '0']
: base === 'oct'
? ['7', '6', '5', '4', '3', '2', '1', '0']
: ['1', '0']
@ -75,14 +76,15 @@ const CalculatorPage = () => {
{''}
</SectionTitleLineWithButton>
<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 => (
<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 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>
<div className="text-xl">{val1 || '...'}</div>
</div>
@ -93,7 +95,7 @@ const CalculatorPage = () => {
<option value="AND">AND</option><option value="OR">OR</option><option value="XOR">XOR</option>
</select>
</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>
<div className="text-xl">{val2 || '...'}</div>
</div>
@ -106,7 +108,7 @@ const CalculatorPage = () => {
</div>
<BaseButtons>
<BaseButton color="info" label="Calculate" onClick={handleCalculate} />
<BaseButton color="info" label="Calculate (=)" onClick={handleCalculate} />
</BaseButtons>
</CardBox>
@ -122,4 +124,4 @@ const CalculatorPage = () => {
CalculatorPage.getLayout = (page: ReactElement) => <LayoutAuthenticated>{page}</LayoutAuthenticated>
export default CalculatorPage
export default CalculatorPage