Skip to content

Commit a0f57ad

Browse files
EndyKaufmanEndyKaufman
committed
feat(widgets): add initial implementation and documentation for Habits Tracking Widget
- Introduce Habits Tracking Widget with dashboard and modal interfaces - Support various habit types with icons and color schemes - Implement habit progress visualization and history tracking - Integrate widget with project’s general widget system - Provide detailed widget documentation in English and Russian - Update project context, overview, and readme files to reflect new widget - Add widgets documentation links to main and localized readmes
1 parent c3b2aab commit a0f57ad

11 files changed

+316
-16
lines changed

‎AI_PROJECT_CONTEXT.md‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -74,12 +74,13 @@ See detailed schema in [schema.prisma](./web/prisma/schema.prisma):
7474
3. User reattachment functionality
7575
4. Full Dashboard CRUD operations
7676
5. Widget CRUD operations
77-
6. Mobile QR code scanning
78-
7. Widget display components on mobile
79-
8. Real-time widget updates
80-
9. Widget state management
81-
10. Offline caching for mobile
82-
11. Usage metrics collection
77+
6. Partial implementation of Habits Tracking Widget
78+
7. Mobile QR code scanning
79+
8. Widget display components on mobile
80+
9. Real-time widget updates
81+
10. Widget state management
82+
11. Offline caching for mobile
83+
12. Usage metrics collection
8384

8485
## Development Plan
8586

‎AI_PROJECT_CONTEXT_RU.md‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -74,12 +74,13 @@
7474
3. Функциональность перепривязки пользователей
7575
4. Полные операции CRUD для дашбордов
7676
5. Операции CRUD для виджетов
77-
6. Сканирование QR-кода в мобильном приложении
78-
7. Компоненты отображения виджетов на мобильном устройстве
79-
8. Обновления виджетов в реальном времени
80-
9. Управление состоянием виджетов
81-
10. Офлайн-кэширование для мобильного приложения
82-
11. Сбор метрик использования
77+
6. Частичная реализация виджета отслеживания привычек
78+
7. Сканирование QR-кода в мобильном приложении
79+
8. Компоненты отображения виджетов на мобильном устройстве
80+
9. Обновления виджетов в реальном времени
81+
10. Управление состоянием виджетов
82+
11. Офлайн-кэширование для мобильного приложения
83+
12. Сбор метрик использования
8384

8485
## План разработки
8586

‎PROJECT_OVERVIEW.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,8 +143,9 @@ v
143143
- ❌ Dashboard editing capabilities
144144

145145
3. **Widget Management**
146-
- ❌ Widget CRUD operations
147-
- ❌ Widget configuration interface
146+
- ⚠️ Partial implementation of Widget CRUD operations
147+
- ✅ Implementation of Habits Tracking Widget
148+
- ⚠️ Partial implementation of Widget configuration interface
148149
- ❌ Widget grid positioning
149150

150151
4. **Mobile Application**

‎PROJECT_OVERVIEW_RU.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,8 +143,9 @@ v
143143
- ❌ Возможности редактирования дашбордов
144144

145145
3. **Управление виджетами**
146-
- ❌ Операции CRUD для виджетов
147-
- ❌ Интерфейс конфигурации виджетов
146+
- ⚠️ Частичная реализация операций CRUD для виджетов
147+
- ✅ Реализация виджета отслеживания привычек (Habits Widget)
148+
- ⚠️ Частичная реализация интерфейса конфигурации виджетов
148149
- ❌ Позиционирование виджетов в сетке
149150

150151
4. **Мобильное приложение**

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ docker-compose down -v
8888
- [Development Patterns](./DEVELOPMENT_PATTERNS.md)
8989
- [Mobile App Documentation](./mobile/README.md) ([Russian version](./mobile/README_RU.md))
9090
- [Web App Documentation](./web/README.md) ([Russian version](./web/README_RU.md))
91+
- [Widgets Documentation](./web/WIDGETS_DOCUMENTATION.md) ([Russian version](./web/WIDGETS_DOCUMENTATION_RU.md))
9192

9293
## Code Formatting and Linting
9394

‎README_RU.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ docker-compose down -v
8787
- [Техническая документация](./web/TECHNICAL_DOCUMENTATION.md)
8888
- [Документация мобильного приложения](./mobile/README_RU.md)
8989
- [Документация веб-приложения](./web/README_RU.md)
90+
- [Документация по виджетам](./web/WIDGETS_DOCUMENTATION_RU.md)
9091

9192
## Форматирование кода и линтинг
9293

‎web/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ The application is deployed and available at: https://site15-my-dashboard.vercel
1010

1111
Run `npm install` to install the application dependencies.
1212

13+
## Widgets Documentation
14+
15+
Detailed information about implemented widgets is available in the [Widgets Documentation](WIDGETS_DOCUMENTATION.md) ([Russian version](WIDGETS_DOCUMENTATION_RU.md)).
16+
1317
## Community
1418

1519
Join our Telegram developer community for discussions, updates, and support:

‎web/README_RU.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010

1111
Выполните `npm install` чтобы установить зависимости приложения.
1212

13+
## Документация по виджетам
14+
15+
Подробная информация о реализованных виджетах доступна в [документации по виджетам](WIDGETS_DOCUMENTATION_RU.md).
16+
1317
## Сообщество
1418

1519
Присоединяйтесь к нашему Telegram-чату разработчиков для обсуждений, обновлений и поддержки:

‎web/TECHNICAL_DOCUMENTATION.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,10 @@ model WidgetLog {
200200
### Widget Routes
201201
- Widget management operations (partially implemented)
202202

203+
## Widgets Implementation
204+
205+
The project includes an initial implementation of a Habits Tracking Widget. Detailed documentation for widgets is available in the [Widgets Documentation (Russian)](WIDGETS_DOCUMENTATION_RU.md) file.
206+
203207
## Mobile Application Structure
204208

205209
The mobile application uses a tab-based navigation system with three main tabs:

‎web/WIDGETS_DOCUMENTATION.md‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
# Widgets Documentation for "My Dashboard" Project
2+
3+
## Overview
4+
5+
This document describes the implementation of widgets in the "My Dashboard" project. Currently, one widget has been implemented - the Habits Tracking Widget, which allows users to track their daily habits and activities.
6+
7+
## Implemented Widgets
8+
9+
### Habits Tracking Widget
10+
11+
The Habits Tracking Widget allows users to track their daily habits and activities through an interactive interface.
12+
13+
#### Widget Features:
14+
15+
1. **Dashboard Display**:
16+
- Compact representation with icons for the first 3 habits
17+
- Progress bars for each habit
18+
- Current value counters
19+
- Ability to expand to full interface on click
20+
21+
2. **Modal Window**:
22+
- Tabs: "Counters" and "History"
23+
- Interactive +/- buttons to increase/decrease values
24+
- Progress visualization with color indication
25+
- Consumption history with timestamps
26+
27+
3. **Supported Habit Types**:
28+
- Water (droplet)
29+
- Food (utensils)
30+
- Medication (pill)
31+
- Exercise (dumbbell)
32+
- Coffee (coffee)
33+
- Glass of water (glass-water)
34+
- Apple (apple)
35+
- Weight (weight)
36+
- Heart rate (heart-pulse)
37+
- Mindfulness (brain)
38+
- Reading (book)
39+
- Music (music)
40+
- TV/Movies (tv)
41+
- Gaming (gamepad)
42+
- Sleep (bed)
43+
- Sun (sun)
44+
- Moon (moon)
45+
- Star (star)
46+
- Smile (smile)
47+
- Activity (activity)
48+
49+
4. **Color Schemes**:
50+
- Blue (blue)
51+
- Orange (orange)
52+
- Purple (purple)
53+
- Green (green)
54+
- Red (red)
55+
- Yellow (yellow)
56+
- Pink (pink)
57+
58+
#### Technical Implementation:
59+
60+
##### Implementation Files:
61+
- `web/src/server/widgets/habits-widget.ts` - Main widget class and display template
62+
- `web/src/server/widgets/habits-widget.utils.ts` - Client-side helper functions
63+
64+
##### Data Structure:
65+
```typescript
66+
interface HabitsWidgetItem {
67+
id: string;
68+
name: string;
69+
icon: string;
70+
color: string;
71+
minValue: number;
72+
maxValue: number;
73+
currentValue: number;
74+
history: Array<{
75+
id: number;
76+
time: string;
77+
}>;
78+
}
79+
```
80+
81+
##### Main Functions:
82+
- `showHabitsModal(modalId)` - Display modal window
83+
- `hideHabitsModal(modalId)` - Hide modal window
84+
- `addItem(itemId)` - Increase habit value
85+
- `removeItem(itemId)` - Decrease habit value
86+
- `switchHabitsTab(modalId, tabName)` - Switch between tabs
87+
- `renderConsumptionList(modalId)` - Display consumption history
88+
89+
#### System Integration:
90+
91+
The widget is integrated with the general widget system of the project and uses the following components:
92+
- Zod schemas for data validation
93+
- Formly for widget configuration form
94+
- Lucide Icons for icons
95+
- Tailwind CSS for styling
96+
97+
#### Widget Configuration Example:
98+
99+
```json
100+
{
101+
"type": "habits",
102+
"name": "Daily Habits",
103+
"items": [
104+
{
105+
"id": "water",
106+
"name": "Water",
107+
"icon": "droplet",
108+
"color": "blue",
109+
"minValue": 0,
110+
"maxValue": 8,
111+
"currentValue": 0,
112+
"history": []
113+
}
114+
]
115+
}
116+
```
117+
118+
## Widgets Development Roadmap
119+
120+
### Near-term Tasks:
121+
1. Implementation of additional widgets (clock, calendar)
122+
2. Improvement of widget configuration system
123+
3. Adding ability to save widget states in the database
124+
4. Implementation of widget change logging system
125+
126+
### Long-term Goals:
127+
1. Creation of an extensible widget system with ability to add new types
128+
2. Implementation of widget sharing mechanism between users
129+
3. Addition of notification system for widgets
130+
4. Creation of mobile interface for interacting with widgets
131+
132+
## Troubleshooting
133+
134+
### Known Issues:
135+
1. Some Tailwind CSS color classes are not automatically generated for custom colors
136+
2. Some functions require global scope to work correctly
137+
138+
### Recommendations:
139+
1. When adding new colors, ensure they display correctly in Tailwind CSS
140+
2. When developing new widgets, follow established implementation patterns
141+
3. Use provided utilities for DOM manipulation instead of direct element access

0 commit comments

Comments
 (0)