From 6c6d8084c77240a6036495f0a5e24e14e6522717 Mon Sep 17 00:00:00 2001
From: Dominic Kempf <dominic.kempf@iwr.uni-heidelberg.de>
Date: Fri, 19 Jul 2024 15:06:32 +0200
Subject: [PATCH] Add mask property

---
 src/App.svelte                         | 9 ++++++++-
 src/components/EasyDBDetailView.svelte | 3 ++-
 src/lib/apiaccess.js                   | 9 +++++++--
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index b025b46..b9740d7 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -3,6 +3,7 @@
   import EasyDbDetailView from "./components/EasyDBDetailView.svelte";
 
   let uuid = "859e2318-32f6-4013-8468-ef8cec0b581b";
+  let mask = "";
   let instance = "https://heidicon.ub.uni-heidelberg.de";
 
   let languages = [
@@ -64,9 +65,15 @@
         </Label>
         <MultiSelect items={languages} bind:value={selected_data_languages} />
       </div>
+      <div class="space-y-2 p-4">
+        <Label>
+          Mask (leave empty for default mask):
+        </Label>
+        <Input bind:value={mask} />
+      </div>
     </div>
     <div class="w-1/2 p-4 border border-gray-300">
-      <EasyDbDetailView uuid={uuid} appLanguage={selected_app_language} dataLanguages={selected_data_languages} easydbInstance={instance} />
+      <EasyDbDetailView uuid={uuid} appLanguage={selected_app_language} dataLanguages={selected_data_languages} easydbInstance={instance} mask={mask}/>
     </div>
   </div>
 </main>
diff --git a/src/components/EasyDBDetailView.svelte b/src/components/EasyDBDetailView.svelte
index 8b68605..2d409cd 100644
--- a/src/components/EasyDBDetailView.svelte
+++ b/src/components/EasyDBDetailView.svelte
@@ -10,6 +10,7 @@
   export let appLanguage = "de-DE";
   export let dataLanguages = ["de-DE", "en-US"];
   export let easydbInstance = pregen_instance;
+  export let mask = "";
 
   $: appLanguageStore.set(appLanguage);
   $: dataLanguagesStore.set(dataLanguages);
@@ -19,7 +20,7 @@
 {#await $easydbDataPromiseStore }
   Accessing the EasyDB instance...
 {:then}
-  {#await easydb_api_object(uuid) }
+  {#await easydb_api_object(uuid, mask) }
     Waiting for API response...
   {:then data }
     <RecursiveEasyDbDetailView fields={maskObj(data).fields} data={data} table={maskObj(data).table_name_hint}/>
diff --git a/src/lib/apiaccess.js b/src/lib/apiaccess.js
index bc86440..e5a648a 100644
--- a/src/lib/apiaccess.js
+++ b/src/lib/apiaccess.js
@@ -1,13 +1,18 @@
 import { get } from 'svelte/store';
 import { easydbInstanceStore } from './stores';
 
-export async function easydb_api_object(uuid) {
+export async function easydb_api_object(uuid, mask) {
   if (!uuid) {
     return {}
   }
 
+  let url = `${get(easydbInstanceStore)}/api/objects/uuid/${uuid}`;
+  if (mask !== '') {
+    url = `${url}/mask/${mask}`;
+  }
+
   // Fetch the schema data for this instance
-  const response = await fetch(`${get(easydbInstanceStore)}/api/objects/uuid/${uuid}`);
+  const response = await fetch(url);
   if(response.status != 200) {
     throw new Error(`Could not fetch the data for uuid: ${uuid}`);
   }