From 8c32fd9840d0ea4676dc286f0235e1c446294fc8 Mon Sep 17 00:00:00 2001
From: Hayden <hay-kot@pm.me>
Date: Sun, 17 Jan 2021 13:14:20 -0900
Subject: [PATCH] backup card framework

---
 ...BackupCard.vue => AvailableBackupCard.vue} |  0
 .../Settings/Backup/ImportDialog.vue          |  2 +-
 .../Settings/Backup/NewBackupCard.vue         | 72 +++++++++++++++++++
 .../src/components/Settings/Backup/index.vue  | 36 ++++------
 frontend/src/locales/en.json                  |  2 +-
 5 files changed, 87 insertions(+), 25 deletions(-)
 rename frontend/src/components/Settings/Backup/{BackupCard.vue => AvailableBackupCard.vue} (100%)
 create mode 100644 frontend/src/components/Settings/Backup/NewBackupCard.vue

diff --git a/frontend/src/components/Settings/Backup/BackupCard.vue b/frontend/src/components/Settings/Backup/AvailableBackupCard.vue
similarity index 100%
rename from frontend/src/components/Settings/Backup/BackupCard.vue
rename to frontend/src/components/Settings/Backup/AvailableBackupCard.vue
diff --git a/frontend/src/components/Settings/Backup/ImportDialog.vue b/frontend/src/components/Settings/Backup/ImportDialog.vue
index f61705a5b..7a298d756 100644
--- a/frontend/src/components/Settings/Backup/ImportDialog.vue
+++ b/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
diff --git a/frontend/src/components/Settings/Backup/NewBackupCard.vue b/frontend/src/components/Settings/Backup/NewBackupCard.vue
new file mode 100644
index 000000000..d44fdc8a4
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/components/Settings/Backup/index.vue b/frontend/src/components/Settings/Backup/index.vue
index cec0045a5..589e80dde 100644
--- a/frontend/src/components/Settings/Backup/index.vue
+++ b/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>
-      <p>
-        {{$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-row>
+        <v-col cols="12" md="6" ss="12">
+          <NewBackupCard />
         </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 cols="12" md="6" sm="12">
+          <p>
+            {{ $t("settings.backup-info") }}
+          </p>
         </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 {
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index d594c0a6c..9df820920 100644
--- a/frontend/src/locales/en.json
+++ b/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",