Lars/mitai-jinkendo
1
0
Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat: add toggle buttons for boolean features in matrix editor
All checks were successful
Deploy Development / deploy (push) Successful in 55s
Details
Build Test / lint-backend (push) Successful in 0s
Details
Build Test / build-frontend (push) Successful in 13s
Details

Browse Source 
- Boolean features now show as visual toggle buttons (AN/AUS)
- Desktop: compact toggle (✓ AN / ✗ AUS)
- Mobile: full-width toggle (✓ Aktiviert / ✗ Deaktiviert)
- Prevents invalid values for boolean features
- Green when enabled, gray when disabled

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lars 2026-03-20 06:28:31 +01:00
parent 8bb5d85c16
commit 7d6d9dabf2
1 changed files with 58 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
frontend/src/pages/AdminTierLimitsPage.jsx
View File

@ -331,6 +331,36 @@ export default function AdminTierLimitsPage() {
const currentValue = getCurrentValue(tier.id, feature.id)
const isChanged = `${tier.id}:${feature.id}` in changes && changes[`${tier.id}:${feature.id}`].value !== ''
// Boolean features: Toggle button
if (feature.limit_type === 'boolean') {
const isEnabled = currentValue !== 0 && currentValue !== '0'
return (
<td key={`${tier.id}-${feature.id}`} style={{
textAlign: 'center', padding: 8,
background: isChanged ? 'var(--accent-light)' : 'transparent'
}}>
<button
onClick={() => handleChange(tier.id, feature.id, isEnabled ? '0' : '1')}
style={{
padding: '6px 16px',
border: `2px solid ${isEnabled ? 'var(--accent)' : 'var(--border)'}`,
borderRadius: 20,
background: isEnabled ? 'var(--accent)' : 'var(--surface)',
color: isEnabled ? 'white' : 'var(--text3)',
fontSize: 12,
fontWeight: 600,
cursor: 'pointer',
transition: 'all 0.2s',
minWidth: 70
}}
>
{isEnabled ? '✓ AN' : '✗ AUS'}
</button>
</td>
)
}
// Count features: Text input
return (
<td key={`${tier.id}-${feature.id}`} style={{
textAlign: 'center', padding: 8,
@ -411,6 +441,34 @@ function FeatureMobileCard({ feature, tiers, getCurrentValue, handleChange, chan
const currentValue = getCurrentValue(tier.id, feature.id)
const isChanged = `${tier.id}:${feature.id}` in changes && changes[`${tier.id}:${feature.id}`].value !== ''
// Boolean features: Toggle button
if (feature.limit_type === 'boolean') {
const isEnabled = currentValue !== 0 && currentValue !== '0'
return (
<div key={tier.id} className="form-row" style={{ marginBottom: 8, alignItems: 'center' }}>
<label className="form-label" style={{ fontSize: 12 }}>{tier.name}</label>
<button
onClick={() => handleChange(tier.id, feature.id, isEnabled ? '0' : '1')}
style={{
flex: 1,
padding: '8px 16px',
border: `2px solid ${isEnabled ? 'var(--accent)' : 'var(--border)'}`,
borderRadius: 20,
background: isEnabled ? 'var(--accent)' : 'var(--surface)',
color: isEnabled ? 'white' : 'var(--text3)',
fontSize: 13,
fontWeight: 600,
cursor: 'pointer',
transition: 'all 0.2s'
}}
>
{isEnabled ? '✓ Aktiviert' : '✗ Deaktiviert'}
</button>
</div>
)
}
// Count features: Text input
return (
<div key={tier.id} className="form-row" style={{ marginBottom: 8 }}>
<label className="form-label" style={{ fontSize: 12 }}>{tier.name}</label>