Develop -> Main

.github/workflows/ci.yml

@@ -0,0 +1,69 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+  pull_request:
+    branches:
+      - main
+      - develop
+
+permissions:
+  contents: read
+
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: '8.3'
+          tools: composer:v2
+          coverage: none
+
+      - name: Validate Composer
+        # Metadata-only composer.json changes do not affect installed dependencies.
+        # Keep schema validation strict while allowing the legacy lockfile hash.
+        run: composer validate --strict --no-check-lock
+
+      - name: Install dependencies
+        run: composer install --no-interaction --prefer-dist --no-progress
+
+      - name: Lint PHP
+        run: php -l proxy.php
+
+      - name: Validate camera data
+        run: |
+          php -r '
+            $data = json_decode(file_get_contents("data-camera.json"), true, 512, JSON_THROW_ON_ERROR);
+            if (!is_array($data) || count($data) === 0) {
+                fwrite(STDERR, "Camera data must be a non-empty array.\n");
+                exit(1);
+            }
+            foreach ($data as $index => $camera) {
+                $id = $camera["CamId"] ?? "";
+                $name = trim((string) ($camera["CamName"] ?? ""));
+                if (!preg_match("/^[a-f0-9]{24}$/i", (string) $id)) {
+                    fwrite(STDERR, "Invalid CamId at index {$index}: {$id}\n");
+                    exit(1);
+                }
+                if ($name === "") {
+                    fwrite(STDERR, "Missing CamName at index {$index}.\n");
+                    exit(1);
+                }
+            }
+            echo "Validated " . count($data) . " cameras.\n";
+          '
+
+      - name: Smoke-check UI anchors
+        run: |
+          grep -q 'id="cameraGrid"' index.html
+          grep -q 'id="searchInput"' index.html
+          grep -q 'proxy.php?id=' index.html

README.md

@@ -1,25 +1,59 @@
-# Xem camera giao thông TP.HCM
+# Camera giao thông TP.HCM
 
-![image](https://github.com/user-attachments/assets/1a5e9185-c34d-40d7-8fcb-7374d21cc571)
+Ứng dụng web nhỏ gọn để theo dõi nhanh camera giao thông tại TP.HCM theo từng khu vực.
 
-## Giới thiệu
+## Tính năng
 
-Dự án này nhằm mục đích theo dõi và phân tích dữ liệu từ các camera giao thông tại TP.HCM. Thông qua việc sử dụng các công nghệ hiện đại, chúng tôi có thể cung cấp thông tin thời gian thực về tình hình giao thông, giúp cải thiện việc quản lý và điều tiết giao thông trong thành phố.
-
-## Mục tiêu
-
-- Thu thập dữ liệu từ các camera giao thông.
-- Phân tích dữ liệu để phát hiện các vấn đề giao thông.
-- Cung cấp thông tin thời gian thực cho người dùng và cơ quan chức năng.
+- Hiển thị camera theo dạng dashboard responsive cho desktop và mobile.
+- Tìm kiếm theo tên đường, giao lộ hoặc khu vực.
+- Lọc theo quận/khu vực.
+- Tùy chọn 6–24 camera mỗi trang.
+- Tự làm mới theo chu kỳ 5/10/15/30 giây hoặc tắt hoàn toàn.
+- Làm mới từng camera hoặc toàn bộ camera đang hiển thị.
+- Hiển thị trạng thái tải/online/lỗi cho từng camera.
+- Dark mode và các tùy chọn hiển thị được lưu trên trình duyệt.
+- Phân trang đồng bộ với query string `?page=`.
+- Proxy chỉ chấp nhận `CamId` hợp lệ, không cho phép proxy URL tùy ý.
 
 ## Yêu cầu
 
 - PHP >= 7.4
+- Composer
+
+## Cài đặt
+
+```bash
+git clone https://github.com/ePlus-DEV/camera.git
+cd camera
+composer install
+php -S localhost:8000
+```
+
+Mở <http://localhost:8000>.
+
+## Cấu trúc chính
+
+- `index.html`: giao diện và logic hiển thị camera.
+- `data-camera.json`: danh sách camera.
+- `proxy.php`: proxy ảnh camera từ nguồn giao thông TP.HCM.
+- `composer.json`: dependency PHP.
+
+## Bảo mật
+
+`proxy.php` chỉ nhận tham số `id` là `CamId` 24 ký tự hex. Endpoint upstream được cố định trong source để tránh biến ứng dụng thành open proxy/SSRF.
+
+Ví dụ:
+
+```text
+proxy.php?id=586e28a0f9fab7001111b0b3
+```
+
+Không lưu cookie/session của website nguồn trong repository.
+
+## Nguồn dữ liệu
 
-## Cách cài đặt
+Hình ảnh camera được lấy từ Cổng thông tin giao thông TP.HCM. Tình trạng camera phụ thuộc vào nguồn upstream và có thể tạm thời không khả dụng.
 
-1. Clone repository này về máy của bạn.
-2. Truy cập <http://localhost/camera>
-3. Khởi động dự án và bắt đầu theo dõi dữ liệu giao thông.
+---
 
-Chúng tôi hy vọng dự án này sẽ đóng góp tích cực vào việc cải thiện tình hình giao thông tại TP.HCM.
+© ePlus.DEV

composer.json

@@ -1,4 +1,8 @@
 {
+    "name": "eplus-dev/camera",
+    "description": "Responsive Ho Chi Minh City traffic camera viewer.",
+    "type": "project",
+    "license": "MIT",
     "require": {
         "guzzlehttp/guzzle": "^7.9"
     }