Recipe language switcher (#305)

* Added recipe language switcher * Added tests * Fixed issue where existing recipes won't edit * Fixes data restored from backups * Fixed tests * include nutrition in backups * Fixed failing tests
jlucaspains · Jun 1, 2024 · 17a5737 · 17a5737
1 parent a696fbd
commit 17a5737
Show file tree

Hide file tree

Showing 14 changed files with 202 additions and 41 deletions.
diff --git a/CNAME b/CNAME
diff --git a/index.html b/index.html
@@ -21,12 +21,12 @@
   <meta property="og:title" content="Sharp Cooking" />
   <meta property="og:description" content="Your personal cooking book app" />
   <meta property="og:type" content="website" />
-  <meta property="og:url" content="https://app.sharpcooking.net/" />
-  <meta property="og:image" content="https://app.sharpcooking.net/android-chrome-512x512.png" />
+  <meta property="og:url" content="https://sharpcooking.lpains.net/" />
+  <meta property="og:image" content="https://sharpcooking.lpains.net/android-chrome-512x512.png" />
   <meta property="og:site_name" content="Sharp Cooking" />
 
   <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:image" content="https://app.sharpcooking.net/android-chrome-512x512.png" />
+  <meta name="twitter:image" content="https://sharpcooking.lpains.net/android-chrome-512x512.png" />
   <meta name="twitter:title" content="Sharp Cooking" />
   <meta name="twitter:description" content="Your personal cooking book app" />
 

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -66,7 +66,9 @@
             "enableCloudShare": "Enable cloud share (preview)",
             "enableCloudShareDescription": "Allows for sharing recipes via cloud with a code. Shared recipes are available for 1 hour for free. By enabling this feature, you agree to the Sharp Cooking Privacy Policy.",
             "enableNutritionFacts": "Enable nutrition labels (preview)",
-            "enableNutritionFactsDescription": "Allows for recipes imported or inputted with nutrition facts to display a nutrition facts label."
+            "enableNutritionFactsDescription": "Allows for recipes imported or inputted with nutrition facts to display a nutrition facts label.",
+            "enableRecipeLanguageSwitcher": "Enable recipe language switcher",
+            "enableRecipeLanguageSwitcherDescription": "Allows for selecting which language a recipe is written in. This directly influences the parsing of recipe ingredients and steps."
         },
         "recipe": {
             "id": {
@@ -121,7 +123,9 @@
                     "carbohydrates": "Carbohydrates (g)",
                     "fiber": "Fiber (g)",
                     "sugar": "Sugar (g)",
-                    "protein": "Protein (g)"
+                    "protein": "Protein (g)",
+                    "changeLanguage": "Change Language",
+                    "changeLanguageTitle": "Change recipe language"
                 },
                 "gallery": {
                     "recipeImage": "Recipe Image"

diff --git a/public/locales/pt/translation.json b/public/locales/pt/translation.json
@@ -66,7 +66,9 @@
             "enableCloudShare": "Ativar compartilhamento na nuvem (preview)",
             "enableCloudShareDescription": "Permite compartilhar receitas via nuvem com código. Receitas compartilhadas estão disponíveis gratuitamente por 1 hora. Ao ativar este recurso, você concorda com a Política de privacidade do Sharp Cooking.",
             "enableNutritionFacts": "Ativar informações nutricionais (preview)",
-            "enableNutritionFactsDescription": "Permite que receitas importadas ou inseridas com informações nutricionais exibam um rótulo de informações nutricionais."
+            "enableNutritionFactsDescription": "Permite que receitas importadas ou inseridas com informações nutricionais exibam um rótulo de informações nutricionais.",
+            "enableRecipeLanguageSwitcher": "Ativar alternador de idioma da receita",
+            "enableRecipeLanguageSwitcherDescription": "Permite selecionar em qual idioma a receita está escrita. Isso influencia diretamente a análise dos ingredientes e passos da receita."
         },
         "recipe": {
             "id": {
@@ -121,7 +123,9 @@
                     "carbohydrates": "Carboidratos (g)",
                     "fiber": "Fibra alimentar (g)",
                     "sugar": "Açúcares (g)",
-                    "protein": "Proteínas (g)"
+                    "protein": "Proteínas (g)",
+                    "changeLanguage": "Alterar idioma",
+                    "changeLanguageTitle": "Alterar idioma da receita"
                 },
                 "gallery": {
                     "recipeImage": "Imagem de Receita"

diff --git a/src/components/RoundButton.vue b/src/components/RoundButton.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+    title: string;
+    testId: string;
+}>();
+</script>
+
+<template>
+    <button class="
+            w-12
+            h-12
+            m-1
+            rounded-full
+            bg-theme-primary
+            hover:bg-theme-secondary
+            focus:bg-theme-secondary
+            focus:shadow-lg
+            shadow-md
+            hover:shadow-lg
+            transition duration-150 ease-in-out
+          " :title="props.title" :data-testid="testId" @click="$emit('click')">
+        <slot />
+    </button>
+</template>
diff --git a/src/pages/options.vue b/src/pages/options.vue
@@ -17,6 +17,7 @@ const useFractions = ref(false);
 const enableYoutubeVideos = ref(false);
 const enableCloudShare = ref(false);
 const enableNutritionFacts = ref(false);
+const enableRecipeLanguageSwitcher = ref(false);
 const stepsInterval = ref(5);
 const stepsIntervalEditing = ref(5);
 const isStepsIntervalModalOpen = ref(false);
@@ -35,12 +36,14 @@ onMounted(async () => {
   const enableYoutubeVideosValue = await getSetting("EnableYoutubeVideos", "false");
   const enableCloudShareValue = await getSetting("EnableCloudShare", "false");
   const enableNutritionFactsValue = await getSetting("EnableNutritionFacts", "false");
+  const enableRecipeLanguageSwitcherValue = await getSetting("EnableRecipeLanguageSwitcher", "false");
 
   stepsInterval.value = parseInt(stepsInvervalValue);
   useFractions.value = useFractionsValue === "true";
   enableYoutubeVideos.value = enableYoutubeVideosValue === "true";
   enableCloudShare.value = enableCloudShareValue === "true";
   enableNutritionFacts.value = enableNutritionFactsValue === "true";
+  enableRecipeLanguageSwitcher.value = enableRecipeLanguageSwitcherValue === "true";
   version.value = import.meta.env.VITE_APP_VERSION;
   selectedLanguage.value = i18next.language;
   storageDescription.value = await getStorageDescription(i18next.language);
@@ -117,6 +120,10 @@ function updateEnableNutritionFacts() {
   saveSetting("EnableNutritionFacts", `${enableNutritionFacts.value}`);
 }
 
+function updateEnableRecipeLanguageSwitcher() {
+  saveSetting("EnableRecipeLanguageSwitcher", `${enableRecipeLanguageSwitcher.value}`);
+}
+
 function showChangeLanguageModal() {
   selectedLanguage.value = i18next.language;
   isLanguagesModalOpen.value = true;
@@ -146,7 +153,7 @@ async function setSelectedLanguage() {
     <div class="p-2 dark:text-white rounded cursor-pointer active:bg-theme-secondary" @click="showChangeLanguageModal">
       <label class="dark:text-white">{{ t("pages.options.language") }}</label>
       <div class="dark:text-white float-right ">
-        <button><svg class="h-6 w-6" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+        <button data-testid="change-lang-button"><svg class="h-6 w-6" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
             fill="none" stroke-linecap="round" stroke-linejoin="round">
             <path stroke="none" d="M0 0h24v24H0z" />
             <polyline points="9 6 15 12 9 18" />
@@ -210,6 +217,16 @@ async function setSelectedLanguage() {
         <span class="text-gray-500 text-sm">{{ t("pages.options.enableNutritionFactsDescription") }}</span>
       </div>
     </div>
+    <div class="mt-4 p-2 rounded cursor-pointer active:bg-theme-secondary">
+      <span class="dark:text-white">{{ t("pages.options.enableRecipeLanguageSwitcher") }}</span>
+      <label data-testid="enable-recipe-language-toggle" class="switch float-right align-middle">
+        <input v-model="enableRecipeLanguageSwitcher" type="checkbox" @change="updateEnableRecipeLanguageSwitcher">
+        <span class="slider round"></span>
+      </label>
+      <div>
+        <span class="text-gray-500 text-sm">{{ t("pages.options.enableRecipeLanguageSwitcherDescription") }}</span>
+      </div>
+    </div>
     <div class="mt-4 p-2 rounded cursor-pointer active:bg-theme-secondary">
       <span class="dark:text-white">{{ t("pages.options.storageStats") }}</span>
       <div>