-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Update plan * Add card-detail-page. * Use MainMessage component. * Style card detail a bit. * Add jsbarcode lib * Render Code 39 * Add a toggle. * Implement mapHtml5QrcodeFormatToJsbarcodeFormat * Display images for barcodes. * Fix detecting of QrCode * Install qrcode * Display QR codes. * Add new item to plan * Suppress warning. * Clean up.
- Loading branch information
1 parent
3ded0fe
commit d772e2c
Showing
18 changed files
with
517 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| 'use client'; | ||
|
|
||
| import useAppState from '@/app/lib/app-state/app-state'; | ||
| import { Routes } from '@/app/lib/shared'; | ||
| import { Barcode } from '@/app/ui/barcode'; | ||
| import CompanyIcon from '@/app/ui/company-icon'; | ||
| import { MainMessage } from '@/app/ui/main-message'; | ||
| import PageTemplate from '@/app/ui/page-template'; | ||
| import { Qrcode } from '@/app/ui/qrcode'; | ||
| import { SecondaryHeader } from '@/app/ui/secondary-header'; | ||
| import { IconCards, IconEdit, IconTrash } from '@tabler/icons-react'; | ||
| import Link from 'next/link'; | ||
| import { useSearchParams } from 'next/navigation'; | ||
|
|
||
| export function CardDetailPage() { | ||
| const searchParams = useSearchParams(); | ||
| const id = searchParams.get('id'); | ||
| const [state] = useAppState(); | ||
| const card = state.cards.find(c => c.id === id); | ||
| if (!card) { | ||
| return ( | ||
| <PageTemplate | ||
| header={<SecondaryHeader title="Card detail" href={Routes.MyCards} />} | ||
| > | ||
| <div className="flex h-2/3 w-full items-center justify-center"> | ||
| <MainMessage | ||
| title="Card not found" | ||
| description={`Something went wrong. Found with id ${id} not found.`} | ||
| > | ||
| <Link href={Routes.MyCards} replace> | ||
| <button className="btn btn-primary"> | ||
| <IconCards className="w-6 h-6" /> | ||
| My cards | ||
| </button> | ||
| </Link> | ||
| </MainMessage> | ||
| </div> | ||
| </PageTemplate> | ||
| ); | ||
| } | ||
| return ( | ||
| <PageTemplate | ||
| header={ | ||
| <SecondaryHeader | ||
| title={card!.name} | ||
| href={Routes.MyCards} | ||
| rightAction={ | ||
| <div className="flex gap-2"> | ||
| <Link href={Routes.MyCards} replace> | ||
| <button className="btn btn-square btn-ghost"> | ||
| <IconTrash /> | ||
| </button> | ||
| </Link> | ||
| <Link href={Routes.MyCards} replace> | ||
| <button className="btn btn-square btn-ghost"> | ||
| <IconEdit /> | ||
| </button> | ||
| </Link> | ||
| </div> | ||
| } | ||
| /> | ||
| } | ||
| > | ||
| <div className="h-full w-full grid grid-col grid-rows-[1fr_auto]"> | ||
| {card.codeFormat === 'QR' ? ( | ||
| <Qrcode code={card.code} /> | ||
| ) : ( | ||
| <Barcode code={card.code} codeFormat={card.codeFormat} /> | ||
| )} | ||
| <div | ||
| className="bg-base-300 p-6" | ||
| style={card.bgColor ? { backgroundColor: card.bgColor } : {}} | ||
| > | ||
| <div className="flex gap-6 items-center"> | ||
| <CompanyIcon {...card} className="w-16 h-16" /> | ||
| <label className="form-control flex-1"> | ||
| <div className="label"> | ||
| <span className="label-text">Card name</span> | ||
| </div> | ||
| <input | ||
| type="text" | ||
| disabled | ||
| value={card.name} | ||
| className="input input-bordered w-full" | ||
| /> | ||
| </label> | ||
| </div> | ||
|
|
||
| <label className="form-control"> | ||
| <div className="label"> | ||
| <span className="label-text">Toggle note visibility</span> | ||
| </div> | ||
| <input type="checkbox" className="toggle" defaultChecked /> | ||
| </label> | ||
| <label className="form-control"> | ||
| <div className="label"> | ||
| <span className="label-text">Card note</span> | ||
| </div> | ||
| <textarea | ||
| className="textarea textarea-bordered h-24" | ||
| value={card.note} | ||
| disabled | ||
| /> | ||
| </label> | ||
| </div> | ||
| </div> | ||
| </PageTemplate> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,11 @@ | ||
| import { CardDetailPage } from '@/app/card/card-detail-page'; | ||
| import Loading from '@/app/ui/loading'; | ||
| import { Suspense } from 'react'; | ||
|
|
||
| export default function CardPage() { | ||
| return <div>Card</div>; | ||
| return ( | ||
| <Suspense fallback={<Loading />}> | ||
| <CardDetailPage /> | ||
| </Suspense> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import { Html5QrcodeSupportedFormats } from 'html5-qrcode'; | ||
|
|
||
| /** | ||
| * @param codeFormat | ||
| * jsbarcode format docs: | ||
| * @link https://github.com/lindell/JsBarcode/wiki/Options#format | ||
| * @link https://github.com/lindell/JsBarcode/wiki#barcodes | ||
| * html5-code format docs: | ||
| * https://scanapp.org/html5-qrcode-docs/docs/supported_code_formats | ||
| */ | ||
| export function mapHtml5QrcodeFormatToJsbarcodeFormat( | ||
| codeFormat: Html5QrcodeSupportedFormats | ||
| ): string { | ||
| switch (codeFormat) { | ||
| case Html5QrcodeSupportedFormats.QR_CODE: | ||
| return 'QR'; | ||
| case Html5QrcodeSupportedFormats.CODE_128: | ||
| return 'CODE128'; | ||
| case Html5QrcodeSupportedFormats.EAN_13: | ||
| return 'EAN13'; | ||
| case Html5QrcodeSupportedFormats.EAN_8: | ||
| return 'EAN8'; | ||
| case Html5QrcodeSupportedFormats.UPC_A: | ||
| case Html5QrcodeSupportedFormats.UPC_E: | ||
| case Html5QrcodeSupportedFormats.UPC_EAN_EXTENSION: | ||
| return 'UPC'; | ||
| case Html5QrcodeSupportedFormats.ITF: | ||
| return 'ITF14'; // ITF format in jsbarcode is often represented as ITF14 | ||
| case Html5QrcodeSupportedFormats.CODE_39: | ||
| return 'CODE39'; | ||
| case Html5QrcodeSupportedFormats.CODE_93: | ||
| return 'CODE93'; | ||
| case Html5QrcodeSupportedFormats.CODABAR: | ||
| return 'codebar'; | ||
| case Html5QrcodeSupportedFormats.AZTEC: | ||
| case Html5QrcodeSupportedFormats.DATA_MATRIX: | ||
| case Html5QrcodeSupportedFormats.MAXICODE: | ||
| case Html5QrcodeSupportedFormats.PDF_417: | ||
| case Html5QrcodeSupportedFormats.RSS_14: | ||
| case Html5QrcodeSupportedFormats.RSS_EXPANDED: | ||
| default: | ||
| throw new Error(`Unsupported code format: ${codeFormat}`); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.