[M] Move settings components

AquaNet/src/components/settings/Mai2Settings.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  import { slide, fade } from "svelte/transition";
+  import { FADE_IN, FADE_OUT } from "../../libs/config";
+  import { t } from "../../libs/i18n.js";
+  import Icon from "@iconify/svelte";
+  import StatusOverlays from "../StatusOverlays.svelte";
+  import { GAME } from "../../libs/sdk";
+
+  const profileFields = [
+    ['name', t('settings.mai2.name')],
+  ]
+
+  export let username: string;
+  let error: string
+  let submitting = ""
+  let values = Array(profileFields.length).fill('')
+  let changed: string[] = []
+
+  GAME.userSummary(username, 'mai2').then(({name}) => {
+    values = [name]
+  }).catch(e => error = e.message)
+
+  function submit(field: string, value: string) {
+    if (submitting) return
+    submitting = field
+
+    switch (field) {
+      case 'name':
+        GAME.changeName('mai2', value).then(({newName}) => {
+          changed = changed.filter(c => c !== field)
+          values = [newName]
+        }).catch(e => error = e.message).finally(() => submitting = "")
+        break
+    }
+  }
+
+  function exportData() {
+    submitting = "export"
+    GAME.export('mai2')
+      .then(data => download(JSON.stringify(data), `AquaDX_maimai2_export_${values[0]}.json`))
+      .catch(e => error = e.message)
+      .finally(() => submitting = "")
+  }
+
+  function download(data: string, filename: string) {
+    const blob = new Blob([data]);
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    link.click();
+  }
+</script>
+
+<div class="fields" out:fade={FADE_OUT} in:fade={FADE_IN}>
+  {#each profileFields as [field, name], i (field)}
+    <div class="field">
+      <label for={field}>{name}</label>
+      <div>
+        <input id={field} type="text"
+               bind:value={values[i]} on:input={() => changed = [...changed, field]}
+               placeholder={field === 'password' ? t('settings.profile.unchanged') : t('settings.profile.unset')}/>
+        {#if changed.includes(field) && values[i]}
+          <button transition:slide={{axis: 'x'}} on:click={() => submit(field, values[i])}>
+            {#if submitting === field}
+              <Icon icon="line-md:loading-twotone-loop"/>
+            {:else}
+              {t('settings.profile.save')}
+            {/if}
+          </button>
+        {/if}
+      </div>
+    </div>
+  {/each}
+  <button class="exportButton" on:click={exportData}>
+    <Icon icon="bxs:file-export"/>
+    {t('settings.export')}
+  </button>
+</div>
+
+<StatusOverlays {error} loading={!values[0] || !!submitting}/>
+
+<style lang="sass">
+  .fields
+    display: flex
+    flex-direction: column
+    gap: 12px
+
+  .field
+    display: flex
+    flex-direction: column
+
+    label
+      max-width: max-content
+
+    > div:not(.bool)
+      display: flex
+      align-items: center
+      gap: 1rem
+      margin-top: 0.5rem
+
+      > input
+        flex: 1
+
+  .exportButton
+    display: flex
+    justify-content: center
+    align-items: center
+    gap: 5px
+</style>