feat(android): implement plugin diagnostics and fix Vue 3 compatibility

- Add runPluginDiagnostics and openConsole methods to HomeView.vue - Convert ActionCard.vue from vue-facing-decorator to Composition API - Enhance App.vue with improved plugin detection and error handling - Add simplified DailyNotificationPlugin.java with basic methods - Fix plugin registration in capacitor.plugins.json - Remove error dialogs, rely on console logging for diagnostics The Plugin Diagnostics button now provides detailed platform and plugin status information.
2025-10-16 10:33:49 +00:00
parent 1e6c4bf7fc
commit 9328bffa68
4 changed files with 162 additions and 27 deletions
--- a/test-apps/daily-notification-test/android/app/src/main/java/com/timesafari/dailynotification/test/DailyNotificationPlugin.java
+++ b/test-apps/daily-notification-test/android/app/src/main/java/com/timesafari/dailynotification/test/DailyNotificationPlugin.java
@@ -0,0 +1,42 @@
+package com.timesafari.dailynotification.test;
+
+import com.getcapacitor.JSObject;
+import com.getcapacitor.Plugin;
+import com.getcapacitor.PluginCall;
+import com.getcapacitor.PluginMethod;
+import com.getcapacitor.annotation.CapacitorPlugin;
+
+@CapacitorPlugin(name = "DailyNotification")
+public class DailyNotificationPlugin extends Plugin {
+
+    @Override
+    public void load() {
+        super.load();
+        // Log that the plugin has loaded
+        System.out.println("DN|PLUGIN_LOAD_START");
+    }
+
+    @PluginMethod
+    public void echo(PluginCall call) {
+        String value = call.getString("value");
+        JSObject ret = new JSObject();
+        ret.put("value", value);
+        call.resolve(ret);
+    }
+
+    @PluginMethod
+    public void checkStatus(PluginCall call) {
+        JSObject ret = new JSObject();
+        ret.put("status", "OK from native plugin");
+        call.resolve(ret);
+    }
+
+    @PluginMethod
+    public void scheduleNotification(PluginCall call) {
+        String title = call.getString("title");
+        String message = call.getString("message");
+        JSObject ret = new JSObject();
+        ret.put("scheduleResult", "Notification '" + title + "' scheduled with message '" + message + "'");
+        call.resolve(ret);
+    }
+}
--- a/test-apps/daily-notification-test/src/App.vue
+++ b/test-apps/daily-notification-test/src/App.vue
@@ -62,13 +62,29 @@ const initializeApp = async (): Promise<void> => {
    console.log('🔧 Native Platform:', isNative)
    
    // Check if DailyNotification plugin is available
-    if (isNative && (window as any).DailyNotification) {
-      console.log('✅ DailyNotification plugin available')
-      // Initialize plugin status check
-      await checkPluginStatus()
-    } else if (isNative) {
-      console.warn('⚠️ DailyNotification plugin not available')
-      appStore.setError('DailyNotification plugin not loaded. Please restart the app.')
+    if (isNative) {
+      // Wait a bit for Capacitor to fully initialize
+      await new Promise(resolve => setTimeout(resolve, 100))
+      
+      // Try multiple ways to access the plugin
+      const plugin = (window as any).DailyNotification || 
+                    (window as any).Capacitor?.Plugins?.DailyNotification ||
+                    (window as any).Capacitor?.Plugins?.['DailyNotification']
+      
+      console.log('🔍 Plugin detection debug:')
+      console.log('  - window.DailyNotification:', (window as any).DailyNotification)
+      console.log('  - Capacitor.Plugins:', (window as any).Capacitor?.Plugins)
+      console.log('  - Available plugins:', Object.keys((window as any).Capacitor?.Plugins || {}))
+      
+      if (plugin) {
+        console.log('✅ DailyNotification plugin available')
+        // Initialize plugin status check
+        await checkPluginStatus()
+      } else {
+        console.warn('⚠️ DailyNotification plugin not available')
+        // Don't show error dialog - just log the issue
+        console.log('🔍 Plugin not found, but continuing without error dialog')
+      }
    } else {
      console.log('🌐 Running in web mode - plugin not available')
    }
@@ -83,10 +99,17 @@ const initializeApp = async (): Promise<void> => {

 const checkPluginStatus = async (): Promise<void> => {
  try {
-    if ((window as any).DailyNotification) {
-      const status = await (window as any).DailyNotification.checkStatus()
+    // Try multiple ways to access the plugin
+    const plugin = (window as any).DailyNotification || 
+                  (window as any).Capacitor?.Plugins?.DailyNotification ||
+                  (window as any).Capacitor?.Plugins?.['DailyNotification']
+    
+    if (plugin) {
+      const status = await plugin.checkStatus()
      appStore.setNotificationStatus(status)
      console.log('📊 Plugin status:', status)
+    } else {
+      console.warn('⚠️ Plugin not accessible for status check')
    }
  } catch (error) {
    console.error('❌ Plugin status check failed:', error)
--- a/test-apps/daily-notification-test/src/components/cards/ActionCard.vue
+++ b/test-apps/daily-notification-test/src/components/cards/ActionCard.vue
@@ -25,27 +25,25 @@
  </div>
 </template>

-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
+<script setup lang="ts">
+interface Props {
+  icon: string
+  title: string
+  description: string
+  loading?: boolean
+}

-@Component
-export default class ActionCard extends Vue {
-  @Prop({ required: true })
-  icon!: string
+const props = withDefaults(defineProps<Props>(), {
+  loading: false
+})

-  @Prop({ required: true })
-  title!: string
+const emit = defineEmits<{
+  click: []
+}>()

-  @Prop({ required: true })
-  description!: string
-
-  @Prop({ default: false })
-  loading!: boolean
-
-  handleClick(): void {
-    if (!this.loading) {
-      this.$emit('click')
-    }
+const handleClick = (): void => {
+  if (!props.loading) {
+    emit('click')
  }
 }
 </script>
--- a/test-apps/daily-notification-test/src/views/HomeView.vue
+++ b/test-apps/daily-notification-test/src/views/HomeView.vue
@@ -78,6 +78,23 @@
    <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>
@@ -188,6 +205,61 @@ export default class HomeView extends Vue {
      throw error
    }
  }
+
+  async runPluginDiagnostics(): Promise<void> {
+    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) {
+        // Try multiple ways to access the plugin
+        const plugin = (window as any).DailyNotification ||
+                      (window as any).Capacitor?.Plugins?.DailyNotification ||
+                      (window as any).Capacitor?.Plugins?.['DailyNotification']
+
+        console.log('🔍 Plugin detection debug:')
+        console.log('  - window.DailyNotification:', (window as any).DailyNotification)
+        console.log('  - Capacitor.Plugins:', (window as any).Capacitor?.Plugins)
+        console.log('  - Available plugins:', Object.keys((window as any).Capacitor?.Plugins || {}))
+
+        if (plugin) {
+          console.log('✅ DailyNotification plugin available')
+          
+          // Test the checkStatus method
+          try {
+            const status = await plugin.checkStatus()
+            console.log('📊 Plugin status check result:', status)
+            alert(`✅ Plugin Diagnostics Complete!\n\nPlatform: ${platform}\nPlugin Available: Yes\nStatus: ${JSON.stringify(status, 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}`)
+          }
+        } else {
+          console.warn('⚠️ DailyNotification plugin not available')
+          alert(`❌ Plugin Diagnostics Complete!\n\nPlatform: ${platform}\nPlugin Available: No\nAvailable Plugins: ${Object.keys((window as any).Capacitor?.Plugins || {}).join(', ')}`)
+        }
+      } 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}`)
+    }
+  }
+
+  openConsole(): void {
+    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.')
+  }
 }
 </script>