daily-notification-plugin/test-apps/daily-notification-test/src/views/LogsView.vue

<!--
/**
 * Logs View - Platform Neutral Log Display
 * 
 * View and copy system logs with clipboard functionality
 * 
 * @author Matthew Raymer
 * @version 1.0.0
 */
-->

<template>
  <div class="logs-view">
    <div class="view-header">
      <h1 class="page-title">📋 System 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="last-updated">Last updated: {{ formatTimestamp(lastUpdated) }}</span>
        </div>
        <div class="log-entries">
          <div 
            v-for="(log, index) in logs" 
            :key="index" 
            :class="['log-entry', `log-level-${log.level.toLowerCase()}`]"
          >
            <span class="log-timestamp">{{ formatTimestamp(log.ts) }}</span>
            <span class="log-message">{{ log.msg }}</span>
          </div>
        </div>
      </div>
      <div v-else class="no-logs">
        <span class="empty-icon">📜</span>
        <p class="empty-message">No logs available. Click "Refresh Logs" to fetch them.</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, toNative } from 'vue-facing-decorator'
type LogLine = { ts: number; msg: string; level: string }

@Component
class LogsView extends Vue {
  isRefreshing = false
  isCopying = false
  logs: LogLine[] = []
  lastUpdated: number | null = null

  get hasLogs() { return this.logs.length > 0 }

  formatTimestamp(ts: number) { return new Date(ts).toLocaleString() }

  async refreshLogs() {
    this.isRefreshing = true
    try {
      // TODO: replace with real fetch
      this.logs = [{ ts: Date.now(), msg: 'Sample log', level: 'info' }]
      this.lastUpdated = Date.now()
    } finally {
      this.isRefreshing = false
    }
  }

  async copyLogsToClipboard() {
    if (this.isCopying) return
    this.isCopying = true
    try {
      const text = this.logs.map(l => `[${this.formatTimestamp(l.ts)}] ${l.msg}`).join('\n')
      if ((navigator as Navigator & { clipboard?: { writeText?: (text: string) => Promise<void> } })?.clipboard?.writeText) {
        await navigator.clipboard.writeText(text); return
      }
      const Cap = (window as Window & { Capacitor?: { Plugins?: Record<string, unknown> } })?.Capacitor
      const Clip = Cap?.Plugins?.Clipboard as { write?: (options: { string: string }) => Promise<void> } | undefined
      if (Clip?.write) { await Clip.write({ string: text }); return }
      console.warn('No clipboard API available.')
    } finally {
      this.isCopying = false
    }
  }

  clearLogs() { this.logs = [] }
}
export default toNative(LogsView)
</script>

<style scoped>
.logs-view {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.view-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-title {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 700;
  color: white;
}

.page-subtitle {
  margin: 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
}

.logs-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.control-button {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.refresh-button {
  background: #2196f3;
  color: white;
}

.refresh-button:hover:not(:disabled) {
  background: #1976d2;
}

.copy-button {
  background: #ff9800;
  color: white;
}

.copy-button:hover:not(:disabled) {
  background: #f57c00;
}

.clear-button {
  background: #f44336;
  color: white;
}

.clear-button:hover:not(:disabled) {
  background: #d32f2f;
}

.control-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.logs-container {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  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.1);
}

.logs-count {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.last-updated {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.log-entries {
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.log-entry {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.4;
}

.log-timestamp {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  flex-shrink: 0;
}

.log-message {
  color: white;
  flex: 1;
}

.no-logs {
  padding: 40px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

.empty-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 16px;
}

.empty-message {
  margin: 0;
  font-size: 16px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .logs-view {
    padding: 16px;
  }
  
  .logs-controls {
    flex-direction: column;
    align-items: center;
  }
  
  .control-button {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
  
  .logs-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  
  .log-timestamp {
    font-size: 11px;
  }
}
</style>