diff --git a/test-apps/daily-notification-test/src/views/ScheduleView.vue b/test-apps/daily-notification-test/src/views/ScheduleView.vue index 341c386..c3f0318 100644 --- a/test-apps/daily-notification-test/src/views/ScheduleView.vue +++ b/test-apps/daily-notification-test/src/views/ScheduleView.vue @@ -52,7 +52,41 @@ class ScheduleView extends Vue { async scheduleNotification() { this.isScheduling = true try { - // TODO: call plugin + console.log('🔄 Starting notification scheduling...') + + // Import and use the real plugin + const { DailyNotification } = await import('@timesafari/daily-notification-plugin') + const plugin = DailyNotification + + console.log('✅ Plugin loaded:', plugin) + + const options = { + time: this.scheduleTime, + title: this.notificationTitle, + body: this.notificationMessage, + sound: true, + priority: 'high' as const + } + + console.log('📅 Scheduling notification with options:', options) + + await plugin.scheduleDailyNotification(options) + + console.log('✅ Notification scheduled successfully!') + + // Show success feedback to user + alert('Notification scheduled successfully!') + + } catch (error) { + console.error('❌ Failed to schedule notification:', error) + console.error('❌ Error details:', { + name: error.name, + message: error.message, + stack: error.stack + }) + + // Show error feedback to user + alert(`Failed to schedule notification: ${error.message}`) } finally { this.isScheduling = false } diff --git a/www/index.html b/www/index.html index 3395a38..79afac2 100644 --- a/www/index.html +++ b/www/index.html @@ -17,149 +17,605 @@ color: white; } .container { - max-width: 600px; + max-width: 800px; margin: 0 auto; - text-align: center; } h1 { + text-align: center; margin-bottom: 30px; font-size: 2.5em; } + .section { + background: rgba(255, 255, 255, 0.1); + border-radius: 10px; + padding: 20px; + margin: 20px 0; + } + .section h2 { + margin-top: 0; + color: #ffd700; + } .button { background: rgba(255, 255, 255, 0.2); border: 2px solid rgba(255, 255, 255, 0.3); color: white; - padding: 15px 30px; - margin: 10px; - border-radius: 25px; + padding: 12px 24px; + margin: 8px; + border-radius: 20px; cursor: pointer; - font-size: 16px; + font-size: 14px; transition: all 0.3s ease; + display: inline-block; } .button:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-2px); } + .button:disabled { + opacity: 0.5; + cursor: not-allowed; + transform: none; + } .status { - margin-top: 30px; - padding: 20px; - background: rgba(255, 255, 255, 0.1); - border-radius: 10px; + margin-top: 15px; + padding: 15px; + background: rgba(0, 0, 0, 0.2); + border-radius: 8px; font-family: monospace; + font-size: 12px; + white-space: pre-wrap; + max-height: 200px; + overflow-y: auto; + } + .success { color: #4CAF50; } + .error { color: #f44336; } + .warning { color: #ff9800; } + .info { color: #2196F3; } + .grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 15px; + margin: 15px 0; + } + .input-group { + margin: 10px 0; + } + .input-group label { + display: block; + margin-bottom: 5px; + font-weight: bold; + } + .input-group input, .input-group select { + width: 100%; + padding: 8px; + border-radius: 5px; + border: 1px solid rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.1); + color: white; + } + .input-group input::placeholder { + color: rgba(255, 255, 255, 0.7); }
Test the DailyNotification plugin functionality
- - - - -