trent_larson/daily-notification-plugin
4
0
Fork 0
Code Issues Pull Requests 2 Projects Releases Wiki Activity

feat(test-app): refactor to Vue 3 + Vite + vue-facing-decorator architecture

Browse Source 
Complete refactoring of android-test app to modern Vue 3 stack:

## 🚀 New Architecture
- Vue 3 with Composition API and TypeScript
- Vite for fast development and building
- vue-facing-decorator for class-based components
- Pinia for reactive state management
- Vue Router for navigation
- Modern glassmorphism UI design

## 📱 App Structure
- Comprehensive component library (cards, items, layout, ui)
- Pinia stores for app and notification state management
- Full view system (Home, Schedule, Notifications, Status, History)
- Responsive design for mobile and desktop
- TypeScript throughout with proper type definitions

## 🎨 Features
- Dashboard with quick actions and status overview
- Schedule notifications with time picker and options
- Notification management with cancel functionality
- System status with permission checks and diagnostics
- Notification history with delivery tracking
- Settings panel (placeholder for future features)

## 🔧 Technical Implementation
- Class-based Vue components using vue-facing-decorator
- Reactive Pinia stores with proper TypeScript types
- Capacitor integration for native Android functionality
- ESLint and TypeScript configuration
- Vite build system with proper aliases and optimization

## 📚 Documentation
- Comprehensive README with setup and usage instructions
- Component documentation and examples
- Development and production build instructions
- Testing and debugging guidelines

This creates a production-ready test app that closely mirrors the actual
TimeSafari app architecture, making it ideal for plugin testing and
demonstration purposes.
This commit is contained in:
Matthew Raymer
2025-10-15 06:09:18 +00:00
parent 49fd1dfedf
commit 6213235a16
31 changed files with 4575 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
test-apps/android-test/index.html Normal file
View File

@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>Daily Notification Test - Vue 3</title>
<!-- Capacitor meta tags -->
<meta name="color-scheme" content="light dark" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- PWA meta tags -->
<meta name="theme-color" content="#1976d2" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="Daily Notification Test" />
<!-- Styles -->
<style>
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #f5f5f5;
}
#app {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* Loading spinner */
.loading {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: white;
font-size: 18px;
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-right: 16px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div id="app">
<div class="loading">
<div class="spinner"></div>
Loading Daily Notification Test App...
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>