backup card framework

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

@@ -8,7 +8,7 @@
 
         <v-card-text>
           <v-row>
-            <v-col>
+            <v-col >
               <v-checkbox
                 class="mb-n4 mt-1"
                 dense

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

@@ -0,0 +1,72 @@
+<template>
+  <v-card :loading="loading">
+    <v-card-title> Create a Backup </v-card-title>
+
+    <v-card-actions class="mt-n6">
+      <v-switch v-model="fullBackup" :label="switchLabel"></v-switch>
+      <v-spacer></v-spacer>
+      <v-btn color="success" text @click="createBackup()"> Create </v-btn>
+    </v-card-actions>
+
+    <v-card-text v-if="!fullBackup" class="mt-n6">
+      <v-row>
+        <v-col sm="4">
+          <p>Options:</p>
+          <v-checkbox
+            class="mb-n4 mt-n3"
+            dense
+            label="Recipes"
+            v-model="importRecipes"
+          ></v-checkbox>
+          <v-checkbox
+            class="my-n4"
+            dense
+            label="Themes"
+            v-model="importThemes"
+          ></v-checkbox>
+          <v-checkbox
+            class="my-n4"
+            dense
+            label="Settings"
+            v-model="importThemes"
+          ></v-checkbox>
+        </v-col>
+        <v-col>
+          <p>Templates:</p>
+          <v-checkbox
+            class="mb-n4 mt-n3"
+            dense
+            label="Template asdfasdf"
+            v-model="importRecipes"
+          ></v-checkbox>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      fullBackup: true,
+      loading: false,
+    };
+  },
+  computed: {
+    switchLabel() {
+      if (this.fullBackup) {
+        return "Full Backup";
+      } else return "Partial Backup";
+    },
+  },
+  methods: {
+    createBackup() {
+      this.loading = true;
+    },
+  },
+};
+</script>
+
+<style>
+</style>

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

@@ -1,34 +1,22 @@
 <template>
   <v-card :loading="backupLoading" class="mt-3">
     <v-card-title class="headline">
-      {{$t('settings.backup-and-exports')}}
+      {{ $t("settings.backup-and-exports") }}
     </v-card-title>
     <v-divider></v-divider>
 
     <v-card-text>
+      <v-row>
+        <v-col cols="12" md="6" ss="12">
+          <NewBackupCard />
+        </v-col>
+        <v-col cols="12" md="6" sm="12">
           <p>
-        {{$t('settings.backup-info')}}
+            {{ $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="$t('settings.backup-tag')"></v-text-field>
-        </v-col>
-        <v-col cols="12" sm="12" md="3">
-          <v-combobox
-            auto-select-first
-            :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 text color="accent" @click="createBackup" width="165">
-            {{$t('settings.backup-recipes')}}
-          </v-btn>
         </v-col>
       </v-row>
-      <BackupCard
+      <AvailableBackupCard
         @loading="backupLoading = true"
         @finished="processFinished"
         :backups="availableBackups"
@@ -46,12 +34,14 @@
 <script>
 import api from "../../../api";
 import SuccessFailureAlert from "../../UI/SuccessFailureAlert";
-import BackupCard from "./BackupCard";
+import AvailableBackupCard from "./AvailableBackupCard";
+import NewBackupCard from "./NewBackupCard";
 
 export default {
   components: {
     SuccessFailureAlert,
-    BackupCard,
+    AvailableBackupCard,
+    NewBackupCard,
   },
   data() {
     return {

frontend/src/locales/en.json

@@ -76,7 +76,7 @@
     "version-latest": "Version: { current } | Latest: { latest }",
     "explore-the-docs": "Explore the Docs",
     "contribute": "Contribute",
-    "backup-and-exports": "Backup and Exports",
+    "backup-and-exports": "Backups",
     "backup-info": "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.",
     "backup-tag": "Backup Tag",
     "markdown-template": "Markdown Template",