WIP: Drive sync flow

Spectral-Claws · Nov 5, 2020 · 333a7b6 · 333a7b6
1 parent d850e0b
commit 333a7b6
Show file tree

Hide file tree

Showing 10 changed files with 247 additions and 38 deletions.
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "@rollup/plugin-replace": "^2.3.4",
     "@rollup/plugin-url": "^5.0.0",
     "autoprefixer": "^10.0.1",
+    "dayjs": "^1.9.4",
     "dotenv": "^8.2.0",
     "postcss": "^8.1.2",
     "postcss-load-config": "^3.0.0",
@@ -37,6 +38,7 @@
     "sapper": "^0.28.0",
     "svelte": "^3.17.3",
     "svelte-preprocess": "^4.5.1",
+    "svelte-simple-modal": "^0.6.1",
     "tailwindcss": "^1.9.5"
   }
 }
diff --git a/src/components/DataSync.svelte b/src/components/DataSync.svelte
@@ -1,12 +1,22 @@
 <script>
-  import { onMount } from 'svelte';
-  import { driveSignedIn, driveLoading } from '../stores/dataSync';
+  // doc: /static/images.save_sync_flow.png
+
+  import dayjs from 'dayjs';
+  import { onMount, getContext } from 'svelte';
+  import { driveSignedIn, driveLoading, saveId } from '../stores/dataSync';
+  import { getLocalSaveJson, updateSave, updateTime, UPDATE_TIME_KEY } from '../stores/saveManager';
+
+  import SyncConflictModal from '../components/SyncConflictModal.svelte';
+
+  const { open: openModal } = getContext('simple-modal');
 
   const CLIENT_ID = __paimon.env.GOOGLE_DRIVE_CLIENT_ID;
   const API_KEY = __paimon.env.GOOGLE_DRIVE_API_KEY;
   const DISCOVERY_DOCS = ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest'];
   const SCOPES = 'https://www.googleapis.com/auth/drive.appdata';
 
+  $: localSaveExists = $updateTime !== null;
+
   onMount(() => {
     const script = document.createElement('script');
     script.onload = handleClientLoad;
@@ -19,7 +29,7 @@
   }
 
   function updateSigninStatus(status) {
-    console.log('DRIVE signed in:', status);
+    console.log('update drive signed in status:', status);
     driveSignedIn.set(status);
     driveLoading.set(false);
 
@@ -28,29 +38,73 @@
     }
   }
 
+  async function copyRemoteToLocal() {
+    try {
+      const remoteSaveData = await getData();
+      for (const k in remoteSaveData) {
+        updateSave(k, remoteSaveData[k], true);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  async function compareLocalSave() {
+    try {
+      const data = await getData();
+      const remoteTime = dayjs(data[UPDATE_TIME_KEY]);
+      if ($updateTime !== null && remoteTime.diff($updateTime) !== 0) {
+        console.log('DRIVE SYNC CONFLICT!');
+        openModal(
+          SyncConflictModal,
+          {
+            remoteTime: remoteTime,
+            localTime: $updateTime,
+          },
+          {
+            closeButton: false,
+            closeOnEsc: false,
+            closeOnOuterClick: false,
+            styleWindow: { background: '#25294A' },
+          },
+        );
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  // check if remote save.json exists
   async function getFiles() {
+    console.log('checking remote file');
+
     try {
       const { result } = await gapi.client.drive.files.list({
         spaces: 'appDataFolder',
         q: "name = 'save.json'",
       });
       console.log(result);
 
+      // create save.json on remote if not exists
       if (result.files.length === 0) {
-        createFile();
+        await createFile();
       } else {
-        const data = await gapi.client.drive.files.get({
-          fileId: result.files[0].id,
-          alt: 'media',
-        });
-        console.log(data);
+        saveId.set(result.files[0].id);
+
+        if (localSaveExists) {
+          await compareLocalSave();
+        } else {
+          await copyRemoteToLocal();
+        }
       }
     } catch (err) {
       console.error(err);
     }
   }
 
   async function createFile() {
+    console.log('creating remote file');
+
     try {
       const { result } = await gapi.client.drive.files.create({
         resource: {
@@ -60,16 +114,45 @@
         fields: 'id',
       });
 
-      const data = await gapi.client.request({
-        path: `/upload/drive/v3/files/${result.id}`,
+      saveId.set(result.id);
+
+      if (localSaveExists) {
+        await saveData(getLocalSaveJson());
+      }
+
+      console.log(result);
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  async function getData() {
+    console.log('reading remote file');
+
+    try {
+      const { result } = await gapi.client.drive.files.get({
+        fileId: $saveId,
+        alt: 'media',
+      });
+
+      return result;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  async function saveData(data) {
+    console.log('saving to remote file');
+
+    try {
+      await gapi.client.request({
+        path: `/upload/drive/v3/files/${$saveId}`,
         method: 'PATCH',
         params: {
           uploadType: 'media',
         },
-        body: JSON.stringify({ v: __paimon.env.CURRENT_VERSION }),
+        body: data,
       });
-
-      console.log(data);
     } catch (err) {
       console.error(err);
     }

diff --git a/src/components/SyncConflictModal.svelte b/src/components/SyncConflictModal.svelte
@@ -0,0 +1,48 @@
+<script>
+  import { mdiCloudAlert, mdiContentSave, mdiDownload, mdiFile, mdiGoogleDrive, mdiUpload } from '@mdi/js';
+  import Button from './Button.svelte';
+
+  import Icon from './Icon.svelte';
+
+  export let remoteTime;
+  export let localTime;
+
+  const remoteFormatted = remoteTime.format('dddd, MMMM D, YYYY h:mm A');
+  const localFormatted = localTime.format('dddd, MMMM D, YYYY h:mm A');
+  const remoteNewer = remoteTime.isAfter(localTime);
+</script>
+
+<div class="flex">
+  <Icon path={mdiCloudAlert} color="white" size={2} />
+  <p class="flex-1 text-white text-lg md:text-xl font-bold ml-4">
+    Your local data is conflicting with the ones stored in the Google Drive!
+  </p>
+</div>
+<div class="mt-4 p-4 bg-item rounded-xl text-white">
+  <p class="font-bold">
+    <Icon path={mdiGoogleDrive} className="mr-2" />
+    Google Drive Data -
+    {remoteNewer ? 'NEWER' : 'OLDER'}
+  </p>
+  <p class="text-gray-400 mt-1">Last modified: {remoteFormatted}</p>
+  <Button className="mt-2 w-full">
+    <Icon path={mdiDownload} className="mr-1" />Replace Local Data
+  </Button>
+</div>
+<p class="mt-2 text-white text-center">OR</p>
+<div class="mt-2 p-4 bg-item rounded-xl text-white">
+  <p class="font-bold">
+    <Icon path={mdiFile} className="mr-2" />
+    Local Data -
+    {remoteNewer ? 'OLDER' : 'NEWER'}
+  </p>
+  <p class="text-gray-400 mt-1">Last modified: {localFormatted}</p>
+  <Button className="mt-2 w-full">
+    <Icon path={mdiUpload} className="mr-1" />Replace Google Drive Data
+  </Button>
+</div>
+<div class="flex mt-6 justify-end">
+  <Button className="w-full md:w-auto">
+    <Icon path={mdiContentSave} className="mr-1" />Download Both Data
+  </Button>
+</div>
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
@@ -1,12 +1,21 @@
 <script>
+  import { onMount } from 'svelte';
+  import Modal from 'svelte-simple-modal';
+
   import Tailwind from '../components/Tailwindcss.svelte';
   import Sidebar from '../components/Sidebar/Sidebar.svelte';
   import Header from '../components/Header.svelte';
   import DataSync from '../components/DataSync.svelte';
 
   import { showSidebar } from '../stores/sidebar';
+  import { checkLocalSave } from '../stores/saveManager';
 
   export let segment;
+
+  // check local storage save on load
+  onMount(() => {
+    checkLocalSave();
+  });
 </script>
 
 <svelte:head>
@@ -20,12 +29,13 @@
 {#if $showSidebar}
   <Sidebar {segment} mobile />
 {/if}
-<main style="flex: 1 0 auto;">
-  <slot />
-</main>
+<Modal>
+  <main style="flex: 1 0 auto;">
+    <slot />
+  </main>
+  <DataSync />
+</Modal>
 <p class="lg:ml-64 px-8 py-4 text-gray-600">
   Paimon.moe is not affiliated with miHoYo.<br />
   Genshin Impact, game content and materials are trademarks and copyrights of miHoYo.
 </p>
-
-<DataSync />
diff --git a/src/routes/settings.svelte b/src/routes/settings.svelte
@@ -1,9 +1,9 @@
 <script>
-  import { mdiGoogleDrive, mdiLoading } from '@mdi/js';
+  import { mdiCheckCircleOutline, mdiGoogleDrive, mdiLoading } from '@mdi/js';
 
   import Button from '../components/Button.svelte';
   import Icon from '../components/Icon.svelte';
-  import { driveSignedIn, driveLoading } from '../stores/dataSync';
+  import { driveSignedIn, driveLoading, synced } from '../stores/dataSync';
 
   function signIn() {
     gapi.auth2.getAuthInstance().signIn();
@@ -15,20 +15,32 @@
 </script>
 
 <div class="lg:ml-64 pt-20 px-8 lg:pt-8">
+  <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}
-    <p class="text-white">Drive signed in: {$driveSignedIn}</p>
-    {#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>
-    {/if}
+    <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 ${$synced ? 'text-green-400' : 'text-yellow-400'}`}>
+        {$synced ? 'Synced' : 'Syncing...'}
+        {#if $synced}
+          <Icon path={mdiCheckCircleOutline} className="text-green-400" />
+        {:else}
+          <Icon path={mdiLoading} className="text-yellow-400" spin />
+        {/if}
+      </span>
+    </p>
   {/if}
 </div>
diff --git a/src/routes/wish/_counter.svelte b/src/routes/wish/_counter.svelte
@@ -1,9 +1,11 @@
 <script>
-  import { mdiStar } from '@mdi/js';
   import { onMount } from 'svelte';
+  import { mdiStar } from '@mdi/js';
+  import debounce from 'lodash/debounce';
 
   import Button from '../../components/Button.svelte';
   import Icon from '../../components/Icon.svelte';
+  import { readSave, updateSave, fromRemote } from '../../stores/saveManager';
 
   export let id = '';
   export let name = '';
@@ -12,13 +14,16 @@
   let rare = 0;
 
   $: path = `wish-counter-${id}`;
+  $: if ($fromRemote) {
+    readLocalData();
+  }
 
   onMount(() => {
     readLocalData();
   });
 
   function readLocalData() {
-    const data = localStorage.getItem(path);
+    const data = readSave(path);
     if (data !== null) {
       const counterData = JSON.parse(data);
       total = counterData.total;
@@ -27,14 +32,15 @@
     }
   }
 
-  function saveData() {
+  const saveData = debounce(() => {
     const data = JSON.stringify({
       total,
       legendary,
       rare,
     });
-    localStorage.setItem(path, data);
-  }
+
+    updateSave(path, data);
+  }, 2000);
 
   function add(val) {
     if (total + val < 0) return;

diff --git a/src/stores/dataSync.js b/src/stores/dataSync.js
@@ -2,3 +2,5 @@ import { writable } from 'svelte/store';
 
 export const driveSignedIn = writable(false);
 export const driveLoading = writable(true);
+export const synced = writable(true);
+export const saveId = writable('');