From 33e14ec8e91d76a7209b94e9ee63e576025673ae Mon Sep 17 00:00:00 2001
From: I Made Setia Baruna <setia.baruna@sprintasia.co.id>
Date: Thu, 7 Jan 2021 22:42:26 +0800
Subject: [PATCH] Update setting

---
 src/components/Select.svelte         |  5 +-
 src/components/SettingData.svelte    | 40 ++++++++++++
 src/routes/_layout.svelte            |  2 +
 src/routes/calculator/_weapon.svelte |  4 +-
 src/routes/settings.svelte           | 96 +++++++++++++++++++---------
 src/routes/todo.svelte               |  9 ++-
 src/stores/server.js                 | 33 ++++++++++
 7 files changed, 153 insertions(+), 36 deletions(-)
 create mode 100644 src/components/SettingData.svelte
 create mode 100644 src/stores/server.js

diff --git a/src/components/Select.svelte b/src/components/Select.svelte
index fbb952f6..88a8c7a0 100644
--- a/src/components/Select.svelte
+++ b/src/components/Select.svelte
@@ -5,7 +5,8 @@
   import Icon from './Icon.svelte';
 
   const dispatch = createEventDispatcher();
-
+  
+  export let className;
   export let icon = null;
   export let options;
   export let placeholder = 'Select...';
@@ -109,7 +110,7 @@
 
 <svelte:window on:click={onWindowClick} on:keydown={onKeyDown} />
 
-<div class="select-none relative" bind:this={container}>
+<div class={`select-none relative ${className}`} bind:this={container}>
   <button
     class={`flex w-full relative items-center px-4 bg-background rounded-2xl h-14 focus:outline-none focus:border-primary border-2 border-transparent ease-in duration-100 ${classes}`}
     on:click={toggleOptions}>
diff --git a/src/components/SettingData.svelte b/src/components/SettingData.svelte
new file mode 100644
index 00000000..2a8ba20b
--- /dev/null
+++ b/src/components/SettingData.svelte
@@ -0,0 +1,40 @@
+<script>
+  import { server, loading } from '../stores/server';
+  import { readSave, updateSave, fromRemote } from '../stores/saveManager';
+  import { onMount } from 'svelte';
+
+  let unsubscribe = null;
+  let firstLoad = true;
+
+  $: if ($fromRemote) {
+    readLocalData();
+  }
+
+  onMount(() => {
+    readLocalData();
+  });
+
+  function readLocalData() {
+    loading.set(true);
+    firstLoad = true;
+
+    if (unsubscribe) unsubscribe();
+
+    console.log('setting read local');
+    const data = readSave('server');
+    if (data !== null) {
+      const currentServer = data;
+      server.set(currentServer);
+    }
+
+    unsubscribe = server.subscribe((val) => {
+      if (firstLoad) return;
+
+      console.log('server changed', val);
+      updateSave('server', val);
+    });
+
+    firstLoad = false;
+    loading.set(false);
+  }
+</script>
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index 0317b248..480d3eca 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -10,6 +10,7 @@
   import { showSidebar } from '../stores/sidebar';
   import { checkLocalSave } from '../stores/saveManager';
   import TodoData from '../components/TodoData.svelte';
+  import SettingData from '../components/SettingData.svelte';
 
   export let segment;
 
@@ -33,6 +34,7 @@
 <Modal>
   <DataSync>
     <TodoData />
+    <SettingData />
     <main style="flex: 1 0 auto;">
       <slot />
     </main>
diff --git a/src/routes/calculator/_weapon.svelte b/src/routes/calculator/_weapon.svelte
index 47f7afc1..4f9253cc 100644
--- a/src/routes/calculator/_weapon.svelte
+++ b/src/routes/calculator/_weapon.svelte
@@ -107,10 +107,10 @@
     intendedAscension >= currentAscension &&
     currentLevel !== '' &&
     currentLevel > 0 &&
-    currentLevel <= 80 &&
+    currentLevel <= 90 &&
     intendedLevel !== '' &&
     intendedLevel > 0 &&
-    intendedLevel <= 80;
+    intendedLevel <= 90;
 
   function updateIntendedAscension() {
     intendedAscension = Math.max(currentAscension, intendedAscension);
diff --git a/src/routes/settings.svelte b/src/routes/settings.svelte
index 094dbfb0..a7257529 100644
--- a/src/routes/settings.svelte
+++ b/src/routes/settings.svelte
@@ -1,9 +1,21 @@
 <script>
   import { mdiCheckCircleOutline, mdiGoogleDrive, mdiLoading } from '@mdi/js';
+  import { onMount } from 'svelte';
 
   import Button from '../components/Button.svelte';
   import Icon from '../components/Icon.svelte';
+  import Select from '../components/Select.svelte';
+
   import { driveSignedIn, driveLoading, synced, localModified, lastSyncTime } from '../stores/dataSync';
+  import { server } from '../stores/server';
+
+  const servers = [
+    { label: 'Asia/TW/HK/MO', value: 'Asia' },
+    { label: 'America', value: 'America' },
+    { label: 'Europe', value: 'Europe' },
+  ];
+
+  let selectedServer = null;
 
   function signIn() {
     gapi.auth2.getAuthInstance().signIn();
@@ -13,6 +25,20 @@
     gapi.auth2.getAuthInstance().signOut();
   }
 
+  onMount(() => {
+    server.subscribe((val) => {
+      console.log('setting update');
+      selectedServer = servers.find((e) => e.value === val);
+    });
+  });
+
+  function updateServer() {
+    if (selectedServer === null) return;
+    server.set(selectedServer.value);
+  }
+
+  $: selectedServer, updateServer();
+
   $: isSynced = $synced && !$localModified;
 </script>
 
@@ -21,36 +47,46 @@
 </svelte:head>
 
 <div class="lg:ml-64 pt-20 px-8 lg:pt-8">
-  <p class="text-white mb-4">Data Version: <b>1.2</b></p>
-  <p class="text-white mb-2">
-    Paimon.moe use Application Data Directory on your Google Drive to save and sync your wish counter and todo list.
-  </p>
-  <p class="text-white mb-4">Paimon.moe can only read and write file that this site create.</p>
-  {#if $driveLoading}
-    <Icon path={mdiLoading} color="white" spin />
-  {:else if !$driveSignedIn}
-    <Button on:click={signIn}>
-      <Icon path={mdiGoogleDrive} className="mr-2" />
-      Sign in to Google Drive
-    </Button>
-  {:else}
-    <Button on:click={signOut}>
-      <Icon path={mdiGoogleDrive} className="mr-2" />
-      Sign out Google Drive
-    </Button>
-    <p class="text-white mt-4">
-      Sync Status:
-      <span class={`font-bold ${isSynced ? 'text-green-400' : 'text-yellow-400'}`}>
-        {isSynced ? 'Synced' : $localModified && $synced ? 'Waiting...' : 'Syncing...'}
-        {#if isSynced}
-          <Icon path={mdiCheckCircleOutline} className="text-green-400" />
-        {:else if $localModified && !$synced}
-          <Icon path={mdiLoading} className="text-yellow-400" spin />
-        {/if}
-      </span>
+  <div class="bg-item rounded-xl mb-4 p-4">
+    <p class="text-white">Data Version: <b>1.2</b></p>
+  </div>
+  <div class="bg-item rounded-xl mb-4 p-4">
+    <div class="flex flex-col md:flex-row md:items-center">
+      <p class="text-white mr-4">Select your server:</p>
+      <Select className="w-64" bind:selected={selectedServer} options={servers} placeholder="Select your server" />
+    </div>
+  </div>
+  <div class="bg-item rounded-xl mb-4 p-4">
+    <p class="text-white mb-2">
+      Paimon.moe use Application Data Directory on your Google Drive to save and sync your wish counter and todo list.
     </p>
-    {#if $lastSyncTime !== null}
-      <p class="text-gray-400">Last Sync: {$lastSyncTime.format('dddd, MMMM D, YYYY h:mm:ss A')}</p>
+    <p class="text-white mb-4">Paimon.moe can only read and write file that this site create.</p>
+    {#if $driveLoading}
+      <Icon path={mdiLoading} color="white" spin />
+    {:else if !$driveSignedIn}
+      <Button on:click={signIn}>
+        <Icon path={mdiGoogleDrive} className="mr-2" />
+        Sign in to Google Drive
+      </Button>
+    {:else}
+      <Button on:click={signOut}>
+        <Icon path={mdiGoogleDrive} className="mr-2" />
+        Sign out Google Drive
+      </Button>
+      <p class="text-white mt-4">
+        Sync Status:
+        <span class={`font-bold ${isSynced ? 'text-green-400' : 'text-yellow-400'}`}>
+          {isSynced ? 'Synced' : $localModified && $synced ? 'Waiting...' : 'Syncing...'}
+          {#if isSynced}
+            <Icon path={mdiCheckCircleOutline} className="text-green-400" />
+          {:else if $localModified && !$synced}
+            <Icon path={mdiLoading} className="text-yellow-400" spin />
+          {/if}
+        </span>
+      </p>
+      {#if $lastSyncTime !== null}
+        <p class="text-gray-400">Last Sync: {$lastSyncTime.format('dddd, MMMM D, YYYY h:mm:ss A')}</p>
+      {/if}
     {/if}
-  {/if}
+  </div>
 </div>
diff --git a/src/routes/todo.svelte b/src/routes/todo.svelte
index 60e8ca46..cde66f49 100644
--- a/src/routes/todo.svelte
+++ b/src/routes/todo.svelte
@@ -8,6 +8,7 @@
   import Icon from '../components/Icon.svelte';
   import Button from '../components/Button.svelte';
   import TodoDeleteModal from '../components/TodoDeleteModal.svelte';
+  import { getCurrentDay } from '../stores/server';
 
   const { open: openModal, close: closeModal } = getContext('simple-modal');
 
@@ -15,7 +16,7 @@
   let numberFormat = Intl.NumberFormat();
   let adding = false;
   let todayOnly = false;
-  let today = dayjs().format('dddd').toLowerCase();
+  let today = getCurrentDay();
 
   async function reorder(index, pos) {
     if ((index === 0 && pos === -1) || (index === $todos.length - 1 && pos === 1)) return;
@@ -58,6 +59,7 @@
   }
 
   function toggleTodayOnly() {
+    today = getCurrentDay();
     todayOnly = !todayOnly;
   }
 
@@ -108,7 +110,10 @@
         <Icon path={mdiLoading} color="white" spin />
       {:else if $todos.length > 0}
         <div>
-          <Button className="float-right" size="md" on:click={toggleTodayOnly}>Show {todayOnly ? 'All Day' : 'Today Only'}</Button>
+          <Button className="float-right" size="md" on:click={toggleTodayOnly}>
+            Show
+            {todayOnly ? 'All Day' : 'Today Only'}
+          </Button>
           <p class="font-bold text-xl mb-4">Summary</p>
         </div>
       {:else}
diff --git a/src/stores/server.js b/src/stores/server.js
new file mode 100644
index 00000000..e88dc0ab
--- /dev/null
+++ b/src/stores/server.js
@@ -0,0 +1,33 @@
+import { writable, get } from 'svelte/store';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+export const server = writable('Asia');
+export const loading = writable(true);
+
+const timeOffset = {
+  Asia: 8,
+  America: -5,
+  Europe: 1,
+};
+
+const weekdays = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
+
+export const getCurrentDay = () => {
+  const time = dayjs().utcOffset(timeOffset[get(server)]);
+  let day = time.day();
+  if (time.hour() > 0 && time.hour() < 4) {
+    day -= 1;
+  }
+
+  if (day === -1) {
+    day = 6;
+  }
+
+  console.log(weekdays[day], weekdays[time.day()], time.format());
+  return weekdays[day];
+};