From 2832b197d0f85df307e4f561e8ec8204c92c6a0b Mon Sep 17 00:00:00 2001 From: PouyaKhajavi Date: Sun, 9 Aug 2026 08:14:36 +0330 Subject: [PATCH] feat(frontend): replace native time input with custom hour/minute selects and optimize typography --- frontend/index.html | 2 + frontend/src/App.jsx | 87 +++++++++++++++++++++++++++++++++++++------- 2 files changed, 75 insertions(+), 14 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index fe8a9c8..4e4cdae 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -6,6 +6,8 @@ دیدبان دیوار - سامانه کرالر هوشمند + + diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index ec4d107..c0d72cf 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -15,6 +15,9 @@ import { ExternalLink } from 'lucide-react'; +const HOURS_LIST = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0')); +const MINUTES_LIST = Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0')); + function App() { const [activeTab, setActiveTab] = useState('crawlers'); const [crawlers, setCrawlers] = useState([]); @@ -47,6 +50,34 @@ function App() { const [formIsActive, setFormIsActive] = useState(true); const [formError, setFormError] = useState(''); + // Parse hour and minute from form time states + const [startH, startM] = (formStartHour || '08:00').split(':'); + const [endH, endM] = (formEndHour || '23:00').split(':'); + + const updateStartHour = (h) => { + const parts = (formStartHour || '08:00').split(':'); + const m = parts.length > 1 ? parts[1] : '00'; + setFormStartHour(`${h}:${m}`); + }; + + const updateStartMinute = (m) => { + const parts = (formStartHour || '08:00').split(':'); + const h = parts.length > 0 ? parts[0] : '08'; + setFormStartHour(`${h}:${m}`); + }; + + const updateEndHour = (h) => { + const parts = (formEndHour || '23:00').split(':'); + const m = parts.length > 1 ? parts[1] : '00'; + setFormEndHour(`${h}:${m}`); + }; + + const updateEndMinute = (m) => { + const parts = (formEndHour || '23:00').split(':'); + const h = parts.length > 0 ? parts[0] : '23'; + setFormEndHour(`${h}:${m}`); + }; + // Toast alert const [toast, setToast] = useState(null); @@ -710,24 +741,52 @@ function App() {
- setFormStartHour(e.target.value)} - className="bg-black/20 border border-white/5 rounded-lg px-4 py-2 text-white text-sm outline-none focus:border-purple-500" - required - /> +
+ + : + +
- setFormEndHour(e.target.value)} - className="bg-black/20 border border-white/5 rounded-lg px-4 py-2 text-white text-sm outline-none focus:border-purple-500" - required - /> +
+ + : + +