Release v0.1.0 Candidate (#85)

* Changed uvicorn port to 80

* Changed port in docker-compose to match dockerfile

* Readded environment variables in docker-compose

* production image rework

* Use opengraph metadata to make basic recipe cards when full recipe metadata is not available

* fixed instrucitons on parse

* add last_recipe

* automated testing

* roadmap update

* Sqlite (#75)

* file structure

* auto-test

* take 2

* refactor ap scheduler and startup process

* fixed scraper error

* database abstraction

* database abstraction

* port recipes over to new schema

* meal migration

* start settings migration

* finale mongo port

* backup improvements

* migration imports to new DB structure

* unused import cleanup

* docs strings

* settings and theme import logic

* cleanup

* fixed tinydb error

* requirements

* fuzzy search

* remove scratch file

* sqlalchemy models

* improved search ui

* recipe models almost done

* sql modal population

* del scratch

* rewrite database model mixins

* mostly grabage

* recipe updates

* working sqllite

* remove old files and reorganize

* final cleanup

Co-authored-by: Hayden <hay-kot@pm.me>

* Backup card (#78)

* backup / import dialog

* upgrade to new tag method

* New import card

* rename settings.py to app_config.py

* migrate to poetry for development

* fix failing test

Co-authored-by: Hayden <hay-kot@pm.me>

* added mkdocs to docker-compose

* Translations (#72)

* Translations + danish

* changed back proxy target to use ENV

* Resolved more merge conflicts

* Removed test in translation

* Documentation of translations

* Updated translations

* removed old packages

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>

* fail to start bug fixes

* feature: prep/cook/total time slots (#80)

Co-authored-by: Hayden <hay-kot@pm.me>

* missing bind attributes

* Bug fixes (#81)

* fix: url remains after succesful import

* docs: changelog + update todos

* arm image

* arm compose

* compose updates

* update poetry

* arm support

Co-authored-by: Hayden <hay-kot@pm.me>

* dockerfile hotfix

* dockerfile hotfix

* Version Release Final Touches (#84)

* Remove slim

* bug: opacity issues

* bug: startup failure with no database

* ci/cd on dev branch

* formatting

* v0.1.0 documentation

Co-authored-by: Hayden <hay-kot@pm.me>

* db init hotfix

* bug: fix crash in mongo

* fix mongo bug

* fixed version notifier

* finale changelog

Co-authored-by: kentora <=>
Co-authored-by: Hayden <hay-kot@pm.me>
Co-authored-by: Richard Mitic <richard.h.mitic@gmail.com>
Co-authored-by: kentora <kentora@kentora.dk>

frontend/src/components/Settings/Backup/BackupCard.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <ImportDialog
+      :name="selectedName"
+      :date="selectedDate"
+      ref="import_dialog"
+      @import="importBackup"
+      @delete="deleteBackup"
+    />
+    <v-row>
+      <v-col
+        :sm="6"
+        :md="6"
+        :lg="4"
+        :xl="4"
+        v-for="backup in backups"
+        :key="backup.name"
+      >
+        <v-card @click="openDialog(backup)">
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="12" sm="2">
+                <v-icon color="primary"> mdi-backup-restore </v-icon>
+              </v-col>
+              <v-col cols="12" sm="10">
+                <div>
+                  <strong>{{ backup.name }}</strong>
+                </div>
+                <div>{{ readableTime(backup.date) }}</div>
+              </v-col>
+            </v-row>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import ImportDialog from "./ImportDialog";
+import api from "../../../api";
+import utils from "../../../utils";
+export default {
+  props: {
+    backups: Array,
+  },
+  components: {
+    ImportDialog,
+  },
+  data() {
+    return {
+      selectedName: "",
+      selectedDate: "",
+      loading: false,
+    };
+  },
+  methods: {
+    openDialog(backup) {
+      this.selectedDate = this.readableTime(backup.date);
+      this.selectedName = backup.name;
+      this.$refs.import_dialog.open();
+    },
+    readableTime(timestamp) {
+      let date = new Date(timestamp);
+      return utils.getDateAsText(date);
+    },
+    async importBackup(data) {
+      this.$emit("loading");
+      let response = await api.backups.import(data.name, data);
+
+      let failed = response.data.failed;
+      let succesful = response.data.successful;
+
+      this.$emit("finished", succesful, failed);
+    },
+    deleteBackup(data) {
+      this.$emit("loading");
+
+      api.backups.delete(data.name);
+      this.selectedBackup = null;
+      this.backupLoading = false;
+
+      this.$emit("finished");
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/Settings/Backup/ImportDialog.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="text-center">
+    <v-dialog v-model="dialog" width="500">
+      <v-card>
+        <v-card-title> {{ name }} </v-card-title>
+        <v-card-subtitle class="mb-n3"> {{ date }} </v-card-subtitle>
+        <v-divider></v-divider>
+
+        <v-card-text>
+          <v-row>
+            <v-col>
+              <v-checkbox
+                class="mb-n4 mt-1"
+                dense
+                :label="$t('settings.backup.import-recipes')"
+                v-model="importRecipes"
+              ></v-checkbox>
+              <v-checkbox
+                class="my-n4"
+                dense
+                :label="$t('settings.backup.import-themes')"
+                v-model="importThemes"
+              ></v-checkbox>
+              <v-checkbox
+                class="my-n4"
+                dense
+                :label="$t('settings.backup.import-settings')"
+                v-model="importSettings"
+              ></v-checkbox>
+            </v-col>
+            <!-- <v-col>
+              <v-tooltip top>
+                <template v-slot:activator="{ on, attrs }">
+                  <span v-on="on" v-bind="attrs">
+                    <v-checkbox
+                      class="mb-n4 mt-1"
+                      dense
+                      label="Force"
+                      v-model="forceImport"
+                    ></v-checkbox>
+                  </span>
+                </template>
+                <span>Force update existing recipes</span>
+              </v-tooltip>
+              <v-tooltip top>
+                <template v-slot:activator="{ on, attrs }">
+                  <span v-on="on" v-bind="attrs">
+                    <v-checkbox
+                      class="mb-n4 mt-1"
+                      dense
+                      label="Rebase"
+                      v-model="rebaseImport"
+                    ></v-checkbox>
+                  </span>
+                </template>
+                <span
+                  >Removes all recipes, and then imports recipes from the
+                  backup</span
+                >
+              </v-tooltip>
+            </v-col> -->
+          </v-row>
+        </v-card-text>
+
+        <v-divider></v-divider>
+
+        <v-card-actions>
+          <v-btn disabled color="success" text @click="raiseEvent('download')">
+            {{$t('general.download')}}
+          </v-btn>
+          <v-spacer></v-spacer>
+          <v-btn color="error" text @click="raiseEvent('delete')">
+            {{$t('general.delete')}}
+          </v-btn>
+          <v-btn color="success" text @click="raiseEvent('import')">
+            {{$t('general.import')}}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+
+<script>
+export default {
+  props: {
+    name: {
+      default: "Backup Name",
+    },
+    date: {
+      default: "Backup Date",
+    },
+  },
+  data() {
+    return {
+      dialog: false,
+      importRecipes: true,
+      forceImport: false,
+      rebaseImport: false,
+      importThemes: false,
+      importSettings: false,
+    };
+  },
+  methods: {
+    open() {
+      this.dialog = true;
+    },
+    close() {
+      this.dialog = false;
+    },
+    raiseEvent(event) {
+      let eventData = {
+        name: this.name,
+        recipes: this.importRecipes,
+        force: this.forceImport,
+        rebase: this.rebaseImport,
+        themes: this.importThemes,
+        settings: this.importSettings,
+      };
+      this.close();
+      this.$emit(event, eventData);
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/Settings/Backup/index.vue

@@ -1,61 +1,38 @@
 <template>
-  <v-card :loading="backupLoading">
-    <v-card-title class="headline"> Backup and Exports </v-card-title>
+  <v-card :loading="backupLoading" class="mt-3">
+    <v-card-title class="headline">
+      {{$t('settings.backup-and-exports')}}
+    </v-card-title>
     <v-divider></v-divider>
 
     <v-card-text>
       <p>
-        Backups are exported in standard JSON format along with all the images
-        stored on the file system. In your backup folder you'll find a .zip file
-        that contains all of the recipe JSON and images from the database.
-        Additionally, if you selected a markdown file, those will also be stored
-        in the .zip file. To import a backup, it must be located in your backups
-        folder. Automated backups are done each day at 3:00 AM.
+        {{$t('settings.backup-info')}}
       </p>
 
       <v-row dense align="center">
         <v-col dense cols="12" sm="12" md="4">
-          <v-text-field v-model="backupTag" label="Backup Tag"></v-text-field>
+          <v-text-field v-model="backupTag" :label="$t('settings.backup-tag')"></v-text-field>
         </v-col>
         <v-col cols="12" sm="12" md="3">
           <v-combobox
             auto-select-first
-            label="Markdown Template"
+            :label="$t('settings.markdown-template')"
             :items="availableTemplates"
             v-model="selectedTemplate"
           ></v-combobox>
         </v-col>
         <v-col dense cols="12" sm="12" md="2">
-          <v-btn block color="accent" @click="createBackup" width="165">
-            Backup Recipes
-          </v-btn>
-        </v-col>
-      </v-row>
-
-      <v-row dense align="center">
-        <v-col dense cols="12" sm="12" md="4">
-          <v-form ref="form">
-            <v-combobox
-              auto-select-first
-              label="Select a Backup for Import"
-              :items="availableBackups"
-              v-model="selectedBackup"
-              :rules="[(v) => !!v || 'Backup Selection is Required']"
-              required
-            ></v-combobox>
-          </v-form>
-        </v-col>
-        <v-col dense cols="12" sm="12" md="3" lg="2">
-          <v-btn block color="accent" @click="importBackup">
-            Import Backup
-          </v-btn>
-        </v-col>
-        <v-col dense cols="12" sm="12" md="2" lg="2">
-          <v-btn block color="error" @click="deleteBackup">
-            Delete Backup
+          <v-btn block text color="accent" @click="createBackup" width="165">
+            {{$t('settings.backup-recipes')}}
           </v-btn>
         </v-col>
       </v-row>
+      <BackupCard
+        @loading="backupLoading = true"
+        @finished="processFinished"
+        :backups="availableBackups"
+      />
       <SuccessFailureAlert
         success-header="Successfully Imported"
         :success="successfulImports"
@@ -69,10 +46,12 @@
 <script>
 import api from "../../../api";
 import SuccessFailureAlert from "../../UI/SuccessFailureAlert";
+import BackupCard from "./BackupCard";
 
 export default {
   components: {
     SuccessFailureAlert,
+    BackupCard,
   },
   data() {
     return {
@@ -95,18 +74,6 @@ export default {
       this.availableBackups = response.imports;
       this.availableTemplates = response.templates;
     },
-    async importBackup() {
-      if (this.$refs.form.validate()) {
-        this.backupLoading = true;
-
-        let response = await api.backups.import(this.selectedBackup);
-        console.log(response.data);
-        this.failedImports = response.data.failed;
-        this.successfulImports = response.data.successful;
-
-        this.backupLoading = false;
-      }
-    },
     deleteBackup() {
       if (this.$refs.form.validate()) {
         this.backupLoading = true;
@@ -121,10 +88,7 @@ export default {
     async createBackup() {
       this.backupLoading = true;
 
-      let response = await api.backups.create(
-        this.backupTag,
-        this.selectedTemplate
-      );
+      let response = await api.backups.create(this.backupTag, this.templates);
 
       if (response.status == 201) {
         this.selectedBackup = null;
@@ -132,6 +96,12 @@ export default {
         this.backupLoading = false;
       }
     },
+    processFinished(successful = null, failed = null) {
+      this.getAvailableBackups();
+      this.backupLoading = false;
+      this.successfulImports = successful;
+      this.failedImports = failed;
+    },
   },
 };
 </script>

frontend/src/components/Settings/Migration/ChowdownCard.vue

@@ -1,26 +1,25 @@
 <template>
   <v-card-text>
     <p>
-      Currently Chowdown via public Repo URL is the only supported type of
-      migration
+      {{$t('migration.currently-chowdown-via-public-repo-url-is-the-only-supported-type-of-migration')}}
     </p>
     <v-form ref="form">
       <v-row dense align="center">
         <v-col cols="12" md="5" sm="5">
           <v-text-field
             v-model="repo"
-            label="Chowdown Repo URL"
+            :label="$t('migration.chowdown-repo-url')"
             :rules="[rules.required]"
           >
           </v-text-field>
         </v-col>
         <v-col cols="12" md="4" sm="5">
-          <v-btn text color="info" @click="importRepo"> Migrate </v-btn>
+          <v-btn text color="info" @click="importRepo"> {{$t('migration.migrate')}} </v-btn>
         </v-col>
       </v-row>
     </v-form>
     <v-alert v-if="failedRecipes[1]" outlined dense type="error">
-      <h4>Failed Recipes</h4>
+      <h4>{{$t('migration.failed-recipes')}}</h4>
       <v-list dense>
         <v-list-item v-for="fail in this.failedRecipes" :key="fail">
           {{ fail }}
@@ -28,7 +27,7 @@
       </v-list>
     </v-alert>
     <v-alert v-if="failedImages[1]" outlined dense type="error">
-      <h4>Failed Images</h4>
+      <h4>{{$t('migration.failed-images')}}</h4>
       <v-list dense>
         <v-list-item v-for="fail in this.failedImages" :key="fail">
           {{ fail }}

frontend/src/components/Settings/Migration/NextcloudCard.vue

@@ -1,9 +1,7 @@
 <template>
   <v-card-text>
     <p>
-      You can import recipes from either a zip file or a directory located in
-      the /app/data/migraiton/ folder. Please review the documentation to ensure
-      your directory structure matches what is expected
+      {{$t('migration.you-can-import-recipes-from-either-a-zip-file-or-a-directory-located-in-the-app-data-migraiton-folder-please-review-the-documentation-to-ensure-your-directory-structure-matches-what-is-expected')}}
     </p>
     <v-form ref="form">
       <v-row align="center">
@@ -11,20 +9,20 @@
           <v-select
             :items="availableImports"
             v-model="selectedImport"
-            label="Nextcloud Data"
+            :label="$t('migration.nextcloud-data')"
             :rules="[rules.required]"
           ></v-select>
         </v-col>
         <v-col cols="12" md="2" sm="12">
-          <v-btn text color="info" @click="importRecipes"> Migrate </v-btn>
+          <v-btn text color="info" @click="importRecipes"> {{$t('migration.migrate')}} </v-btn>
         </v-col>
         <v-col cols="12" md="1" sm="12">
           <v-btn text color="error" @click="deleteImportValidation">
-            Delete
+            {{$t('general.delete')}}
           </v-btn>
           <Confirmation
-            title="Delete Data"
-            message="Are you sure you want to delete this migration data?"
+            :title="$t('general.delete-data')"
+            :message="$t('migration.delete-confirmation')"
             color="error"
             icon="mdi-alert-circle"
             ref="deleteThemeConfirm"
@@ -39,9 +37,9 @@
       </v-row>
     </v-form>
     <SuccessFailureAlert
-      success-header="Successfully Imported from Nextcloud"
+      :success-header="$t('migration.successfully-imported-from-nextcloud')"
       :success="successfulImports"
-      failed-header="Failed Imports"
+      failed-header="$t('migration.failed-imports')"
       :failed="failedImports"
     />
   </v-card-text>

frontend/src/components/Settings/Migration/UploadMigrationButton.vue

@@ -2,7 +2,7 @@
   <v-form ref="file">
     <v-file-input
       :loading="loading"
-      label="Upload an Archive"
+      :label="$t('migration.upload-an-archive')"
       v-model="file"
       accept=".zip"
       @change="upload"

frontend/src/components/Settings/Migration/index.vue

@@ -1,6 +1,6 @@
 <template>
   <v-card :loading="loading">
-    <v-card-title class="headline"> Recipe Migration </v-card-title>
+    <v-card-title class="headline"> {{$t('migration.recipe-migration')}} </v-card-title>
     <v-divider></v-divider>
 
     <v-tabs v-model="tab">

frontend/src/components/Settings/Theme/ColorPickerDialog.vue

@@ -5,7 +5,7 @@
     </v-btn>
     <v-dialog v-model="dialog" width="400">
       <v-card>
-        <v-card-title> {{ buttonText }} Color </v-card-title>
+        <v-card-title> {{ buttonText }} {{$t('settings.color')}} </v-card-title>
         <v-card-text>
           <v-text-field v-model="color"> </v-text-field>
           <v-row>
@@ -26,8 +26,8 @@
           </v-row>
         </v-card-text>
         <v-card-actions>
-          <v-btn text @click="toggleSwatches"> Swatches </v-btn>
-          <v-btn text @click="dialog = false"> Select </v-btn>
+          <v-btn text @click="toggleSwatches"> {{$t('settings.swatches')}} </v-btn>
+          <v-btn text @click="dialog = false"> {{$t('general.select')}} </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>

frontend/src/components/Settings/Theme/NewThemeDialog.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <v-btn text color="info" @click="dialog = true"> New </v-btn>
+    <v-btn text color="info" @click="dialog = true"> {{$t('general.new')}} </v-btn>
     <v-dialog v-model="dialog" width="400">
       <v-card>
-        <v-card-title> Add a New Theme </v-card-title>
+        <v-card-title> {{$t('settings.add-a-new-theme')}} </v-card-title>
         <v-card-text>
           <v-text-field
             label="Theme Name"
@@ -13,9 +13,9 @@
         </v-card-text>
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn color="grey" text @click="dialog = false"> Cancel </v-btn>
+          <v-btn color="grey" text @click="dialog = false"> {{$t('general.cancel')}} </v-btn>
           <v-btn color="success" text @click="Select" :disabled="!themeName">
-            Create
+            {{$t('general.create')}}
           </v-btn>
         </v-card-actions>
       </v-card>

frontend/src/components/Settings/Theme/index.vue

@@ -1,12 +1,17 @@
 <template>
   <v-card>
-    <v-card-title class="headline"> Theme Settings </v-card-title>
+    <v-card-title class="headline">
+      {{ $t("settings.theme.theme-settings") }}
+    </v-card-title>
     <v-divider></v-divider>
     <v-card-text>
-      <h2 class="mt-4 mb-1">Dark Mode</h2>
+      <h2 class="mt-4 mb-1">{{ $t("settings.theme.dark-mode") }}</h2>
       <p>
-        Choose how Mealie looks to you. Set your theme preference to follow your
-        system settings, or choose to use the light or dark theme.
+        {{
+          $t(
+            "settings.theme.choose-how-mealie-looks-to-you-set-your-theme-preference-to-follow-your-system-settings-or-choose-to-use-the-light-or-dark-theme"
+          )
+        }}
       </p>
       <v-row dense align="center">
         <v-col cols="12">
@@ -18,33 +23,35 @@
           >
             <v-btn value="system"> Default to system </v-btn>
 
-            <v-btn value="light"> Light </v-btn>
+            <v-btn value="light"> {{ $t("settings.theme.light") }} </v-btn>
 
-            <v-btn value="dark"> Dark </v-btn>
+            <v-btn value="dark"> {{ $t("settings.theme.dark") }} </v-btn>
           </v-btn-toggle>
         </v-col>
       </v-row></v-card-text
     >
     <v-divider></v-divider>
     <v-card-text>
-      <h2 class="mt-1 mb-1">Theme</h2>
+      <h2 class="mt-1 mb-1">{{ $t("settings.theme.theme") }}</h2>
       <p>
-        Select a theme from the dropdown or create a new theme. Note that the
-        default theme will be served to all users who have not set a theme
-        preference.
+        {{
+          $t(
+            "settings.theme.select-a-theme-from-the-dropdown-or-create-a-new-theme-note-that-the-default-theme-will-be-served-to-all-users-who-have-not-set-a-theme-preference"
+          )
+        }}
       </p>
 
       <v-form ref="form" lazy-validation>
         <v-row dense align="center">
           <v-col cols="12" md="4" sm="3">
             <v-select
-              label="Saved Color Theme"
+              :label="$t('settings.theme.saved-color-theme')"
               :items="availableThemes"
               item-text="name"
               return-object
               v-model="selectedTheme"
               @change="themeSelected"
-              :rules="[(v) => !!v || 'Theme is required']"
+              :rules="[(v) => !!v || $t('settings.theme.theme-is-required')]"
               required
             >
             </v-select>
@@ -57,8 +64,10 @@
               Delete
             </v-btn>
             <Confirmation
-              title="Delete Theme"
-              message="Are you sure you want to delete this theme?"
+              :title="$t('settings.theme.delete-theme')"
+              :message="
+                $t('settings.theme.are-you-sure-you-want-to-delete-this-theme')
+              "
               color="error"
               icon="mdi-alert-circle"
               ref="deleteThemeConfirm"
@@ -70,43 +79,43 @@
       <v-row dense align-content="center" v-if="selectedTheme.colors">
         <v-col>
           <ColorPickerDialog
-            button-text="Primary"
+            :button-text="$t('settings.theme.primary')"
             v-model="selectedTheme.colors.primary"
           />
         </v-col>
         <v-col>
           <ColorPickerDialog
-            button-text="Secondary"
+            :button-text="$t('settings.theme.secondary')"
             v-model="selectedTheme.colors.secondary"
           />
         </v-col>
         <v-col>
           <ColorPickerDialog
-            button-text="Accent"
+            :button-text="$t('settings.theme.accent')"
             v-model="selectedTheme.colors.accent"
           />
         </v-col>
         <v-col>
           <ColorPickerDialog
-            button-text="Success"
+            :button-text="$t('settings.theme.success')"
             v-model="selectedTheme.colors.success"
           />
         </v-col>
         <v-col>
           <ColorPickerDialog
-            button-text="Info"
+            :button-text="$t('settings.theme.info')"
             v-model="selectedTheme.colors.info"
           />
         </v-col>
         <v-col>
           <ColorPickerDialog
-            button-text="Warning"
+            :button-text="$t('settings.theme.warning')"
             v-model="selectedTheme.colors.warning"
           />
         </v-col>
         <v-col>
           <ColorPickerDialog
-            button-text="Error"
+            :button-text="$t('settings.theme.error')"
             v-model="selectedTheme.colors.error"
           />
         </v-col>
@@ -119,7 +128,7 @@
         <v-col></v-col>
         <v-col align="end">
           <v-btn text color="success" @click="saveThemes">
-            Save Colors and Apply Theme
+            {{ $t("settings.theme.save-colors-and-apply-theme") }}
           </v-btn>
         </v-col>
       </v-row>

frontend/src/components/Settings/Webhook/TimePickerDialog.vue

@@ -9,7 +9,7 @@
     <template v-slot:activator="{ on, attrs }">
       <v-text-field
         v-model="time"
-        label="Set New Time"
+        :label="$t('settings.set-new-time')"
         prepend-icon="mdi-clock-time-four-outline"
         readonly
         v-bind="attrs"
@@ -18,8 +18,8 @@
     </template>
     <v-time-picker v-if="modal2" v-model="time" full-width>
       <v-spacer></v-spacer>
-      <v-btn text color="primary" @click="modal2 = false"> Cancel </v-btn>
-      <v-btn text color="primary" @click="saveTime"> OK </v-btn>
+      <v-btn text color="primary" @click="modal2 = false"> {{$t('general.cancel')}} </v-btn>
+      <v-btn text color="primary" @click="saveTime"> {{$t('general.ok')}} </v-btn>
     </v-time-picker>
   </v-dialog>
 </template>

frontend/src/components/Settings/Webhook/index.vue

@@ -1,21 +1,17 @@
 <template>
   <v-card>
     <v-card-title class="headline">
-      Meal Planner Webhooks
+      {{$t('settings.webhooks.meal-planner-webhooks')}}
     </v-card-title>
     <v-card-text>
-      <p>
-        The URLs listed below will recieve webhooks containing the recipe data
-        for the meal plan on it's scheduled day. Currently Webhooks will execute
-        at <strong>{{ time }}</strong>
-      </p>
+      <p v-html="$t('settings.webhooks.the-urls-listed-below-will-recieve-webhooks-containing-the-recipe-data-for-the-meal-plan-on-its-scheduled-day-currently-webhooks-will-execute-at', {time: time})"></p>
 
       <v-row dense align="center">
         <v-col cols="12" md="2" sm="5">
           <v-switch
             v-model="enabled"
             inset
-            label="Enabled"
+            :label="$t('general.enabled')"
             class="my-n3"
           ></v-switch>
         </v-col>
@@ -23,7 +19,7 @@
           <TimePickerDialog @save-time="saveTime" />
         </v-col>
         <v-col cols="12" md="4" sm="5">
-          <v-btn text color="info" @click="testWebhooks"> Test Webhooks </v-btn>
+          <v-btn text color="info" @click="testWebhooks"> {{$t('settings.webhooks.test-webhooks')}} </v-btn>
         </v-col>
       </v-row>
 
@@ -36,7 +32,7 @@
         <v-col>
           <v-text-field
             v-model="webhooks[index]"
-            label="Webhook URL"
+            :label="$t('settings.webhooks.webhook-url')"
           ></v-text-field>
         </v-col>
       </v-row>
@@ -51,7 +47,7 @@
         <v-col> </v-col>
         <v-col align="end">
           <v-btn text color="success" @click="saveWebhooks">
-            Save Webhooks
+            {{$t('settings.webhooks.save-webhooks')}}
           </v-btn>
         </v-col>
       </v-row>