- Updated the AdminReferenceValueTypesPage to enhance text alignment and styling for form fields.
- Refactored ProfileReferenceValuesPage to apply consistent styling for form elements and improve layout. - Adjusted button styles for better visual consistency across the forms.
This commit is contained in:
parent
ab616ba044
commit
f04318f76a
|
|
@ -149,7 +149,7 @@ export default function AdminReferenceValueTypesPage() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<div className="page" style={{ textAlign: 'left' }}>
|
||||
<div className="page-header" style={{ marginBottom: 16 }}>
|
||||
<h1 style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 22, margin: 0 }}>
|
||||
<Gauge size={26} color="var(--accent)" />
|
||||
|
|
@ -199,9 +199,9 @@ export default function AdminReferenceValueTypesPage() {
|
|||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
<div>
|
||||
<label className="form-label" htmlFor="ref-admin-key">
|
||||
<div>
|
||||
<div className="settings-page__field">
|
||||
<label className="settings-page__field-label" htmlFor="ref-admin-key">
|
||||
Technischer Schlüssel (key)
|
||||
</label>
|
||||
<input
|
||||
|
|
@ -213,12 +213,12 @@ export default function AdminReferenceValueTypesPage() {
|
|||
placeholder="z. B. max_heart_rate"
|
||||
autoComplete="off"
|
||||
/>
|
||||
<p style={{ fontSize: 12, color: 'var(--text3)', margin: '6px 0 0' }}>
|
||||
<p style={{ fontSize: 12, color: 'var(--text3)', margin: '4px 0 0', textAlign: 'left' }}>
|
||||
Kleinbuchstaben, Ziffern, Unterstriche; nach Anlage nicht änderbar.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label" htmlFor="ref-admin-label">
|
||||
<div className="settings-page__field">
|
||||
<label className="settings-page__field-label" htmlFor="ref-admin-label">
|
||||
Anzeigename
|
||||
</label>
|
||||
<input
|
||||
|
|
@ -229,8 +229,8 @@ export default function AdminReferenceValueTypesPage() {
|
|||
placeholder="z. B. Maximale Herzfrequenz"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label" htmlFor="ref-admin-desc">
|
||||
<div className="settings-page__field">
|
||||
<label className="settings-page__field-label" htmlFor="ref-admin-desc">
|
||||
Beschreibung
|
||||
</label>
|
||||
<textarea
|
||||
|
|
@ -242,44 +242,56 @@ export default function AdminReferenceValueTypesPage() {
|
|||
placeholder="Kurze Erklärung für Nutzer und Admins"
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
|
||||
<div style={{ flex: '1 1 160px' }}>
|
||||
<label className="form-label" htmlFor="ref-admin-unit">
|
||||
Standard-Einheit
|
||||
</label>
|
||||
<input
|
||||
id="ref-admin-unit"
|
||||
className="form-input"
|
||||
value={form.default_unit}
|
||||
onChange={(e) => setForm((f) => ({ ...f, default_unit: e.target.value }))}
|
||||
placeholder="bpm, Stufe, …"
|
||||
/>
|
||||
</div>
|
||||
<div style={{ flex: '0 0 120px' }}>
|
||||
<label className="form-label" htmlFor="ref-admin-sort">
|
||||
Sortierung
|
||||
</label>
|
||||
<input
|
||||
id="ref-admin-sort"
|
||||
type="number"
|
||||
className="form-input"
|
||||
value={form.sort_order}
|
||||
onChange={(e) => setForm((f) => ({ ...f, sort_order: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ flex: '0 0 140px', alignSelf: 'flex-end', paddingBottom: 4 }}>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 14 }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.active}
|
||||
onChange={(e) => setForm((f) => ({ ...f, active: e.target.checked }))}
|
||||
/>
|
||||
Aktiv (nutzer sichtbar)
|
||||
</label>
|
||||
</div>
|
||||
<div className="settings-page__field">
|
||||
<label className="settings-page__field-label" htmlFor="ref-admin-unit">
|
||||
Standard-Einheit
|
||||
</label>
|
||||
<input
|
||||
id="ref-admin-unit"
|
||||
className="form-input"
|
||||
value={form.default_unit}
|
||||
onChange={(e) => setForm((f) => ({ ...f, default_unit: e.target.value }))}
|
||||
placeholder="bpm, Stufe, …"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label" htmlFor="ref-admin-meta">
|
||||
<div className="settings-page__field">
|
||||
<label className="settings-page__field-label" htmlFor="ref-admin-sort">
|
||||
Sortierung
|
||||
</label>
|
||||
<input
|
||||
id="ref-admin-sort"
|
||||
type="number"
|
||||
className="form-input"
|
||||
value={form.sort_order}
|
||||
onChange={(e) => setForm((f) => ({ ...f, sort_order: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-page__field">
|
||||
<span className="settings-page__field-label">Sichtbarkeit</span>
|
||||
<label
|
||||
htmlFor="ref-admin-active"
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
justifyContent: 'flex-start',
|
||||
cursor: 'pointer',
|
||||
fontSize: 14,
|
||||
color: 'var(--text1)',
|
||||
textAlign: 'left',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id="ref-admin-active"
|
||||
type="checkbox"
|
||||
checked={form.active}
|
||||
onChange={(e) => setForm((f) => ({ ...f, active: e.target.checked }))}
|
||||
/>
|
||||
Aktiv (für Nutzer sichtbar)
|
||||
</label>
|
||||
</div>
|
||||
<div className="settings-page__field" style={{ borderBottom: 'none' }}>
|
||||
<label className="settings-page__field-label" htmlFor="ref-admin-meta">
|
||||
Metadaten (JSON-Objekt)
|
||||
</label>
|
||||
<textarea
|
||||
|
|
@ -288,16 +300,16 @@ export default function AdminReferenceValueTypesPage() {
|
|||
rows={5}
|
||||
value={form.metadata_json}
|
||||
onChange={(e) => setForm((f) => ({ ...f, metadata_json: e.target.value }))}
|
||||
placeholder='{}'
|
||||
placeholder="{}"
|
||||
spellCheck={false}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<button type="button" className="btn btn-primary" onClick={handleSave}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 8 }}>
|
||||
<button type="button" className="btn btn-primary btn-full" onClick={handleSave}>
|
||||
<Save size={16} style={{ marginRight: 6 }} />
|
||||
Speichern
|
||||
</button>
|
||||
<button type="button" className="btn btn-secondary" onClick={closeForm}>
|
||||
<button type="button" className="btn btn-secondary btn-full" onClick={closeForm}>
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -174,7 +174,7 @@ export default function ProfileReferenceValuesPage() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div style={{ paddingBottom: 88 }}>
|
||||
<div style={{ paddingBottom: 88, textAlign: 'left' }}>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<Link
|
||||
to="/settings"
|
||||
|
|
@ -216,24 +216,26 @@ export default function ProfileReferenceValuesPage() {
|
|||
<>
|
||||
<div className="card section-gap">
|
||||
<div className="card-title">Referenztyp</div>
|
||||
<label className="form-label" htmlFor="ref-type-select">
|
||||
Wähle einen Kennwert
|
||||
</label>
|
||||
<select
|
||||
id="ref-type-select"
|
||||
className="form-input"
|
||||
value={selectedKey}
|
||||
onChange={(e) => {
|
||||
setSelectedKey(e.target.value)
|
||||
setEditingId(null)
|
||||
}}
|
||||
>
|
||||
{types.map((t) => (
|
||||
<option key={t.key} value={t.key}>
|
||||
{t.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="settings-page__field" style={{ borderBottom: 'none', paddingTop: 0 }}>
|
||||
<label className="settings-page__field-label" htmlFor="ref-type-select">
|
||||
Wähle einen Kennwert
|
||||
</label>
|
||||
<select
|
||||
id="ref-type-select"
|
||||
className="form-input"
|
||||
value={selectedKey}
|
||||
onChange={(e) => {
|
||||
setSelectedKey(e.target.value)
|
||||
setEditingId(null)
|
||||
}}
|
||||
>
|
||||
{types.map((t) => (
|
||||
<option key={t.key} value={t.key}>
|
||||
{t.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{selectedType?.description && (
|
||||
<p style={{ fontSize: 13, color: 'var(--text2)', marginTop: 10, lineHeight: 1.5 }}>
|
||||
{selectedType.description}
|
||||
|
|
@ -247,66 +249,64 @@ export default function ProfileReferenceValuesPage() {
|
|||
{editingId ? 'Eintrag bearbeiten' : 'Neuer Eintrag'}
|
||||
</div>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="form-row" style={{ flexDirection: 'column', gap: 12 }}>
|
||||
<div>
|
||||
<label className="form-label" htmlFor="ref-date">
|
||||
Datum
|
||||
</label>
|
||||
<input
|
||||
id="ref-date"
|
||||
type="date"
|
||||
className="form-input"
|
||||
required
|
||||
value={form.effective_date}
|
||||
onChange={(e) => setForm((f) => ({ ...f, effective_date: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label" htmlFor="ref-value">
|
||||
Wert
|
||||
</label>
|
||||
<input
|
||||
id="ref-value"
|
||||
type="text"
|
||||
className="form-input"
|
||||
placeholder="Zahl oder Text (z. B. 178 oder mittel)"
|
||||
value={form.value}
|
||||
onChange={(e) => setForm((f) => ({ ...f, value: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label" htmlFor="ref-unit">
|
||||
Einheit
|
||||
</label>
|
||||
<input
|
||||
id="ref-unit"
|
||||
type="text"
|
||||
className="form-input"
|
||||
placeholder={selectedType?.default_unit || 'z. B. bpm'}
|
||||
value={form.unit}
|
||||
onChange={(e) => setForm((f) => ({ ...f, unit: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label" htmlFor="ref-notes">
|
||||
Notiz (optional)
|
||||
</label>
|
||||
<textarea
|
||||
id="ref-notes"
|
||||
className="form-input"
|
||||
rows={2}
|
||||
value={form.notes}
|
||||
onChange={(e) => setForm((f) => ({ ...f, notes: e.target.value }))}
|
||||
placeholder="Kontext, Messmethode …"
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-page__field">
|
||||
<label className="settings-page__field-label" htmlFor="ref-date">
|
||||
Datum
|
||||
</label>
|
||||
<input
|
||||
id="ref-date"
|
||||
type="date"
|
||||
className="form-input"
|
||||
required
|
||||
value={form.effective_date}
|
||||
onChange={(e) => setForm((f) => ({ ...f, effective_date: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 8, marginTop: 14, flexWrap: 'wrap' }}>
|
||||
<button type="submit" className="btn btn-primary" style={{ flex: 1, minWidth: 120 }}>
|
||||
<div className="settings-page__field">
|
||||
<label className="settings-page__field-label" htmlFor="ref-value">
|
||||
Wert
|
||||
</label>
|
||||
<input
|
||||
id="ref-value"
|
||||
type="text"
|
||||
className="form-input"
|
||||
placeholder="Zahl oder Text (z. B. 178 oder mittel)"
|
||||
value={form.value}
|
||||
onChange={(e) => setForm((f) => ({ ...f, value: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-page__field">
|
||||
<label className="settings-page__field-label" htmlFor="ref-unit">
|
||||
Einheit
|
||||
</label>
|
||||
<input
|
||||
id="ref-unit"
|
||||
type="text"
|
||||
className="form-input"
|
||||
placeholder={selectedType?.default_unit || 'z. B. bpm'}
|
||||
value={form.unit}
|
||||
onChange={(e) => setForm((f) => ({ ...f, unit: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-page__field" style={{ borderBottom: 'none' }}>
|
||||
<label className="settings-page__field-label" htmlFor="ref-notes">
|
||||
Notiz (optional)
|
||||
</label>
|
||||
<textarea
|
||||
id="ref-notes"
|
||||
className="form-input"
|
||||
rows={3}
|
||||
value={form.notes}
|
||||
onChange={(e) => setForm((f) => ({ ...f, notes: e.target.value }))}
|
||||
placeholder="Kontext, Messmethode …"
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 8 }}>
|
||||
<button type="submit" className="btn btn-primary btn-full">
|
||||
{editingId ? 'Speichern' : 'Hinzufügen'}
|
||||
</button>
|
||||
{editingId && (
|
||||
<button type="button" className="btn btn-secondary" onClick={resetForm}>
|
||||
<button type="button" className="btn btn-secondary btn-full" onClick={resetForm}>
|
||||
Abbrechen
|
||||
</button>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user