Merge pull request #36 from tinybirdco/stock_widget

replace retool with stock widget

Author: davidnmargulies

.github/workflows/tinybird_cd.yml

@@ -1,3 +1,4 @@
 .tinyb
 .DS_Store
 .diff_tmp
+.e

.github/workflows/tinybird_ci.yml

@@ -1,17 +1,6 @@
 <footer class="mt-10">
   <div class="py-10 text-gray-400 bg-backgroundDark">
     <div class="container mx-auto px-10">
-      <div class="mt-2 lg:text-2xl">
-        Visit the
-        <a
-          href="/retool"
-          class="mt-4 font-bold no-underline text-white hover:underline lg:text-2xl"
-          target="_blank"
-        >
-          Procurement App
-        </a>
-        to rebalance stock.
-      </div>
       <div class="mt-2 lg:text-2xl">
         Visit the
         <a

.gitignore

@@ -1,6 +1,7 @@
 <script>
   import { RefreshCw } from 'lucide-svelte';
   import MockingbirdWidget from './MockingbirdWidget.svelte';
+  import StockWidget from './StockWidget.svelte';
   import { createTooltip } from '@melt-ui/svelte';
   import { invalidateAll } from '$app/navigation';
 
@@ -64,6 +65,7 @@
           <p class="px-4 py-1 text-white text-sm">Refresh</p>
         </div>
       {/if}
+      <StockWidget />
       <MockingbirdWidget />
     </div>
   </div>

data-project/.tinyenv

@@ -2,7 +2,6 @@
   import { createTooltip } from '@melt-ui/svelte';
   import { createWorker, startWorker, stopWorker } from '../lib/workerBuilder';
   import { Pause, Play } from 'lucide-svelte';
-  import { fade } from 'svelte/transition';
 
   /** @type {import('@tinybirdco/mockingbird').Schema} */
   const schema = {

demo-ecomm-svelte/package-lock.json

@@ -0,0 +1,143 @@
+<script>
+  import { createTooltip } from '@melt-ui/svelte';
+  import { Truck } from 'lucide-svelte';
+
+  const tbAppendToken = import.meta.env.VITE_TB_APPEND_TOKEN;
+  const host = import.meta.env.VITE_TB_HOST;
+
+  const {
+    elements: { trigger, content },
+    states: { open }
+  } = createTooltip({
+    positioning: {
+      placement: 'bottom'
+    },
+    openDelay: 0,
+    closeDelay: 0,
+    closeOnPointerDown: false,
+    forceVisible: true
+  });
+
+  const resetStock = async () => {
+    try {
+      console.log('Starting truncation...');
+      await truncateLatestAvailability(); // Wait for truncation to complete
+      console.log('Truncation complete, now appending stock...');
+      appendStock(); // Call appendStock only if truncation is successful
+    } catch (error) {
+      console.error('Failed to reset stock:', error); // Log any errors
+    }
+  };
+
+  const truncateLatestAvailability = async () => {
+    try {
+      const response = await fetch(`https://${host}/v0/datasources/mat_stock_latest/truncate`, {
+        method: 'POST',
+        headers: { Authorization: `Bearer ${tbAppendToken}` }
+      });
+
+      // Check if the response is okay
+      if (!response.ok) {
+        const errorText = await response.text(); // Get the error text if available
+        throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`);
+      }
+
+      // Handle 205 Reset Content response
+      if (response.status === 205) {
+        console.log('Truncation successful, no content to return.');
+        return; // No content to return, just exit the function
+      }
+
+      // Attempt to parse the response as JSON for other status codes
+      const res = await response.json();
+      console.log(res);
+      return res; // Ensure this returns a value
+    } catch (error) {
+      console.error('Error truncating availability:', error);
+      throw error; // Rethrow the error to be caught in resetStock
+    }
+  };
+
+  const appendStock = () => {
+    const data = [
+      {
+        timestamp: new Date().toISOString(),
+        product: '5d0cgAl5BTk',
+        store: 'warehouse_1',
+        amount: 10000
+      },
+      {
+        timestamp: new Date().toISOString(),
+        product: 'YY4YaHKh2jQ',
+        store: 'warehouse_1',
+        amount: 10000
+      },
+      {
+        timestamp: new Date().toISOString(),
+        product: 'p8Drpg_duLw',
+        store: 'warehouse_1',
+        amount: 10000
+      },
+      {
+        timestamp: new Date().toISOString(),
+        product: 'sZzx0cUDX98',
+        store: 'warehouse_1',
+        amount: 50000
+      },
+      {
+        timestamp: new Date().toISOString(),
+        product: 'xFmXLq_KJxg',
+        store: 'warehouse_1',
+        amount: 1000
+      },
+      {
+        timestamp: new Date().toISOString(),
+        product: '6cHumpSxTvs',
+        store: 'warehouse_1',
+        amount: 100
+      },
+      {
+        timestamp: new Date().toISOString(),
+        product: 'Fg15LdqpWrs',
+        store: 'warehouse_1',
+        amount: 85
+      },
+      {
+        timestamp: new Date().toISOString(),
+        product: 'Zu7A1GCSjZE',
+        store: 'warehouse_1',
+        amount: 0
+      },
+      {
+        timestamp: new Date().toISOString(),
+        product: 'fSdBxY0NxVI',
+        store: 'warehouse_1',
+        amount: 0
+      }
+    ];
+    const ndjson = data.map((row) => JSON.stringify(row)).join('\n');
+    fetch(`https://${host}/v0/events?name=warehouse_stock`, {
+      method: 'POST',
+      body: ndjson,
+      headers: { Authorization: `Bearer ${tbAppendToken}` }
+    })
+      .then((res) => res.json())
+      .then((data) => console.log(data))
+      .catch((error) => console.error('Error appending stock:', error)); // Handle errors in appending
+  };
+
+</script>
+
+<button
+  class="relative flex h-8 w-8 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white"
+  on:click={resetStock}
+  use:melt={$trigger}
+>
+  <Truck class="h-4 w-4" color="#fff" />
+</button>
+
+{#if $open}
+  <div use:melt={$content} class="z-50 rounded-lg bg-secondary shadow">
+    <p class="px-4 py-1 text-white text-sm">Reset stock</p>
+  </div>
+{/if}

demo-ecomm-svelte/src/components/Footer.svelte

@@ -20,6 +20,6 @@ export async function load({ fetch, url }) {
       products: res.data
     };
   } else {
-    throw new Error(res);
+    throw new Error(`Error fetching data: ${res.message || 'Unknown error'}`);
   }
 }