From a793a4b29d5ea2a866caf84f7d4a49ae14d5be40 Mon Sep 17 00:00:00 2001 From: Abhay Date: Tue, 10 Jan 2023 01:20:07 +0530 Subject: [PATCH 1/3] Add Hindi support Closes #12 --- src/app.css | 5 +++ src/lib/AddEditQ.svelte | 19 ++++++----- src/lib/constants.ts | 32 ++++++++++++++++++ src/lib/stores.ts | 18 ++++++++++ src/lib/types.ts | 4 +++ src/lib/utils.ts | 9 +++++ src/routes/+layout.svelte | 56 ++++++++++++++++++++++--------- src/routes/+page.svelte | 18 ++++++---- src/routes/edit/[id]/+page.svelte | 7 ++-- src/routes/new/+page.svelte | 3 +- src/routes/use/[id]/+page.svelte | 11 +++--- 11 files changed, 144 insertions(+), 38 deletions(-) create mode 100644 src/lib/constants.ts create mode 100644 src/lib/stores.ts create mode 100644 src/lib/utils.ts diff --git a/src/app.css b/src/app.css index 5e7298b..62fde91 100644 --- a/src/app.css +++ b/src/app.css @@ -15,6 +15,10 @@ @apply text-2xl font-semibold; } + select { + @apply bg-orange-50; + } + .filled { @apply inline-block text-center text-xl bg-orange-600 text-orange-50 rounded-full p-3; } @@ -24,6 +28,7 @@ } } +/* Progress bar */ #nprogress .bar { background: #ea580c; height: 4px; diff --git a/src/lib/AddEditQ.svelte b/src/lib/AddEditQ.svelte index 6f2896e..f95db67 100644 --- a/src/lib/AddEditQ.svelte +++ b/src/lib/AddEditQ.svelte @@ -11,6 +11,7 @@ SaveIcon, ThreeBarsIcon, } from "./icons"; + import { labels } from "./stores"; // Props export let editMode = false; @@ -119,8 +120,7 @@ }; const handleItemEdit = (id: string, value: string) => { - const newValue = - window && window.prompt(`Edit Item Name (Max 5 Characters)`, value); + const newValue = window && window.prompt($labels.EDIT_ITEM_NAME, value); if (!newValue || newValue.length > 5) return; items = items.map((item) => { @@ -133,7 +133,7 @@ key === "Enter" && newItemInput.focus()} /> @@ -163,7 +163,8 @@ class="flex items-center gap-2" on:click={() => handleItemDelete(id)} > - Remove {@html CrossIcon} + {$labels.REMOVE} + {@html CrossIcon} {/each} @@ -174,7 +175,7 @@ key === "Enter" && handleItemAdd()} @@ -183,7 +184,8 @@ class="filled w-fit py-1 flex items-center gap-2" on:click={handleItemAdd} > - Add {@html PlusIcon} + {$labels.ADD} + {@html PlusIcon} @@ -193,14 +195,15 @@ type="checkbox" bind:checked={showCounter} /> - Add Counter + {$labels.ADD_COUNTER} {#if error}

{error}

diff --git a/src/lib/constants.ts b/src/lib/constants.ts new file mode 100644 index 0000000..f6f8641 --- /dev/null +++ b/src/lib/constants.ts @@ -0,0 +1,32 @@ +// Dependencies +import type { LabelsType } from "./types"; + +// Constants +export const LANGUAGES = ["EN", "HI"]; + +export const LABELS: LabelsType = { + NEW: { EN: "New", HI: "नई पंक्ति बनाएँ" }, + MY_QUEUES: { EN: "My Queues", HI: "मेरी पंक्तियाँ" }, + NO_QUEUES_FOUND: { EN: "No Queues Found", HI: "कोई पंक्ति नहीं है" }, + CREATE_NEW_QUEUE: { EN: "Create New Queue", HI: "नई पंक्ति बनाएँ" }, + ENTER_QUEUE_NAME: { EN: "Enter Queue Name", HI: "पंक्ति का नाम डालें" }, + ENTER_ITEM_NAME: { EN: "Enter Item Name", HI: "वस्तु का नाम डालें" }, + ADD: { EN: "Add", HI: "डालें" }, + ADD_COUNTER: { EN: "Add Counter", HI: "पंक्ति में गणित्र डालें" }, + SAVE: { EN: "Save", HI: "सेव करें" }, + REMOVE: { EN: "Remove", HI: "हटाएँ" }, + DELETE_ALL: { EN: "Delete All", HI: "सारी पंक्तियाँ हटाएँ" }, + SURE: { EN: "Sure?", HI: "पक्का?" }, + EDIT: { EN: "Edit", HI: "एडिट" }, + USE: { EN: "Use", HI: "उपयोग" }, + SEND_TO_LAST: { EN: "Send to Last", HI: "अंत में भेजें" }, + UNDO: { EN: "Undo", HI: "पूर्ववत करें" }, + UP_NEXT: { EN: "Up Next", HI: "अगला" }, + LAST_COUNT: { EN: "Last Count", HI: "पिछली संख्या" }, + EDIT_ITEM_NAME: { + EN: "Edit Item Name (Max 5 Characters)", + HI: "वास्तु का नाम एडिट करें (अधिकतम 5 अक्षर)", + }, + EDIT_QUEUE: { EN: "Edit Queue", HI: "पंक्ति एडिट करें" }, + DELETE: { EN: "Delete", HI: "पंक्ति हटाएँ" }, +}; diff --git a/src/lib/stores.ts b/src/lib/stores.ts new file mode 100644 index 0000000..b0f4b8d --- /dev/null +++ b/src/lib/stores.ts @@ -0,0 +1,18 @@ +// Dependencies +import { derived, writable, type Readable } from "svelte/store"; +import { LABELS } from "./constants"; + +// Stores +export const appLanguage = writable("EN"); + +export const labels: Readable<{ [x: string]: string }> = derived( + appLanguage, + ($appLanguage) => + Object.keys(LABELS).reduce((acc, curr) => { + const labelObject = LABELS[curr]; + return { + ...acc, + [curr]: labelObject[$appLanguage as keyof typeof labelObject], + }; + }, {}) +); diff --git a/src/lib/types.ts b/src/lib/types.ts index 5fd743a..e94117c 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -16,3 +16,7 @@ export type QueuesType = QueueType[] | []; export type ValuesType = { [x: string]: number; }; + +export type LabelsType = { + [x: string]: { EN: string; HI: string }; +}; diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 0000000..910b1cf --- /dev/null +++ b/src/lib/utils.ts @@ -0,0 +1,9 @@ +// Dependencies +import { LABELS } from "./constants"; + +// Utilities +export const getLabel = (labelName: string, appLanguage: string) => { + const labelObject = LABELS[labelName]; + const labelValue = labelObject[appLanguage as keyof typeof labelObject]; + return labelValue; +}; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 867e0ec..e2df2f1 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,5 +1,7 @@ -
-

f • i • f • o

+
+ +

+ f • i • f • o +

@@ -20,17 +29,34 @@
- Made with - - 🧡 - - in India by - - Abhay - + {#if $appLanguage === "EN"} + Made with + + 🧡 + + in India by + + Abhay + + {:else} + भारत में + + 🧡 + + सहित + + अभय + + द्वारा विकसित + {/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 41bc4be..5b9cb5e 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -3,6 +3,7 @@ import { browser } from "$app/environment"; import Divider from "$lib/Divider.svelte"; import { ArrowRightIcon, DangerIcon, EditIcon, PlusIcon } from "$lib/icons"; + import { labels } from "$lib/stores"; import type { QueuesType } from "$lib/types"; // State @@ -16,7 +17,7 @@ // Handlers const handleDeleteAll = () => { if (!deleteButtonLabel.length) { - deleteButtonLabel = "Sure?"; + deleteButtonLabel = $labels.SURE; return; } @@ -29,19 +30,20 @@ - New {@html PlusIcon} + {$labels.NEW} + {@html PlusIcon}

- My Queues + {$labels.MY_QUEUES} {#if queues.length} {/if} @@ -51,16 +53,18 @@ {#each queues as { id, name } (id)}
  • - {@html EditIcon} Edit + {@html EditIcon} + {$labels.EDIT} {name} - Use {@html ArrowRightIcon} + {$labels.USE} + {@html ArrowRightIcon}
  • {:else} -
  • No Queues Found
  • +
  • {$labels.NO_QUEUES_FOUND}
  • {/each} diff --git a/src/routes/edit/[id]/+page.svelte b/src/routes/edit/[id]/+page.svelte index 50b9136..482b19f 100644 --- a/src/routes/edit/[id]/+page.svelte +++ b/src/routes/edit/[id]/+page.svelte @@ -7,6 +7,7 @@ import { goto } from "$app/navigation"; import { browser } from "$app/environment"; import type { QueueType } from "$lib/types"; + import { labels } from "$lib/stores"; // Props export let data: PageData; @@ -33,7 +34,7 @@ // Handlers const handleDelete = () => { if (!deleteButtonLabel) { - deleteButtonLabel = "Sure?"; + deleteButtonLabel = $labels.SURE; return; } @@ -45,7 +46,7 @@
    -

    Edit Queue

    +

    {$labels.EDIT_QUEUE}

    @@ -54,7 +55,7 @@ class="filled flex items-center gap-2 py-0 text-base" on:click={handleDelete} > - {deleteButtonLabel || "Delete"} + {deleteButtonLabel || $labels.DELETE} {@html DangerIcon}
    diff --git a/src/routes/new/+page.svelte b/src/routes/new/+page.svelte index 29476b5..a94cccb 100644 --- a/src/routes/new/+page.svelte +++ b/src/routes/new/+page.svelte @@ -1,8 +1,9 @@ -

    Create New Queue

    +

    {$labels.CREATE_NEW_QUEUE}

    diff --git a/src/routes/use/[id]/+page.svelte b/src/routes/use/[id]/+page.svelte index 191ce7e..f844ea7 100644 --- a/src/routes/use/[id]/+page.svelte +++ b/src/routes/use/[id]/+page.svelte @@ -9,6 +9,7 @@ import { crossfade } from "svelte/transition"; import { flip } from "svelte/animate"; import { goto } from "$app/navigation"; + import { labels } from "$lib/stores"; // Props export let data: PageData; @@ -86,7 +87,8 @@
    {#if states.length} {/if} @@ -116,7 +118,8 @@ class="filled py-1 text-sm flex items-center gap-2" on:click={() => handleSendLast(index)} > - Send to Last {@html BarsArrowDownIcon} + {$labels.SEND_TO_LAST} + {@html BarsArrowDownIcon} {/if} @@ -140,12 +143,12 @@ {#if index === 0} - Up Next + {$labels.UP_NEXT} {/if} {#if count} - Last Count | {count} + {$labels.LAST_COUNT} | {count} {/if} From f970bccdabb19822f020fd15ed4fe7017ca7c918 Mon Sep 17 00:00:00 2001 From: Abhay Date: Tue, 10 Jan 2023 01:31:57 +0530 Subject: [PATCH 2/3] Add hindi support for errors --- src/lib/AddEditQ.svelte | 8 ++++---- src/lib/constants.ts | 16 ++++++++++++++++ 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/src/lib/AddEditQ.svelte b/src/lib/AddEditQ.svelte index f95db67..534a642 100644 --- a/src/lib/AddEditQ.svelte +++ b/src/lib/AddEditQ.svelte @@ -55,7 +55,7 @@ if (!newItemValue) return; if (newItemValue.length > 5) { - error = "item name must be less than 5 characters"; + error = $labels.ITEM_LESS_THAN_5_ERROR; return; } @@ -76,17 +76,17 @@ const handleQueueSave = () => { if (!name) { - error = "please enter queue name"; + error = $labels.ENTER_QUEUE_NAME_ERROR; return; } if (name.length > 10) { - error = "queue name must be less than 10 characters"; + error = $labels.QUEUE_LESS_THAN_10_ERROR; return; } if (!items.length) { - error = "please add atleast one item"; + error = $labels.ITEM_ATLEAST_ONE_ERROR; return; } diff --git a/src/lib/constants.ts b/src/lib/constants.ts index f6f8641..70bdfa6 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -29,4 +29,20 @@ export const LABELS: LabelsType = { }, EDIT_QUEUE: { EN: "Edit Queue", HI: "पंक्ति एडिट करें" }, DELETE: { EN: "Delete", HI: "पंक्ति हटाएँ" }, + ITEM_LESS_THAN_5_ERROR: { + EN: "item name must be less than 5 characters", + HI: "वस्तु का नाम 5 अक्षरों से काम का होना चाहिए", + }, + ENTER_QUEUE_NAME_ERROR: { + EN: "please enter queue name", + HI: "कृपया पंक्ति का नाम डालें", + }, + QUEUE_LESS_THAN_10_ERROR: { + EN: "queue name must be less than 10 characters", + HI: "पंक्ति का नाम 10 अक्षरों से काम का होना चाहिए", + }, + ITEM_ATLEAST_ONE_ERROR: { + EN: "please add atleast one item", + HI: "कृपया कम से कम एक वस्तु डालें", + }, }; From 78b690a1c90af52608d52dc534e57c73656f92ba Mon Sep 17 00:00:00 2001 From: Abhay Date: Tue, 10 Jan 2023 01:34:46 +0530 Subject: [PATCH 3/3] 1.6.0 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0e0eb42..bb65866 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "fifo", - "version": "1.5.0", + "version": "1.6.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "fifo", - "version": "1.5.0", + "version": "1.6.0", "dependencies": { "nprogress": "^0.2.0" }, diff --git a/package.json b/package.json index e466ffe..89f3db4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fifo", - "version": "1.5.0", + "version": "1.6.0", "private": true, "scripts": { "dev": "vite dev",