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.
460 lines
15 KiB
460 lines
15 KiB
<!--
|
|
/**
|
|
* Home View - Main Dashboard
|
|
*
|
|
* Platform-neutral home view with quick actions and plugin diagnostics
|
|
*
|
|
* @author Matthew Raymer
|
|
* @version 1.0.0
|
|
*/
|
|
-->
|
|
|
|
<template>
|
|
<div class="home-view">
|
|
<!-- Welcome Section -->
|
|
<div class="welcome-section">
|
|
<h1 class="welcome-title">
|
|
🔔 Daily Notification Test
|
|
</h1>
|
|
<p class="welcome-subtitle">
|
|
Vue 3 + Capacitor + DailyNotification Plugin
|
|
</p>
|
|
<div class="platform-info">
|
|
<span class="platform-badge" :class="platformClass">
|
|
{{ platformName }}
|
|
</span>
|
|
<span class="status-badge" :class="statusClass">
|
|
{{ statusText }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="quick-actions">
|
|
<h2 class="section-title">Quick Actions</h2>
|
|
<div class="action-grid">
|
|
<ActionCard
|
|
icon="📅"
|
|
title="Schedule Notification"
|
|
description="Schedule a new daily notification"
|
|
@click="navigateToSchedule"
|
|
:loading="isScheduling"
|
|
/>
|
|
<ActionCard
|
|
icon="📊"
|
|
title="Check Status"
|
|
description="View notification system status"
|
|
@click="checkSystemStatus"
|
|
:loading="isCheckingStatus"
|
|
/>
|
|
<ActionCard
|
|
icon="🔔"
|
|
title="View Notifications"
|
|
description="Manage scheduled notifications"
|
|
@click="navigateToNotifications"
|
|
/>
|
|
<ActionCard
|
|
icon="📋"
|
|
title="View History"
|
|
description="Check notification history"
|
|
@click="navigateToHistory"
|
|
/>
|
|
<ActionCard
|
|
icon="📜"
|
|
title="View Logs"
|
|
description="Check system logs and debug info"
|
|
@click="navigateToLogs"
|
|
/>
|
|
<ActionCard
|
|
icon="⚙️"
|
|
title="Settings"
|
|
description="Configure app preferences"
|
|
@click="navigateToSettings"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- System Status -->
|
|
<div class="system-status">
|
|
<h2 class="section-title">System Status</h2>
|
|
<StatusCard :status="systemStatus" @refresh="refreshSystemStatus" />
|
|
|
|
<!-- Diagnostic Actions -->
|
|
<div class="section">
|
|
<h2 class="section-title">🔧 Diagnostics</h2>
|
|
<ActionCard
|
|
title="Plugin Diagnostics"
|
|
description="Check plugin loading and availability"
|
|
button-text="Run Diagnostics"
|
|
@click="runPluginDiagnostics"
|
|
/>
|
|
<ActionCard
|
|
title="View Console Logs"
|
|
description="Open browser console for detailed logs"
|
|
button-text="Open Console"
|
|
@click="openConsole"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref, onMounted } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useAppStore } from '@/stores/app'
|
|
import ActionCard from '@/components/cards/ActionCard.vue'
|
|
import StatusCard from '@/components/cards/StatusCard.vue'
|
|
|
|
const router = useRouter()
|
|
const appStore = useAppStore()
|
|
|
|
const isScheduling = ref(false)
|
|
const isCheckingStatus = ref(false)
|
|
|
|
const platformName = computed(() => {
|
|
const platform = appStore.platform
|
|
return platform.charAt(0).toUpperCase() + platform.slice(1)
|
|
})
|
|
|
|
const platformClass = computed(() => `platform-${appStore.platform}`)
|
|
|
|
const statusClass = computed(() => {
|
|
const status = appStore.notificationStatus
|
|
if (!status) return 'unknown'
|
|
if (status.canScheduleNow) return 'ready'
|
|
return 'not-ready'
|
|
})
|
|
|
|
const statusText = computed(() => {
|
|
const status = appStore.notificationStatus
|
|
if (!status) return 'Unknown'
|
|
if (status.canScheduleNow) return 'Ready'
|
|
return 'Not Ready'
|
|
})
|
|
|
|
const systemStatus = computed(() => {
|
|
const status = appStore.notificationStatus
|
|
if (!status) {
|
|
return [
|
|
{ label: 'Platform', value: platformName.value, status: 'info' },
|
|
{ label: 'Plugin', value: 'Not Available', status: 'error' }
|
|
]
|
|
}
|
|
|
|
return [
|
|
{ label: 'Platform', value: platformName.value, status: 'info' },
|
|
{ label: 'Plugin', value: 'Available', status: 'success' },
|
|
{ label: 'Permissions', value: status.postNotificationsGranted ? 'Granted' : 'Not Granted', status: status.postNotificationsGranted ? 'success' : 'warning' },
|
|
{ label: 'Can Schedule', value: status.canScheduleNow ? 'Yes' : 'No', status: status.canScheduleNow ? 'success' : 'warning' },
|
|
{ label: 'Next Scheduled', value: status.nextScheduledAt ? new Date(status.nextScheduledAt).toLocaleTimeString() : 'None', status: 'info' }
|
|
]
|
|
})
|
|
|
|
const navigateToSchedule = (): void => {
|
|
console.log('🔄 CLICK: Navigate to Schedule')
|
|
router.push('/schedule')
|
|
}
|
|
|
|
const navigateToNotifications = (): void => {
|
|
console.log('🔄 CLICK: Navigate to Notifications')
|
|
router.push('/notifications')
|
|
}
|
|
|
|
const navigateToHistory = (): void => {
|
|
console.log('🔄 CLICK: Navigate to History')
|
|
router.push('/history')
|
|
}
|
|
|
|
const navigateToLogs = (): void => {
|
|
console.log('🔄 CLICK: Navigate to Logs')
|
|
router.push('/logs')
|
|
}
|
|
|
|
const navigateToSettings = (): void => {
|
|
console.log('🔄 CLICK: Navigate to Settings')
|
|
router.push('/settings')
|
|
}
|
|
|
|
const checkSystemStatus = async (): Promise<void> => {
|
|
console.log('🔄 CLICK: Check System Status')
|
|
isCheckingStatus.value = true
|
|
|
|
try {
|
|
console.log('🔧 Checking system status...')
|
|
|
|
// Use the same detection logic as runPluginDiagnostics
|
|
const { Capacitor } = await import('@capacitor/core')
|
|
const platform = Capacitor.getPlatform()
|
|
const isNative = platform !== 'web'
|
|
|
|
if (isNative) {
|
|
console.log('🔧 Native platform detected, checking plugin availability...')
|
|
|
|
// Check if DailyNotification plugin is available
|
|
const { DailyNotification } = await import('@timesafari/daily-notification-plugin')
|
|
const plugin = DailyNotification
|
|
const isPluginAvailable = plugin && typeof plugin.getNotificationStatus === 'function'
|
|
console.log('🔧 DailyNotification plugin check:', isPluginAvailable ? 'Available' : 'Not Available')
|
|
console.log('🔧 Plugin object:', plugin)
|
|
|
|
if (plugin) {
|
|
console.log('✅ Plugin available, checking status...')
|
|
try {
|
|
const status = await plugin.getNotificationStatus()
|
|
const permissions = await plugin.checkPermissions()
|
|
const exactAlarmStatus = await plugin.getExactAlarmStatus()
|
|
|
|
console.log('📊 Plugin status object:', status)
|
|
console.log('📊 Status values:')
|
|
console.log(' - isEnabled:', status.isEnabled)
|
|
console.log(' - isScheduled:', status.isScheduled)
|
|
console.log(' - lastNotificationTime:', status.lastNotificationTime)
|
|
console.log(' - nextNotificationTime:', status.nextNotificationTime)
|
|
console.log(' - pending:', status.pending)
|
|
console.log(' - error:', status.error)
|
|
|
|
console.log('📊 Plugin permissions:', permissions)
|
|
console.log('📊 Exact alarm status:', exactAlarmStatus)
|
|
|
|
// Map plugin response to app store format
|
|
const mappedStatus = {
|
|
canScheduleNow: status.isEnabled ?? false,
|
|
postNotificationsGranted: permissions.notifications === 'granted',
|
|
channelEnabled: true, // Default for now
|
|
channelImportance: 3, // Default for now
|
|
channelId: 'daily-notifications',
|
|
exactAlarmsGranted: exactAlarmStatus.enabled,
|
|
exactAlarmsSupported: exactAlarmStatus.supported,
|
|
androidVersion: 33, // Default for now
|
|
nextScheduledAt: typeof status.nextNotificationTime === 'number'
|
|
? status.nextNotificationTime
|
|
: await status.nextNotificationTime
|
|
}
|
|
|
|
// Update the app store status - even if permissions aren't granted
|
|
appStore.setNotificationStatus(mappedStatus)
|
|
console.log('✅ System status updated successfully')
|
|
|
|
// Log permission status for debugging
|
|
if (!mappedStatus.postNotificationsGranted) {
|
|
console.warn('⚠️ Notification permissions not granted - user needs to enable in settings')
|
|
console.log('🔧 Testing permission request...')
|
|
try {
|
|
await plugin.requestPermissions()
|
|
console.log('✅ Permission request completed')
|
|
} catch (permError) {
|
|
console.error('❌ Permission request failed:', permError)
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('❌ Plugin status check failed:', error)
|
|
// Keep existing status or set error state
|
|
}
|
|
} else {
|
|
console.warn('⚠️ DailyNotification plugin not available')
|
|
// Reset to error state
|
|
appStore.setNotificationStatus(null)
|
|
}
|
|
} else {
|
|
console.log('🌐 Web platform - plugin not available')
|
|
appStore.setNotificationStatus(null)
|
|
}
|
|
|
|
console.log('🔧 System status check completed')
|
|
} catch (error) {
|
|
console.error('❌ System status check failed:', error)
|
|
} finally {
|
|
isCheckingStatus.value = false
|
|
}
|
|
}
|
|
|
|
const refreshSystemStatus = async (): Promise<void> => {
|
|
console.log('🔄 CLICK: Refresh System Status')
|
|
await checkSystemStatus()
|
|
}
|
|
|
|
const runPluginDiagnostics = async (): Promise<void> => {
|
|
console.log('🔄 CLICK: Plugin Diagnostics - METHOD CALLED!')
|
|
console.log('🔄 FUNCTION START: runPluginDiagnostics called at', new Date().toISOString())
|
|
try {
|
|
console.log('🔧 Running plugin diagnostics...')
|
|
console.log('🔧 BUTTON CLICKED - METHOD CALLED!')
|
|
|
|
// Check if we're on a native platform
|
|
const { Capacitor } = await import('@capacitor/core')
|
|
const platform = Capacitor.getPlatform()
|
|
const isNative = Capacitor.isNativePlatform()
|
|
|
|
console.log('📱 Platform:', platform)
|
|
console.log('🔧 Native Platform:', isNative)
|
|
|
|
if (isNative) {
|
|
// Use proper plugin import
|
|
const { DailyNotification } = await import('@timesafari/daily-notification-plugin')
|
|
const plugin = DailyNotification
|
|
const isPluginAvailable = plugin && typeof plugin.getNotificationStatus === 'function'
|
|
|
|
console.log('🔍 Plugin detection debug:')
|
|
console.log(' - DailyNotification plugin:', isPluginAvailable ? 'Available' : 'Not Available')
|
|
console.log(' - Plugin object:', plugin)
|
|
|
|
if (plugin) {
|
|
console.log('✅ DailyNotification plugin available')
|
|
|
|
// Get all available plugins
|
|
const allPlugins = Object.keys((window as Window & { Capacitor?: { Plugins?: Record<string, unknown> } }).Capacitor?.Plugins || {})
|
|
console.log('📋 All available plugins:', allPlugins)
|
|
|
|
// Test the checkStatus method
|
|
try {
|
|
const status = await plugin.getNotificationStatus()
|
|
console.log('📊 Plugin status check result:', status)
|
|
|
|
// Create detailed plugin report
|
|
const pluginReport = {
|
|
platform: platform,
|
|
nativePlatform: isNative,
|
|
dailyNotificationAvailable: true,
|
|
allAvailablePlugins: allPlugins,
|
|
dailyNotificationStatus: status,
|
|
capacitorVersion: (window as Window & { Capacitor?: { getPlatform?: () => string } }).Capacitor?.getPlatform ? 'Available' : 'Unknown',
|
|
webViewInfo: {
|
|
userAgent: navigator.userAgent,
|
|
platform: navigator.platform
|
|
}
|
|
}
|
|
|
|
alert(`✅ Plugin Diagnostics Complete!\n\n` +
|
|
`Platform: ${platform}\n` +
|
|
`Native Platform: ${isNative}\n` +
|
|
`DailyNotification Plugin: Available\n` +
|
|
`All Plugins (${allPlugins.length}): ${allPlugins.join(', ')}\n\n` +
|
|
`DailyNotification Status:\n${JSON.stringify(status, null, 2)}\n\n` +
|
|
`Full Report:\n${JSON.stringify(pluginReport, null, 2)}`)
|
|
} catch (error) {
|
|
console.error('❌ Plugin status check failed:', error)
|
|
alert(`⚠️ Plugin Diagnostics Complete!\n\nPlatform: ${platform}\nPlugin Available: Yes\nStatus Check Failed: ${error}\n\nAll Available Plugins: ${allPlugins.join(', ')}`)
|
|
}
|
|
} else {
|
|
console.warn('⚠️ DailyNotification plugin not available')
|
|
const allPlugins = Object.keys((window as Window & { Capacitor?: { Plugins?: Record<string, unknown> } }).Capacitor?.Plugins || {})
|
|
alert(`❌ Plugin Diagnostics Complete!\n\nPlatform: ${platform}\nDailyNotification Plugin: Not Available\n\nAll Available Plugins (${allPlugins.length}):\n${allPlugins.join(', ')}\n\nCapacitor Plugins Object:\n${JSON.stringify((window as Window & { Capacitor?: { Plugins?: Record<string, unknown> } }).Capacitor?.Plugins || {}, null, 2)}`)
|
|
}
|
|
} else {
|
|
console.log('🌐 Running in web mode - plugin not available')
|
|
alert(`ℹ️ Plugin Diagnostics Complete!\n\nPlatform: ${platform}\nNative Platform: No\nPlugin Available: No (Web mode)`)
|
|
}
|
|
} catch (error) {
|
|
console.error('❌ Plugin diagnostics failed:', error)
|
|
alert(`❌ Plugin Diagnostics Failed!\n\nError: ${error}`)
|
|
}
|
|
}
|
|
|
|
const openConsole = (): void => {
|
|
console.log('🔄 CLICK: Open Console - METHOD CALLED!')
|
|
console.log('📖 Console opened - check browser developer tools for detailed logs')
|
|
alert('📖 Console Logs\n\nOpen your browser\'s Developer Tools (F12) and check the Console tab for detailed diagnostic information.')
|
|
}
|
|
|
|
// Initialize system status when component mounts
|
|
onMounted(async () => {
|
|
console.log('🏠 HomeView mounted - checking initial system status...')
|
|
await checkSystemStatus()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.home-view {
|
|
padding: 20px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.welcome-section {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.welcome-title {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: white;
|
|
margin: 0 0 8px 0;
|
|
}
|
|
|
|
.welcome-subtitle {
|
|
font-size: 16px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
margin: 0 0 20px 0;
|
|
}
|
|
|
|
.platform-info {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.platform-badge {
|
|
padding: 6px 12px;
|
|
border-radius: 16px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.status-badge {
|
|
padding: 6px 12px;
|
|
border-radius: 16px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.quick-actions {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: white;
|
|
margin: 0 0 20px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.action-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.system-status {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
/* Mobile responsiveness */
|
|
@media (max-width: 768px) {
|
|
.home-view {
|
|
padding: 16px;
|
|
}
|
|
|
|
.welcome-title {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.action-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.platform-info {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style>
|
|
|