fix(android-test): register DailyNotification plugin to prevent app crashes
## 🐛 Bug Fix - App was crashing with NullPointerException due to missing plugin registration - DailyNotification plugin was not registered in capacitor.plugins.json - App was trying to access plugin methods that didn't exist ## ✅ Solution - Added DailyNotification plugin registration to capacitor.plugins.json - Plugin now properly registered with class: com.timesafari.dailynotification.DailyNotificationPlugin - App can now access plugin methods without crashing ## 🔧 Technical Details - Fixed capacitor.plugins.json to include plugin registration - Rebuilt and reinstalled app with proper plugin integration - App now loads Vue 3 interface with header navigation The app should now display the proper Vue 3 interface with: - Header navigation (Home, Schedule, Notifications, Status, History, Logs, Settings) - Copy to clipboard functionality in LogsView - All plugin methods working correctly
This commit is contained in:
Matthew Raymer
@@ -64,7 +64,8 @@ export default class AppHeader extends Vue {
|
||||
{ name: 'Schedule', path: '/schedule', label: 'Schedule', icon: '📅' },
|
||||
{ name: 'Notifications', path: '/notifications', label: 'Notifications', icon: '📱' },
|
||||
{ name: 'Status', path: '/status', label: 'Status', icon: '📊' },
|
||||
{ name: 'History', path: '/history', label: 'History', icon: '📋' }
|
||||
{ name: 'History', path: '/history', label: 'History', icon: '📋' },
|
||||
{ name: 'Logs', path: '/logs', label: 'Logs', icon: '📜' }
|
||||
]
|
||||
|
||||
get statusClass(): string {
|
||||
|
||||
@@ -1,476 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>TimeSafari Daily Notification - Android Test</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
h1 {
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.ui-section {
|
||||
margin-bottom: 30px;
|
||||
padding: 20px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
background: #fafafa;
|
||||
}
|
||||
.ui-section h3 {
|
||||
margin: 0 0 15px 0;
|
||||
color: #1976d2;
|
||||
border-bottom: 2px solid #1976d2;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.status {
|
||||
background: #e3f2fd;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #1976d2;
|
||||
}
|
||||
.button-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
button {
|
||||
background: #1976d2;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 16px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
button:hover {
|
||||
background: #1565c0;
|
||||
}
|
||||
button:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.btn-secondary {
|
||||
background: #f5f5f5;
|
||||
color: #333;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
.btn-tertiary {
|
||||
background: transparent;
|
||||
color: #666;
|
||||
}
|
||||
.btn-tertiary:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.log-container {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 6px;
|
||||
padding: 15px;
|
||||
height: 300px;
|
||||
overflow-y: auto;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
.timestamp {
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
}
|
||||
pre {
|
||||
background: #e9ecef;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
margin: 5px 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.clear-button {
|
||||
background: #dc3545;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.clear-button:hover {
|
||||
background: #c82333;
|
||||
}
|
||||
.permission-status {
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
.status-granted {
|
||||
background: #e8f5e8;
|
||||
border: 1px solid #4caf50;
|
||||
}
|
||||
.status-denied {
|
||||
background: #ffebee;
|
||||
border: 1px solid #f44336;
|
||||
}
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.status-icon {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.permission-details {
|
||||
margin: 12px 0;
|
||||
}
|
||||
.permission-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.granted {
|
||||
color: #4caf50;
|
||||
font-weight: bold;
|
||||
}
|
||||
.denied {
|
||||
color: #f44336;
|
||||
font-weight: bold;
|
||||
}
|
||||
.settings-panel {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
.setting-group {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.setting-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
.checkbox-group {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.preference-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 16px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.setting-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.status-dashboard {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
.status-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.status-item {
|
||||
padding: 16px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.status-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.status-value {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.status-value.active {
|
||||
color: #4caf50;
|
||||
}
|
||||
.status-value.warning {
|
||||
color: #ff9800;
|
||||
}
|
||||
.status-value.error {
|
||||
color: #f44336;
|
||||
}
|
||||
.performance-metrics {
|
||||
margin: 24px 0;
|
||||
padding: 16px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.metric-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.metric-label {
|
||||
color: #666;
|
||||
}
|
||||
.metric-value {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.error-display {
|
||||
background: #ffebee;
|
||||
border: 1px solid #f44336;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
.error-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.error-content h3 {
|
||||
margin: 0 0 8px 0;
|
||||
color: #d32f2f;
|
||||
}
|
||||
.error-message {
|
||||
color: #666;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.error-code {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
font-family: monospace;
|
||||
}
|
||||
.error-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.dialog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
.dialog-content {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
max-width: 400px;
|
||||
margin: 20px;
|
||||
}
|
||||
.dialog-content h2 {
|
||||
margin: 0 0 16px 0;
|
||||
color: #333;
|
||||
}
|
||||
.dialog-content p {
|
||||
margin: 0 0 16px 0;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.dialog-content ul {
|
||||
margin: 0 0 24px 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.dialog-content li {
|
||||
margin: 8px 0;
|
||||
color: #666;
|
||||
}
|
||||
.dialog-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.status-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.preference-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.checkbox-group {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.metrics-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>📱 TimeSafari Daily Notification - Android Test</h1>
|
||||
|
||||
<div class="status" id="status">Ready</div>
|
||||
|
||||
<!-- Permission Management Section -->
|
||||
<div class="ui-section">
|
||||
<h3>🔐 Permission Management</h3>
|
||||
<div id="permission-status-container"></div>
|
||||
<div class="button-grid">
|
||||
<button id="check-permissions" class="btn-secondary">Check Permissions</button>
|
||||
<button id="request-permissions" class="btn-primary">Request Permissions</button>
|
||||
<button id="open-settings" class="btn-tertiary">Open Settings</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Configuration Section -->
|
||||
<div class="ui-section">
|
||||
<h3>⚙️ Configuration</h3>
|
||||
<div id="settings-container"></div>
|
||||
<div class="button-grid">
|
||||
<button id="configure">Configure TimeSafari</button>
|
||||
<button id="test-notification" class="btn-secondary">Test Notification</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Monitoring Section -->
|
||||
<div class="ui-section">
|
||||
<h3>📊 Status Monitoring</h3>
|
||||
<div id="status-container"></div>
|
||||
<div class="button-grid">
|
||||
<button id="check-status">Check Status</button>
|
||||
<button id="refresh-status" class="btn-secondary">Refresh</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Platform-Specific Section -->
|
||||
<div class="ui-section">
|
||||
<h3>🤖 Android-Specific Features</h3>
|
||||
<div id="battery-dialog-container"></div>
|
||||
<div class="button-grid">
|
||||
<button id="battery-status">Check Battery Optimization</button>
|
||||
<button id="exact-alarm-status">Check Exact Alarm</button>
|
||||
<button id="reboot-recovery">Check Reboot Recovery</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Testing Section -->
|
||||
<div class="ui-section">
|
||||
<h3>🧪 Testing & Debug</h3>
|
||||
<div class="button-grid">
|
||||
<button id="schedule">Schedule Community Notifications</button>
|
||||
<button id="endorser-api">Test Endorser.ch API</button>
|
||||
<button id="callbacks">Register Callbacks</button>
|
||||
<button id="performance">Performance Metrics</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Phase 4: TimeSafari Components Testing -->
|
||||
<div class="ui-section">
|
||||
<h3>🚀 Phase 4: TimeSafari Components</h3>
|
||||
<div class="button-grid">
|
||||
<button id="test-security-manager" class="btn-primary">Test SecurityManager</button>
|
||||
<button id="test-endorser-api-client" class="btn-primary">Test EndorserAPIClient</button>
|
||||
<button id="test-notification-manager" class="btn-primary">Test NotificationManager</button>
|
||||
<button id="test-phase4-integration" class="btn-secondary">Test Complete Integration</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Static Daily Reminders Testing -->
|
||||
<div class="ui-section">
|
||||
<h3>⏰ Static Daily Reminders</h3>
|
||||
<div class="button-grid">
|
||||
<button id="schedule-reminder" class="btn-primary">Schedule Daily Reminder</button>
|
||||
<button id="cancel-reminder" class="btn-primary">Cancel Reminder</button>
|
||||
<button id="get-reminders" class="btn-primary">Get Scheduled Reminders</button>
|
||||
<button id="update-reminder" class="btn-primary">Update Reminder</button>
|
||||
</div>
|
||||
<div class="form-section">
|
||||
<h4>Reminder Configuration</h4>
|
||||
<div class="form-group">
|
||||
<label for="reminder-id">Reminder ID:</label>
|
||||
<input type="text" id="reminder-id" value="morning_checkin" placeholder="e.g., morning_checkin">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="reminder-title">Title:</label>
|
||||
<input type="text" id="reminder-title" value="Good Morning!" placeholder="Reminder title">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="reminder-body">Body:</label>
|
||||
<input type="text" id="reminder-body" value="Time to check your TimeSafari community updates" placeholder="Reminder message">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="reminder-time">Time (HH:mm):</label>
|
||||
<input type="text" id="reminder-time" value="09:00" placeholder="09:00">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<input type="checkbox" id="reminder-sound" checked> Sound
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" id="reminder-vibration" checked> Vibration
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="reminder-priority">Priority:</label>
|
||||
<select id="reminder-priority">
|
||||
<option value="low">Low</option>
|
||||
<option value="normal" selected>Normal</option>
|
||||
<option value="high">High</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<input type="checkbox" id="reminder-repeat" checked> Repeat Daily
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error Handling Section -->
|
||||
<div class="ui-section">
|
||||
<h3>⚠️ Error Handling</h3>
|
||||
<div id="error-container"></div>
|
||||
</div>
|
||||
|
||||
<!-- Log Section -->
|
||||
<div class="ui-section">
|
||||
<h3>📝 Activity Log</h3>
|
||||
<div class="log-container" id="log"></div>
|
||||
<button class="clear-button" id="clear-log">Clear Log</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Permission Dialog -->
|
||||
<div id="permission-dialog-container"></div>
|
||||
|
||||
<script type="module" src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -54,6 +54,15 @@ const routes: RouteRecordRaw[] = [
|
||||
requiresAuth: false
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/logs',
|
||||
name: 'Logs',
|
||||
component: () => import('@/views/LogsView.vue'),
|
||||
meta: {
|
||||
title: 'Android Logs',
|
||||
requiresAuth: false
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/settings',
|
||||
name: 'Settings',
|
||||
|
||||
@@ -51,6 +51,12 @@
|
||||
description="See notification delivery history"
|
||||
@click="navigateToHistory"
|
||||
/>
|
||||
<ActionCard
|
||||
icon="📜"
|
||||
title="View Logs"
|
||||
description="View and copy Android logs"
|
||||
@click="navigateToLogs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -163,6 +169,10 @@ export default class HomeView extends Vue {
|
||||
navigateToHistory(): void {
|
||||
this.$router.push('/history')
|
||||
}
|
||||
|
||||
navigateToLogs(): void {
|
||||
this.$router.push('/logs')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
629
test-apps/android-test/src/views/LogsView.vue
Normal file
629
test-apps/android-test/src/views/LogsView.vue
Normal file
@@ -0,0 +1,629 @@
|
||||
<!--
|
||||
/**
|
||||
* Logs View - View and Copy Android Logs
|
||||
*
|
||||
* @author Matthew Raymer
|
||||
* @version 1.0.0
|
||||
*/
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="logs-view">
|
||||
<div class="view-header">
|
||||
<h1 class="page-title">📋 Android Logs</h1>
|
||||
<p class="page-subtitle">View and copy DailyNotification plugin logs</p>
|
||||
</div>
|
||||
|
||||
<div class="logs-controls">
|
||||
<button
|
||||
class="control-button refresh-button"
|
||||
@click="refreshLogs"
|
||||
:disabled="isRefreshing"
|
||||
>
|
||||
<span v-if="isRefreshing">🔄</span>
|
||||
<span v-else>🔄</span>
|
||||
{{ isRefreshing ? 'Refreshing...' : 'Refresh Logs' }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="control-button copy-button"
|
||||
@click="copyLogsToClipboard"
|
||||
:disabled="!hasLogs || isCopying"
|
||||
>
|
||||
<span v-if="isCopying">📋</span>
|
||||
<span v-else>📋</span>
|
||||
{{ isCopying ? 'Copying...' : 'Copy to Clipboard' }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="control-button clear-button"
|
||||
@click="clearLogs"
|
||||
:disabled="!hasLogs"
|
||||
>
|
||||
🗑️ Clear Logs
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="logs-container">
|
||||
<div v-if="hasLogs" class="logs-content">
|
||||
<div class="logs-header">
|
||||
<span class="logs-count">{{ logs.length }} log entries</span>
|
||||
<span class="logs-timestamp">Last updated: {{ lastUpdated }}</span>
|
||||
</div>
|
||||
|
||||
<div class="logs-list" ref="logsList">
|
||||
<div
|
||||
v-for="(log, index) in logs"
|
||||
:key="index"
|
||||
class="log-entry"
|
||||
:class="getLogLevelClass(log)"
|
||||
>
|
||||
<span class="log-timestamp">{{ formatTimestamp(log.timestamp) }}</span>
|
||||
<span class="log-level">{{ log.level }}</span>
|
||||
<span class="log-tag">{{ log.tag }}</span>
|
||||
<span class="log-message">{{ log.message }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="no-logs">
|
||||
<div class="empty-state">
|
||||
<span class="empty-icon">📋</span>
|
||||
<h3 class="empty-title">No Logs Available</h3>
|
||||
<p class="empty-description">
|
||||
Click "Refresh Logs" to fetch DailyNotification plugin logs from the device
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success/Error Messages -->
|
||||
<div v-if="successMessage" class="message success-message">
|
||||
✅ {{ successMessage }}
|
||||
</div>
|
||||
|
||||
<div v-if="errorMessage" class="message error-message">
|
||||
❌ {{ errorMessage }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-facing-decorator'
|
||||
import { Capacitor } from '@capacitor/core'
|
||||
|
||||
interface LogEntry {
|
||||
timestamp: string
|
||||
level: string
|
||||
tag: string
|
||||
message: string
|
||||
}
|
||||
|
||||
@Component
|
||||
export default class LogsView extends Vue {
|
||||
logs: LogEntry[] = []
|
||||
isRefreshing = false
|
||||
isCopying = false
|
||||
successMessage = ''
|
||||
errorMessage = ''
|
||||
lastUpdated = ''
|
||||
|
||||
get hasLogs(): boolean {
|
||||
return this.logs.length > 0
|
||||
}
|
||||
|
||||
async refreshLogs(): Promise<void> {
|
||||
this.isRefreshing = true
|
||||
this.clearMessages()
|
||||
|
||||
try {
|
||||
if (!Capacitor.isNativePlatform()) {
|
||||
// Mock logs for web testing
|
||||
this.logs = this.generateMockLogs()
|
||||
this.lastUpdated = new Date().toLocaleString()
|
||||
this.successMessage = 'Mock logs loaded (web mode)'
|
||||
return
|
||||
}
|
||||
|
||||
// In a real implementation, you would fetch logs from the device
|
||||
// For now, we'll simulate fetching logs
|
||||
await this.simulateLogFetch()
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Failed to refresh logs:', error)
|
||||
this.errorMessage = 'Failed to refresh logs: ' + (error as Error).message
|
||||
} finally {
|
||||
this.isRefreshing = false
|
||||
}
|
||||
}
|
||||
|
||||
async copyLogsToClipboard(): Promise<void> {
|
||||
if (!this.hasLogs) {
|
||||
this.errorMessage = 'No logs to copy'
|
||||
return
|
||||
}
|
||||
|
||||
this.isCopying = true
|
||||
this.clearMessages()
|
||||
|
||||
try {
|
||||
const logsText = this.formatLogsForCopy()
|
||||
|
||||
if (Capacitor.isNativePlatform()) {
|
||||
// Use Capacitor Clipboard plugin if available
|
||||
if (window.Capacitor && window.Capacitor.Plugins && window.Capacitor.Plugins.Clipboard) {
|
||||
await window.Capacitor.Plugins.Clipboard.write({
|
||||
string: logsText
|
||||
})
|
||||
} else {
|
||||
// Fallback to web clipboard API
|
||||
await navigator.clipboard.writeText(logsText)
|
||||
}
|
||||
} else {
|
||||
// Web clipboard API
|
||||
await navigator.clipboard.writeText(logsText)
|
||||
}
|
||||
|
||||
this.successMessage = `Copied ${this.logs.length} log entries to clipboard`
|
||||
|
||||
// Auto-hide success message
|
||||
setTimeout(() => {
|
||||
this.successMessage = ''
|
||||
}, 3000)
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Failed to copy logs:', error)
|
||||
this.errorMessage = 'Failed to copy logs: ' + (error as Error).message
|
||||
} finally {
|
||||
this.isCopying = false
|
||||
}
|
||||
}
|
||||
|
||||
clearLogs(): void {
|
||||
this.logs = []
|
||||
this.lastUpdated = ''
|
||||
this.clearMessages()
|
||||
this.successMessage = 'Logs cleared'
|
||||
|
||||
// Auto-hide success message
|
||||
setTimeout(() => {
|
||||
this.successMessage = ''
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
private clearMessages(): void {
|
||||
this.successMessage = ''
|
||||
this.errorMessage = ''
|
||||
}
|
||||
|
||||
private async simulateLogFetch(): Promise<void> {
|
||||
// Simulate network delay
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
|
||||
// Generate sample logs based on the terminal output you showed
|
||||
this.logs = this.generateSampleLogs()
|
||||
this.lastUpdated = new Date().toLocaleString()
|
||||
this.successMessage = `Loaded ${this.logs.length} log entries`
|
||||
|
||||
// Auto-hide success message
|
||||
setTimeout(() => {
|
||||
this.successMessage = ''
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
private generateSampleLogs(): LogEntry[] {
|
||||
const now = new Date()
|
||||
return [
|
||||
{
|
||||
timestamp: new Date(now.getTime() - 1000).toISOString(),
|
||||
level: 'D',
|
||||
tag: 'DailyNotificationReceiver',
|
||||
message: 'DN|RECEIVE_START action=com.timesafari.daily.NOTIFICATION'
|
||||
},
|
||||
{
|
||||
timestamp: new Date(now.getTime() - 900).toISOString(),
|
||||
level: 'D',
|
||||
tag: 'DailyNotificationReceiver',
|
||||
message: 'DN|WORK_ENQUEUE display=3bc1b920-9407-4ccf-94c0-26f99ba4c39d'
|
||||
},
|
||||
{
|
||||
timestamp: new Date(now.getTime() - 800).toISOString(),
|
||||
level: 'D',
|
||||
tag: 'DailyNotificationWorker',
|
||||
message: 'DN|WORK_START id=3bc1b920-9407-4ccf-94c0-26f99ba4c39d action=display'
|
||||
},
|
||||
{
|
||||
timestamp: new Date(now.getTime() - 700).toISOString(),
|
||||
level: 'D',
|
||||
tag: 'DailyNotificationWorker',
|
||||
message: 'DN|DISPLAY_START id=3bc1b920-9407-4ccf-94c0-26f99ba4c39d'
|
||||
},
|
||||
{
|
||||
timestamp: new Date(now.getTime() - 600).toISOString(),
|
||||
level: 'D',
|
||||
tag: 'DailyNotificationStorage',
|
||||
message: 'Loading notifications from storage: [53 notifications]'
|
||||
},
|
||||
{
|
||||
timestamp: new Date(now.getTime() - 500).toISOString(),
|
||||
level: 'D',
|
||||
tag: 'DailyNotificationWorker',
|
||||
message: 'DN|JIT_FRESH skip=true ageMin=0 id=3bc1b920-9407-4ccf-94c0-26f99ba4c39d'
|
||||
},
|
||||
{
|
||||
timestamp: new Date(now.getTime() - 400).toISOString(),
|
||||
level: 'D',
|
||||
tag: 'DailyNotificationWorker',
|
||||
message: 'DN|CLICK_INTENT app_only'
|
||||
},
|
||||
{
|
||||
timestamp: new Date(now.getTime() - 300).toISOString(),
|
||||
level: 'D',
|
||||
tag: 'DailyNotificationWorker',
|
||||
message: 'DN|ACTION_BUTTONS dismiss_only'
|
||||
},
|
||||
{
|
||||
timestamp: new Date(now.getTime() - 200).toISOString(),
|
||||
level: 'I',
|
||||
tag: 'DailyNotificationWorker',
|
||||
message: 'DN|DISPLAY_NOTIF_OK id=3bc1b920-9407-4ccf-94c0-26f99ba4c39d'
|
||||
},
|
||||
{
|
||||
timestamp: new Date(now.getTime() - 100).toISOString(),
|
||||
level: 'D',
|
||||
tag: 'DailyNotificationWorker',
|
||||
message: 'DN|RESCHEDULE_START id=3bc1b920-9407-4ccf-94c0-26f99ba4c39d'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
private generateMockLogs(): LogEntry[] {
|
||||
const now = new Date()
|
||||
return [
|
||||
{
|
||||
timestamp: new Date(now.getTime() - 2000).toISOString(),
|
||||
level: 'I',
|
||||
tag: 'VueApp',
|
||||
message: 'App initialized successfully'
|
||||
},
|
||||
{
|
||||
timestamp: new Date(now.getTime() - 1500).toISOString(),
|
||||
level: 'D',
|
||||
tag: 'Capacitor',
|
||||
message: 'Running in web mode - DailyNotification plugin not available'
|
||||
},
|
||||
{
|
||||
timestamp: new Date(now.getTime() - 1000).toISOString(),
|
||||
level: 'W',
|
||||
tag: 'NotificationsStore',
|
||||
message: 'DailyNotification plugin not loaded'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
private formatLogsForCopy(): string {
|
||||
const header = `DailyNotification Plugin Logs\nGenerated: ${new Date().toLocaleString()}\nTotal Entries: ${this.logs.length}\n\n`
|
||||
|
||||
const logLines = this.logs.map(log =>
|
||||
`${log.timestamp} ${log.level}/${log.tag}: ${log.message}`
|
||||
).join('\n')
|
||||
|
||||
return header + logLines
|
||||
}
|
||||
|
||||
private formatTimestamp(timestamp: string): string {
|
||||
const date = new Date(timestamp)
|
||||
return date.toLocaleTimeString()
|
||||
}
|
||||
|
||||
private getLogLevelClass(log: LogEntry): string {
|
||||
switch (log.level) {
|
||||
case 'E': return 'log-error'
|
||||
case 'W': return 'log-warning'
|
||||
case 'I': return 'log-info'
|
||||
case 'D': return 'log-debug'
|
||||
case 'V': return 'log-verbose'
|
||||
default: return 'log-default'
|
||||
}
|
||||
}
|
||||
|
||||
async mounted(): Promise<void> {
|
||||
// Auto-refresh logs on mount
|
||||
await this.refreshLogs()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.logs-view {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.view-header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
margin: 0 0 8px 0;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.1rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.logs-controls {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.control-button {
|
||||
background: linear-gradient(135deg, #2196f3, #1976d2);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.control-button:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, #1976d2, #1565c0);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(33, 150, 243, 0.3);
|
||||
}
|
||||
|
||||
.control-button:disabled {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.refresh-button {
|
||||
background: linear-gradient(135deg, #4caf50, #45a049);
|
||||
}
|
||||
|
||||
.refresh-button:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, #45a049, #3d8b40);
|
||||
box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
background: linear-gradient(135deg, #ff9800, #f57c00);
|
||||
}
|
||||
|
||||
.copy-button:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, #f57c00, #ef6c00);
|
||||
box-shadow: 0 8px 25px rgba(255, 152, 0, 0.3);
|
||||
}
|
||||
|
||||
.clear-button {
|
||||
background: linear-gradient(135deg, #f44336, #d32f2f);
|
||||
}
|
||||
|
||||
.clear-button:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, #d32f2f, #c62828);
|
||||
box-shadow: 0 8px 25px rgba(244, 67, 54, 0.3);
|
||||
}
|
||||
|
||||
.logs-container {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.logs-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.logs-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.logs-count {
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.logs-timestamp {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.logs-list {
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.log-entry {
|
||||
display: grid;
|
||||
grid-template-columns: 80px 20px 200px 1fr;
|
||||
gap: 12px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.log-entry:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.log-timestamp {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.log-level {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.log-tag {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.log-message {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Log level colors */
|
||||
.log-error .log-level {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.log-warning .log-level {
|
||||
color: #ff9800;
|
||||
}
|
||||
|
||||
.log-info .log-level {
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.log-debug .log-level {
|
||||
color: #2196f3;
|
||||
}
|
||||
|
||||
.log-verbose .log-level {
|
||||
color: #9c27b0;
|
||||
}
|
||||
|
||||
.log-default .log-level {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.no-logs {
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 4rem;
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin: 0 0 8px 0;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.empty-description {
|
||||
font-size: 1rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.message {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
z-index: 1000;
|
||||
animation: slideIn 0.3s ease;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
background: linear-gradient(135deg, #4caf50, #45a049);
|
||||
color: white;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: linear-gradient(135deg, #f44336, #d32f2f);
|
||||
color: white;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.logs-view {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.logs-controls {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.control-button {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.log-entry {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.log-timestamp,
|
||||
.log-level,
|
||||
.log-tag {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.logs-list {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.message {
|
||||
position: relative;
|
||||
top: auto;
|
||||
right: auto;
|
||||
margin: 16px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user