jsnbuchanan/crowd-funder-for-time-pwa
1
0
Fork 1
forked from trent_larson/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

Fix duplicate export declarations and migrate ContactsView with sub-components

Browse Source 
- 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
2025-07-16 08:03:26 +00:00
parent 81a6c92068
commit 8dd73950f5
45 changed files with 3216 additions and 1752 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/ContactBulkActions.vue Normal file
View File

@@ -0,0 +1,42 @@
<template>
<div class="mt-2 w-full text-left">
<input
v-if="!showGiveNumbers"
type="checkbox"
:checked="allContactsSelected"
class="align-middle ml-2 h-6 w-6"
data-testId="contactCheckAllBottom"
@click="$emit('toggle-all-selection')"
/>
<button
v-if="!showGiveNumbers"
:class="copyButtonClass"
:disabled="copyButtonDisabled"
@click="$emit('copy-selected')"
>
Copy
</button>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-facing-decorator";
/**
* ContactBulkActions - Contact bulk actions component
*
* Provides bulk selection controls at the bottom of the contact list.
* Handles copy operations for selected contacts.
*
* @author Matthew Raymer
*/
@Component({
name: "ContactBulkActions",
})
export default class ContactBulkActions extends Vue {
@Prop({ required: true }) showGiveNumbers!: boolean;
@Prop({ required: true }) allContactsSelected!: boolean;
@Prop({ required: true }) copyButtonClass!: string;
@Prop({ required: true }) copyButtonDisabled!: boolean;
}
</script>

98
src/components/ContactInputForm.vue Normal file
View File

@@ -0,0 +1,98 @@
<template>
<div id="formAddNewContact" class="mt-4 mb-4 flex items-stretch">
<!-- Action Buttons -->
<span v-if="isRegistered" class="flex">
<router-link
:to="{ name: 'invite-one' }"
class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
>
<font-awesome icon="envelope-open-text" class="fa-fw text-2xl" />
</router-link>
<button
class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
@click="$emit('show-onboard-meeting')"
>
<font-awesome icon="chair" class="fa-fw text-2xl" />
</button>
</span>
<span v-else class="flex">
<span
class="flex items-center bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
>
<font-awesome
icon="envelope-open-text"
class="fa-fw text-2xl"
@click="$emit('registration-required')"
/>
</span>
<span
class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
>
<font-awesome
icon="chair"
class="fa-fw text-2xl"
@click="$emit('navigate-onboard-meeting')"
/>
</span>
</span>
<!-- QR Code Button -->
<button
class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
@click="$emit('qr-scan')"
>
<font-awesome icon="qrcode" class="fa-fw text-2xl" />
</button>
<!-- Contact Input -->
<textarea
v-model="inputValue"
type="text"
placeholder="New URL or DID, Name, Public Key, Next Public Key Hash"
class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2 h-10"
/>
<!-- Add Button -->
<button
class="px-4 rounded-r bg-green-200 border border-green-400"
@click="$emit('submit', inputValue)"
>
<font-awesome icon="plus" class="fa-fw" />
</button>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Model } from "vue-facing-decorator";
/**
* ContactInputForm - Contact input form component
*
* Provides a form for adding new contacts with various input formats.
* Includes action buttons for invites, meetings, and QR scanning.
*
* @author Matthew Raymer
*/
@Component({
name: "ContactInputForm",
})
export default class ContactInputForm extends Vue {
@Prop({ required: true }) isRegistered!: boolean;
@Model("input", { type: String, default: "" })
inputValue!: string;
/**
* Update the input value and emit change event
*/
set input(value: string) {
this.inputValue = value;
this.$emit("input", value);
}
get input(): string {
return this.inputValue;
}
}
</script>

75
src/components/ContactListHeader.vue Normal file
View File

@@ -0,0 +1,75 @@
<template>
<div class="flex justify-between">
<!-- Left side - Bulk selection controls -->
<div class="">
<div v-if="!showGiveNumbers" class="flex items-center">
<input
type="checkbox"
:checked="allContactsSelected"
class="align-middle ml-2 h-6 w-6"
data-testId="contactCheckAllTop"
@click="$emit('toggle-all-selection')"
/>
<button
v-if="!showGiveNumbers"
:class="copyButtonClass"
:disabled="copyButtonDisabled"
data-testId="copySelectedContactsButtonTop"
@click="$emit('copy-selected')"
>
Copy
</button>
<font-awesome
icon="circle-info"
class="text-2xl text-blue-500 ml-2"
@click="$emit('show-copy-info')"
/>
</div>
</div>
<!-- Right side - Action buttons -->
<div class="flex items-center gap-2">
<button
v-if="showGiveNumbers"
class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
:class="giveAmountsButtonClass"
@click="$emit('toggle-give-totals')"
>
{{ giveAmountsButtonText }}
<font-awesome icon="left-right" class="fa-fw" />
</button>
<button
class="text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
@click="$emit('toggle-show-actions')"
>
{{ showActionsButtonText }}
</button>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-facing-decorator";
/**
* ContactListHeader - Contact list header component
*
* Provides bulk selection controls and action buttons for the contact list.
* Handles copy operations and give amounts display toggles.
*
* @author Matthew Raymer
*/
@Component({
name: "ContactListHeader",
})
export default class ContactListHeader extends Vue {
@Prop({ required: true }) showGiveNumbers!: boolean;
@Prop({ required: true }) allContactsSelected!: boolean;
@Prop({ required: true }) copyButtonClass!: string;
@Prop({ required: true }) copyButtonDisabled!: boolean;
@Prop({ required: true }) giveAmountsButtonText!: string;
@Prop({ required: true }) showActionsButtonText!: string;
@Prop({ required: true }) giveAmountsButtonClass!: Record<string, boolean>;
}
</script>

182
src/components/ContactListItem.vue Normal file
View File

@@ -0,0 +1,182 @@
<template>
<li class="border-b border-slate-300 pt-1 pb-1" data-testId="contactListItem">
<div class="flex items-center justify-between gap-3">
<!-- Contact Info Section -->
<div class="flex overflow-hidden min-w-0 items-center gap-3">
<input
v-if="showCheckbox"
type="checkbox"
:checked="isSelected"
class="ml-2 h-6 w-6 flex-shrink-0"
data-testId="contactCheckOne"
@click="$emit('toggle-selection', contact.did)"
/>
<EntityIcon
:contact="contact"
:icon-size="48"
class="shrink-0 align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
@click="$emit('show-identicon', contact)"
/>
<div class="overflow-hidden">
<h2 class="text-base font-semibold truncate">
<router-link
:to="{
path: '/did/' + encodeURIComponent(contact.did),
}"
title="See more about this person"
>
{{ contactNameNonBreakingSpace(contact.name) }}
</router-link>
</h2>
<div class="flex gap-1.5 items-center overflow-hidden">
<router-link
:to="{
path: '/did/' + encodeURIComponent(contact.did),
}"
title="See more about this person"
>
<font-awesome
icon="circle-info"
class="text-base text-blue-500"
/>
</router-link>
<span class="text-xs truncate">{{ contact.did }}</span>
</div>
<div class="text-sm">
{{ contact.notes }}
</div>
</div>
</div>
<!-- Contact Actions Section -->
<div
v-if="showActions && contact.did !== activeDid"
class="flex gap-1.5 items-end"
>
<div class="text-center">
<div class="text-xs leading-none mb-1">From/To</div>
<div class="flex items-center">
<button
class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2.5 py-1.5 rounded-l-md"
:title="getGiveDescriptionForContact(contact.did, true)"
@click="$emit('show-gifted-dialog', contact.did, activeDid)"
>
{{ getGiveAmountForContact(contact.did, true) }}
</button>
<button
class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2.5 py-1.5 rounded-r-md border-l"
:title="getGiveDescriptionForContact(contact.did, false)"
@click="$emit('show-gifted-dialog', activeDid, contact.did)"
>
{{ getGiveAmountForContact(contact.did, false) }}
</button>
</div>
</div>
<button
class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md"
data-testId="offerButton"
@click="$emit('open-offer-dialog', contact.did, contact.name)"
>
Offer
</button>
<router-link
:to="{
name: 'contact-amounts',
query: { contactDid: contact.did },
}"
class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md"
title="See more given activity"
>
<font-awesome icon="file-lines" class="fa-fw" />
</router-link>
</div>
</div>
</li>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-facing-decorator";
import EntityIcon from "./EntityIcon.vue";
import { Contact } from "../db/tables/contacts";
import { AppString } from "../constants/app";
/**
* ContactListItem - Individual contact display component
*
* Displays a single contact with their information, selection checkbox,
* and action buttons. Handles contact interactions and emits events
* for parent component handling.
*
* @author Matthew Raymer
*/
@Component({
name: "ContactListItem",
components: {
EntityIcon,
},
})
export default class ContactListItem extends Vue {
@Prop({ required: true }) contact!: Contact;
@Prop({ required: true }) activeDid!: string;
@Prop({ default: false }) showCheckbox!: boolean;
@Prop({ default: false }) showActions!: boolean;
@Prop({ default: false }) isSelected!: boolean;
@Prop({ required: true }) showGiveTotals!: boolean;
@Prop({ required: true }) showGiveConfirmed!: boolean;
@Prop({ required: true }) givenToMeDescriptions!: Record<string, string>;
@Prop({ required: true }) givenToMeConfirmed!: Record<string, number>;
@Prop({ required: true }) givenToMeUnconfirmed!: Record<string, number>;
@Prop({ required: true }) givenByMeDescriptions!: Record<string, string>;
@Prop({ required: true }) givenByMeConfirmed!: Record<string, number>;
@Prop({ required: true }) givenByMeUnconfirmed!: Record<string, number>;
// Constants
AppString = AppString;
/**
* Format contact name with non-breaking spaces
*/
private contactNameNonBreakingSpace(contactName?: string): string {
return (contactName || AppString.NO_CONTACT_NAME).replace(/\s/g, "\u00A0");
}
/**
* Get give amount for a specific contact and direction
*/
private getGiveAmountForContact(contactDid: string, isGivenToMe: boolean): number {
if (this.showGiveTotals) {
if (isGivenToMe) {
return (this.givenToMeConfirmed[contactDid] || 0) +
(this.givenToMeUnconfirmed[contactDid] || 0);
} else {
return (this.givenByMeConfirmed[contactDid] || 0) +
(this.givenByMeUnconfirmed[contactDid] || 0);
}
} else if (this.showGiveConfirmed) {
return isGivenToMe
? (this.givenToMeConfirmed[contactDid] || 0)
: (this.givenByMeConfirmed[contactDid] || 0);
} else {
return isGivenToMe
? (this.givenToMeUnconfirmed[contactDid] || 0)
: (this.givenByMeUnconfirmed[contactDid] || 0);
}
}
/**
* Get give description for a specific contact and direction
*/
private getGiveDescriptionForContact(contactDid: string, isGivenToMe: boolean): string {
return isGivenToMe
? (this.givenToMeDescriptions[contactDid] || '')
: (this.givenByMeDescriptions[contactDid] || '');
}
}
</script>

38
src/components/LargeIdenticonModal.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<div v-if="contact" class="fixed z-[100] top-0 inset-x-0 w-full">
<div
class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
>
<EntityIcon
:contact="contact"
:icon-size="512"
class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
@click="$emit('close')"
/>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-facing-decorator";
import EntityIcon from "./EntityIcon.vue";
import { Contact } from "../db/tables/contacts";
/**
* LargeIdenticonModal - Large identicon display modal
*
* Displays a contact's identicon in a large modal overlay.
* Clicking the identicon closes the modal.
*
* @author Matthew Raymer
*/
@Component({
name: "LargeIdenticonModal",
components: {
EntityIcon,
},
})
export default class LargeIdenticonModal extends Vue {
@Prop({ required: true }) contact!: Contact | undefined;
}
</script>

164
src/components/LazyLoadingExample.vue
View File

@@ -6,33 +6,30 @@
<!-- Main content with lazy-loaded components -->
<div class="content">
<h1>Lazy Loading Example</h1>
<!-- Lazy-loaded heavy component -->
<LazyHeavyComponent
<LazyHeavyComponent
v-if="showHeavyComponent"
:data="heavyComponentData"
@data-processed="handleDataProcessed"
/>
<!-- Conditionally loaded components -->
<LazyQRScanner
v-if="showQRScanner"
@qr-detected="handleQRDetected"
/>
<LazyThreeJSViewer
<LazyQRScanner v-if="showQRScanner" @qr-detected="handleQRDetected" />
<LazyThreeJSViewer
v-if="showThreeJS"
:model-url="threeJSModelUrl"
@model-loaded="handleModelLoaded"
/>
<!-- Route-based lazy loading -->
<router-view v-slot="{ Component }">
<component :is="Component" />
</router-view>
</div>
</template>
<!-- Loading fallback -->
<template #fallback>
<div class="loading-fallback">
@@ -41,98 +38,101 @@
</div>
</template>
</Suspense>
<!-- Control buttons -->
<div class="controls">
<button @click="toggleHeavyComponent">
{{ showHeavyComponent ? 'Hide' : 'Show' }} Heavy Component
{{ showHeavyComponent ? "Hide" : "Show" }} Heavy Component
</button>
<button @click="toggleQRScanner">
{{ showQRScanner ? 'Hide' : 'Show' }} QR Scanner
{{ showQRScanner ? "Hide" : "Show" }} QR Scanner
</button>
<button @click="toggleThreeJS">
{{ showThreeJS ? 'Hide' : 'Show' }} 3D Viewer
{{ showThreeJS ? "Hide" : "Show" }} 3D Viewer
</button>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-facing-decorator';
import { defineAsyncComponent } from 'vue';
import { Component, Vue, Prop, Watch } from "vue-facing-decorator";
import { defineAsyncComponent } from "vue";
/**
* Lazy Loading Example Component
*
*
* Demonstrates various lazy loading patterns with vue-facing-decorator:
* - defineAsyncComponent for heavy components
* - Conditional loading based on user interaction
* - Suspense for loading states
* - Route-based lazy loading
*
*
* @author Matthew Raymer
* @version 1.0.0
*/
@Component({
name: 'LazyLoadingExample',
name: "LazyLoadingExample",
components: {
// Lazy-loaded components with loading and error states
LazyHeavyComponent: defineAsyncComponent({
loader: () => import('./sub-components/HeavyComponent.vue'),
loader: () => import("./sub-components/HeavyComponent.vue"),
loadingComponent: {
template: '<div class="loading">Loading heavy component...</div>'
template: '<div class="loading">Loading heavy component...</div>',
},
errorComponent: {
template: '<div class="error">Failed to load heavy component</div>'
template: '<div class="error">Failed to load heavy component</div>',
},
delay: 200, // Show loading component after 200ms
timeout: 10000 // Timeout after 10 seconds
timeout: 10000, // Timeout after 10 seconds
}),
LazyQRScanner: defineAsyncComponent({
loader: () => import('./sub-components/QRScannerComponent.vue'),
loader: () => import("./sub-components/QRScannerComponent.vue"),
loadingComponent: {
template: '<div class="loading">Initializing QR scanner...</div>'
template: '<div class="loading">Initializing QR scanner...</div>',
},
errorComponent: {
template: '<div class="error">QR scanner not available</div>'
}
template: '<div class="error">QR scanner not available</div>',
},
}),
LazyThreeJSViewer: defineAsyncComponent({
loader: () => import('./sub-components/ThreeJSViewer.vue'),
loader: () => import("./sub-components/ThreeJSViewer.vue"),
loadingComponent: {
template: '<div class="loading">Loading 3D viewer...</div>'
template: '<div class="loading">Loading 3D viewer...</div>',
},
errorComponent: {
template: '<div class="error">3D viewer failed to load</div>'
}
})
}
template: '<div class="error">3D viewer failed to load</div>',
},
}),
},
})
export default class LazyLoadingExample extends Vue {
// Component state
@Prop({ default: false }) readonly initialLoadHeavy!: boolean;
// Reactive properties
showHeavyComponent = false;
showQRScanner = false;
showThreeJS = false;
// Component data
heavyComponentData = {
items: Array.from({ length: 1000 }, (_, i) => ({ id: i, name: `Item ${i}` })),
filters: { category: 'all', status: 'active' },
sortBy: 'name'
items: Array.from({ length: 1000 }, (_, i) => ({
id: i,
name: `Item ${i}`,
})),
filters: { category: "all", status: "active" },
sortBy: "name",
};
threeJSModelUrl = '/models/lupine_plant/scene.gltf';
threeJSModelUrl = "/models/lupine_plant/scene.gltf";
// Computed properties
get isLoadingAnyComponent(): boolean {
return this.showHeavyComponent || this.showQRScanner || this.showThreeJS;
}
get componentCount(): number {
let count = 0;
if (this.showHeavyComponent) count++;
@@ -140,83 +140,91 @@ export default class LazyLoadingExample extends Vue {
if (this.showThreeJS) count++;
return count;
}
// Lifecycle hooks
mounted(): void {
console.log('[LazyLoadingExample] Component mounted');
console.log("[LazyLoadingExample] Component mounted");
// Initialize based on props
if (this.initialLoadHeavy) {
this.showHeavyComponent = true;
}
// Preload critical components
this.preloadCriticalComponents();
}
// Methods
toggleHeavyComponent(): void {
this.showHeavyComponent = !this.showHeavyComponent;
console.log('[LazyLoadingExample] Heavy component toggled:', this.showHeavyComponent);
console.log(
"[LazyLoadingExample] Heavy component toggled:",
this.showHeavyComponent,
);
}
toggleQRScanner(): void {
this.showQRScanner = !this.showQRScanner;
console.log('[LazyLoadingExample] QR scanner toggled:', this.showQRScanner);
console.log("[LazyLoadingExample] QR scanner toggled:", this.showQRScanner);
}
toggleThreeJS(): void {
this.showThreeJS = !this.showThreeJS;
console.log('[LazyLoadingExample] ThreeJS viewer toggled:', this.showThreeJS);
console.log(
"[LazyLoadingExample] ThreeJS viewer toggled:",
this.showThreeJS,
);
}
handleDataProcessed(data: any): void {
console.log('[LazyLoadingExample] Data processed:', data);
console.log("[LazyLoadingExample] Data processed:", data);
// Handle processed data from heavy component
}
handleQRDetected(qrData: string): void {
console.log('[LazyLoadingExample] QR code detected:', qrData);
console.log("[LazyLoadingExample] QR code detected:", qrData);
// Handle QR code data
}
handleModelLoaded(modelInfo: any): void {
console.log('[LazyLoadingExample] 3D model loaded:', modelInfo);
console.log("[LazyLoadingExample] 3D model loaded:", modelInfo);
// Handle 3D model loaded event
}
/**
* Preload critical components for better UX
*/
private preloadCriticalComponents(): void {
// Preload components that are likely to be used
if (process.env.NODE_ENV === 'production') {
if (process.env.NODE_ENV === "production") {
// In production, preload based on user behavior patterns
this.preloadComponent(() => import('./sub-components/HeavyComponent.vue'));
this.preloadComponent(
() => import("./sub-components/HeavyComponent.vue"),
);
}
}
/**
* Preload a component without rendering it
*/
private preloadComponent(componentLoader: () => Promise<any>): void {
componentLoader().catch(error => {
console.warn('[LazyLoadingExample] Preload failed:', error);
componentLoader().catch((error) => {
console.warn("[LazyLoadingExample] Preload failed:", error);
});
}
// Watchers
@Watch('showHeavyComponent')
@Watch("showHeavyComponent")
onHeavyComponentToggle(newValue: boolean): void {
if (newValue) {
// Component is being shown - could trigger analytics
console.log('[LazyLoadingExample] Heavy component shown');
console.log("[LazyLoadingExample] Heavy component shown");
}
}
@Watch('componentCount')
@Watch("componentCount")
onComponentCountChange(newCount: number): void {
console.log('[LazyLoadingExample] Active component count:', newCount);
console.log("[LazyLoadingExample] Active component count:", newCount);
}
}
</script>
@@ -272,8 +280,12 @@ export default class LazyLoadingExample extends Vue {
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading {
@@ -290,4 +302,4 @@ export default class LazyLoadingExample extends Vue {
border: 1px solid #f5c6cb;
border-radius: 4px;
}
</style>
</style>

66
src/components/PWAInstallPrompt.vue
View File

@@ -14,8 +14,8 @@
<div class="p-4">
<div class="flex items-start">
<div class="flex-shrink-0">
<font-awesome
icon="download"
<font-awesome
icon="download"
class="h-6 w-6 text-blue-600"
title="Install App"
/>
@@ -29,14 +29,14 @@
</p>
<div class="mt-4 flex space-x-3">
<button
@click="installPWA"
class="flex-1 bg-blue-600 text-white text-sm font-medium px-3 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
@click="installPWA"
>
Install
</button>
<button
@click="dismissPrompt"
class="flex-1 bg-gray-100 text-gray-700 text-sm font-medium px-3 py-2 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
@click="dismissPrompt"
>
Later
</button>
@@ -44,8 +44,8 @@
</div>
<div class="ml-4 flex-shrink-0">
<button
@click="dismissPrompt"
class="text-gray-400 hover:text-gray-600 focus:outline-none"
@click="dismissPrompt"
>
<font-awesome icon="times" class="h-4 w-4" />
</button>
@@ -63,7 +63,7 @@ import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
interface BeforeInstallPromptEvent extends Event {
prompt(): Promise<void>;
userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>;
userChoice: Promise<{ outcome: "accepted" | "dismissed" }>;
}
@Component({ name: "PWAInstallPrompt" })
@@ -86,48 +86,51 @@ export default class PWAInstallPrompt extends Vue {
}
// Listen for the beforeinstallprompt event
window.addEventListener('beforeinstallprompt', (e) => {
window.addEventListener("beforeinstallprompt", (e) => {
logger.debug("[PWA] beforeinstallprompt event fired");
// Stash the event so it can be triggered later
this.deferredPrompt = e as BeforeInstallPromptEvent;
// Show the install prompt
this.showInstallPrompt = true;
});
// Listen for successful installation
window.addEventListener('appinstalled', () => {
window.addEventListener("appinstalled", () => {
logger.debug("[PWA] App installed successfully");
this.showInstallPrompt = false;
this.deferredPrompt = null;
// Show success notification
this.$notify({
group: "alert",
type: "success",
title: "App Installed!",
text: "Time Safari has been installed on your device.",
}, 5000);
this.$notify(
{
group: "alert",
type: "success",
title: "App Installed!",
text: "Time Safari has been installed on your device.",
},
5000,
);
});
}
private isPWAInstalled(): boolean {
// Check if running in standalone mode (installed PWA)
if (window.matchMedia('(display-mode: standalone)').matches) {
if (window.matchMedia("(display-mode: standalone)").matches) {
return true;
}
// Check if running in fullscreen mode (installed PWA)
if (window.matchMedia('(display-mode: fullscreen)').matches) {
if (window.matchMedia("(display-mode: fullscreen)").matches) {
return true;
}
// Check if running in minimal-ui mode (installed PWA)
if (window.matchMedia('(display-mode: minimal-ui)').matches) {
if (window.matchMedia("(display-mode: minimal-ui)").matches) {
return true;
}
return false;
}
@@ -140,13 +143,13 @@ export default class PWAInstallPrompt extends Vue {
try {
// Show the install prompt
this.deferredPrompt.prompt();
// Wait for the user to respond to the prompt
const { outcome } = await this.deferredPrompt.userChoice;
logger.debug(`[PWA] User response to install prompt: ${outcome}`);
if (outcome === 'accepted') {
if (outcome === "accepted") {
logger.debug("[PWA] User accepted the install prompt");
this.showInstallPrompt = false;
} else {
@@ -154,10 +157,9 @@ export default class PWAInstallPrompt extends Vue {
this.dismissed = true;
this.showInstallPrompt = false;
}
// Clear the deferred prompt
this.deferredPrompt = null;
} catch (error) {
logger.error("[PWA] Error during install prompt:", error);
this.showInstallPrompt = false;
@@ -167,9 +169,9 @@ export default class PWAInstallPrompt extends Vue {
private dismissPrompt() {
this.dismissed = true;
this.showInstallPrompt = false;
// Don't show again for this session
sessionStorage.setItem('pwa-install-dismissed', 'true');
sessionStorage.setItem("pwa-install-dismissed", "true");
}
}
</script>
</script>

208
src/components/sub-components/HeavyComponent.vue
View File

@@ -1,17 +1,17 @@
<template>
<div class="heavy-component">
<h2>Heavy Data Processing Component</h2>
<!-- Data processing controls -->
<div class="controls">
<button @click="processData" :disabled="isProcessing">
{{ isProcessing ? 'Processing...' : 'Process Data' }}
<button :disabled="isProcessing" @click="processData">
{{ isProcessing ? "Processing..." : "Process Data" }}
</button>
<button @click="clearResults" :disabled="isProcessing">
<button :disabled="isProcessing" @click="clearResults">
Clear Results
</button>
</div>
<!-- Processing status -->
<div v-if="isProcessing" class="processing-status">
<div class="progress-bar">
@@ -19,15 +19,15 @@
</div>
<p>Processing {{ processedCount }} of {{ totalItems }} items...</p>
</div>
<!-- Results display -->
<div v-if="processedData.length > 0" class="results">
<h3>Processed Results ({{ processedData.length }} items)</h3>
<!-- Filter controls -->
<div class="filters">
<input
v-model="searchTerm"
<input
v-model="searchTerm"
placeholder="Search items..."
class="search-input"
/>
@@ -37,11 +37,11 @@
<option value="processed">Sort by Processed Date</option>
</select>
</div>
<!-- Results list -->
<div class="results-list">
<div
v-for="item in filteredAndSortedData"
<div
v-for="item in filteredAndSortedData"
:key="item.id"
class="result-item"
>
@@ -59,29 +59,29 @@
</div>
</div>
</div>
<!-- Pagination -->
<div v-if="totalPages > 1" class="pagination">
<button
@click="previousPage"
<button
:disabled="currentPage === 1"
class="page-btn"
@click="previousPage"
>
Previous
</button>
<span class="page-info">
Page {{ currentPage }} of {{ totalPages }}
</span>
<button
@click="nextPage"
<button
:disabled="currentPage === totalPages"
class="page-btn"
@click="nextPage"
>
Next
</button>
</div>
</div>
<!-- Performance metrics -->
<div v-if="performanceMetrics" class="performance-metrics">
<h4>Performance Metrics</h4>
@@ -92,11 +92,15 @@
</div>
<div class="metric">
<span class="metric-label">Average per Item:</span>
<span class="metric-value">{{ performanceMetrics.averageTime }}ms</span>
<span class="metric-value"
>{{ performanceMetrics.averageTime }}ms</span
>
</div>
<div class="metric">
<span class="metric-label">Memory Usage:</span>
<span class="metric-value">{{ performanceMetrics.memoryUsage }}MB</span>
<span class="metric-value"
>{{ performanceMetrics.memoryUsage }}MB</span
>
</div>
</div>
</div>
@@ -104,7 +108,7 @@
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-facing-decorator';
import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
interface ProcessedItem {
id: number;
@@ -122,15 +126,15 @@ interface PerformanceMetrics {
/**
* Heavy Component for Data Processing
*
*
* Demonstrates a component that performs intensive data processing
* and would benefit from lazy loading to avoid blocking the main thread.
*
*
* @author Matthew Raymer
* @version 1.0.0
*/
@Component({
name: 'HeavyComponent'
name: "HeavyComponent",
})
export default class HeavyComponent extends Vue {
@Prop({ required: true }) readonly data!: {
@@ -138,233 +142,241 @@ export default class HeavyComponent extends Vue {
filters: Record<string, any>;
sortBy: string;
};
// Component state
isProcessing = false;
processedData: ProcessedItem[] = [];
progress = 0;
processedCount = 0;
totalItems = 0;
// UI state
searchTerm = '';
sortBy = 'name';
searchTerm = "";
sortBy = "name";
currentPage = 1;
itemsPerPage = 50;
// Performance tracking
performanceMetrics: PerformanceMetrics | null = null;
startTime = 0;
// Computed properties
get filteredAndSortedData(): ProcessedItem[] {
let filtered = this.processedData;
// Apply search filter
if (this.searchTerm) {
filtered = filtered.filter(item =>
item.name.toLowerCase().includes(this.searchTerm.toLowerCase())
filtered = filtered.filter((item) =>
item.name.toLowerCase().includes(this.searchTerm.toLowerCase()),
);
}
// Apply sorting
filtered.sort((a, b) => {
switch (this.sortBy) {
case 'name':
case "name":
return a.name.localeCompare(b.name);
case 'id':
case "id":
return a.id - b.id;
case 'processed':
case "processed":
return b.processedAt.getTime() - a.processedAt.getTime();
default:
return 0;
}
});
return filtered;
}
get paginatedData(): ProcessedItem[] {
const start = (this.currentPage - 1) * this.itemsPerPage;
const end = start + this.itemsPerPage;
return this.filteredAndSortedData.slice(start, end);
}
get totalPages(): number {
return Math.ceil(this.filteredAndSortedData.length / this.itemsPerPage);
}
// Lifecycle hooks
mounted(): void {
console.log('[HeavyComponent] Component mounted with', this.data.items.length, 'items');
console.log(
"[HeavyComponent] Component mounted with",
this.data.items.length,
"items",
);
this.totalItems = this.data.items.length;
}
// Methods
async processData(): Promise<void> {
if (this.isProcessing) return;
this.isProcessing = true;
this.progress = 0;
this.processedCount = 0;
this.processedData = [];
this.startTime = performance.now();
console.log('[HeavyComponent] Starting data processing...');
console.log("[HeavyComponent] Starting data processing...");
try {
// Process items in batches to avoid blocking the UI
const batchSize = 10;
const items = this.data.items;
for (let i = 0; i < items.length; i += batchSize) {
const batch = items.slice(i, i + batchSize);
// Process batch
await this.processBatch(batch);
// Update progress
this.processedCount = Math.min(i + batchSize, items.length);
this.progress = (this.processedCount / items.length) * 100;
// Allow UI to update
await this.$nextTick();
// Small delay to prevent overwhelming the UI
await new Promise(resolve => setTimeout(resolve, 10));
await new Promise((resolve) => setTimeout(resolve, 10));
}
// Calculate performance metrics
this.calculatePerformanceMetrics();
// Emit completion event
this.$emit('data-processed', {
this.$emit("data-processed", {
totalItems: this.processedData.length,
processingTime: performance.now() - this.startTime,
metrics: this.performanceMetrics
metrics: this.performanceMetrics,
});
console.log('[HeavyComponent] Data processing completed');
console.log("[HeavyComponent] Data processing completed");
} catch (error) {
console.error('[HeavyComponent] Processing error:', error);
this.$emit('processing-error', error);
console.error("[HeavyComponent] Processing error:", error);
this.$emit("processing-error", error);
} finally {
this.isProcessing = false;
}
}
private async processBatch(batch: Array<{ id: number; name: string }>): Promise<void> {
private async processBatch(
batch: Array<{ id: number; name: string }>,
): Promise<void> {
const processedBatch = await Promise.all(
batch.map(async (item) => {
const itemStartTime = performance.now();
// Simulate heavy processing
await this.simulateHeavyProcessing(item);
const processingTime = performance.now() - itemStartTime;
return {
id: item.id,
name: item.name,
processedAt: new Date(),
processingTime: Math.round(processingTime),
result: this.generateResult(item)
result: this.generateResult(item),
};
})
}),
);
this.processedData.push(...processedBatch);
}
private async simulateHeavyProcessing(item: { id: number; name: string }): Promise<void> {
private async simulateHeavyProcessing(item: {
id: number;
name: string;
}): Promise<void> {
// Simulate CPU-intensive work
const complexity = item.name.length * item.id;
const iterations = Math.min(complexity, 1000); // Cap at 1000 iterations
for (let i = 0; i < iterations; i++) {
// Simulate work
Math.sqrt(i) * Math.random();
}
// Simulate async work
await new Promise(resolve => setTimeout(resolve, Math.random() * 10));
await new Promise((resolve) => setTimeout(resolve, Math.random() * 10));
}
private generateResult(item: { id: number; name: string }): any {
return {
hash: this.generateHash(item.name + item.id),
category: this.categorizeItem(item),
score: Math.random() * 100,
tags: this.generateTags(item)
tags: this.generateTags(item),
};
}
private generateHash(input: string): string {
let hash = 0;
for (let i = 0; i < input.length; i++) {
const char = input.charCodeAt(i);
hash = ((hash << 5) - hash) + char;
hash = (hash << 5) - hash + char;
hash = hash & hash; // Convert to 32-bit integer
}
return hash.toString(16);
}
private categorizeItem(item: { id: number; name: string }): string {
const categories = ['A', 'B', 'C', 'D', 'E'];
const categories = ["A", "B", "C", "D", "E"];
return categories[item.id % categories.length];
}
private generateTags(item: { id: number; name: string }): string[] {
const tags = ['important', 'urgent', 'review', 'archive', 'featured'];
const tags = ["important", "urgent", "review", "archive", "featured"];
return tags.filter((_, index) => (item.id + index) % 3 === 0);
}
private calculatePerformanceMetrics(): void {
const totalTime = performance.now() - this.startTime;
const averageTime = totalTime / this.processedData.length;
// Simulate memory usage calculation
const memoryUsage = this.processedData.length * 0.1; // 0.1MB per item
this.performanceMetrics = {
totalTime: Math.round(totalTime),
averageTime: Math.round(averageTime),
memoryUsage: Math.round(memoryUsage * 100) / 100
memoryUsage: Math.round(memoryUsage * 100) / 100,
};
}
clearResults(): void {
this.processedData = [];
this.performanceMetrics = null;
this.searchTerm = '';
this.searchTerm = "";
this.currentPage = 1;
console.log('[HeavyComponent] Results cleared');
console.log("[HeavyComponent] Results cleared");
}
previousPage(): void {
if (this.currentPage > 1) {
this.currentPage--;
}
}
nextPage(): void {
if (this.currentPage < this.totalPages) {
this.currentPage++;
}
}
formatDate(date: Date): string {
return date.toLocaleString();
}
// Event emitters
@Emit('data-processed')
@Emit("data-processed")
emitDataProcessed(data: any): any {
return data;
}
@Emit('processing-error')
@Emit("processing-error")
emitProcessingError(error: Error): Error {
return error;
}
@@ -539,4 +551,4 @@ export default class HeavyComponent extends Vue {
color: #007bff;
font-weight: bold;
}
</style>
</style>

325
src/components/sub-components/QRScannerComponent.vue
View File

@@ -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>

264
src/components/sub-components/ThreeJSViewer.vue
View File

@@ -1,99 +1,100 @@
<template>
<div class="threejs-viewer">
<h2>3D Model Viewer</h2>
<!-- Viewer controls -->
<div class="viewer-controls">
<button @click="loadModel" :disabled="isLoading || !modelUrl">
{{ isLoading ? 'Loading...' : 'Load Model' }}
<button :disabled="isLoading || !modelUrl" @click="loadModel">
{{ isLoading ? "Loading..." : "Load Model" }}
</button>
<button @click="resetCamera" :disabled="!isModelLoaded">
<button :disabled="!isModelLoaded" @click="resetCamera">
Reset Camera
</button>
<button @click="toggleAnimation" :disabled="!isModelLoaded">
{{ isAnimating ? 'Stop' : 'Start' }} Animation
<button :disabled="!isModelLoaded" @click="toggleAnimation">
{{ isAnimating ? "Stop" : "Start" }} Animation
</button>
<button @click="toggleWireframe" :disabled="!isModelLoaded">
{{ showWireframe ? 'Hide' : 'Show' }} Wireframe
<button :disabled="!isModelLoaded" @click="toggleWireframe">
{{ showWireframe ? "Hide" : "Show" }} Wireframe
</button>
</div>
<!-- Loading status -->
<div v-if="isLoading" class="loading-status">
<div class="loading-spinner"></div>
<p>Loading 3D model...</p>
<p class="loading-detail">{{ loadingProgress }}% complete</p>
</div>
<!-- Error status -->
<div v-if="loadError" class="error-status">
<p>Failed to load model: {{ loadError }}</p>
<button @click="retryLoad" class="retry-btn">Retry</button>
<button class="retry-btn" @click="retryLoad">Retry</button>
</div>
<!-- 3D Canvas -->
<div
<div
ref="canvasContainer"
class="canvas-container"
:class="{ 'model-loaded': isModelLoaded }"
>
<canvas
ref="threeCanvas"
class="three-canvas"
></canvas>
<canvas ref="threeCanvas" class="three-canvas"></canvas>
<!-- Overlay controls -->
<div v-if="isModelLoaded" class="overlay-controls">
<div class="control-group">
<label>Camera Distance:</label>
<input
type="range"
<input
v-model.number="cameraDistance"
min="1"
max="20"
type="range"
min="1"
max="20"
step="0.1"
@input="updateCameraDistance"
/>
<span>{{ cameraDistance.toFixed(1) }}</span>
</div>
<div class="control-group">
<label>Rotation Speed:</label>
<input
type="range"
<input
v-model.number="rotationSpeed"
min="0"
max="2"
type="range"
min="0"
max="2"
step="0.1"
/>
<span>{{ rotationSpeed.toFixed(1) }}</span>
</div>
<div class="control-group">
<label>Light Intensity:</label>
<input
type="range"
<input
v-model.number="lightIntensity"
min="0"
max="2"
type="range"
min="0"
max="2"
step="0.1"
@input="updateLightIntensity"
/>
<span>{{ lightIntensity.toFixed(1) }}</span>
</div>
</div>
<!-- Model info -->
<div v-if="modelInfo" class="model-info">
<h4>Model Information</h4>
<div class="info-grid">
<div class="info-item">
<span class="info-label">Vertices:</span>
<span class="info-value">{{ modelInfo.vertexCount.toLocaleString() }}</span>
<span class="info-value">{{
modelInfo.vertexCount.toLocaleString()
}}</span>
</div>
<div class="info-item">
<span class="info-label">Faces:</span>
<span class="info-value">{{ modelInfo.faceCount.toLocaleString() }}</span>
<span class="info-value">{{
modelInfo.faceCount.toLocaleString()
}}</span>
</div>
<div class="info-item">
<span class="info-label">Materials:</span>
@@ -101,12 +102,14 @@
</div>
<div class="info-item">
<span class="info-label">File Size:</span>
<span class="info-value">{{ formatFileSize(modelInfo.fileSize) }}</span>
<span class="info-value">{{
formatFileSize(modelInfo.fileSize)
}}</span>
</div>
</div>
</div>
</div>
<!-- Performance metrics -->
<div v-if="performanceMetrics" class="performance-metrics">
<h4>Performance Metrics</h4>
@@ -117,11 +120,15 @@
</div>
<div class="metric">
<span class="metric-label">Render Time:</span>
<span class="metric-value">{{ performanceMetrics.renderTime }}ms</span>
<span class="metric-value"
>{{ performanceMetrics.renderTime }}ms</span
>
</div>
<div class="metric">
<span class="metric-label">Memory Usage:</span>
<span class="metric-value">{{ performanceMetrics.memoryUsage }}MB</span>
<span class="metric-value"
>{{ performanceMetrics.memoryUsage }}MB</span
>
</div>
<div class="metric">
<span class="metric-label">Draw Calls:</span>
@@ -133,7 +140,7 @@
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-facing-decorator';
import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
interface ModelInfo {
vertexCount: number;
@@ -155,43 +162,43 @@ interface PerformanceMetrics {
/**
* ThreeJS 3D Model Viewer Component
*
*
* Demonstrates lazy loading for heavy 3D rendering libraries.
* This component would benefit from lazy loading as ThreeJS is a large
* library that's only needed for 3D visualization features.
*
*
* @author Matthew Raymer
* @version 1.0.0
*/
@Component({
name: 'ThreeJSViewer'
name: "ThreeJSViewer",
})
export default class ThreeJSViewer extends Vue {
@Prop({ required: true }) readonly modelUrl!: string;
// Component state
isLoading = false;
isModelLoaded = false;
loadError: string | null = null;
loadingProgress = 0;
// Animation state
isAnimating = false;
showWireframe = false;
// Camera and lighting controls
cameraDistance = 5;
rotationSpeed = 0.5;
lightIntensity = 1;
// Canvas references
canvasContainer: HTMLElement | null = null;
threeCanvas: HTMLCanvasElement | null = null;
// Model and performance data
modelInfo: ModelInfo | null = null;
performanceMetrics: PerformanceMetrics | null = null;
// ThreeJS objects (will be lazy loaded)
private three: any = null;
private scene: any = null;
@@ -202,98 +209,97 @@ export default class ThreeJSViewer extends Vue {
private animationId: number | null = null;
private frameCount = 0;
private lastTime = 0;
// Lifecycle hooks
mounted(): void {
console.log('[ThreeJSViewer] Component mounted');
console.log("[ThreeJSViewer] Component mounted");
this.initializeCanvas();
}
beforeUnmount(): void {
this.cleanup();
console.log('[ThreeJSViewer] Component unmounting');
console.log("[ThreeJSViewer] Component unmounting");
}
// Methods
private initializeCanvas(): void {
this.canvasContainer = this.$refs.canvasContainer as HTMLElement;
this.threeCanvas = this.$refs.threeCanvas as HTMLCanvasElement;
if (this.threeCanvas) {
this.threeCanvas.width = this.canvasContainer.clientWidth;
this.threeCanvas.height = this.canvasContainer.clientHeight;
}
}
async loadModel(): Promise<void> {
if (this.isLoading || !this.modelUrl) return;
this.isLoading = true;
this.loadError = null;
this.loadingProgress = 0;
try {
console.log('[ThreeJSViewer] Loading 3D model:', this.modelUrl);
console.log("[ThreeJSViewer] Loading 3D model:", this.modelUrl);
// Lazy load ThreeJS
await this.loadThreeJS();
// Initialize scene
await this.initializeScene();
// Load model
await this.loadModelFile();
// Start rendering
this.startRendering();
this.isModelLoaded = true;
this.isLoading = false;
// Emit model loaded event
this.$emit('model-loaded', this.modelInfo);
console.log('[ThreeJSViewer] Model loaded successfully');
this.$emit("model-loaded", this.modelInfo);
console.log("[ThreeJSViewer] Model loaded successfully");
} catch (error) {
console.error('[ThreeJSViewer] Failed to load model:', error);
this.loadError = error instanceof Error ? error.message : 'Unknown error';
console.error("[ThreeJSViewer] Failed to load model:", error);
this.loadError = error instanceof Error ? error.message : "Unknown error";
this.isLoading = false;
}
}
private async loadThreeJS(): Promise<void> {
// Simulate loading ThreeJS library
this.loadingProgress = 20;
await this.simulateLoading(500);
// In a real implementation, you would import ThreeJS here
// this.three = await import('three');
this.loadingProgress = 40;
await this.simulateLoading(300);
}
private async initializeScene(): Promise<void> {
this.loadingProgress = 60;
// Simulate scene initialization
await this.simulateLoading(400);
// In a real implementation, you would set up ThreeJS scene here
// this.scene = new this.three.Scene();
// this.camera = new this.three.PerspectiveCamera(75, width / height, 0.1, 1000);
// this.renderer = new this.three.WebGLRenderer({ canvas: this.threeCanvas });
this.loadingProgress = 80;
}
private async loadModelFile(): Promise<void> {
this.loadingProgress = 90;
// Simulate model loading
await this.simulateLoading(600);
// Simulate model info
this.modelInfo = {
vertexCount: Math.floor(Math.random() * 50000) + 1000,
@@ -302,144 +308,144 @@ export default class ThreeJSViewer extends Vue {
fileSize: Math.floor(Math.random() * 5000000) + 100000,
boundingBox: {
min: { x: -1, y: -1, z: -1 },
max: { x: 1, y: 1, z: 1 }
}
max: { x: 1, y: 1, z: 1 },
},
};
this.loadingProgress = 100;
}
private async simulateLoading(delay: number): Promise<void> {
return new Promise(resolve => setTimeout(resolve, delay));
return new Promise((resolve) => setTimeout(resolve, delay));
}
private startRendering(): void {
if (!this.isModelLoaded) return;
this.isAnimating = true;
this.animate();
// Start performance monitoring
this.startPerformanceMonitoring();
}
private animate(): void {
if (!this.isAnimating) return;
this.animationId = requestAnimationFrame(() => this.animate());
// Simulate model rotation
if (this.model && this.rotationSpeed > 0) {
// this.model.rotation.y += this.rotationSpeed * 0.01;
}
// Simulate rendering
// this.renderer.render(this.scene, this.camera);
this.frameCount++;
}
private startPerformanceMonitoring(): void {
const updateMetrics = () => {
if (!this.isAnimating) return;
const now = performance.now();
const deltaTime = now - this.lastTime;
if (deltaTime > 0) {
const fps = Math.round(1000 / deltaTime);
this.performanceMetrics = {
fps: Math.min(fps, 60), // Cap at 60 FPS for display
renderTime: Math.round(deltaTime),
memoryUsage: Math.round((Math.random() * 50 + 10) * 100) / 100,
drawCalls: Math.floor(Math.random() * 100) + 10
drawCalls: Math.floor(Math.random() * 100) + 10,
};
}
this.lastTime = now;
requestAnimationFrame(updateMetrics);
};
updateMetrics();
}
resetCamera(): void {
if (!this.isModelLoaded) return;
this.cameraDistance = 5;
this.updateCameraDistance();
console.log('[ThreeJSViewer] Camera reset');
console.log("[ThreeJSViewer] Camera reset");
}
toggleAnimation(): void {
this.isAnimating = !this.isAnimating;
if (this.isAnimating) {
this.animate();
} else if (this.animationId) {
cancelAnimationFrame(this.animationId);
this.animationId = null;
}
console.log('[ThreeJSViewer] Animation toggled:', this.isAnimating);
console.log("[ThreeJSViewer] Animation toggled:", this.isAnimating);
}
toggleWireframe(): void {
this.showWireframe = !this.showWireframe;
// In a real implementation, you would toggle wireframe mode
// this.model.traverse((child: any) => {
// if (child.isMesh) {
// child.material.wireframe = this.showWireframe;
// }
// });
console.log('[ThreeJSViewer] Wireframe toggled:', this.showWireframe);
console.log("[ThreeJSViewer] Wireframe toggled:", this.showWireframe);
}
updateCameraDistance(): void {
if (!this.isModelLoaded) return;
// In a real implementation, you would update camera position
// this.camera.position.z = this.cameraDistance;
// this.camera.lookAt(0, 0, 0);
}
updateLightIntensity(): void {
if (!this.isModelLoaded) return;
// In a real implementation, you would update light intensity
// this.light.intensity = this.lightIntensity;
}
retryLoad(): void {
this.loadError = null;
this.loadModel();
}
private cleanup(): void {
if (this.animationId) {
cancelAnimationFrame(this.animationId);
this.animationId = null;
}
if (this.renderer) {
this.renderer.dispose();
}
this.isAnimating = false;
this.isModelLoaded = false;
}
formatFileSize(bytes: number): string {
const sizes = ['B', 'KB', 'MB', 'GB'];
const sizes = ["B", "KB", "MB", "GB"];
const i = Math.floor(Math.log(bytes) / Math.log(1024));
return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${sizes[i]}`;
}
// Event emitters
@Emit('model-loaded')
@Emit("model-loaded")
emitModelLoaded(info: ModelInfo): ModelInfo {
return info;
}
@@ -499,8 +505,12 @@ export default class ThreeJSViewer extends Vue {
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-detail {
@@ -654,4 +664,4 @@ export default class ThreeJSViewer extends Vue {
color: #007bff;
font-weight: bold;
}
</style>
</style>