Spaces:

Elevatics
/

ai-web-scraper-chat

Sleeping

App Files Files Community

pvanand commited on Jan 27

Commit

3e7c1cf

verified ·

1 Parent(s): f7304fe

Update static/ui/index.html

Browse files

Files changed (1) hide show

static/ui/index.html +12 -5

static/ui/index.html CHANGED Viewed

@@ -5,10 +5,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Electronics Store</title>
-    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/npm/@tailwindcss/typography/dist/typography.min.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
 </head>
 <body class="bg-gray-100">
     <div id="app" class="container mx-auto px-4 py-8">
@@ -18,7 +18,7 @@
         <div class="mb-6 flex gap-4">
             <select v-model="selectedCategory" class="p-2 border rounded-lg">
                 <option value="">All Categories</option>
-                <option v-for="category in categories" :value="category">{{ category }}</option>
             </select>
             <select v-model="sortBy" class="p-2 border rounded-lg">
@@ -31,6 +31,7 @@
         <!-- Products Grid -->
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             <div v-for="product in filteredProducts"
                  class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
                 <h2 class="text-xl font-semibold mb-2">{{ product.name }}</h2>
                 <div class="text-sm text-gray-600 mb-4">Category: {{ product.category }}</div>
@@ -38,7 +39,7 @@
                 <div class="mb-4">
                     <h3 class="font-semibold mb-2">Specifications:</h3>
                     <ul class="text-sm">
-                        <li v-for="(value, key) in product.specs" class="mb-1">
                             {{ key }}: {{ value }}
                         </li>
                     </ul>
@@ -71,13 +72,19 @@
                 // Fetch products from API
                 fetch('/api/electronics/products')
                     .then(response => response.json())
-                    .then(data => products.value = data)
                 const categories = computed(() => {
                     return [...new Set(products.value.map(p => p.category))]
                 })
                 const filteredProducts = computed(() => {
                     let filtered = [...products.value]
                     if (selectedCategory.value) {

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Electronics Store</title>
+    <script src="https://unpkg.com/vue@3.3.4/dist/vue.global.prod.js"></script>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/@tailwindcss/typography/dist/typography.min.css" rel="stylesheet">
 </head>
 <body class="bg-gray-100">
     <div id="app" class="container mx-auto px-4 py-8">
         <div class="mb-6 flex gap-4">
             <select v-model="selectedCategory" class="p-2 border rounded-lg">
                 <option value="">All Categories</option>
+                <option v-for="category in categories" :key="category" :value="category">{{ category }}</option>
             </select>
             <select v-model="sortBy" class="p-2 border rounded-lg">
         <!-- Products Grid -->
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             <div v-for="product in filteredProducts"
+                 :key="product.id"
                  class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
                 <h2 class="text-xl font-semibold mb-2">{{ product.name }}</h2>
                 <div class="text-sm text-gray-600 mb-4">Category: {{ product.category }}</div>
                 <div class="mb-4">
                     <h3 class="font-semibold mb-2">Specifications:</h3>
                     <ul class="text-sm">
+                        <li v-for="(value, key) in product.specs" :key="key" class="mb-1">
                             {{ key }}: {{ value }}
                         </li>
                     </ul>
                 // Fetch products from API
                 fetch('/api/electronics/products')
                     .then(response => response.json())
+                    .then(data => {
+                        products.value = data.products || []
+                    })
+                    .catch(error => console.error('Error fetching products:', error))
                 const categories = computed(() => {
+                    if (!products.value || !products.value.length) return []
                     return [...new Set(products.value.map(p => p.category))]
                 })
                 const filteredProducts = computed(() => {
+                    if (!products.value || !products.value.length) return []
                     let filtered = [...products.value]
                     if (selectedCategory.value) {