Save and Load Data (#112)

* Save options

* Add clipboard package

* Add methods to fetch and load state

* Add save and load data to component

package.json

@@ -22,6 +22,7 @@
     "node-sass": "^4.7.2",
     "sass-loader": "^6.0.6",
     "vue": "^2.5.2",
+    "vue-clipboard2": "^0.3.0",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1",
     "vuex-persistedstate": "^2.5.4"

src/components/Settings.vue

@@ -10,7 +10,7 @@
     <section class="section">
       <div class="container">
         <h2 class="subtitle">
-          Displayed Items
+          Spoilers and Displayed Items
         </h2>
         <div class="field">
           <button-checkbox v-model="HideCompleted">
@@ -59,9 +59,39 @@
     </section>
     <section class="section">
       <div class="container">
-        <div class="buttons">
-          <button class="button is-info">Import Data</button>
-          <button class="button is-info">Export Data</button>
+        <h2 class="subtitle">
+          Import and Export Saved Data
+        </h2>
+        <p>
+          Use these controls to port data to another device.
+          Copy the data string from the Export field on the source device and paste it into the Import field
+          on the target device.
+        </p>
+        <label class="label">Export</label>
+        <div class="field has-addons">
+          <div class="control">
+            <input class="input" type="text" placeholder="Saved Data" :value=SavedData readonly />
+          </div>
+          <div class="control">
+            <button class="button is-info" v-clipboard:copy="SavedData">
+              <span class="icon">
+                <mdi-content-copy-icon />
+              </span>
+            </button>
+          </div>
+        </div>
+        <label class="label">Import</label>
+        <div class="field has-addons">
+          <div class="control">
+            <input class="input" type="text" placeholder="Enter Saved Data here" v-model="DataToLoad" />
+          </div>
+          <div class="controls">
+            <button class="button is-info" @click="LoadData">
+              <span class="icon">
+                <mdi-upload-icon />
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </section>
@@ -70,11 +100,18 @@
 
 <script>
 import ButtonCheckbox from '@/components/ButtonCheckbox.vue'
+import 'mdi-vue/ContentCopyIcon'
+import 'mdi-vue/UploadIcon'
 export default {
   name: 'Settings',
   components: {
     ButtonCheckbox
   },
+  data: function () {
+    return {
+      DataToLoad: ''
+    }
+  },
   computed: {
     HideCompleted: {
       get () {
@@ -123,6 +160,17 @@ export default {
       set (newValue) {
         this.$store.commit('toggleSkills')
       }
+    },
+    SavedData: function () {
+      return this.$store.getters.GetSerializedState
+    }
+  },
+  methods: {
+    LoadData: function () {
+      if (this.DataToLoad !== '') {
+        this.$store.commit('SetSerializedState', this.DataToLoad)
+        alert('Data Loaded!')
+      }
     }
   }
 }

src/main.js

@@ -1,6 +1,7 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
+import VueClipboard from 'vue-clipboard2'
 import App from './App'
 import router from './router'
 import store from './store'
@@ -8,6 +9,7 @@ import store from './store'
 require('./assets/sass/main.scss')
 
 Vue.config.productionTip = false
+Vue.use(VueClipboard)
 
 /* eslint-disable no-new */
 new Vue({

src/store/index.js

@@ -31,7 +31,17 @@ export default new Vuex.Store({
   },
   plugins: [
     createPersistedState({
-      reducer: state => ({ StoredItems: state.StoredItems })
+      reducer: state => (
+        {
+          StoredItems: state.StoredItems,
+          HideSpoilers: state.HideSpoilers,
+          HideCompleted: state.HideCompleted,
+          BundleRewardsSpoilers: state.BundleRewardsSpoilers,
+          ItemInfoSpoilers: state.ItemInfoSpoilers,
+          SeasonsSpoilers: state.SeasonsSpoilers,
+          SkillsSpoilers: state.SkillsSpoilers
+        }
+      )
     })
   ],
   getters: {
@@ -43,9 +53,15 @@ export default new Vuex.Store({
     },
     GetItemById: (state) => (itemId) => {
       return getById(state.items, itemId)
+    },
+    GetSerializedState: (state) => {
+      return btoa(JSON.stringify(state.StoredItems))
     }
   },
   mutations: {
+    SetSerializedState (state, SerializedState) {
+      state.StoredItems = JSON.parse(atob(SerializedState))
+    },
     RedeemItem (state, BundleItem) {
       Vue.set(state.StoredItems, BundleItem.id, 1)
     },

yarn.lock

@@ -1442,6 +1442,14 @@ cli-width@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
 
+clipboard@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.4.tgz#836dafd66cf0fea5d71ce5d5b0bf6e958009112d"
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 cliui@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
@@ -1969,6 +1977,10 @@ delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -2992,6 +3004,12 @@ globule@^1.0.0:
     lodash "~4.17.4"
     minimatch "~3.0.2"
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  dependencies:
+    delegate "^3.1.2"
+
 graceful-fs@^4.1.11, graceful-fs@^4.1.2:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
@@ -5628,6 +5646,10 @@ select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+
 selfsigned@^1.9.1:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.2.tgz#b4449580d99929b65b10a48389301a6592088758"
@@ -6199,6 +6221,10 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+tiny-emitter@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -6503,6 +6529,12 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+vue-clipboard2@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/vue-clipboard2/-/vue-clipboard2-0.3.0.tgz#b04d3f9a2d46f12ca85178445930b38463640b22"
+  dependencies:
+    clipboard "^2.0.0"
+
 vue-eslint-parser@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"