mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-05-07 14:57:12 -04:00
added Contact QR Code Generator
This commit is contained in:
Taltos-ch
parent
530fee9850
commit
a6fc0b5448
7 changed files with 147 additions and 213 deletions
1
components.d.ts
vendored
1
components.d.ts
vendored
|
|
@ -151,6 +151,7 @@ declare module '@vue/runtime-core' {
|
|||
PercentageCalculator: typeof import('./src/tools/percentage-calculator/percentage-calculator.vue')['default']
|
||||
PhoneParserAndFormatter: typeof import('./src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue')['default']
|
||||
QrCodeGenerator: typeof import('./src/tools/qr-code-generator/qr-code-generator.vue')['default']
|
||||
ContactQRCodeGenerator: typeof import('./src/tools/qr-contact-info-generator/qr-contact-info-generator.vue')['default']
|
||||
RandomPortGenerator: typeof import('./src/tools/random-port-generator/random-port-generator.vue')['default']
|
||||
RegexMemo: typeof import('./src/tools/regex-memo/regex-memo.vue')['default']
|
||||
'RegexMemo.content': typeof import('./src/tools/regex-memo/regex-memo.content.md')['default']
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { tool as base64FileConverter } from './base64-file-converter';
|
||||
import { tool as base64StringConverter } from './base64-string-converter';
|
||||
import { tool as basicAuthGenerator } from './basic-auth-generator';
|
||||
import { tool as qrContactInfoGenerator } from './qr-contact-info-generator';
|
||||
import { tool as emailNormalizer } from './email-normalizer';
|
||||
|
||||
import { tool as asciiTextDrawer } from './ascii-text-drawer';
|
||||
|
|
|
|||
|
|
@ -1,49 +0,0 @@
|
|||
import QRCode from 'qrcode';
|
||||
|
||||
interface ContactInfo {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
role: string;
|
||||
phoneNumber: string;
|
||||
email: string;
|
||||
companyName: string;
|
||||
companyWebsite: string;
|
||||
companyAddress: string;
|
||||
}
|
||||
|
||||
const generateContactInfoQRCode = (contactInfo: ContactInfo): void => {
|
||||
const vCard = `
|
||||
BEGIN:VCARD
|
||||
VERSION:3.0
|
||||
N:${contactInfo.lastName};${contactInfo.firstName}
|
||||
FN:${contactInfo.firstName} ${contactInfo.lastName}
|
||||
ORG:${contactInfo.companyName}
|
||||
TITLE:${contactInfo.role}
|
||||
TEL;TYPE=WORK,VOICE:${contactInfo.phoneNumber}
|
||||
EMAIL;TYPE=PREF,INTERNET:${contactInfo.email}
|
||||
URL:${contactInfo.companyWebsite}
|
||||
ADR;TYPE=WORK,PREF:;;${contactInfo.companyAddress}
|
||||
END:VCARD
|
||||
`;
|
||||
|
||||
QRCode.toDataURL(vCard, { errorCorrectionLevel: 'H' }, (err: Error | null, url: string) => {
|
||||
if (err) {
|
||||
console.error(err);
|
||||
return;
|
||||
}
|
||||
console.log(url);
|
||||
});
|
||||
};
|
||||
|
||||
const contactInfo: ContactInfo = {
|
||||
firstName: 'John',
|
||||
lastName: 'Doe',
|
||||
role: 'Software Engineer',
|
||||
phoneNumber: '+1234567890',
|
||||
email: 'john.doe@example.com',
|
||||
companyName: 'Example Inc.',
|
||||
companyWebsite: 'https://www.example.com',
|
||||
companyAddress: '123 Example Street, City, Country'
|
||||
};
|
||||
|
||||
generateContactInfoQRCode(contactInfo);
|
||||
|
|
@ -1,160 +0,0 @@
|
|||
<template>
|
||||
<div class="qr-code-generator">
|
||||
<h1>Contact Info QR Code Generator</h1>
|
||||
<form @submit.prevent="generateQRCode">
|
||||
<div>
|
||||
<label for="firstName">First Name:</label>
|
||||
<input type="text" v-model="contactInfo.firstName" required />
|
||||
</div>
|
||||
<div>
|
||||
<label for="lastName">Last Name:</label>
|
||||
<input type="text" v-model="contactInfo.lastName" required />
|
||||
</div>
|
||||
<div>
|
||||
<label for="role">Role:</label>
|
||||
<input type="text" v-model="contactInfo.role" required />
|
||||
</div>
|
||||
<div>
|
||||
<label for="phoneNumber">Phone Number:</label>
|
||||
<input type="tel" v-model="contactInfo.phoneNumber" required />
|
||||
</div>
|
||||
<div>
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" v-model="contactInfo.email" required />
|
||||
</div>
|
||||
<div>
|
||||
<label for="companyName">Company Name:</label>
|
||||
<input type="text" v-model="contactInfo.companyName" required />
|
||||
</div>
|
||||
<div>
|
||||
<label for="companyWebsite">Company Website:</label>
|
||||
<input type="url" v-model="contactInfo.companyWebsite" required />
|
||||
</div>
|
||||
<div>
|
||||
<label for="companyAddress">Company Address:</label>
|
||||
<input type="text" v-model="contactInfo.companyAddress" required />
|
||||
</div>
|
||||
<button type="submit">Generate QR Code</button>
|
||||
</form>
|
||||
<div v-if="qrCodeUrl">
|
||||
<h2>QR Code:</h2>
|
||||
<img :src="qrCodeUrl" alt="Contact Info QR Code" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import QRCode from 'qrcode';
|
||||
|
||||
interface ContactInfo {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
role: string;
|
||||
phoneNumber: string;
|
||||
email: string;
|
||||
companyName: string;
|
||||
companyWebsite: string;
|
||||
companyAddress: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ContactInfoQRCodeGenerator',
|
||||
setup() {
|
||||
const contactInfo = ref<ContactInfo>({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
role: '',
|
||||
phoneNumber: '',
|
||||
email: '',
|
||||
companyName: '',
|
||||
companyWebsite: '',
|
||||
companyAddress: ''
|
||||
});
|
||||
|
||||
const qrCodeUrl = ref<string | null>(null);
|
||||
|
||||
const generateQRCode = () => {
|
||||
const vCard = `
|
||||
BEGIN:VCARD
|
||||
VERSION:3.0
|
||||
N:${contactInfo.value.lastName};${contactInfo.value.firstName}
|
||||
FN:${contactInfo.value.firstName} ${contactInfo.value.lastName}
|
||||
ORG:${contactInfo.value.companyName}
|
||||
TITLE:${contactInfo.value.role}
|
||||
TEL;TYPE=WORK,VOICE:${contactInfo.value.phoneNumber}
|
||||
EMAIL;TYPE=PREF,INTERNET:${contactInfo.value.email}
|
||||
URL:${contactInfo.value.companyWebsite}
|
||||
ADR;TYPE=WORK,PREF:;;${contactInfo.value.companyAddress}
|
||||
END:VCARD
|
||||
`;
|
||||
|
||||
QRCode.toDataURL(vCard, { errorCorrectionLevel: 'H' }, (err: Error | null, url: string) => {
|
||||
if (err) {
|
||||
console.error(err);
|
||||
return;
|
||||
}
|
||||
qrCodeUrl.value = url;
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
contactInfo,
|
||||
qrCodeUrl,
|
||||
generateQRCode
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.qr-code-generator {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.qr-code-generator h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qr-code-generator form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.qr-code-generator form div {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.qr-code-generator form label {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.qr-code-generator form input {
|
||||
padding: 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.qr-code-generator button {
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.qr-code-generator button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.qr-code-generator img {
|
||||
display: block;
|
||||
margin: 20px auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,13 @@
|
|||
import ContactInfoQRCodeGenerator from './contact-info-qr-code-generator.vue';
|
||||
import { Qrcode } from '@vicons/tabler';
|
||||
import { defineTool } from '../tool';
|
||||
import { translate } from '@/plugins/i18n.plugin';
|
||||
|
||||
export {
|
||||
ContactInfoQRCodeGenerator,
|
||||
};
|
||||
export const tool = defineTool({
|
||||
name: translate('tools.qr-contact-info-generator.title'),
|
||||
path: '/qr-contact-info-generator',
|
||||
description: translate('tools.qr-contact-info-generator.description'),
|
||||
keywords: ['qr', 'contact', 'info', 'generator'],
|
||||
component: () => import('./qr-contact-info-generator.vue'),
|
||||
icon: Qrcode,
|
||||
createdAt: new Date('2025-02-17'),
|
||||
});
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import { type MaybeRef, get } from '@vueuse/core';
|
||||
import QRCode, { type QRCodeErrorCorrectionLevel, type QRCodeToDataURLOptions } from 'qrcode';
|
||||
import { isRef, ref, watch } from 'vue';
|
||||
|
||||
interface ContactInfo {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
jobRole: string;
|
||||
phoneNumber: string;
|
||||
emailAddress: string;
|
||||
companyName: string;
|
||||
companyWebsite: string;
|
||||
companyAddress: string;
|
||||
}
|
||||
|
||||
interface QRCodeOptions {
|
||||
foregroundColor?: string;
|
||||
backgroundColor?: string;
|
||||
}
|
||||
|
||||
export function generateContactQRCode(contact: MaybeRef<ContactInfo>, options: MaybeRef<QRCodeOptions> = {}): Promise<string> {
|
||||
const vCard = ref(`
|
||||
BEGIN:VCARD
|
||||
VERSION:3.0
|
||||
FN:${get(contact).firstName} ${get(contact).lastName}
|
||||
ORG:${get(contact).companyName}
|
||||
TITLE:${get(contact).jobRole}
|
||||
TEL:${get(contact).phoneNumber}
|
||||
EMAIL:${get(contact).emailAddress}
|
||||
URL:${get(contact).companyWebsite}
|
||||
ADR:${get(contact).companyAddress}
|
||||
END:VCARD
|
||||
`);
|
||||
|
||||
const qrOptions: QRCodeToDataURLOptions = {
|
||||
errorCorrectionLevel: 'H' as QRCodeErrorCorrectionLevel,
|
||||
type: 'image/png',
|
||||
margin: 1,
|
||||
color: {
|
||||
dark: get(options).foregroundColor || '#000000ff',
|
||||
light: get(options).backgroundColor || '#ffffffff',
|
||||
},
|
||||
};
|
||||
|
||||
const qrCodeDataUrl = ref('');
|
||||
|
||||
watch(
|
||||
[vCard, options].filter(isRef),
|
||||
async () => {
|
||||
qrCodeDataUrl.value = await QRCode.toDataURL(get(vCard), qrOptions);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
return qrCodeDataUrl.value;
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Contact QR Code Generator</h1>
|
||||
<form @submit.prevent="generateQRCode">
|
||||
<input v-model="contact.firstName" placeholder="First Name" required />
|
||||
<input v-model="contact.lastName" placeholder="Last Name" required />
|
||||
<input v-model="contact.jobRole" placeholder="Job Role" required />
|
||||
<input v-model="contact.phoneNumber" placeholder="Phone Number" required />
|
||||
<input v-model="contact.emailAddress" placeholder="Email Address" required />
|
||||
<input v-model="contact.companyName" placeholder="Company Name" required />
|
||||
<input v-model="contact.companyWebsite" placeholder="Company Website" required />
|
||||
<input v-model="contact.companyAddress" placeholder="Company Address" required />
|
||||
<input v-model="foregroundColor" placeholder="Foreground Color" />
|
||||
<input v-model="backgroundColor" placeholder="Background Color" />
|
||||
<button type="submit">Generate QR Code</button>
|
||||
</form>
|
||||
<div v-if="qrCodeDataUrl">
|
||||
<img :src="qrCodeDataUrl" alt="Contact QR Code" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import { generateContactQRCode } from './qr-contact-info-generator';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ContactQRCodeGenerator',
|
||||
setup() {
|
||||
const contact = ref({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
jobRole: '',
|
||||
phoneNumber: '',
|
||||
emailAddress: '',
|
||||
companyName: '',
|
||||
companyWebsite: '',
|
||||
companyAddress: ''
|
||||
});
|
||||
const foregroundColor = ref('#000000ff');
|
||||
const backgroundColor = ref('#ffffffff');
|
||||
const qrCodeDataUrl = ref<string | null>(null);
|
||||
|
||||
const generateQRCode = async () => {
|
||||
qrCodeDataUrl.value = await generateContactQRCode(contact.value, {
|
||||
foregroundColor: foregroundColor.value,
|
||||
backgroundColor: backgroundColor.value
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
contact,
|
||||
foregroundColor,
|
||||
backgroundColor,
|
||||
qrCodeDataUrl,
|
||||
generateQRCode
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-top: 20px;
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue