[+] Complete transfer logic

AquaNet/src/pages/Transfer/Transfer.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import { slide } from "svelte/transition";
-  import { ts } from "../../libs/i18n";
+  import { t, ts } from "../../libs/i18n";
   import TransferServer from "./TransferServer.svelte";
   import { DATA_HOST } from "../../libs/config";
+  import type { ConfirmProps } from "../../libs/generalTypes";
 
 
   let tabs = ['chu3', 'mai2', 'ongeki']
@@ -13,16 +14,15 @@
   }
   let tab = 0
 
-  let src = JSON.parse(localStorage.getItem('src') ?? JSON.stringify({
-    dns: "",
-    card: "",
-    keychip: ""
-  }))
-  let dst = JSON.parse(localStorage.getItem('dst') ?? `{ card: "", server: "", keychip: "" }`)
-  let gameInfo = JSON.parse(localStorage.getItem('gameInfo') ?? JSON.stringify({
-    game: "",
-    version: "",
-  }))
+  let src = JSON.parse(localStorage.getItem('src') ?? `{"dns": "", "card": "", "keychip": ""}`)
+  let dst = JSON.parse(localStorage.getItem('dst') ?? `{"dns": "", "card": "", "keychip": ""}`)
+  let [srcTested, dstTested] = [false, false]
+  let gameInfo = JSON.parse(localStorage.getItem('gameInfo') ?? `{"game": "", "version": ""}`)
+
+  let srcEl: TransferServer, dstEl: TransferServer
+  let srcExportedData: string
+  let loading: boolean = false
+  let confirm: ConfirmProps | null = null
 
   function defaultGame() {
     gameInfo.game = game[tabs[tab]].game
@@ -35,6 +35,27 @@
     localStorage.setItem('gameInfo', JSON.stringify(gameInfo))
   }
 
+  function startTransfer() {
+    if (!(srcTested && dstTested)) return alert("Please test both servers first!")
+    if (loading) return alert("Transfer already in progress!")
+    console.log("Starting transfer...")
+    loading = true
+
+    if (!dstEl.exportedData) {
+      // Ask user to make sure to backup their data
+      if (!confirm("It seems like you haven't backed up your destination data. Are you sure you want to proceed? (This will overwrite your destination server's data)")) {
+        loading = false
+        return
+      }
+    }
+
+    srcEl.pull()
+      .then(() => dstEl.push(srcExportedData))
+      .then(() => alert("Transfer successful!"))
+      .catch(e => alert(`Transfer failed: ${e}`))
+      .finally(() => loading = false)
+  }
+
   defaultGame()
 </script>
 
@@ -56,15 +77,21 @@
     <p>👋 Welcome to the AquaTrans™ server data transfer tool!</p>
     <p>You can use this to export data from any server, and input data into any server using the connection credentials (card number, server address, and keychip id).</p>
     <p>This tool will simulate a game client and pull your data from the source server, and push your data to the destination server.</p>
-    <p>Please fill out the form below to get started!</p>
+    <p>Please fill out the info below to get started!</p>
+  </div>
+
+  <TransferServer bind:src={src} bind:gameInfo={gameInfo} on:change={onChange}
+    bind:tested={srcTested} bind:this={srcEl} bind:exportedData={srcExportedData} />
+
+  <div class="arrow" class:disabled={!(srcTested && dstTested)}>
+    <img src="{DATA_HOST}/d/DownArrow.png" alt="arrow" on:click={startTransfer}>
   </div>
 
-  <TransferServer bind:src={src} bind:gameInfo={gameInfo} on:change={onChange} />
-  <div class="arrow"><img src="{DATA_HOST}/d/DownArrow.png" alt="arrow"></div>
   <TransferServer bind:src={dst} bind:gameInfo={gameInfo} on:change={onChange}
-    isSrc={false} />
+    bind:tested={dstTested} bind:this={dstEl} isSrc={false} />
 </main>
 
+
 <style lang="sass">
   .arrow
     width: 100%
@@ -72,11 +99,14 @@
     justify-content: center
     margin-top: -40px
     margin-bottom: -40px
-    z-index: 0
+    z-index: 1
 
-  // CSS animation to let the image opacity breathe
-  .arrow img
-    animation: breathe 1s infinite alternate
+    &.disabled
+      filter: grayscale(1)
+
+    // CSS animation to let the image opacity breathe
+    img
+      animation: breathe 1s infinite alternate
 
   @keyframes breathe
     0%