re Frontend - #49
Closed
SuphakonCh wants to merge 13 commits into
Closed
re Frontend#49SuphakonCh wants to merge 13 commits into
SuphakonCh wants to merge 13 commits into
Conversation
- Added comprehensive styles for the SettingsPage, including layout, sidebar, content panels, buttons, tables, alerts, and modals. - Updated StationPage styles for improved layout and responsiveness. - Configured Docker Compose to expose PostgreSQL port for external access. - Introduced AlertCard component to display system alert statuses with critical and warning counts.
feat: Redesign Settings and Station Pages with new styles and components
…e component with CSV export functionality and device service for API integration
Refactor Dashboard and Water Level Chart styles; add MultiStationTabl…
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refreshes the Frontend UI/UX (navbar, dashboard, station detail, settings) and introduces richer charting (threshold lines, combined series, time-range tabs) while adding mock-data helpers to support development without the real API.
Changes:
- Reworked Station page to support map-driven station selection and a combined water/rain chart with selectable time ranges.
- Rebuilt Settings page into a multi-tab layout (stations / alerts / account) with per-station warning-level controls (mock-persisted).
- Updated Dashboard and multiple CSS modules to match the new visual system; added mock-data generation and some new UI components.
Reviewed changes
Copilot reviewed 24 out of 24 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| Frontend/src/styles/WaterLevelChart.module.css | Adjusted chart container sizing and tooltip/legend styling. |
| Frontend/src/styles/StationPage.module.css | Updated station page layout + table/chart presentation styles. |
| Frontend/src/styles/SettingsPage.module.css | New comprehensive styling for the revamped settings UI (sidebar/tabs/modals/toast). |
| Frontend/src/styles/NavBar.module.css | New navbar layout/styles (menu pill active state, user dropdown, search overlay). |
| Frontend/src/styles/MultiStationTable.module.css | New styling for the “all stations” table component. |
| Frontend/src/styles/Form.module.css | Added animated wave background styles + motion-reduction handling. |
| Frontend/src/styles/DashboradPage.module.css | Dashboard layout changes (cards grid, selector row, chart wrapper). |
| Frontend/src/styles/Dashboard-StationTable.module.css | Restyled dashboard station table rows (status badge, row coloring, export button). |
| Frontend/src/service/deviceService.ts | Added mock data wiring and changed mock toggle default behavior. |
| Frontend/src/pages/Station.tsx | Major refactor: URL-selected station, map click selection, combined chart + time range tabs. |
| Frontend/src/pages/SettingsPage.tsx | Major refactor: new sidebar/tabbed settings UI + local mock warning-level persistence. |
| Frontend/src/pages/DashboardPage.tsx | Integrated AlertCard + passed threshold lines into WaterLevelChart; removed rain probability table. |
| Frontend/src/data/mockData.ts | New centralized mock stations/latest/history/probability generators. |
| Frontend/src/components/WaterLevelChart.tsx | Added ReferenceLine thresholds + improved tooltip/legend + fixed chart sizing logic. |
| Frontend/src/components/Navbar.tsx | New menu config, search overlay, user dropdown, and updated layout routing wrapper. |
| Frontend/src/components/MultiStationTable.tsx | New component: multi-station list with status, selection, and CSV export. |
| Frontend/src/components/MapView.tsx | Added selectedStationId + fly-to + marker click callback support. |
| Frontend/src/components/MapGIS.tsx | Auto-fit bounds + marker click navigates to Station page; added (currently inert) selectedStationId state. |
| Frontend/src/components/LoginForm.tsx | Added wave background markup for the login screen. |
| Frontend/src/components/Deviceservice.ts | Added a duplicate DeviceService implementation under components (appears unused). |
| Frontend/src/components/Dashboard-StationTable.tsx | Added status badge + icons + export styling; introduced signal field (currently defaulted). |
| Frontend/src/components/AlertCard.tsx | New component: dashboard alert summary card. |
| Frontend/src/App.tsx | Adjusted BYPASS_LOGIN loading behavior. |
| docker-compose.yml | Exposed Postgres port on the host. |
Suppressed comments (1)
Frontend/src/pages/SettingsPage.tsx:459
- การอ่าน mock_warning_levels ใช้ JSON.parse โดยไม่กันกรณี localStorage เก็บค่าไม่ใช่ JSON (เช่นถูกแก้มือ/เวอร์ชันเก่า) ทำให้ SettingsPage ทั้งหน้าเข้า catch และไม่แสดงข้อมูล แนะนำให้ parse แบบปลอดภัยและ fallback เป็น {}
const savedLevelsStr = localStorage.getItem('mock_warning_levels');
const savedLevels = savedLevelsStr ? JSON.parse(savedLevelsStr) : {};
const warningLevel = savedLevels[s.stationId] ?? 4.5; // TODO: มาจาก s.warningLevel เมื่อ backend ส่งมา
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+49
to
+53
| for (const item of waterData) { | ||
| const ts = new Date(item.monitorTime).getTime(); | ||
| if (ts < cutoff) continue; | ||
| const key = format(item.monitorTime); | ||
| const existing = map.get(key) ?? { time: key, water: null, rain: null }; |
| <div key={station.id} className={styles.panelStationRow}> | ||
| <div | ||
| key={station.id} | ||
| className={`${styles.panelStationRow} ${activeStationId === station.id ? styles.active : ''}`} |
|
|
||
| // 1. Single toggle to control mock vs real API | ||
| export let USE_MOCK_DATA = false; // Set to false for real API, true for mock | ||
| export let USE_MOCK_DATA = true; // Set to false for real API, true for mock |
Comment on lines
+454
to
+456
| for (const s of latestData) { | ||
| if (!map.has(s.stationId)) { | ||
| const wl = parseFloat(s.monitorValue) || 0; |
Comment on lines
+1
to
+5
| export interface DeviceLatestResponse { | ||
| code: number; | ||
| monitorValue: string; | ||
| monitorTime: string; | ||
| } |
Comment on lines
+9
to
+10
| ports: | ||
| - 5432:5432 |
| const [search, setSearch] = useState(""); | ||
| const [stations, setStations] = useState<MapStation[]>([]); | ||
| const [isLoading, setIsLoading] = useState(true); | ||
| const [selectedStationId, setSelectedStationId] = useState<string | null>(null); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.