trent_larson/daily-notification-plugin
4
0
Fork 0
Code Issues Pull Requests 2 Projects Releases Wiki Activity

feat(ios): enhance permission UI feedback with detailed logging

Browse Source 
Enhanced permission request/check UI with better feedback:

Permission UI Enhancements:
- Added detailed console logging for permission operations
- Enhanced status display with emoji indicators
- Shows detailed permission results (status, granted, alert, badge, sound)
- Better error messages with full error details
- Visual feedback with color-coded status backgrounds

Console Logging:
- Logs when permission functions are called
- Logs plugin availability status
- Logs permission request/check results
- Logs errors with full details

Fixes:
- Permission visibility: Users can now see detailed permission status
- Error debugging: Full error messages help diagnose issues
- User feedback: Clear visual and text feedback for permission state

Result: Permission operations now provide comprehensive feedback in both UI and console
This commit is contained in:
Matthew Raymer
2025-11-11 22:25:52 -08:00
parent 4412838c74
commit 328311281c
1 changed files with 159 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

294
test-apps/ios-test-app/App/App/public/index.html
View File

@@ -1,8 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport"
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0"> <meta http-equiv="Expires" content="0">
@@ -16,15 +18,18 @@
min-height: 100vh; min-height: 100vh;
color: white; color: white;
} }
.container { .container {
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
} }
h1 { h1 {
margin-bottom: 30px; margin-bottom: 30px;
font-size: 2.5em; font-size: 2.5em;
} }
.button { .button {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3); border: 2px solid rgba(255, 255, 255, 0.3);
@@ -36,10 +41,12 @@
font-size: 16px; font-size: 16px;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.button:hover { .button:hover {
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px); transform: translateY(-2px);
} }
.status { .status {
margin-top: 30px; margin-top: 30px;
padding: 20px; padding: 20px;
@@ -49,35 +56,32 @@
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<!-- Immediate visibility test - should appear even if JS fails --> <h1>🔔 DailyNotification Plugin Test</h1>
<div style="background: red; color: white; padding: 20px; margin-bottom: 20px; font-size: 24px; font-weight: bold; text-align: center;"> <p>Test the DailyNotification plugin functionality</p>
✅ HTML IS LOADING - If you see this, the WebView is working! <p style="font-size: 12px; opacity: 0.8;">Build: 2025-10-14 05:00:00 UTC</p>
</div>
<h1>🔔 DailyNotification Plugin Test</h1>
<p>Test the DailyNotification plugin functionality</p>
<p style="font-size: 12px; opacity: 0.8;">Build: 2025-10-14 05:00:00 UTC</p>
<button class="button" onclick="testPlugin()">Test Plugin</button> <button class="button" onclick="testPlugin()">Test Plugin</button>
<button class="button" onclick="configurePlugin()">Configure Plugin</button> <button class="button" onclick="configurePlugin()">Configure Plugin</button>
<button class="button" onclick="checkStatus()">Check Status</button> <button class="button" onclick="checkStatus()">Check Status</button>
<h2>🔔 Notification Tests</h2> <h2>🔔 Notification Tests</h2>
<button class="button" onclick="testNotification()">Test Notification</button> <button class="button" onclick="testNotification()">Test Notification</button>
<button class="button" onclick="scheduleNotification()">Schedule Notification</button> <button class="button" onclick="scheduleNotification()">Schedule Notification</button>
<button class="button" onclick="showReminder()">Show Reminder</button> <button class="button" onclick="showReminder()">Show Reminder</button>
<h2>🔐 Permission Management</h2> <h2>🔐 Permission Management</h2>
<button class="button" onclick="checkPermissions()">Check Permissions</button> <button class="button" onclick="checkPermissions()">Check Permissions</button>
<button class="button" onclick="requestPermissions()">Request Permissions</button> <button class="button" onclick="requestPermissions()">Request Permissions</button>
<button class="button" onclick="openExactAlarmSettings()">Exact Alarm Settings</button> <button class="button" onclick="openExactAlarmSettings()">Exact Alarm Settings</button>
<h2>📢 Channel Management</h2> <h2>📢 Channel Management</h2>
<button class="button" onclick="checkChannelStatus()">Check Channel Status</button> <button class="button" onclick="checkChannelStatus()">Check Channel Status</button>
<button class="button" onclick="openChannelSettings()">Open Channel Settings</button> <button class="button" onclick="openChannelSettings()">Open Channel Settings</button>
<button class="button" onclick="checkComprehensiveStatus()">Comprehensive Status</button> <button class="button" onclick="checkComprehensiveStatus()">Comprehensive Status</button>
<div id="status" class="status"> <div id="status" class="status">
Ready to test... Ready to test...
</div> </div>
@@ -86,9 +90,9 @@
<script> <script>
console.log('Script loading...'); console.log('Script loading...');
console.log('JavaScript is working!'); console.log('JavaScript is working!');
// Show immediate feedback that HTML is loading // Show immediate feedback that HTML is loading
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function () {
console.log('DOM Content Loaded!'); console.log('DOM Content Loaded!');
const body = document.body; const body = document.body;
if (body) { if (body) {
@@ -98,16 +102,16 @@
console.error('Body element not found!'); console.error('Body element not found!');
} }
}); });
// DailyNotification will be set after Capacitor loads (see initialization script at end) // DailyNotification will be set after Capacitor loads (see initialization script at end)
// Define functions immediately and attach to window // Define functions immediately and attach to window
function testPlugin() { function testPlugin() {
console.log('testPlugin called'); console.log('testPlugin called');
const status = document.getElementById('status'); const status = document.getElementById('status');
status.innerHTML = 'Testing plugin...'; status.innerHTML = 'Testing plugin...';
status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background
try { try {
if (!window.DailyNotification) { if (!window.DailyNotification) {
status.innerHTML = 'DailyNotification plugin not available'; status.innerHTML = 'DailyNotification plugin not available';
@@ -128,14 +132,14 @@
const status = document.getElementById('status'); const status = document.getElementById('status');
status.innerHTML = 'Configuring plugin...'; status.innerHTML = 'Configuring plugin...';
status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background
try { try {
if (!window.DailyNotification) { if (!window.DailyNotification) {
status.innerHTML = 'DailyNotification plugin not available'; status.innerHTML = 'DailyNotification plugin not available';
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
return; return;
} }
// Configure plugin settings // Configure plugin settings
window.DailyNotification.configure({ window.DailyNotification.configure({
storage: 'tiered', storage: 'tiered',
@@ -144,25 +148,25 @@
maxNotificationsPerDay: 3, maxNotificationsPerDay: 3,
retentionDays: 7 retentionDays: 7
}) })
.then(() => { .then(() => {
console.log('Plugin settings configured, now configuring native fetcher...'); console.log('Plugin settings configured, now configuring native fetcher...');
// Configure native fetcher with demo credentials // Configure native fetcher with demo credentials
// Note: DemoNativeFetcher uses hardcoded mock data, so this is optional // Note: DemoNativeFetcher uses hardcoded mock data, so this is optional
// but demonstrates the API. In production, this would be real credentials. // but demonstrates the API. In production, this would be real credentials.
return window.DailyNotification.configureNativeFetcher({ return window.DailyNotification.configureNativeFetcher({
apiBaseUrl: 'http://10.0.2.2:3000', // Android emulator → host localhost apiBaseUrl: 'http://10.0.2.2:3000', // Android emulator → host localhost
activeDid: 'did:ethr:0xDEMO1234567890', // Demo DID activeDid: 'did:ethr:0xDEMO1234567890', // Demo DID
jwtSecret: 'demo-jwt-secret-for-development-testing' jwtSecret: 'demo-jwt-secret-for-development-testing'
});
})
.then(() => {
status.innerHTML = 'Plugin configured successfully!<br>✅ Plugin settings<br>✅ Native fetcher (optional for demo)';
status.style.background = 'rgba(0, 255, 0, 0.3)'; // Green background
})
.catch(error => {
status.innerHTML = `Configuration failed: ${error.message}`;
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
}); });
})
.then(() => {
status.innerHTML = 'Plugin configured successfully!<br>✅ Plugin settings<br>✅ Native fetcher (optional for demo)';
status.style.background = 'rgba(0, 255, 0, 0.3)'; // Green background
})
.catch(error => {
status.innerHTML = `Configuration failed: ${error.message}`;
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
});
} catch (error) { } catch (error) {
status.innerHTML = `Configuration failed: ${error.message}`; status.innerHTML = `Configuration failed: ${error.message}`;
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
@@ -174,7 +178,7 @@
const status = document.getElementById('status'); const status = document.getElementById('status');
status.innerHTML = 'Checking plugin status...'; status.innerHTML = 'Checking plugin status...';
status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background
try { try {
if (!window.DailyNotification) { if (!window.DailyNotification) {
status.innerHTML = 'DailyNotification plugin not available'; status.innerHTML = 'DailyNotification plugin not available';
@@ -204,34 +208,34 @@
// Notification test functions // Notification test functions
function testNotification() { function testNotification() {
console.log('testNotification called'); console.log('testNotification called');
// Quick sanity check - test plugin availability // Quick sanity check - test plugin availability
if (window.Capacitor && window.Capacitor.isPluginAvailable) { if (window.Capacitor && window.Capacitor.isPluginAvailable) {
const isAvailable = window.Capacitor.isPluginAvailable('DailyNotification'); const isAvailable = window.Capacitor.isPluginAvailable('DailyNotification');
console.log('is plugin available?', isAvailable); console.log('is plugin available?', isAvailable);
} }
const status = document.getElementById('status'); const status = document.getElementById('status');
status.innerHTML = 'Testing plugin connection...'; status.innerHTML = 'Testing plugin connection...';
status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background
try { try {
if (!window.DailyNotification) { if (!window.DailyNotification) {
status.innerHTML = 'DailyNotification plugin not available'; status.innerHTML = 'DailyNotification plugin not available';
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
return; return;
} }
// Test the notification method directly // Test the notification method directly
console.log('Testing notification scheduling...'); console.log('Testing notification scheduling...');
const now = new Date(); const now = new Date();
const notificationTime = new Date(now.getTime() + 600000); // 10 minutes from now const notificationTime = new Date(now.getTime() + 600000); // 10 minutes from now
const prefetchTime = new Date(now.getTime() + 300000); // 5 minutes from now const prefetchTime = new Date(now.getTime() + 300000); // 5 minutes from now
const notificationTimeString = notificationTime.getHours().toString().padStart(2, '0') + ':' + const notificationTimeString = notificationTime.getHours().toString().padStart(2, '0') + ':' +
notificationTime.getMinutes().toString().padStart(2, '0'); notificationTime.getMinutes().toString().padStart(2, '0');
const prefetchTimeString = prefetchTime.getHours().toString().padStart(2, '0') + ':' + const prefetchTimeString = prefetchTime.getHours().toString().padStart(2, '0') + ':' +
prefetchTime.getMinutes().toString().padStart(2, '0'); prefetchTime.getMinutes().toString().padStart(2, '0');
window.DailyNotification.scheduleDailyNotification({ window.DailyNotification.scheduleDailyNotification({
time: notificationTimeString, time: notificationTimeString,
title: 'Test Notification', title: 'Test Notification',
@@ -239,18 +243,18 @@
sound: true, sound: true,
priority: 'high' priority: 'high'
}) })
.then(() => { .then(() => {
const prefetchTimeReadable = prefetchTime.toLocaleTimeString(); const prefetchTimeReadable = prefetchTime.toLocaleTimeString();
const notificationTimeReadable = notificationTime.toLocaleTimeString(); const notificationTimeReadable = notificationTime.toLocaleTimeString();
status.innerHTML = '✅ Notification scheduled!<br>' + status.innerHTML = '✅ Notification scheduled!<br>' +
'📥 Prefetch: ' + prefetchTimeReadable + ' (' + prefetchTimeString + ')<br>' + '📥 Prefetch: ' + prefetchTimeReadable + ' (' + prefetchTimeString + ')<br>' +
'🔔 Notification: ' + notificationTimeReadable + ' (' + notificationTimeString + ')'; '🔔 Notification: ' + notificationTimeReadable + ' (' + notificationTimeString + ')';
status.style.background = 'rgba(0, 255, 0, 0.3)'; // Green background status.style.background = 'rgba(0, 255, 0, 0.3)'; // Green background
}) })
.catch(error => { .catch(error => {
status.innerHTML = `Notification failed: ${error.message}`; status.innerHTML = `Notification failed: ${error.message}`;
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
}); });
} catch (error) { } catch (error) {
status.innerHTML = `Notification test failed: ${error.message}`; status.innerHTML = `Notification test failed: ${error.message}`;
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
@@ -262,23 +266,23 @@
const status = document.getElementById('status'); const status = document.getElementById('status');
status.innerHTML = 'Scheduling notification...'; status.innerHTML = 'Scheduling notification...';
status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background
try { try {
if (!window.DailyNotification) { if (!window.DailyNotification) {
status.innerHTML = 'DailyNotification plugin not available'; status.innerHTML = 'DailyNotification plugin not available';
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
return; return;
} }
// Schedule notification for 10 minutes from now (allows 5 min prefetch to fire) // Schedule notification for 10 minutes from now (allows 5 min prefetch to fire)
const now = new Date(); const now = new Date();
const notificationTime = new Date(now.getTime() + 600000); // 10 minutes from now const notificationTime = new Date(now.getTime() + 600000); // 10 minutes from now
const prefetchTime = new Date(now.getTime() + 300000); // 5 minutes from now const prefetchTime = new Date(now.getTime() + 300000); // 5 minutes from now
const notificationTimeString = notificationTime.getHours().toString().padStart(2, '0') + ':' + const notificationTimeString = notificationTime.getHours().toString().padStart(2, '0') + ':' +
notificationTime.getMinutes().toString().padStart(2, '0'); notificationTime.getMinutes().toString().padStart(2, '0');
const prefetchTimeString = prefetchTime.getHours().toString().padStart(2, '0') + ':' + const prefetchTimeString = prefetchTime.getHours().toString().padStart(2, '0') + ':' +
prefetchTime.getMinutes().toString().padStart(2, '0'); prefetchTime.getMinutes().toString().padStart(2, '0');
window.DailyNotification.scheduleDailyNotification({ window.DailyNotification.scheduleDailyNotification({
time: notificationTimeString, time: notificationTimeString,
title: 'Scheduled Notification', title: 'Scheduled Notification',
@@ -286,18 +290,18 @@
sound: true, sound: true,
priority: 'default' priority: 'default'
}) })
.then(() => { .then(() => {
const prefetchTimeReadable = prefetchTime.toLocaleTimeString(); const prefetchTimeReadable = prefetchTime.toLocaleTimeString();
const notificationTimeReadable = notificationTime.toLocaleTimeString(); const notificationTimeReadable = notificationTime.toLocaleTimeString();
status.innerHTML = '✅ Notification scheduled!<br>' + status.innerHTML = '✅ Notification scheduled!<br>' +
'📥 Prefetch: ' + prefetchTimeReadable + ' (' + prefetchTimeString + ')<br>' + '📥 Prefetch: ' + prefetchTimeReadable + ' (' + prefetchTimeString + ')<br>' +
'🔔 Notification: ' + notificationTimeReadable + ' (' + notificationTimeString + ')'; '🔔 Notification: ' + notificationTimeReadable + ' (' + notificationTimeString + ')';
status.style.background = 'rgba(0, 255, 0, 0.3)'; // Green background status.style.background = 'rgba(0, 255, 0, 0.3)'; // Green background
}) })
.catch(error => { .catch(error => {
status.innerHTML = `Scheduling failed: ${error.message}`; status.innerHTML = `Scheduling failed: ${error.message}`;
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
}); });
} catch (error) { } catch (error) {
status.innerHTML = `Scheduling test failed: ${error.message}`; status.innerHTML = `Scheduling test failed: ${error.message}`;
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
@@ -309,20 +313,20 @@
const status = document.getElementById('status'); const status = document.getElementById('status');
status.innerHTML = 'Showing reminder...'; status.innerHTML = 'Showing reminder...';
status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background
try { try {
if (!window.DailyNotification) { if (!window.DailyNotification) {
status.innerHTML = 'DailyNotification plugin not available'; status.innerHTML = 'DailyNotification plugin not available';
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
return; return;
} }
// Schedule daily reminder using scheduleDailyReminder // Schedule daily reminder using scheduleDailyReminder
const now = new Date(); const now = new Date();
const reminderTime = new Date(now.getTime() + 10000); // 10 seconds from now const reminderTime = new Date(now.getTime() + 10000); // 10 seconds from now
const timeString = reminderTime.getHours().toString().padStart(2, '0') + ':' + const timeString = reminderTime.getHours().toString().padStart(2, '0') + ':' +
reminderTime.getMinutes().toString().padStart(2, '0'); reminderTime.getMinutes().toString().padStart(2, '0');
window.DailyNotification.scheduleDailyReminder({ window.DailyNotification.scheduleDailyReminder({
id: 'daily-reminder-test', id: 'daily-reminder-test',
title: 'Daily Reminder', title: 'Daily Reminder',
@@ -333,14 +337,14 @@
priority: 'default', priority: 'default',
repeatDaily: false // Just for testing repeatDaily: false // Just for testing
}) })
.then(() => { .then(() => {
status.innerHTML = 'Daily reminder scheduled for ' + timeString + '!'; status.innerHTML = 'Daily reminder scheduled for ' + timeString + '!';
status.style.background = 'rgba(0, 255, 0, 0.3)'; // Green background status.style.background = 'rgba(0, 255, 0, 0.3)'; // Green background
}) })
.catch(error => { .catch(error => {
status.innerHTML = `Reminder failed: ${error.message}`; status.innerHTML = `Reminder failed: ${error.message}`;
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
}); });
} catch (error) { } catch (error) {
status.innerHTML = `Reminder test failed: ${error.message}`; status.innerHTML = `Reminder test failed: ${error.message}`;
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
@@ -349,67 +353,86 @@
// Permission management functions // Permission management functions
function checkPermissions() { function checkPermissions() {
console.log('checkPermissions called'); console.log('🔐 checkPermissions called');
console.log('🔐 Plugin available:', !!window.DailyNotification);
const status = document.getElementById('status'); const status = document.getElementById('status');
status.innerHTML = 'Checking permissions...'; status.innerHTML = '🔐 Checking permissions...';
status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background
try { try {
if (!window.DailyNotification) { if (!window.DailyNotification) {
status.innerHTML = 'DailyNotification plugin not available'; console.error('❌ DailyNotification plugin not available');
status.innerHTML = '❌ DailyNotification plugin not available<br>Check console for details.';
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
return; return;
} }
console.log('🔐 Calling checkPermissionStatus...');
window.DailyNotification.checkPermissionStatus() window.DailyNotification.checkPermissionStatus()
.then(result => { .then(result => {
status.innerHTML = `Permission Status:<br> console.log('✅ Permission status result:', result);
Notifications: ${result.notificationsEnabled ? '✅' : '❌'}<br> status.innerHTML = `🔐 Permission Status:<br>
Exact Alarm: ${result.exactAlarmEnabled ? '✅' : '❌'}<br> Notifications: ${result.notificationsEnabled ? '✅ YES' : '❌ NO'}<br>
Wake Lock: ${result.wakeLockEnabled ? '✅' : '❌'}<br> Exact Alarm: ${result.exactAlarmEnabled ? '✅ YES' : '❌ NO'}<br>
All Granted: ${result.allPermissionsGranted ? '✅' : '❌'}`; Wake Lock: ${result.wakeLockEnabled ? '✅ YES' : '❌ NO'}<br>
status.style.background = result.allPermissionsGranted ? All Granted: ${result.allPermissionsGranted ? '✅ YES' : '❌ NO'}`;
status.style.background = result.allPermissionsGranted ?
'rgba(0, 255, 0, 0.3)' : 'rgba(255, 165, 0, 0.3)'; // Green or orange 'rgba(0, 255, 0, 0.3)' : 'rgba(255, 165, 0, 0.3)'; // Green or orange
}) })
.catch(error => { .catch(error => {
status.innerHTML = `Permission check failed: ${error.message}`; console.error('❌ Permission check error:', error);
status.innerHTML = `❌ Permission check failed:<br>${error.message || error}`;
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
}); });
} catch (error) { } catch (error) {
status.innerHTML = `Permission check failed: ${error.message}`; console.error('❌ Permission check exception:', error);
status.innerHTML = `❌ Permission check failed:<br>${error.message || error}`;
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
} }
} }
function requestPermissions() { function requestPermissions() {
console.log('requestPermissions called'); console.log('🔐 requestPermissions called');
console.log('🔐 Plugin available:', !!window.DailyNotification);
const status = document.getElementById('status'); const status = document.getElementById('status');
status.innerHTML = 'Requesting permissions...'; status.innerHTML = '🔐 Requesting permissions...<br>You should see a system permission dialog.';
status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background
try { try {
if (!window.DailyNotification) { if (!window.DailyNotification) {
status.innerHTML = 'DailyNotification plugin not available'; console.error('❌ DailyNotification plugin not available');
status.innerHTML = '❌ DailyNotification plugin not available<br>Check console for details.';
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
return; return;
} }
console.log('🔐 Calling requestNotificationPermissions...');
window.DailyNotification.requestNotificationPermissions() window.DailyNotification.requestNotificationPermissions()
.then(() => { .then(result => {
status.innerHTML = 'Permission request completed! Check your device settings if needed.'; console.log('✅ Permission request result:', result);
status.style.background = 'rgba(0, 255, 0, 0.3)'; // Green background const granted = result.granted || result.status === 'granted';
status.innerHTML = `🔐 Permission Request Result:<br>
Status: ${result.status || 'unknown'}<br>
Granted: ${granted ? '✅ YES' : '❌ NO'}<br>
Alert: ${result.alert ? '✅' : '❌'}<br>
Badge: ${result.badge ? '✅' : '❌'}<br>
Sound: ${result.sound ? '✅' : '❌'}`;
status.style.background = granted ?
'rgba(0, 255, 0, 0.3)' : 'rgba(255, 165, 0, 0.3)'; // Green or orange
// Check permissions again after request // Check permissions again after request
setTimeout(() => { setTimeout(() => {
checkPermissions(); checkPermissions();
}, 1000); }, 1000);
}) })
.catch(error => { .catch(error => {
status.innerHTML = `Permission request failed: ${error.message}`; console.error('❌ Permission request error:', error);
status.innerHTML = `❌ Permission request failed:<br>${error.message || error}`;
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
}); });
} catch (error) { } catch (error) {
status.innerHTML = `Permission request failed: ${error.message}`; console.error('❌ Permission request exception:', error);
status.innerHTML = `❌ Permission request failed:<br>${error.message || error}`;
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
} }
} }
@@ -419,14 +442,14 @@
const status = document.getElementById('status'); const status = document.getElementById('status');
status.innerHTML = 'Opening exact alarm settings...'; status.innerHTML = 'Opening exact alarm settings...';
status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background
try { try {
if (!window.DailyNotification) { if (!window.DailyNotification) {
status.innerHTML = 'DailyNotification plugin not available'; status.innerHTML = 'DailyNotification plugin not available';
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
return; return;
} }
window.DailyNotification.openExactAlarmSettings() window.DailyNotification.openExactAlarmSettings()
.then(() => { .then(() => {
status.innerHTML = 'Exact alarm settings opened! Please enable "Allow exact alarms" and return to the app.'; status.innerHTML = 'Exact alarm settings opened! Please enable "Allow exact alarms" and return to the app.';
@@ -446,14 +469,14 @@
const status = document.getElementById('status'); const status = document.getElementById('status');
status.innerHTML = 'Checking channel status...'; status.innerHTML = 'Checking channel status...';
status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background
try { try {
if (!window.DailyNotification) { if (!window.DailyNotification) {
status.innerHTML = 'DailyNotification plugin not available'; status.innerHTML = 'DailyNotification plugin not available';
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
return; return;
} }
window.DailyNotification.isChannelEnabled() window.DailyNotification.isChannelEnabled()
.then(result => { .then(result => {
const importanceText = getImportanceText(result.importance); const importanceText = getImportanceText(result.importance);
@@ -474,14 +497,14 @@
const status = document.getElementById('status'); const status = document.getElementById('status');
status.innerHTML = 'Opening channel settings...'; status.innerHTML = 'Opening channel settings...';
status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background
try { try {
if (!window.DailyNotification) { if (!window.DailyNotification) {
status.innerHTML = 'DailyNotification plugin not available'; status.innerHTML = 'DailyNotification plugin not available';
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
return; return;
} }
window.DailyNotification.openChannelSettings() window.DailyNotification.openChannelSettings()
.then(result => { .then(result => {
if (result.opened) { if (result.opened) {
@@ -506,19 +529,19 @@
const status = document.getElementById('status'); const status = document.getElementById('status');
status.innerHTML = 'Checking comprehensive status...'; status.innerHTML = 'Checking comprehensive status...';
status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background status.style.background = 'rgba(255, 255, 0, 0.3)'; // Yellow background
try { try {
if (!window.DailyNotification) { if (!window.DailyNotification) {
status.innerHTML = 'DailyNotification plugin not available'; status.innerHTML = 'DailyNotification plugin not available';
status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background status.style.background = 'rgba(255, 0, 0, 0.3)'; // Red background
return; return;
} }
window.DailyNotification.checkStatus() window.DailyNotification.checkStatus()
.then(result => { .then(result => {
const canSchedule = result.canScheduleNow; const canSchedule = result.canScheduleNow;
const issues = []; const issues = [];
if (!result.postNotificationsGranted) { if (!result.postNotificationsGranted) {
issues.push('POST_NOTIFICATIONS permission'); issues.push('POST_NOTIFICATIONS permission');
} }
@@ -528,15 +551,15 @@
if (!result.exactAlarmsGranted) { if (!result.exactAlarmsGranted) {
issues.push('exact alarm permission'); issues.push('exact alarm permission');
} }
let statusText = `Status: ${canSchedule ? 'Ready to schedule' : 'Issues found'}`; let statusText = `Status: ${canSchedule ? 'Ready to schedule' : 'Issues found'}`;
if (issues.length > 0) { if (issues.length > 0) {
statusText += `\nIssues: ${issues.join(', ')}`; statusText += `\nIssues: ${issues.join(', ')}`;
} }
statusText += `\nChannel: ${getImportanceText(result.channelImportance)}`; statusText += `\nChannel: ${getImportanceText(result.channelImportance)}`;
statusText += `\nChannel ID: ${result.channelId}`; statusText += `\nChannel ID: ${result.channelId}`;
status.innerHTML = statusText; status.innerHTML = statusText;
status.style.background = canSchedule ? 'rgba(0, 255, 0, 0.3)' : 'rgba(255, 0, 0, 0.3)'; status.style.background = canSchedule ? 'rgba(0, 255, 0, 0.3)' : 'rgba(255, 0, 0, 0.3)';
}) })
@@ -575,7 +598,7 @@
window.checkChannelStatus = checkChannelStatus; window.checkChannelStatus = checkChannelStatus;
window.openChannelSettings = openChannelSettings; window.openChannelSettings = openChannelSettings;
window.checkComprehensiveStatus = checkComprehensiveStatus; window.checkComprehensiveStatus = checkComprehensiveStatus;
console.log('Functions attached to window:', { console.log('Functions attached to window:', {
testPlugin: typeof window.testPlugin, testPlugin: typeof window.testPlugin,
configurePlugin: typeof window.configurePlugin, configurePlugin: typeof window.configurePlugin,
@@ -585,16 +608,16 @@
showReminder: typeof window.showReminder showReminder: typeof window.showReminder
}); });
</script> </script>
<!-- Capacitor Runtime --> <!-- Capacitor Runtime -->
<script src="capacitor.js"></script> <script src="capacitor.js"></script>
<script src="capacitor_plugins.js"></script> <script src="capacitor_plugins.js"></script>
<script> <script>
// Wait for Capacitor to be ready // Wait for Capacitor to be ready
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function () {
console.log('DOM loaded, waiting for Capacitor...'); console.log('DOM loaded, waiting for Capacitor...');
// Wait for Capacitor to be available // Wait for Capacitor to be available
function initPlugin() { function initPlugin() {
if (window.Capacitor && window.Capacitor.Plugins && window.Capacitor.Plugins.DailyNotification) { if (window.Capacitor && window.Capacitor.Plugins && window.Capacitor.Plugins.DailyNotification) {
@@ -608,9 +631,10 @@
setTimeout(initPlugin, 100); setTimeout(initPlugin, 100);
} }
} }
initPlugin(); initPlugin();
}); });
</script> </script>
</body> </body>
</html>
</html>