Added button for barcode scan

openfoodfacts · Nov 20, 2023 · e62bed9 · e62bed9
1 parent 56d7df6
commit e62bed9
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 47 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,8 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
+		"@iconify-json/mdi": "^1.1.55",
+		"@iconify/tailwind": "^0.1.3",
 		"@sveltejs/adapter-auto": "^2.1.1",
 		"@sveltejs/kit": "^1.27.5",
 		"@tailwindcss/typography": "^0.5.10",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.html b/src/app.html
@@ -1,12 +1,15 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<meta name="viewport" content="width=device-width" />
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
+
 </html>
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
@@ -13,17 +13,16 @@
 
 		return name;
 	}
+
+	$: message = $page.error?.message;
+	$: errors = $page.error?.errors;
 </script>
 
 <div class="alert alert-error">
 	<div>
-		<h1 class="mb-3 text-xl font-bold">
-			{$page.error?.message}
-		</h1>
-
-		{#if $page.error?.errors != null}
-			{@const errors = $page.error.errors}
+		<h1 class="mb-3 text-xl font-bold">{message}</h1>
 
+		{#if errors != null}
 			<p>
 				{errors.length} error{#if errors.length > 1}s{/if} occurred:
 			</p>
@@ -32,12 +31,8 @@
 				{#each errors as error}
 					<li class="mb-2 ms-4">
 						<h3>
-							<span class="font-bold">
-								{getLcNameOrDefault(error.impact)}:
-							</span>
-							<span>
-								{getLcNameOrDefault(error.message)}
-							</span>
+							<span class="font-bold"> {getLcNameOrDefault(error.impact)}: </span>
+							<span> {getLcNameOrDefault(error.message)} </span>
 						</h3>
 						<div class="font-mono text-xs">
 							<p>Impact ID: {error.impact.id}</p>

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -20,21 +20,26 @@
 	</div>
 	<div class="navbar-center">
 		<div class="form-control">
-			<div class="join">
-				<input
-					type="text"
-					bind:value={barcode}
-					class="input join-item input-bordered w-full"
-					placeholder="Barcode"
-				/>
+			<div>
+				<div class="join">
+					<input
+						type="text"
+						bind:value={barcode}
+						class="input join-item input-bordered w-full"
+						placeholder="Barcode"
+					/>
+					<button
+						class="btn btn-square btn-secondary join-item px-10"
+						on:click={() => (window.location.href = '/products/' + barcode)}
+						disabled={barcode == null || barcode == ''}
+					>
+						Go
+					</button>
+				</div>
 
-				<button
-					class="btn btn-square btn-secondary join-item px-10"
-					on:click={() => (window.location.href = '/products/' + barcode)}
-					disabled={barcode == null || barcode == ''}
-				>
-					Go
-				</button>
+				<a class="btn btn-secondary ms-4 px-5" href="/qr" title="Scan a barcode">
+					<span class="icon-[mdi--camera]"></span>
+				</a>
 			</div>
 		</div>
 	</div>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,16 +1,18 @@
 <script lang="ts">
+	import type { PageData } from './$types';
+
 	import { navigating } from '$app/stores';
+
 	import Card from '$lib/ui/Card.svelte';
 	import Logo from '$lib/ui/Logo.svelte';
-	import type { PageData } from './$types';
 
 	export let data: PageData;
 </script>
 
-<div class="container xl:max-w-6xl mx-auto my-4 flex flex-col items-center">
+<div class="container mx-auto my-4 flex flex-col items-center xl:max-w-6xl">
 	<Card>
 		<div class="card-body items-center text-center">
-			<h3 class="card-title text-2xl mb-4">
+			<h3 class="card-title mb-4 text-2xl">
 				Welcome to
 				<Logo />
 				Explorer!
@@ -26,25 +28,25 @@
 
 	<div class="mt-8 w-full">
 		{#await data.streamed.products}
-			<div class="justify-center flex">
+			<div class="flex justify-center">
 				<span class="loading loading-ring loading-lg mx-auto" />
 			</div>
 		{:then products}
 			<div class="grid grid-cols-4 gap-4">
 				{#each products as state}
 					<a
 						href={`/products/${state.product.code}`}
-						class="btn btn-ghost h-auto p-2 justify-normal text-start pointer-events-none"
+						class="btn btn-ghost pointer-events-none h-auto justify-normal p-2 text-start"
 						class:pointer-events-none={$navigating}
 					>
 						<div class="flex flex-row items-center">
-							<div class="mr-4 w-16 flex-shrink-0 flex justify-center items-center">
+							<div class="mr-4 flex w-16 flex-shrink-0 items-center justify-center">
 								{#if $navigating?.to?.params?.barcode === state.product.code}
 									<span class="loading loading-ring loading-lg mx-auto my-auto" />
 								{:else if state.product.image_front_small_url}
 									<img
 										src={state.product.image_front_small_url}
-										class="h-16 object-cover rounded-lg"
+										class="h-16 rounded-lg object-cover"
 										alt="Product front"
 									/>
 								{/if}

diff --git a/src/routes/+page.ts b/src/routes/+page.ts
@@ -14,14 +14,16 @@ type QuestionsResponse = {
 	count: number;
 };
 
+const count = '10';
+
 async function productsWithQuestions(
 	fetch: typeof window.fetch
 ): Promise<ProductState<ProductReduced>[]> {
-	const res: QuestionsResponse = await fetch(
-		'https://robotoff.openfoodfacts.org/api/v1/questions?count=10'
+	const response: QuestionsResponse = await fetch(
+		'https://robotoff.openfoodfacts.org/api/v1/questions?' + new URLSearchParams({ count: count })
 	).then((it) => it.json());
 
-	const productsPromises = res.questions.map((question) =>
+	const productsPromises = response.questions.map((question) =>
 		getProductReducedForCard(question.barcode, fetch)
 	);
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,3 +1,5 @@
+import { addDynamicIconSelectors } from '@iconify/tailwind';
+
 /** @type {import('tailwindcss').Config} */
 export default {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
@@ -7,7 +9,8 @@ export default {
 	plugins: [
 		require('daisyui'),
 		require('@tailwindcss/typography'),
-		require('tailwindcss-opentype')
+		require('tailwindcss-opentype'),
+		addDynamicIconSelectors()
 	],
 	daisyui: {
 		themes: [