Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
9e1e9c23fb | ||
|
|
f70acc8a33 | ||
|
|
0ba706f6b9 | ||
|
|
537c499699 | ||
|
|
606636bded |
@ -48,6 +48,11 @@ const menuAside: MenuAsideItem[] = [
|
|||||||
icon: 'mdiCalculator' in icon ? icon['mdiCalculator' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
|
icon: 'mdiCalculator' in icon ? icon['mdiCalculator' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
|
||||||
permissions: 'READ_CALCULATIONS'
|
permissions: 'READ_CALCULATIONS'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
href: '/calculator',
|
||||||
|
label: 'Calculator',
|
||||||
|
icon: icon.mdiCalculator,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
href: '/ai_requests/ai_requests-list',
|
href: '/ai_requests/ai_requests-list',
|
||||||
label: 'Ai requests',
|
label: 'Ai requests',
|
||||||
|
|||||||
127
frontend/src/pages/calculator.tsx
Normal file
127
frontend/src/pages/calculator.tsx
Normal file
@ -0,0 +1,127 @@
|
|||||||
|
import { mdiCalculator } from '@mdi/js'
|
||||||
|
import Head from 'next/head'
|
||||||
|
import React, { useState, ReactElement } from 'react'
|
||||||
|
import CardBox from '../components/CardBox'
|
||||||
|
import LayoutAuthenticated from '../layouts/Authenticated'
|
||||||
|
import SectionMain from '../components/SectionMain'
|
||||||
|
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton'
|
||||||
|
import { getPageTitle } from '../config'
|
||||||
|
import BaseButton from '../components/BaseButton'
|
||||||
|
import BaseButtons from '../components/BaseButtons'
|
||||||
|
|
||||||
|
const CalculatorPage = () => {
|
||||||
|
const [val1, setVal1] = useState('')
|
||||||
|
const [val2, setVal2] = useState('')
|
||||||
|
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 [isSequential, setIsSequential] = useState(false)
|
||||||
|
|
||||||
|
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
|
||||||
|
switch(op) {
|
||||||
|
case '+': res = num1 + num2; break
|
||||||
|
case '-': res = num1 - num2; break
|
||||||
|
case '*': res = num1 * num2; break
|
||||||
|
case '/': res = num1 / num2; break
|
||||||
|
case 'AND': res = num1 & num2; break
|
||||||
|
case 'OR': res = num1 | num2; break
|
||||||
|
case 'XOR': res = num1 ^ num2; break
|
||||||
|
default: res = 0
|
||||||
|
}
|
||||||
|
return res.toString(baseMap[base]).toUpperCase()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCalculate = () => {
|
||||||
|
try {
|
||||||
|
const res = calculate(val1, val2, operation)
|
||||||
|
setResult(res)
|
||||||
|
if (isSequential) {
|
||||||
|
setVal1(res)
|
||||||
|
setVal2('')
|
||||||
|
setActiveInput('val2')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e)
|
||||||
|
alert('Error: Invalid calculation')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const keys = base === 'hex'
|
||||||
|
? ['F', 'E', 'D', 'C', 'B', 'A', '9', '8', '7', '6', '5', '4', '3', '2', '1', '0']
|
||||||
|
: base === 'dec'
|
||||||
|
? ['9', '8', '7', '6', '5', '4', '3', '2', '1', '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>
|
||||||
|
<title>{getPageTitle('Calculator')}</title>
|
||||||
|
</Head>
|
||||||
|
<SectionMain>
|
||||||
|
<SectionTitleLineWithButton icon={mdiCalculator} title="Hex Calculator" main>
|
||||||
|
{''}
|
||||||
|
</SectionTitleLineWithButton>
|
||||||
|
<CardBox className="mb-6">
|
||||||
|
<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={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 ${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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</CardBox>
|
||||||
|
|
||||||
|
{result !== null && (
|
||||||
|
<CardBox>
|
||||||
|
<div className="text-xl font-bold">Result: {result}</div>
|
||||||
|
</CardBox>
|
||||||
|
)}
|
||||||
|
</SectionMain>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
CalculatorPage.getLayout = (page: ReactElement) => <LayoutAuthenticated>{page}</LayoutAuthenticated>
|
||||||
|
|
||||||
|
export default CalculatorPage
|
||||||
Loading…
x
Reference in New Issue
Block a user