cbbae27ef6
- Replace ES module imports with global Capacitor objects - Add null checks for DailyNotification plugin availability - Fix 'Failed to resolve module specifier @capacitor/core' error - Use window.Capacitor and window.DailyNotification instead of imports This resolves the JavaScript error that was preventing the web interface from loading properly in the test app.
123 lines
4.3 KiB
HTML
123 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>DailyNotification Plugin Test</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
color: white;
|
|
}
|
|
.container {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
h1 {
|
|
margin-bottom: 30px;
|
|
font-size: 2.5em;
|
|
}
|
|
.button {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
color: white;
|
|
padding: 15px 30px;
|
|
margin: 10px;
|
|
border-radius: 25px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.button:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
transform: translateY(-2px);
|
|
}
|
|
.status {
|
|
margin-top: 30px;
|
|
padding: 20px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 10px;
|
|
font-family: monospace;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🔔 DailyNotification Plugin Test</h1>
|
|
<p>Test the DailyNotification plugin functionality</p>
|
|
|
|
<button class="button" onclick="testPlugin()">Test Plugin</button>
|
|
<button class="button" onclick="configurePlugin()">Configure Plugin</button>
|
|
<button class="button" onclick="checkStatus()">Check Status</button>
|
|
|
|
<div id="status" class="status">
|
|
Ready to test...
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Use global Capacitor and plugin objects instead of ES modules
|
|
// These are provided by the Capacitor runtime
|
|
const Capacitor = window.Capacitor;
|
|
const DailyNotification = window.DailyNotification;
|
|
|
|
window.testPlugin = async function() {
|
|
const status = document.getElementById('status');
|
|
status.innerHTML = 'Testing plugin...';
|
|
|
|
try {
|
|
if (!DailyNotification) {
|
|
status.innerHTML = 'DailyNotification plugin not available';
|
|
return;
|
|
}
|
|
const result = await DailyNotification.echo({ value: 'Hello from test app!' });
|
|
status.innerHTML = `Plugin test successful: ${result.value}`;
|
|
} catch (error) {
|
|
status.innerHTML = `Plugin test failed: ${error.message}`;
|
|
}
|
|
};
|
|
|
|
window.configurePlugin = async function() {
|
|
const status = document.getElementById('status');
|
|
status.innerHTML = 'Configuring plugin...';
|
|
|
|
try {
|
|
if (!DailyNotification) {
|
|
status.innerHTML = 'DailyNotification plugin not available';
|
|
return;
|
|
}
|
|
await DailyNotification.configure({
|
|
fetchUrl: 'https://api.example.com/daily-content',
|
|
scheduleTime: '09:00',
|
|
enableNotifications: true
|
|
});
|
|
status.innerHTML = 'Plugin configured successfully!';
|
|
} catch (error) {
|
|
status.innerHTML = `Configuration failed: ${error.message}`;
|
|
}
|
|
};
|
|
|
|
window.checkStatus = async function() {
|
|
const status = document.getElementById('status');
|
|
status.innerHTML = 'Checking plugin status...';
|
|
|
|
try {
|
|
if (!DailyNotification) {
|
|
status.innerHTML = 'DailyNotification plugin not available';
|
|
return;
|
|
}
|
|
const result = await DailyNotification.getStatus();
|
|
status.innerHTML = `Plugin status: ${JSON.stringify(result, null, 2)}`;
|
|
} catch (error) {
|
|
status.innerHTML = `Status check failed: ${error.message}`;
|
|
}
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|