Support for managing multiple servers

Author: alanzhangzm

src/App.vue

@@ -1,41 +1,27 @@
 <template>
 <div id="app">
   <router-view
-    :server="manager.servers[manager.serverIndex]"
-    :serverNameList="serverNameList"
-    :isDefault="false"
-    @updateServer="saveData()">
+    :manager="manager"
+    :isDesktop="false">
   </router-view>
 </div>
 </template>
 
 <script>
 export default {
   name: 'photon',
-  props: ['manager'],
-  computed: {
-    serverNameList: function () {
-      return this.manager.servers.map(server => {
-        return server.name
-      })
-    }
-  },
-  methods: {
-    saveData: function () {
-      this.manager.writeStorage()
-    }
-  }
+  props: ['manager']
 }
 </script>
 
 <style lang="css">
 body {
   margin: 0px;
   background-color: #fff;
-  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, "Dejavu Sans", "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", "Noto Sans", sans-serif;
 }
 
 input, output, textarea, select, button {
-  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, "Dejavu Sans", "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", "Noto Sans", sans-serif;
 }
 </style>

src/components/Main.vue

@@ -1,11 +1,16 @@
 <template>
 <div class="wrapper">
   <div class="sidebar">
-    <div id="sidebar-servers" class="row" style="padding-bottom: 0;">
-      <div class="icon" style="padding: 0;" @click="getEasterEgg">
-        <img src="@/assets/logo.png" class="logo">
+    <div id="sidebar-servers" v-for="(sv, index) in manager.servers"
+      :key="index + sv.name">
+      <div class="row"
+        :class="{profile_active: manager.servers.length > 1 && index === manager.serverIndex}"
+        @click="setServerIndex(index)">
+        <div class="icon" style="padding: 0;">
+          <img src="@/assets/logo.png" class="logo">
+        </div>
+        <div class="title" style="font-size: 20px; font-weight: bold; cursor: default;">{{ (isDesktop && index === 0) ? "Photon" : sv.name }}</div>
       </div>
-      <div class="title" style="font-size: 20px; font-weight: bold; cursor: default;">{{ easterEgg || serverName }}</div>
     </div>
     <div class="seperator-v"></div>
     <router-link to="/downloading" id="sidebar-downloading" class="row">
@@ -43,25 +48,23 @@
       @addTask="addTask($event)"
       @changeTaskStatus="changeTaskStatus($event)"
       @purgeTasks="purgeTasks($event)"
+      @addServer="addServer()"
+      @removeServer="removeServer()"
       @updateSettings="updateSettings()">
     </router-view>
   </div>
 </div>
 </template>
 
 <script>
-const oConfusable = ['ం', 'ಂ', 'ം', 'ං', '०', '੦', '૦', '௦', '౦', '೦', '൦', '๐', '໐', '၀', '٥', '۵', 'ｏ', 'ℴ', '𝐨', '𝑜', '𝒐', '𝓸', '𝔬', '𝕠', '𝖔', '𝗈', '𝗼', '𝘰', '𝙤', '𝚘', 'ᴏ', 'ᴑ', 'ꬽ', 'ο', '𝛐', '𝜊', '𝝄', '𝝾', '𝞸', 'σ', '𝛔', '𝜎', '𝝈', '𝞂', '𝞼', 'ⲟ', 'о', 'ჿ', 'օ', 'ס', 'ه', '𞸤', '𞹤', '𞺄', 'ﻫ', 'ﻬ', 'ﻪ', 'ﻩ', 'ھ', 'ﮬ', 'ﮭ', 'ﮫ', 'ﮪ', 'ہ', 'ﮨ', 'ﮩ', 'ﮧ', 'ﮦ', 'ە', 'ഠ', 'ဝ', '𐓪', '𑣈', '𑣗', '𐐬']
-
 export default {
-  data: function () {
-    return {
-      easterEgg: ''
-    }
-  },
-  props: ['server', 'serverNameList', 'isDefault'],
+  props: ['manager', 'isDesktop'],
   computed: {
-    serverName: function () {
-      return this.isDefault ? 'Photon' : this.server.name
+    server: function () {
+      return this.manager.servers[this.manager.serverIndex]
+    },
+    isDefault: function () {
+      return this.manager.serverIndex === 0
     },
     downloadingNumber: function () {
       let tasks = this.server.tasks
@@ -81,14 +84,12 @@ export default {
         connection: server.connection,
         rpc: JSON.parse(JSON.stringify(server.rpc)),
         options: JSON.parse(JSON.stringify(server.options)),
-        isDefault: this.isDefault
+        isDefault: this.isDefault,
+        isDesktop: this.isDesktop
       }
     }
   },
   methods: {
-    getEasterEgg: function () {
-      if (this.isDefault) this.easterEgg = this.serverName.replace(/o/g, oConfusable[Math.floor(Math.random() * oConfusable.length)])
-    },
     syncOptions: function () {
       this.server.checkConnection()
       this.server.syncOptions()
@@ -102,11 +103,23 @@ export default {
     purgeTasks: function (gids) {
       this.server.purgeTasks(gids)
     },
+    addServer: function () {
+      this.manager.addServer()
+      this.manager.serverIndex = this.manager.servers.length - 1
+      this.updateSettings()
+    },
+    removeServer: function () {
+      this.manager.removeServer()
+      this.updateSettings()
+    },
+    setServerIndex: function (index) {
+      this.manager.setServerIndex(index)
+    },
     updateSettings: function () {
       let server = this.server
       let settings = this.settings
       server.setServer(settings.name, settings.rpc, settings.options, !this.isDefault)
-      this.$emit('updateServer')
+      this.manager.writeStorage()
     }
   }
 }
@@ -129,11 +142,15 @@ export default {
   align-items: stretch;
 }
 
+.profile_active {
+  background-color: #666;
+}
+
 .router-link-active {
   background-color: #00A0F1;
 }
 
-.sidebar > .row {
+.sidebar .row {
   padding: 12px 12px;
   color: #ddd;
   text-decoration: none;

src/components/Main/Settings.vue

@@ -1,19 +1,28 @@
 <template>
 <div id="settings">
+  <div class="toolbar">
+    <a href="#" @click="$emit('addServer')">
+      <i class="fas fa-file-medical"></i>
+    </a>
+    <a href="#" :class="{disabled: settings.isDefault}" @click="$emit('removeServer')">
+      <i class="fas fa-trash-alt"></i>
+    </a>
+  </div>
+
   <div class="content">
     <form @change="$emit('updateSettings')">
-      <div id="settings-general" class="group" v-if="!settings.isDefault">
+      <div id="settings-general" class="group" v-if="!(settings.isDesktop && settings.isDefault)">
         <div class="header">{{ $t("message.settings.general") }}</div>
         <div class="row">
           <div class="left">
-            <label for="settings-general-config">{{ $t("message.settings.config") }}</label>
+            <label for="settings-general-config">{{ $t("message.settings.profile") }}</label>
           </div>
           <div class="right">
             <input id="settings-general-config" type="text" required v-model="settings.name">
           </div>
         </div>
       </div>
-      <div id="settings-rpc" class="group" v-if="!settings.isDefault">
+      <div id="settings-rpc" class="group" v-if="!(settings.isDesktop && settings.isDefault)">
         <div class="header">{{ $t("message.settings.rpc") }}</div>
         <div class="row">
           <div class="left">
@@ -64,7 +73,7 @@
             <label for="settings-download-path">{{ $t("message.settings.directory") }}</label>
           </div>
           <div class="right pair">
-            <label for="settings-download-path-choose" class="button fixed" :class="{'disabled': !settings.isDefault}">{{ $t("message.settings.choose") }}</label>
+            <label for="settings-download-path-choose" class="button fixed" :class="{'disabled': !(settings.isDesktop && settings.isDefault)}">{{ $t("message.settings.choose") }}</label>
             <input id="settings-download-path-choose" class="hidden" type="file" webkitdirectory mozdirectory msdirectory odirectory directory multiple @change="setDir($event)">
             <input class="expanded" type="text" disabled v-model="settings.options['dir']">
           </div>
@@ -149,6 +158,9 @@ export default {
 }
 </script>
 
+<style lang="css" src="@fortawesome/fontawesome-free-webfonts/css/fa-solid.css" scoped></style>
+<style lang="css" src="@fortawesome/fontawesome-free-webfonts/css/fontawesome.css" scoped></style>
+<style lang="css" src="@/styles/toolbar.css" scoped></style>
 <style lang="css" src="@/styles/option.css" scoped></style>
 <style lang="css" scoped>
 .badge {

src/lang/en-US.json

@@ -18,7 +18,7 @@
   },
   "settings": {
     "general": "General",
-    "config": "Config",
+    "profile": "Profile",
     "rpc": "RPC",
     "host": "Host",
     "port": "Port",

src/lang/zh-CN.json

@@ -18,7 +18,7 @@
   },
   "settings": {
     "general": "通用",
-    "config": "配置",
+    "profile": "配置文件",
     "rpc": "RPC",
     "host": "主机",
     "port": "端口",

src/utils/aria2manager.js

@@ -16,6 +16,10 @@ export default class Aria2Manager {
     if (this.serverIndex >= this.servers.length) this.serverIndex = this.servers.length - 1
   }
 
+  setServerIndex (index) {
+    this.serverIndex = Math.min(this.servers.length - 1, Math.max(0, index))
+  }
+
   setSyncInterval (interval = 3000) {
     this.sync = setInterval(() => this.syncTasks(), interval)
   }