Add profile uploading + cleanup

2024-03-26 01:21:20 +02:00
parent 8ecc96e92e
commit 6daeb966c5
4 changed files with 163 additions and 68 deletions
--- a/src/lib/components/NavBar.svelte
+++ b/src/lib/components/NavBar.svelte
@@ -37,7 +37,7 @@
    <div class="flex md:order-2 gap-5">
      <UserSettingsSolid class="hover:text-primary-700" on:click={openSettings} />
      <UploadSolid class="hover:text-primary-700" on:click={() => (uploadModalOpen = true)} />
-      <CloudArrowUpOutline class="hover:text-primary-700" on:click={() => goto('/cloud')} />
+      <!-- <CloudArrowUpOutline class="hover:text-primary-700" on:click={() => goto('/cloud')} /> -->
    </div>
  </Navbar>
 </div>
--- a/src/lib/util/cloud.ts
+++ b/src/lib/util/cloud.ts
@@ -0,0 +1,32 @@
+type FileInfo = {
+  accessToken: string;
+  metadata: any;
+  fileId?: string;
+  localStorageId: string;
+  type: string;
+}
+
+const FILES_API_URL = 'https://www.googleapis.com/upload/drive/v3/files';
+
+export async function uploadFile({ accessToken, fileId, localStorageId, metadata, type }: FileInfo) {
+  const json = localStorage.getItem(localStorageId) || '';
+  const blob = new Blob([json], { type });
+
+  const form = new FormData();
+
+  form.append('resource', new Blob([JSON.stringify(metadata)], { type }));
+  form.append('file', blob);
+
+
+  const res = await fetch(
+    `${FILES_API_URL}${fileId ? `/${fileId}` : ''}?uploadType=multipart`,
+    {
+      method: fileId ? 'PATCH' : 'POST',
+      headers: new Headers({ Authorization: 'Bearer ' + accessToken }),
+      body: form
+    }
+  );
+
+  return await res.json()
+}
+
--- a/src/lib/util/index.ts
+++ b/src/lib/util/index.ts
@@ -2,4 +2,5 @@ export * from './snackbar';
 export * from './upload';
 export * from './misc';
 export * from './modals';
-export * from './zip'
+export * from './zip'
+export * from './cloud'
--- a/src/routes/cloud/+page.svelte
+++ b/src/routes/cloud/+page.svelte
@@ -1,29 +1,32 @@
 <script lang="ts">
  import { processFiles } from '$lib/upload';
  import Loader from '$lib/components/Loader.svelte';
-  import { formatBytes, showSnackbar } from '$lib/util';
+  import { formatBytes, showSnackbar, uploadFile } from '$lib/util';
  import { Button, Frame, Listgroup, ListgroupItem } from 'flowbite-svelte';
  import { onMount } from 'svelte';
  import { promptConfirmation } from '$lib/util';
  import { GoogleSolid } from 'flowbite-svelte-icons';
-  import { volumes } from '$lib/settings';
+  import { profiles, volumes } from '$lib/settings';

  const CLIENT_ID = import.meta.env.VITE_GDRIVE_CLIENT_ID;
  const API_KEY = import.meta.env.VITE_GDRIVE_API_KEY;

  const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';
  const SCOPES = 'https://www.googleapis.com/auth/drive';
-  const FILES_API_URL = 'https://www.googleapis.com/upload/drive/v3/files';

  const FOLDER_MIME_TYPE = 'application/vnd.google-apps.folder';
  const READER_FOLDER = 'mokuro-reader';
  const VOLUME_DATA_FILE = 'volume-data.json';
+  const PROFILES_FILE = 'profiles.json';
+
+  const type = 'application/json';

  let tokenClient: any;
  let zips: gapi.client.drive.File[];
  let loadingMessage = '';
  let readerFolderId = '';
  let volumeDataId = '';
+  let profilesId = '';

  async function fetchZips(folderId: string) {
    const { result } = await gapi.client.drive.files.list({
@@ -97,13 +100,11 @@
      });

      readerFolderId = createReaderFolderRes.id || '';
-      loadingMessage = '';
    } else {
      const id = readerFolderRes.files?.[0]?.id || '';
      zips = [...((await fetchZips(id)) || [])];

      readerFolderId = id || '';
-      loadingMessage = '';
    }

    const { result: volumeDataRes } = await gapi.client.drive.files.list({
@@ -115,6 +116,16 @@
      volumeDataId = volumeDataRes.files?.[0].id || '';
    }

+    const { result: profilesRes } = await gapi.client.drive.files.list({
+      q: `'${readerFolderId}' in parents and name='${PROFILES_FILE}'`,
+      fields: 'files(id, name)'
+    });
+
+    if (profilesRes.files?.length !== 0) {
+      profilesId = profilesRes.files?.[0].id || '';
+    }
+
+    loadingMessage = '';
    showSnackbar('Connected to Google Drive');
  }

@@ -146,42 +157,55 @@
    });
  });

-  async function onUpload() {
-    const type = 'application/json';
-    const json = localStorage.getItem('volumes') || '';
-    const blob = new Blob([json], { type });
-
+  async function onUploadVolumeData() {
    const metadata = {
      mimeType: type,
      name: VOLUME_DATA_FILE,
      parents: [volumeDataId ? null : readerFolderId]
    };
-
    const { access_token } = gapi.auth.getToken();

-    const form = new FormData();
-
-    form.append('resource', new Blob([JSON.stringify(metadata)], { type }));
-    form.append('file', blob);
-
    loadingMessage = 'Uploading volume data';

-    const res = await fetch(
-      `${FILES_API_URL}${volumeDataId ? `/${volumeDataId}` : ''}?uploadType=multipart`,
-      {
-        method: volumeDataId ? 'PATCH' : 'POST',
-        headers: new Headers({ Authorization: 'Bearer ' + access_token }),
-        body: form
-      }
-    );
-    volumeDataId = (await res.json()).id;
+    const res = await uploadFile({
+      accessToken: access_token,
+      fileId: volumeDataId,
+      metadata,
+      localStorageId: 'volumes',
+      type
+    });

+    volumeDataId = res.id;
    loadingMessage = '';

    showSnackbar('Volume data uploaded');
  }

-  async function onDownload() {
+  async function onUploadProfiles() {
+    const metadata = {
+      mimeType: type,
+      name: PROFILES_FILE,
+      parents: [profilesId ? null : readerFolderId]
+    };
+    const { access_token } = gapi.auth.getToken();
+
+    loadingMessage = 'Uploading profiles';
+
+    const res = await uploadFile({
+      accessToken: access_token,
+      fileId: profilesId,
+      metadata,
+      localStorageId: 'profiles',
+      type
+    });
+
+    profilesId = res.id;
+    loadingMessage = '';
+
+    showSnackbar('Profiles uploaded');
+  }
+
+  async function onDownloadVolumeData() {
    loadingMessage = 'Downloading volume data';

    const { body } = await gapi.client.drive.files.get({
@@ -201,6 +225,27 @@
    loadingMessage = '';
    showSnackbar('Volume data downloaded');
  }
+
+  async function onDownloadProfiles() {
+    loadingMessage = 'Downloading profiles';
+
+    const { body } = await gapi.client.drive.files.get({
+      fileId: profilesId,
+      alt: 'media'
+    });
+
+    const downloaded = JSON.parse(body);
+
+    profiles.update((prev) => {
+      return {
+        ...prev,
+        ...downloaded
+      };
+    });
+
+    loadingMessage = '';
+    showSnackbar('Profiles downloaded');
+  }
 </script>

 <div class="p-2 h-[90svh]">
@@ -209,49 +254,66 @@
      {loadingMessage}
    </Loader>
  {:else if zips}
-    <div class="flex flex-col gap-5">
-      <div class="flex flex-col gap-2">
-        <h2 class="text-lg font-semibold text-center">Google Drive:</h2>
-        <div
-          class="flex gap-2 justify-center flex-wrap p-2 sm:p-5 border rounded-lg border-slate-600 border-opacity-50"
-        >
-          {#if zips.length > 0}
-            <Listgroup active class="w-full">
-              {#each zips as zip}
-                <Frame
-                  on:click={() => onClick(zip)}
-                  rounded
-                  border
-                  class="divide-y divide-gray-200 dark:divide-gray-600"
-                >
-                  <ListgroupItem normalClass="py-4">
-                    <div class="flex flex-col gap-2">
-                      <h2 class="font-semibold">{zip.name}</h2>
-                      <p>{formatBytes(parseInt(zip.size || '0'))}</p>
-                    </div>
-                  </ListgroupItem>
-                </Frame>
-              {/each}
-            </Listgroup>
-          {:else}
-            <p class="text-center">
-              Add your zip files to the <span class="text-primary-700">{READER_FOLDER}</span> folder
-              in your Google Drive.
-            </p>
+    <div class="flex flex-col gap-2">
+      <div class="flex justify-between items-center gap-2 flex-col sm:flex-row">
+        <h2 class="text-2xl font-semibold text-center">Google Drive:</h2>
+        <div class="flex flex-col sm:flex-row gap-2 sm:w-auto w-full">
+          <Button
+            color="dark"
+            on:click={() => promptConfirmation('Upload volume data?', onUploadVolumeData)}
+          >
+            Upload volume data
+          </Button>
+          {#if volumeDataId}
+            <Button
+              color="alternative"
+              on:click={() =>
+                promptConfirmation('Download and overwrite volume data?', onDownloadVolumeData)}
+            >
+              Download volume data
+            </Button>
+          {/if}
+          <Button
+            color="dark"
+            on:click={() => promptConfirmation('Upload profiles?', onUploadProfiles)}
+          >
+            Upload profiles
+          </Button>
+          {#if profilesId}
+            <Button
+              color="alternative"
+              on:click={() =>
+                promptConfirmation('Download and overwrite profiles?', onDownloadProfiles)}
+            >
+              Download profiles
+            </Button>
          {/if}
        </div>
      </div>
-      <div class="flex flex-col sm:flex-row gap-2">
-        <Button color="dark" on:click={() => promptConfirmation('Upload volume data?', onUpload)}>
-          Upload volume data
-        </Button>
-        {#if volumeDataId}
-          <Button
-            color="alternative"
-            on:click={() => promptConfirmation('Download and overwrite volume data?', onDownload)}
-          >
-            Download volume data
-          </Button>
+      <div class="flex gap-2 justify-center flex-wrap">
+        {#if zips.length > 0}
+          <Listgroup active class="w-full">
+            {#each zips as zip}
+              <Frame
+                on:click={() => onClick(zip)}
+                rounded
+                border
+                class="divide-y divide-gray-200 dark:divide-gray-600"
+              >
+                <ListgroupItem normalClass="py-4">
+                  <div class="flex flex-col gap-2">
+                    <h2 class="font-semibold">{zip.name}</h2>
+                    <p>{formatBytes(parseInt(zip.size || '0'))}</p>
+                  </div>
+                </ListgroupItem>
+              </Frame>
+            {/each}
+          </Listgroup>
+        {:else}
+          <p class="text-center">
+            Add your zip files to the <span class="text-primary-700">{READER_FOLDER}</span> folder in
+            your Google Drive.
+          </p>
        {/if}
      </div>
    </div>