export import connections support

qishibo · Mar 21, 2019 · 030b112 · 030b112
1 parent ecdf400
commit 030b112
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 17 deletions.
diff --git a/src/Header.vue b/src/Header.vue
@@ -1,18 +1,18 @@
 <template>
   <div>
     <!-- setting button -->
-    <!-- <el-button type="primary" icon="el-icon-setting" @click="settingDialog.visible = true" plain></el-button> -->
+    <el-button type="primary" icon="el-icon-setting" @click="settingDialog.visible = true" plain></el-button>
 
     <!-- setting dialog -->
-    <Setting v-if="settingDialog.visible" :settingDialog="settingDialog"></Setting>
+    <Setting :settingDialog="settingDialog"></Setting>
 
     <!-- cli button -->
     <el-tooltip effect="dark" :content="$t('message.redis_console')" placement="bottom">
       <el-button type="primary" @click="cliDialog.visible = true" plain><i class="fa fa-terminal"></i></el-button>
     </el-tooltip>
 
     <!-- cli dialog -->
-    <CliConsole v-if="cliDialog.visible" :cliDialog="cliDialog"></CliConsole>
+    <CliConsole :cliDialog="cliDialog"></CliConsole>
 
     <!-- language select -->
     <el-select v-model="selectedLang" @change="changeLang" placeholder="Language">

diff --git a/src/components/Connections.vue b/src/components/Connections.vue
@@ -147,6 +147,9 @@ export default {
     this.$bus.$on('refreshKeyList', () => {
       this.refreshKeyList();
     });
+    this.$bus.$on('refreshConnections', () => {
+      this.initConnections();
+    });
   },
   methods: {
     openConnection(openedMenuKey) {

diff --git a/src/components/Setting.vue b/src/components/Setting.vue
@@ -1,19 +1,35 @@
 <template>
   <!-- setting dialog -->
   <el-dialog :title="$t('message.settings')" :visible.sync="settingDialog.visible">
-    <el-form>
+    <el-form label-position="top" size="mini">
 
-      <el-form-item label="Name" >
-        <el-input v-model="form.name"></el-input>
+      <el-form-item :label="$t('message.config_connections')">
+        <el-button @click="exportConnection">{{ $t('message.export') }}</el-button>
+        <el-button @click="showImportDialog">{{ $t('message.import') }}</el-button>
       </el-form-item>
 
-      <el-form-item label="Area" >
-        <el-select v-model="form.area" placeholder="Select Area">
-          <el-option label="NewYork" value="NewYork"></el-option>
-          <el-option label="ShangHai" value="ShangHai"></el-option>
-          <el-option label="BeiJing" value="BeiJing"></el-option>
-        </el-select>
-      </el-form-item>
+      <el-dialog
+        width="400px"
+        :title="$t('message.select_import_file')"
+        :visible.sync="importConnectionVisible"
+        append-to-body>
+
+        <el-upload
+          ref="configUpload"
+          :auto-upload="false"
+          :multiple="false"
+          action=""
+          :limit="1"
+          :on-change="loadConnectionFile"
+          drag>
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">{{ $t('message.put_file_here') }}</div>
+        </el-upload>
+
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="importConnnection">{{ $t('el.messagebox.confirm') }}</el-button>
+        </div>
+      </el-dialog>
 
     </el-form>
 
@@ -30,10 +46,9 @@ import storage from '@/storage.js';
 export default {
   data() {
     return {
-      form: {
-        name: '',
-        area: '',
-      },
+      form: {},
+      importConnectionVisible: false,
+      connectionFileContent: '',
     };
   },
   props: ['settingDialog'],
@@ -60,6 +75,56 @@ export default {
 
       this.settingDialog.visible = false;
     },
+    showImportDialog() {
+      this.importConnectionVisible = true;
+    },
+    loadConnectionFile(file) {
+      const reader = new FileReader();
+      reader.onload = (event) => { this.connectionFileContent = event.target.result; };
+      reader.readAsText(file.raw);
+    },
+    importConnnection() {
+      this.importConnectionVisible = false;
+      let config = atob(this.connectionFileContent);
+
+      if (!config) {
+        return;
+      }
+
+      config = JSON.parse(config);
+
+      // remove all connections first
+      storage.setConnections({});
+
+      for (const line of config) {
+        storage.addConnection(line);
+      }
+
+      this.$bus.$emit('refreshConnections');
+
+      this.$message.success({
+        message: this.$t('message.import_success'),
+        duration: 1000,
+      });
+    },
+    exportConnection() {
+      let connections = storage.getConnections(true);
+      connections = btoa(JSON.stringify(connections));
+
+      this.createAndDownloadFile('connections.ano', connections);
+
+      this.settingDialog.visible = false;
+    },
+    createAndDownloadFile(fileName, content) {
+      const aTag = document.createElement('a');
+      const blob = new Blob([content]);
+
+      aTag.download = fileName;
+      aTag.href = URL.createObjectURL(blob);
+
+      aTag.click();
+      URL.revokeObjectURL(blob);
+    },
   },
   mounted() {
     this.showSettings();

diff --git a/src/i18n/langs/cn.js b/src/i18n/langs/cn.js
@@ -48,6 +48,13 @@ const cn = {
     key_type: '类型',
     save: '保存',
     enter_to_search: '按下 Enter 键进行搜索',
+    export_success: '导出成功',
+    select_import_file: '选择配置文件',
+    import_success: '导入成功',
+    put_file_here: '将文件拖到此处，或点击选择',
+    config_connections: '连接配置',
+    import: '导入',
+    export: '导出',
   },
 };
 

diff --git a/src/i18n/langs/en.js b/src/i18n/langs/en.js
@@ -48,6 +48,13 @@ const en = {
     key_type: 'Key Type',
     save: 'Save',
     enter_to_search: 'Enter To Search',
+    export_success: 'Export Success',
+    select_import_file: 'Select The File',
+    import_success: 'Import Success',
+    put_file_here: 'Drag File Here Or Click To Select',
+    config_connections: 'Connections',
+    import: 'Import',
+    export: 'Export',
   },
 };