forked from trent_larson/crowd-funder-for-time-pwa
Fix duplicate export declarations and migrate ContactsView with sub-components
- Remove duplicate NOTIFY_INVITE_MISSING and NOTIFY_INVITE_PROCESSING_ERROR exports - Update InviteOneAcceptView.vue to use correct NOTIFY_INVITE_TRUNCATED_DATA constant - Migrate ContactsView to PlatformServiceMixin and extract into modular sub-components - Resolves TypeScript compilation errors preventing web build
This commit is contained in:
Matthew Raymer
@@ -1,62 +1,69 @@
|
||||
<template>
|
||||
<div class="qr-scanner-component">
|
||||
<h2>QR Code Scanner</h2>
|
||||
|
||||
|
||||
<!-- Camera controls -->
|
||||
<div class="camera-controls">
|
||||
<button @click="startScanning" :disabled="isScanning || !hasCamera">
|
||||
{{ isScanning ? 'Scanning...' : 'Start Scanning' }}
|
||||
<button :disabled="isScanning || !hasCamera" @click="startScanning">
|
||||
{{ isScanning ? "Scanning..." : "Start Scanning" }}
|
||||
</button>
|
||||
<button @click="stopScanning" :disabled="!isScanning">
|
||||
<button :disabled="!isScanning" @click="stopScanning">
|
||||
Stop Scanning
|
||||
</button>
|
||||
<button @click="switchCamera" :disabled="!isScanning || cameras.length <= 1">
|
||||
<button
|
||||
:disabled="!isScanning || cameras.length <= 1"
|
||||
@click="switchCamera"
|
||||
>
|
||||
Switch Camera
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Camera status -->
|
||||
<div class="camera-status">
|
||||
<div v-if="!hasCamera" class="status-error">
|
||||
<p>Camera not available</p>
|
||||
<p class="status-detail">This device doesn't have a camera or camera access is denied.</p>
|
||||
<p class="status-detail">
|
||||
This device doesn't have a camera or camera access is denied.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-else-if="!isScanning" class="status-info">
|
||||
<p>Camera ready</p>
|
||||
<p class="status-detail">Click "Start Scanning" to begin QR code detection.</p>
|
||||
<p class="status-detail">
|
||||
Click "Start Scanning" to begin QR code detection.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-else class="status-scanning">
|
||||
<p>Scanning for QR codes...</p>
|
||||
<p class="status-detail">Point camera at a QR code to scan.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Camera view -->
|
||||
<div v-if="isScanning && hasCamera" class="camera-container">
|
||||
<video
|
||||
<video
|
||||
ref="videoElement"
|
||||
class="camera-video"
|
||||
autoplay
|
||||
playsinline
|
||||
muted
|
||||
></video>
|
||||
|
||||
|
||||
<!-- Scanning overlay -->
|
||||
<div class="scanning-overlay">
|
||||
<div class="scan-frame"></div>
|
||||
<div class="scan-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Scan results -->
|
||||
<div v-if="scanResults.length > 0" class="scan-results">
|
||||
<h3>Scan Results ({{ scanResults.length }})</h3>
|
||||
|
||||
|
||||
<div class="results-list">
|
||||
<div
|
||||
v-for="(result, index) in scanResults"
|
||||
<div
|
||||
v-for="(result, index) in scanResults"
|
||||
:key="index"
|
||||
class="result-item"
|
||||
>
|
||||
@@ -65,82 +72,69 @@
|
||||
<span class="result-time">{{ formatTime(result.timestamp) }}</span>
|
||||
</div>
|
||||
<div class="result-content">
|
||||
<div class="qr-data">
|
||||
<strong>Data:</strong> {{ result.data }}
|
||||
</div>
|
||||
<div class="qr-data"><strong>Data:</strong> {{ result.data }}</div>
|
||||
<div class="qr-format">
|
||||
<strong>Format:</strong> {{ result.format }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="result-actions">
|
||||
<button @click="copyToClipboard(result.data)" class="copy-btn">
|
||||
<button class="copy-btn" @click="copyToClipboard(result.data)">
|
||||
Copy
|
||||
</button>
|
||||
<button @click="removeResult(index)" class="remove-btn">
|
||||
<button class="remove-btn" @click="removeResult(index)">
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="results-actions">
|
||||
<button @click="clearResults" class="clear-btn">
|
||||
<button class="clear-btn" @click="clearResults">
|
||||
Clear All Results
|
||||
</button>
|
||||
<button @click="exportResults" class="export-btn">
|
||||
<button class="export-btn" @click="exportResults">
|
||||
Export Results
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Settings panel -->
|
||||
<div class="settings-panel">
|
||||
<h3>Scanner Settings</h3>
|
||||
|
||||
|
||||
<div class="setting-group">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="settings.continuousScanning"
|
||||
/>
|
||||
<input v-model="settings.continuousScanning" type="checkbox" />
|
||||
Continuous Scanning
|
||||
</label>
|
||||
<p class="setting-description">
|
||||
Automatically scan multiple QR codes without stopping
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="setting-group">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="settings.audioFeedback"
|
||||
/>
|
||||
<input v-model="settings.audioFeedback" type="checkbox" />
|
||||
Audio Feedback
|
||||
</label>
|
||||
<p class="setting-description">
|
||||
Play sound when QR code is detected
|
||||
</p>
|
||||
<p class="setting-description">Play sound when QR code is detected</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="setting-group">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="settings.vibrateOnScan"
|
||||
/>
|
||||
<input v-model="settings.vibrateOnScan" type="checkbox" />
|
||||
Vibration Feedback
|
||||
</label>
|
||||
<p class="setting-description">
|
||||
Vibrate device when QR code is detected
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="setting-group">
|
||||
<label>Scan Interval (ms):</label>
|
||||
<input
|
||||
type="number"
|
||||
<input
|
||||
v-model.number="settings.scanInterval"
|
||||
type="number"
|
||||
min="100"
|
||||
max="5000"
|
||||
step="100"
|
||||
@@ -154,7 +148,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Emit } from 'vue-facing-decorator';
|
||||
import { Component, Vue, Emit } from "vue-facing-decorator";
|
||||
|
||||
interface ScanResult {
|
||||
data: string;
|
||||
@@ -171,16 +165,16 @@ interface ScannerSettings {
|
||||
|
||||
/**
|
||||
* QR Scanner Component
|
||||
*
|
||||
*
|
||||
* Demonstrates lazy loading for camera-dependent features.
|
||||
* This component would benefit from lazy loading as it requires
|
||||
* camera permissions and heavy camera processing libraries.
|
||||
*
|
||||
*
|
||||
* @author Matthew Raymer
|
||||
* @version 1.0.0
|
||||
*/
|
||||
@Component({
|
||||
name: 'QRScannerComponent'
|
||||
name: "QRScannerComponent",
|
||||
})
|
||||
export default class QRScannerComponent extends Vue {
|
||||
// Component state
|
||||
@@ -188,275 +182,290 @@ export default class QRScannerComponent extends Vue {
|
||||
hasCamera = false;
|
||||
cameras: MediaDeviceInfo[] = [];
|
||||
currentCameraIndex = 0;
|
||||
|
||||
|
||||
// Video element reference
|
||||
videoElement: HTMLVideoElement | null = null;
|
||||
|
||||
|
||||
// Scan results
|
||||
scanResults: ScanResult[] = [];
|
||||
|
||||
|
||||
// Scanner settings
|
||||
settings: ScannerSettings = {
|
||||
continuousScanning: true,
|
||||
audioFeedback: true,
|
||||
vibrateOnScan: true,
|
||||
scanInterval: 500
|
||||
scanInterval: 500,
|
||||
};
|
||||
|
||||
|
||||
// Internal state
|
||||
private stream: MediaStream | null = null;
|
||||
private scanInterval: number | null = null;
|
||||
private lastScanTime = 0;
|
||||
|
||||
|
||||
// Lifecycle hooks
|
||||
async mounted(): Promise<void> {
|
||||
console.log('[QRScannerComponent] Component mounted');
|
||||
console.log("[QRScannerComponent] Component mounted");
|
||||
await this.initializeCamera();
|
||||
}
|
||||
|
||||
|
||||
beforeUnmount(): void {
|
||||
this.stopScanning();
|
||||
console.log('[QRScannerComponent] Component unmounting');
|
||||
console.log("[QRScannerComponent] Component unmounting");
|
||||
}
|
||||
|
||||
|
||||
// Methods
|
||||
async initializeCamera(): Promise<void> {
|
||||
try {
|
||||
// Check if camera is available
|
||||
const devices = await navigator.mediaDevices.enumerateDevices();
|
||||
this.cameras = devices.filter(device => device.kind === 'videoinput');
|
||||
this.cameras = devices.filter((device) => device.kind === "videoinput");
|
||||
this.hasCamera = this.cameras.length > 0;
|
||||
|
||||
|
||||
if (this.hasCamera) {
|
||||
console.log('[QRScannerComponent] Camera available:', this.cameras.length, 'devices');
|
||||
console.log(
|
||||
"[QRScannerComponent] Camera available:",
|
||||
this.cameras.length,
|
||||
"devices",
|
||||
);
|
||||
} else {
|
||||
console.warn('[QRScannerComponent] No camera devices found');
|
||||
console.warn("[QRScannerComponent] No camera devices found");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[QRScannerComponent] Camera initialization error:', error);
|
||||
console.error("[QRScannerComponent] Camera initialization error:", error);
|
||||
this.hasCamera = false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async startScanning(): Promise<void> {
|
||||
if (!this.hasCamera || this.isScanning) return;
|
||||
|
||||
|
||||
try {
|
||||
console.log('[QRScannerComponent] Starting QR scanning...');
|
||||
|
||||
console.log("[QRScannerComponent] Starting QR scanning...");
|
||||
|
||||
// Get camera stream
|
||||
const constraints = {
|
||||
video: {
|
||||
deviceId: this.cameras[this.currentCameraIndex]?.deviceId
|
||||
}
|
||||
deviceId: this.cameras[this.currentCameraIndex]?.deviceId,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
this.stream = await navigator.mediaDevices.getUserMedia(constraints);
|
||||
|
||||
|
||||
// Set up video element
|
||||
this.videoElement = this.$refs.videoElement as HTMLVideoElement;
|
||||
if (this.videoElement) {
|
||||
this.videoElement.srcObject = this.stream;
|
||||
await this.videoElement.play();
|
||||
}
|
||||
|
||||
|
||||
this.isScanning = true;
|
||||
|
||||
|
||||
// Start QR code detection
|
||||
this.startQRDetection();
|
||||
|
||||
console.log('[QRScannerComponent] QR scanning started');
|
||||
|
||||
|
||||
console.log("[QRScannerComponent] QR scanning started");
|
||||
} catch (error) {
|
||||
console.error('[QRScannerComponent] Failed to start scanning:', error);
|
||||
console.error("[QRScannerComponent] Failed to start scanning:", error);
|
||||
this.hasCamera = false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
stopScanning(): void {
|
||||
if (!this.isScanning) return;
|
||||
|
||||
console.log('[QRScannerComponent] Stopping QR scanning...');
|
||||
|
||||
|
||||
console.log("[QRScannerComponent] Stopping QR scanning...");
|
||||
|
||||
// Stop QR detection
|
||||
this.stopQRDetection();
|
||||
|
||||
|
||||
// Stop camera stream
|
||||
if (this.stream) {
|
||||
this.stream.getTracks().forEach(track => track.stop());
|
||||
this.stream.getTracks().forEach((track) => track.stop());
|
||||
this.stream = null;
|
||||
}
|
||||
|
||||
|
||||
// Clear video element
|
||||
if (this.videoElement) {
|
||||
this.videoElement.srcObject = null;
|
||||
this.videoElement = null;
|
||||
}
|
||||
|
||||
|
||||
this.isScanning = false;
|
||||
console.log('[QRScannerComponent] QR scanning stopped');
|
||||
console.log("[QRScannerComponent] QR scanning stopped");
|
||||
}
|
||||
|
||||
|
||||
async switchCamera(): Promise<void> {
|
||||
if (this.cameras.length <= 1) return;
|
||||
|
||||
|
||||
// Stop current scanning
|
||||
this.stopScanning();
|
||||
|
||||
|
||||
// Switch to next camera
|
||||
this.currentCameraIndex = (this.currentCameraIndex + 1) % this.cameras.length;
|
||||
|
||||
this.currentCameraIndex =
|
||||
(this.currentCameraIndex + 1) % this.cameras.length;
|
||||
|
||||
// Restart scanning with new camera
|
||||
await this.startScanning();
|
||||
|
||||
console.log('[QRScannerComponent] Switched to camera:', this.currentCameraIndex);
|
||||
|
||||
console.log(
|
||||
"[QRScannerComponent] Switched to camera:",
|
||||
this.currentCameraIndex,
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
private startQRDetection(): void {
|
||||
if (!this.settings.continuousScanning) return;
|
||||
|
||||
|
||||
this.scanInterval = window.setInterval(() => {
|
||||
this.detectQRCode();
|
||||
}, this.settings.scanInterval);
|
||||
}
|
||||
|
||||
|
||||
private stopQRDetection(): void {
|
||||
if (this.scanInterval) {
|
||||
clearInterval(this.scanInterval);
|
||||
this.scanInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private async detectQRCode(): Promise<void> {
|
||||
if (!this.videoElement || !this.isScanning) return;
|
||||
|
||||
|
||||
const now = Date.now();
|
||||
if (now - this.lastScanTime < this.settings.scanInterval) return;
|
||||
|
||||
|
||||
try {
|
||||
// Simulate QR code detection
|
||||
// In a real implementation, you would use a QR code library like jsQR
|
||||
const detectedQR = await this.simulateQRDetection();
|
||||
|
||||
|
||||
if (detectedQR) {
|
||||
this.addScanResult(detectedQR);
|
||||
this.lastScanTime = now;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[QRScannerComponent] QR detection error:', error);
|
||||
console.error("[QRScannerComponent] QR detection error:", error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private async simulateQRDetection(): Promise<ScanResult | null> {
|
||||
// Simulate QR code detection with random chance
|
||||
if (Math.random() < 0.1) { // 10% chance of detection
|
||||
if (Math.random() < 0.1) {
|
||||
// 10% chance of detection
|
||||
const sampleData = [
|
||||
'https://example.com/qr1',
|
||||
'WIFI:S:MyNetwork;T:WPA;P:password123;;',
|
||||
'BEGIN:VCARD\nVERSION:3.0\nFN:John Doe\nTEL:+1234567890\nEND:VCARD',
|
||||
'otpauth://totp/Example:alice@google.com?secret=JBSWY3DPEHPK3PXP&issuer=Example'
|
||||
"https://example.com/qr1",
|
||||
"WIFI:S:MyNetwork;T:WPA;P:password123;;",
|
||||
"BEGIN:VCARD\nVERSION:3.0\nFN:John Doe\nTEL:+1234567890\nEND:VCARD",
|
||||
"otpauth://totp/Example:alice@google.com?secret=JBSWY3DPEHPK3PXP&issuer=Example",
|
||||
];
|
||||
|
||||
const formats = ['URL', 'WiFi', 'vCard', 'TOTP'];
|
||||
|
||||
const formats = ["URL", "WiFi", "vCard", "TOTP"];
|
||||
const randomIndex = Math.floor(Math.random() * sampleData.length);
|
||||
|
||||
|
||||
return {
|
||||
data: sampleData[randomIndex],
|
||||
format: formats[randomIndex],
|
||||
timestamp: new Date()
|
||||
timestamp: new Date(),
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
private addScanResult(result: ScanResult): void {
|
||||
// Check for duplicates
|
||||
const isDuplicate = this.scanResults.some(
|
||||
existing => existing.data === result.data
|
||||
(existing) => existing.data === result.data,
|
||||
);
|
||||
|
||||
|
||||
if (!isDuplicate) {
|
||||
this.scanResults.unshift(result);
|
||||
|
||||
|
||||
// Provide feedback
|
||||
this.provideFeedback();
|
||||
|
||||
|
||||
// Emit event
|
||||
this.$emit('qr-detected', result.data);
|
||||
|
||||
console.log('[QRScannerComponent] QR code detected:', result.data);
|
||||
this.$emit("qr-detected", result.data);
|
||||
|
||||
console.log("[QRScannerComponent] QR code detected:", result.data);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private provideFeedback(): void {
|
||||
// Audio feedback
|
||||
if (this.settings.audioFeedback) {
|
||||
this.playBeepSound();
|
||||
}
|
||||
|
||||
|
||||
// Vibration feedback
|
||||
if (this.settings.vibrateOnScan && 'vibrate' in navigator) {
|
||||
if (this.settings.vibrateOnScan && "vibrate" in navigator) {
|
||||
navigator.vibrate(100);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private playBeepSound(): void {
|
||||
// Create a simple beep sound
|
||||
const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
|
||||
const audioContext = new (window.AudioContext ||
|
||||
(window as any).webkitAudioContext)();
|
||||
const oscillator = audioContext.createOscillator();
|
||||
const gainNode = audioContext.createGain();
|
||||
|
||||
|
||||
oscillator.connect(gainNode);
|
||||
gainNode.connect(audioContext.destination);
|
||||
|
||||
|
||||
oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
|
||||
oscillator.type = 'sine';
|
||||
|
||||
oscillator.type = "sine";
|
||||
|
||||
gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
|
||||
gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
|
||||
|
||||
gainNode.gain.exponentialRampToValueAtTime(
|
||||
0.01,
|
||||
audioContext.currentTime + 0.1,
|
||||
);
|
||||
|
||||
oscillator.start(audioContext.currentTime);
|
||||
oscillator.stop(audioContext.currentTime + 0.1);
|
||||
}
|
||||
|
||||
|
||||
copyToClipboard(text: string): void {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
console.log('[QRScannerComponent] Copied to clipboard:', text);
|
||||
}).catch(error => {
|
||||
console.error('[QRScannerComponent] Failed to copy:', error);
|
||||
});
|
||||
navigator.clipboard
|
||||
.writeText(text)
|
||||
.then(() => {
|
||||
console.log("[QRScannerComponent] Copied to clipboard:", text);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("[QRScannerComponent] Failed to copy:", error);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
removeResult(index: number): void {
|
||||
this.scanResults.splice(index, 1);
|
||||
}
|
||||
|
||||
|
||||
clearResults(): void {
|
||||
this.scanResults = [];
|
||||
console.log('[QRScannerComponent] Results cleared');
|
||||
console.log("[QRScannerComponent] Results cleared");
|
||||
}
|
||||
|
||||
|
||||
exportResults(): void {
|
||||
const data = JSON.stringify(this.scanResults, null, 2);
|
||||
const blob = new Blob([data], { type: 'application/json' });
|
||||
const blob = new Blob([data], { type: "application/json" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
const a = document.createElement('a');
|
||||
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `qr-scan-results-${new Date().toISOString().split('T')[0]}.json`;
|
||||
a.download = `qr-scan-results-${new Date().toISOString().split("T")[0]}.json`;
|
||||
a.click();
|
||||
|
||||
|
||||
URL.revokeObjectURL(url);
|
||||
console.log('[QRScannerComponent] Results exported');
|
||||
console.log("[QRScannerComponent] Results exported");
|
||||
}
|
||||
|
||||
|
||||
formatTime(date: Date): string {
|
||||
return date.toLocaleTimeString();
|
||||
}
|
||||
|
||||
|
||||
// Event emitters
|
||||
@Emit('qr-detected')
|
||||
@Emit("qr-detected")
|
||||
emitQRDetected(data: string): string {
|
||||
return data;
|
||||
}
|
||||
@@ -573,8 +582,12 @@ export default class QRScannerComponent extends Vue {
|
||||
}
|
||||
|
||||
@keyframes scan {
|
||||
0% { top: 0; }
|
||||
100% { top: 100%; }
|
||||
0% {
|
||||
top: 0;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.scan-results {
|
||||
@@ -705,4 +718,4 @@ export default class QRScannerComponent extends Vue {
|
||||
margin-top: 3px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user