106 lines
3.8 KiB
Markdown
106 lines
3.8 KiB
Markdown
|
# PlayLifeWeb
|
|||
|
|
|
|||
|
|
Веб-приложение для отображения статистики проектов.
|
|||
|
|
|
|||
|
|
## Возможности
|
|||
|
|
|
|||
|
|
- **Текущая неделя**: Отображение статистики на текущий момент с ProgressBar для каждого проекта
|
|||
|
|
- **Полная статистика**: График нарастающей статистики по всем проектам
|
|||
|
|
|
|||
|
|
## Технологии
|
|||
|
|
|
|||
|
|
- React 18
|
|||
|
|
- Vite
|
|||
|
|
- Chart.js (react-chartjs-2)
|
|||
|
|
- Tailwind CSS
|
|||
|
|
- Docker
|
|||
|
|
|
|||
|
|
## Установка и запуск
|
|||
|
|
|
|||
|
|
### Локальная разработка
|
|||
|
|
|
|||
|
|
1. Установите зависимости:
|
|||
|
|
```bash
|
|||
|
|
npm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
2. Запустите dev-сервер:
|
|||
|
|
```bash
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Приложение будет доступно по адресу `http://localhost:3000`
|
|||
|
|
|
|||
|
|
### Сборка для production
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm run build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Запуск через Docker
|
|||
|
|
|
|||
|
|
1. Создайте файл `.env` в корне проекта (можно скопировать из `env.example`):
|
|||
|
|
```bash
|
|||
|
|
cp env.example .env
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
2. Соберите образ:
|
|||
|
|
```bash
|
|||
|
|
docker-compose build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
3. Запустите контейнер:
|
|||
|
|
```bash
|
|||
|
|
docker-compose up -d
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Приложение будет доступно по адресу `http://localhost:3000`
|
|||
|
|
|
|||
|
|
**Примечание:** API запросы автоматически проксируются к бэкенду через nginx. Не требуется настройка URL API.
|
|||
|
|
|
|||
|
|
### Остановка Docker контейнера
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
docker-compose down
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Структура проекта
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
play-life-web/
|
|||
|
|
├── src/
|
|||
|
|
│ ├── components/
|
|||
|
|
│ │ ├── CurrentWeek.jsx # Компонент текущей недели
|
|||
|
|
│ │ ├── FullStatistics.jsx # Компонент полной статистики
|
|||
|
|
│ │ └── ProjectProgressBar.jsx # Компонент ProgressBar
|
|||
|
|
│ ├── App.jsx # Главный компонент приложения
|
|||
|
|
│ ├── main.jsx # Точка входа
|
|||
|
|
│ └── index.css # Глобальные стили
|
|||
|
|
├── Dockerfile # Docker образ
|
|||
|
|
├── docker-compose.yml # Docker Compose конфигурация
|
|||
|
|
├── nginx.conf # Nginx конфигурация
|
|||
|
|
└── package.json # Зависимости проекта
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## API Endpoints
|
|||
|
|
|
|||
|
|
Приложение использует относительные пути для API запросов. Проксирование настроено автоматически:
|
|||
|
|
|
|||
|
|
- **Development**: Vite dev server проксирует запросы к `http://localhost:8080`
|
|||
|
|
- **Production**: Nginx проксирует запросы к бэкенд контейнеру
|
|||
|
|
|
|||
|
|
Endpoints, которые используются:
|
|||
|
|
- `/playlife-feed` - данные текущей недели
|
|||
|
|
- `/d2dc349a-0d13-49b2-a8f0-1ab094bfba9b` - полная статистика
|
|||
|
|
- `/projects` - список проектов
|
|||
|
|
- `/project/priority` - обновление приоритетов проектов
|
|||
|
|
- `/api/*` - остальные API endpoints (слова, конфигурации, тесты)
|
|||
|
|
|
|||
|
|
## Особенности реализации
|
|||
|
|
|
|||
|
|
- ProgressBar отображает текущее значение (`total_score`) и выделяет диапазон целей (`min_goal_score` - `max_goal_score`)
|
|||
|
|
- График полной статистики показывает нарастающую сумму баллов по неделям
|
|||
|
|
- Все проекты отображаются на одном графике с разными цветами
|
|||
|
|
- Адаптивный дизайн для различных размеров экранов
|
|||
|
|
|