You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
28 KiB
28 KiB
DailyNotification Architecture Diagram
Author: Matthew Raymer
Version: 1.0.0
Created: 2025-10-08 06:24:57 UTC
Architecture Overview
This diagram shows how the DailyNotification plugin integrates with your existing TimeSafari PWA code.
┌─────────────────────────────────────────────────────────────────────────────────┐
│ TimeSafari PWA (Your Existing Code) │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ HomeView.vue │ │ Your Data │ │ Your Methods │ │
│ │ │ │ │ │ │ │
│ │ • activeDid │ │ • starredPlan │ │ • loadNewStarred│ │
│ │ • axios │ │ HandleIds │ │ ProjectChanges│ │
│ │ • apiServer │ │ • lastAckedJwt │ │ • getStarred │ │
│ │ • numNewStarred │ │ • numNewStarred │ │ ProjectsWith │ │
│ │ ProjectChanges│ │ ProjectChanges│ │ Changes │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
│ │ │ │ │
│ └───────────────────────┼───────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ DailyNotification Plugin │ │
│ ├─────────────────────────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ │
│ │ │ Configuration │ │ Integration │ │ Enhanced │ │ │
│ │ │ │ │ Service │ │ Methods │ │ │
│ │ │ • timesafari │ │ │ │ │ │ │
│ │ │ Config │ │ • Uses your │ │ • Same interface│ │ │
│ │ │ • networkConfig │ │ existing │ │ • Enhanced │ │ │
│ │ │ • contentFetch │ │ axios & data │ │ functionality │ │ │
│ │ │ • authentication│ │ • Provides │ │ • Better error │ │ │
│ │ │ • logging │ │ enhanced │ │ handling │ │ │
│ │ │ • security │ │ methods │ │ • Performance │ │ │
│ │ └─────────────────┘ └─────────────────┘ └─────────────────┘ │ │
│ │ │ │ │ │ │
│ │ └───────────────────────┼───────────────────────┘ │ │
│ │ │ │ │
│ │ ▼ │ │
│ │ ┌─────────────────────────────────────────────────────────────────┐ │ │
│ │ │ Plugin Features │ │ │
│ │ ├─────────────────────────────────────────────────────────────────┤ │ │
│ │ │ │ │ │
│ │ │ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ │ │
│ │ │ │ Background │ │ Observability │ │ Performance │ │ │ │
│ │ │ │ Fetching │ │ │ │ Optimization │ │ │ │
│ │ │ │ │ │ • Structured │ │ │ │ │ │
│ │ │ │ • Daily schedule│ │ logging │ │ • HTTP ETags │ │ │ │
│ │ │ │ • Notifications │ │ • Event IDs │ │ • Request │ │ │ │
│ │ │ │ • Fallback │ │ • Metrics │ │ batching │ │ │ │
│ │ │ │ content │ │ • Health checks │ │ • Connection │ │ │ │
│ │ │ │ • Offline │ │ • Error │ │ pooling │ │ │ │
│ │ │ │ support │ │ tracking │ │ • Caching │ │ │ │
│ │ │ └─────────────────┘ └─────────────────┘ └─────────────────┘ │ │ │
│ │ └─────────────────────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ External APIs │ │
│ ├─────────────────────────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ │
│ │ │ Endorser.ch │ │ TimeSafari │ │ Other APIs │ │ │
│ │ │ │ │ APIs │ │ │ │ │
│ │ │ • /api/v2/ │ │ │ │ • Analytics │ │ │
│ │ │ offers/person │ │ • Community │ │ • Monitoring │ │ │
│ │ │ • /api/v2/ │ │ features │ │ • Notifications │ │ │
│ │ │ offers/plans │ │ • User data │ │ • Storage │ │ │
│ │ │ • /api/v2/ │ │ • Preferences │ │ • Backup │ │ │
│ │ │ report/ │ │ • Settings │ │ • Sync │ │ │
│ │ │ plansLast │ │ │ │ │ │ │
│ │ │ UpdatedBetween│ │ │ │ │ │ │
│ │ └─────────────────┘ └─────────────────┘ └─────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────────┘
Data Flow Diagram
This diagram shows how data flows through the system.
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ TimeSafari │ │ DailyNotification │ │ Integration │ │ External │
│ PWA (You) │ │ Plugin │ │ Service │ │ APIs │
│ │ │ │ │ │ │ │
│ 1. Call method │───▶│ 2. Configure │───▶│ 3. Enhanced │───▶│ 4. HTTP │
│ loadNewStarred│ │ plugin with │ │ method │ │ request │
│ ProjectChanges│ │ your data │ │ getStarred │ │ to API │
│ │ │ │ │ ProjectsWith │ │ │
│ │ │ │ │ Changes │ │ │
│ │ │ │ │ │ │ │
│ 8. Update UI │◀───│ 7. Return │◀───│ 6. Process │◀───│ 5. HTTP │
│ with results │ │ results │ │ response │ │ response │
│ │ │ │ │ │ │ │
└─────────────────┘ └─────────────────┘ └─────────────────┘ └─────────────────┘
Method Comparison Diagram
This diagram shows the difference between your existing method and the plugin-enhanced version.
┌─────────────────────────────────────────────────────────────────────────────────┐
│ Your Existing Method │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ async loadNewStarredProjectChanges() { │
│ if (this.activeDid && this.starredPlanHandleIds.length > 0) { │
│ try { │
│ const starredProjectChanges = await getStarredProjectsWithChanges( │
│ this.axios, // Your existing axios │
│ this.apiServer, // Your existing API server │
│ this.activeDid, // Your existing activeDid │
│ this.starredPlanHandleIds, // Your existing starred plan IDs │
│ this.lastAckedStarredPlanChangesJwtId // Your existing JWT ID │
│ ); │
│ this.numNewStarredProjectChanges = starredProjectChanges.data.length; │
│ this.newStarredProjectChangesHitLimit = starredProjectChanges.hitLimit; │
│ } catch (error) { │
│ console.warn('[HomeView] Failed to load starred project changes:', error);│
│ this.numNewStarredProjectChanges = 0; │
│ this.newStarredProjectChangesHitLimit = false; │
│ } │
│ } else { │
│ this.numNewStarredProjectChanges = 0; │
│ this.newStarredProjectChangesHitLimit = false; │
│ } │
│ } │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────────────┐
│ Plugin-Enhanced Method │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ async loadNewStarredProjectChanges() { │
│ if (this.activeDid && this.starredPlanHandleIds.length > 0) { │
│ try { │
│ // SAME INTERFACE - Enhanced functionality │
│ const starredProjectChanges = await this.integrationService │
│ .getStarredProjectsWithChanges( │
│ this.activeDid, // Same parameter │
│ this.starredPlanHandleIds, // Same parameter │
│ this.lastAckedStarredPlanChangesJwtId // Same parameter │
│ ); │
│ // SAME HANDLING - Enhanced logging │
│ this.numNewStarredProjectChanges = starredProjectChanges.data.length; │
│ this.newStarredProjectChangesHitLimit = starredProjectChanges.hitLimit; │
│ } catch (error) { │
│ // SAME ERROR HANDLING - Enhanced logging │
│ console.warn('[HomeView] Failed to load starred project changes:', error);│
│ this.numNewStarredProjectChanges = 0; │
│ this.newStarredProjectChangesHitLimit = false; │
│ } │
│ } else { │
│ this.numNewStarredProjectChanges = 0; │
│ this.newStarredProjectChangesHitLimit = false; │
│ } │
│ } │
│ │
│ ✅ SAME INTERFACE ✅ SAME BEHAVIOR ✅ SAME ERROR HANDLING │
│ ✅ ENHANCED FEATURES ✅ BETTER LOGGING ✅ PERFORMANCE IMPROVEMENTS │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Configuration Flow Diagram
This diagram shows how the plugin configuration works.
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Your Existing │ │ Plugin │ │ Integration │ │ Enhanced │
│ TimeSafari │ │ Configuration │ │ Service │ │ Functionality │
│ Data │ │ │ │ │ │ │
│ │ │ │ │ │ │ │
│ • activeDid │───▶│ • timesafari │───▶│ • Uses your │───▶│ • Background │
│ • axios │ │ Config │ │ existing │ │ fetching │
│ • apiServer │ │ • networkConfig │ │ data & │ │ • Notifications │
│ • starredPlan │ │ • contentFetch │ │ methods │ │ • Observability │
│ HandleIds │ │ • authentication│ │ • Provides │ │ • Performance │
│ • lastAckedJwt │ │ • logging │ │ enhanced │ │ optimization │
│ • numNewStarred │ │ • security │ │ methods │ │ • Error │
│ ProjectChanges│ │ │ │ • Same │ │ handling │
│ │ │ │ │ interface │ │ • Caching │
│ │ │ │ │ │ │ • Retry logic │
└─────────────────┘ └─────────────────┘ └─────────────────┘ └─────────────────┘
Benefits Diagram
This diagram shows the benefits of using the plugin.
┌─────────────────────────────────────────────────────────────────────────────────┐
│ Your Existing Code │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ Basic │ │ Manual │ │ Limited │ │
│ │ Functionality │ │ Error │ │ Observability │ │
│ │ │ │ Handling │ │ │ │
│ │ • HTTP requests │ │ │ │ • Console logs │ │
│ │ • Data handling │ │ • Try/catch │ │ • Basic error │ │
│ │ • UI updates │ │ blocks │ │ messages │ │
│ │ • Error logging │ │ • Manual retry │ │ • No metrics │ │
│ │ │ │ logic │ │ • No monitoring │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────────────┐
│ Plugin-Enhanced Code │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ Enhanced │ │ Advanced │ │ Comprehensive │ │
│ │ Functionality │ │ Error │ │ Observability │ │
│ │ │ │ Handling │ │ │ │
│ │ • HTTP requests │ │ │ │ • Structured │ │
│ │ • Data handling │ │ • Circuit │ │ logging │ │
│ │ • UI updates │ │ breaker │ │ • Event IDs │ │
│ │ • Background │ │ • Exponential │ │ • Metrics │ │
│ │ fetching │ │ backoff │ │ • Health checks │ │
│ │ • Notifications │ │ • Retry logic │ │ • Performance │ │
│ │ • Caching │ │ • Fallback │ │ monitoring │ │
│ │ • Performance │ │ content │ │ • Error │ │
│ │ optimization │ │ • Rate limiting │ │ tracking │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
│ │
│ ✅ SAME INTERFACE ✅ ENHANCED FEATURES ✅ BETTER OBSERVABILITY │
│ ✅ SAME BEHAVIOR ✅ PERFORMANCE GAINS ✅ COMPREHENSIVE MONITORING │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Migration Path Diagram
This diagram shows how to migrate from your existing code to the plugin-enhanced version.
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Phase 1: │ │ Phase 2: │ │ Phase 3: │ │ Phase 4: │
│ Parallel │ │ Gradual │ │ Full │ │ Optimization │
│ Implementation│ │ Migration │ │ Integration │ │ │
│ │ │ │ │ │ │ │
│ • Keep existing │ │ • Replace │ │ • Replace all │ │ • Leverage │
│ code unchanged│ │ methods one │ │ methods with │ │ advanced │
│ • Add plugin │ │ by one │ │ plugin │ │ features │
│ configuration │ │ • Use enhanced │ │ versions │ │ • Optimize │
│ • Test both │ │ error │ │ • Remove │ │ performance │
│ implementations│ │ handling │ │ duplicate │ │ • Add advanced │
│ • Compare │ │ • Maintain │ │ code │ │ monitoring │
│ results │ │ existing UI │ │ • Leverage │ │ • Implement │
│ │ │ • Add plugin │ │ plugin │ │ advanced │
│ │ │ features │ │ features │ │ features │
│ │ │ gradually │ │ │ │ │
└─────────────────┘ └─────────────────┘ └─────────────────┘ └─────────────────┘
Key Takeaways
- Same Interface: The plugin maintains the same interface as your existing methods
- Enhanced Functionality: Adds background fetching, notifications, and performance optimizations
- Better Error Handling: Provides circuit breaker, retry logic, and fallback content
- Comprehensive Observability: Structured logging, metrics, and health checks
- Gradual Migration: Can be adopted incrementally without breaking existing functionality
- Performance Improvements: HTTP ETags, request batching, connection pooling, and caching
The plugin enhances your existing TimeSafari PWA code while maintaining the same interface and behavior, making it easy to adopt and migrate to.