bonamin/bellsystems-cp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: Major Overhaul to all subsystems

Browse Source
This commit is contained in:
Vasileios Kousaridas
2026-03-07 11:32:18 +02:00
parent 810e81b323
commit c62188fda6
107 changed files with 20414 additions and 929 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
frontend/src/devices/DeviceForm.jsx
View File

@@ -250,16 +250,13 @@ export default function DeviceForm() {
{/* ===== Left Column ===== */}
<div className="space-y-6">
{/* --- Basic Info --- */}
<section
className="rounded-lg border p-6"
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
>
<h2 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>
Basic Information
</h2>
<section className="ui-section-card">
<div className="ui-section-card__title-row">
<h2 className="ui-section-card__header-title">Basic Information</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="md:col-span-2">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Device Name *
</label>
<input
@@ -271,7 +268,7 @@ export default function DeviceForm() {
/>
</div>
<div className="md:col-span-2">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Location
</label>
<input
@@ -283,7 +280,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Location Coordinates
</label>
<input
@@ -295,7 +292,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Device Photo URL
</label>
<input
@@ -320,13 +317,10 @@ export default function DeviceForm() {
</section>
{/* --- Device Attributes --- */}
<section
className="rounded-lg border p-6"
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
>
<h2 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>
Device Attributes
</h2>
<section className="ui-section-card">
<div className="ui-section-card__title-row">
<h2 className="ui-section-card__header-title">Device Attributes</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="flex flex-wrap gap-4 md:col-span-2">
<label className="flex items-center gap-2">
@@ -385,7 +379,7 @@ export default function DeviceForm() {
</label>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Total Bells
</label>
<input
@@ -397,7 +391,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Device Locale
</label>
<select
@@ -413,7 +407,7 @@ export default function DeviceForm() {
</select>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Bell Outputs (comma-separated)
</label>
<input
@@ -425,7 +419,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Hammer Timings (comma-separated)
</label>
<input
@@ -437,7 +431,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Serial Log Level
</label>
<input
@@ -449,7 +443,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
SD Log Level
</label>
<input
@@ -464,16 +458,13 @@ export default function DeviceForm() {
</section>
{/* --- Network Settings --- */}
<section
className="rounded-lg border p-6"
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
>
<h2 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>
Network Settings
</h2>
<section className="ui-section-card">
<div className="ui-section-card__title-row">
<h2 className="ui-section-card__header-title">Network Settings</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Hostname
</label>
<input
@@ -496,7 +487,7 @@ export default function DeviceForm() {
</label>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
WebSocket URL
</label>
<input
@@ -507,7 +498,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Church Assistant URL
</label>
<input
@@ -524,16 +515,13 @@ export default function DeviceForm() {
{/* ===== Right Column ===== */}
<div className="space-y-6">
{/* --- Subscription --- */}
<section
className="rounded-lg border p-6"
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
>
<h2 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>
Subscription
</h2>
<section className="ui-section-card">
<div className="ui-section-card__title-row">
<h2 className="ui-section-card__header-title">Subscription</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Tier
</label>
<select
@@ -549,7 +537,7 @@ export default function DeviceForm() {
</select>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Start Date
</label>
<input
@@ -560,7 +548,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Duration (months)
</label>
<input
@@ -572,7 +560,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Max Users
</label>
<input
@@ -584,7 +572,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Max Outputs
</label>
<input
@@ -599,16 +587,13 @@ export default function DeviceForm() {
</section>
{/* --- Clock Settings --- */}
<section
className="rounded-lg border p-6"
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
>
<h2 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>
Clock Settings
</h2>
<section className="ui-section-card">
<div className="ui-section-card__title-row">
<h2 className="ui-section-card__header-title">Clock Settings</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Ring Alerts
</label>
<select
@@ -624,7 +609,7 @@ export default function DeviceForm() {
</select>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Ring Intervals
</label>
<input
@@ -645,7 +630,7 @@ export default function DeviceForm() {
<span className="text-sm" style={{ color: "var(--text-primary)" }}>Ring Alerts Master On</span>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Clock Outputs (comma-separated)
</label>
<input
@@ -656,7 +641,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Clock Timings (comma-separated)
</label>
<input
@@ -667,7 +652,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Hour Alerts Bell
</label>
<input
@@ -679,7 +664,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Half-hour Alerts Bell
</label>
<input
@@ -691,7 +676,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Quarter Alerts Bell
</label>
<input
@@ -703,7 +688,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Backlight Output
</label>
<input
@@ -788,16 +773,13 @@ export default function DeviceForm() {
</section>
{/* --- Statistics --- */}
<section
className="rounded-lg border p-6"
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
>
<h2 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>
Statistics & Warranty
</h2>
<section className="ui-section-card">
<div className="ui-section-card__title-row">
<h2 className="ui-section-card__header-title">Statistics & Warranty</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Total Playbacks
</label>
<input
@@ -809,7 +791,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Total Hammer Strikes
</label>
<input
@@ -821,7 +803,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Total Warnings Given
</label>
<input
@@ -833,7 +815,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Per-Bell Strikes (comma-separated)
</label>
<input
@@ -853,7 +835,7 @@ export default function DeviceForm() {
<span className="text-sm font-medium" style={{ color: "var(--text-primary)" }}>Warranty Active</span>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Warranty Start
</label>
<input
@@ -864,7 +846,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Warranty Period (months)
</label>
<input
@@ -876,7 +858,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Last Maintained On
</label>
<input
@@ -887,7 +869,7 @@ export default function DeviceForm() {
/>
</div>
<div>
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
<label className="ui-form-label">
Maintenance Period (months)
</label>
<input