Browse Source
## 🐛 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 correctlymaster
Matthew Raymer
1 week ago
5 changed files with 650 additions and 477 deletions
@ -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> |
|
||||
@ -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> |
||||
Loading…
Reference in new issue