Further improve the items

ysbrandB · May 31, 2024 · 88fc8ff · 88fc8ff
1 parent b8d0cbd
commit 88fc8ff
Show file tree

Hide file tree

Showing 10 changed files with 138 additions and 30 deletions.
diff --git a/app/Http/Controllers/ItemController.php b/app/Http/Controllers/ItemController.php
@@ -56,6 +56,7 @@ public function show(String $hashid)
         $id = Hashids::decode($hashid);
         $item = Item::query()->where('id', $id)->firstOrFail();
         $item->hashid = $item->public_id;
+        $item->photo_url = asset('storage/photos/' . $item->photo);
         return Inertia::render('Items/Show', [
             'item' => $item,
         ]);

diff --git a/app/Models/Item.php b/app/Models/Item.php
@@ -12,6 +12,13 @@
  * @property string public_id
  * @property boolean is_actuator
  * @property string photo
+ * @property string pros
+ * @property string cons
+ * @property string hardware_considerations
+ * @property string software_considerations
+ * @property string example_code
+ * @property string wiring_photo
+ * @property string wiring_instructions
  *
  */
 

diff --git a/database/factories/ItemFactory.php b/database/factories/ItemFactory.php
@@ -17,7 +17,17 @@ class ItemFactory extends Factory
     public function definition(): array
     {
         return [
-            //
+            'name' => $this->faker->name,
+            'description' => $this->faker->paragraph,
+            'photo' => '8jx6c14ZVjAPDlkAFBucLNhOQxfYiuIAuUNgOJ3j.png',
+            'is_actuator' => $this->faker->boolean,
+            'pros' => $this->faker->paragraph,
+            'cons' => $this->faker->paragraph,
+            'hardware_considerations' => $this->faker->paragraph,
+            'software_considerations' => $this->faker->paragraph,
+            'example_code' => $this->faker->paragraph,
+            'wiring_photo' => '8jx6c14ZVjAPDlkAFBucLNhOQxfYiuIAuUNgOJ3j.png',
+            'wiring_instructions' => $this->faker->paragraph,
         ];
     }
 }
diff --git a/database/migrations/2024_05_26_204123_create_items_table.php b/database/migrations/2024_05_26_204123_create_items_table.php
@@ -15,7 +15,14 @@ public function up(): void
             $table->id();
             $table->string('name');
             $table->string('photo');
-            $table->text('description')->nullable();
+            $table->string('wiring_instructions');
+            $table->string('wiring_photo');
+            $table->text('description');
+            $table->text('pros');
+            $table->text('cons');
+            $table->text('hardware_considerations');
+            $table->text('software_considerations');
+            $table->text('example_code');
             $table->boolean('is_actuator')->default(false);
             $table->timestamps();
         });

diff --git a/database/migrations/2024_05_29_081709_create_controllers_table.php b/database/migrations/2024_05_29_081709_create_controllers_table.php
@@ -11,7 +11,6 @@ public function up(): void
             $table->id();
             $table->string('name');
             $table->text('description');
-            $table->foreignId('item_id');
             $table->timestamps();
         });
     }

diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
@@ -21,10 +21,8 @@ public function run(): void
             'email' => '[email protected]',
         ]);
 
-        Item::create([
-            'name' => 'Item 1',
-            'description' => 'This is item 1',
-            'is_actuator' => false,
-        ]);
+        Item::factory(10)->create();
+
+
     }
 }
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -151,7 +151,7 @@ const showingNavigationDropdown = ref(false);
             </header>
 
             <!-- Page Content -->
-            <main>
+            <main class="h-full">
                 <slot />
             </main>
         </div>

diff --git a/resources/js/Pages/Items/Index.vue b/resources/js/Pages/Items/Index.vue
@@ -18,23 +18,35 @@ defineProps<{
             </div>
         </template>
 
-        <div class="py-12" v-for="item in items">
-            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-                <div
-                    class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg flex !flex-row justify-between">
-                    <div class="p-6 text-gray-900 dark:text-gray-100">{{ item.name }}</div>
-                    <img :src="item.photo_url" width="100" alt="item photo">
+        <section class="w-full h-full mx-auto border-2 border-red-600">
+            <div class="grid md:grid-cols-12 gap-4">
+                <div class="md:col-span-3 md:pt-0 border-2 border-blue-600">
+                    <details class="border-2 border-dashed border-stone-500 p-4 [&_svg]:open:-rotate-180">
+                        <summary class="flex cursor-pointer list-none items-center gap-4">
+                            <svg class="rotate-0 transform text-blue-700 transition-all duration-300" fill="none"
+                                 height="20" width="20" stroke="currentColor" stroke-linecap="round"
+                                 stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
+                                <polyline points="6 9 12 15 18 9"></polyline>
+                            </svg>
+                            I have keys but no doors.
+                        </summary>
+                        A keyboard.
+                    </details>
+                </div>
+                <div class="md:col-span-9 border-2 border-green-600">
+                    <div class="grid grid-cols-4 gap-4 mt-4">
+                        <NavLink v-for="item in items" class="px-6" :href="route('items.show', item.hashid)">
+                            <div
+                                class="w-full bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg flex !flex-row justify-between">
 
-                    <div class="px-6 flex justify-center">
-                        <NavLink class="px-6" :href="route('items.show', item.hashid)">
-                            Show item
-                        </NavLink>
-                        <NavLink class="px-6" :href="route('items.edit', item.id)">
-                            Edit item
+                                <img :src="item.photo_url" width="100" height="100" alt="item photo">
+                                <div class="px-2">{{ item.name }}</div>
+                            </div>
                         </NavLink>
                     </div>
                 </div>
             </div>
-        </div>
+        </section>
+
     </AuthenticatedLayout>
 </template>
diff --git a/resources/js/Pages/Items/Show.vue b/resources/js/Pages/Items/Show.vue
@@ -9,18 +9,23 @@ const props = defineProps<{
 import {ref} from 'vue'
 import QrcodeVue, {Level, RenderAs} from 'qrcode.vue'
 import {marked} from "marked";
+import OpeningCard from "@/Pages/Items/components/OpeningCard.vue";
 
 const value = ref(route('items.show', props.item.hashid))
 const level = ref<Level>('M')
 const renderAs = ref<RenderAs>('svg')
-const markdownToHtml = marked(props.item.description)
+const description = marked(props.item.description)
 </script>
 
 <template>
     <AuthenticatedLayout>
         <template #header>
-            <div class="flex !flex-row justify-between">
-                <h2 class="font-semibold text-2xl text-gray-800 dark:text-gray-200 leading-tight">{{ item.name }}</h2>
+            <div class="flex !flex-row justify-between items-center">
+
+                <div>
+                    <h2 class="font-semibold text-2xl font-bold text-gray-800 dark:text-gray-200 leading-tight">{{ item.name }}</h2>
+                    <div class="text-gray-600">{{ item.description }}</div>
+                </div>
                 <div class="flex flex-row">
                     <qrcode-vue :value="value" :level="level" :render-as="renderAs"/>
                     <NavLink class="px-6" :href="route('items.edit', item)">
@@ -29,13 +34,55 @@ const markdownToHtml = marked(props.item.description)
                 </div>
             </div>
         </template>
+        <section class="w-full h-full mx-auto border-2 border-red-600">
+            <div class="grid md:grid-cols-12 gap-4">
+                <div class="md:col-span-9">
+
+                    <OpeningCard title="Wiring">
+                        <template #content>
+                            {{ item.wiring_instructions }}
+                        </template>
+                    </OpeningCard>
+
+                    <OpeningCard title="Pros">
+                        <template #content>
+                            {{ item.pros }}
+                        </template>
+                    </OpeningCard>
 
-        <div class="py-12">
-            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-                <div class="p-8 bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
-                    <div v-html="markdownToHtml"></div>
+                    <OpeningCard title="Cons">
+                        <template #content>
+                            {{ item.cons }}
+                        </template>
+                    </OpeningCard>
+
+                    <OpeningCard title="Hardware considerations">
+                        <template #content>
+                            {{ item.cons }}
+                        </template>
+                    </OpeningCard>
+
+                    <OpeningCard title="Software considerations">
+                        <template #content>
+                            {{ item.cons }}
+                        </template>
+                    </OpeningCard>
+
+                    <OpeningCard title="Example code">
+                        <template #content>
+                            {{ item.example_code }}
+                        </template>
+                    </OpeningCard>
+                </div>
+                <div class="md:col-span-3 md:pt-0 border-2 border-blue-600">
+                    <div class="sticky top-8 max-w-7xl mx-auto sm:px-6 lg:px-4">
+                        <div class="p-8 bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+                            <div class="font-bold text-2xl">{{ item.name }}</div>
+                            <img :src="item.photo_url" class="rounded-lg" alt="item photo">
+                        </div>
+                    </div>
                 </div>
             </div>
-        </div>
+        </section>
     </AuthenticatedLayout>
 </template>
diff --git a/resources/js/Pages/Items/components/OpeningCard.vue b/resources/js/Pages/Items/components/OpeningCard.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import {defineProps} from 'vue';
+
+const props = defineProps<{
+    title: string;
+    description: string;
+}>();
+</script>
+<template>
+    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 pb-4">
+        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+            <details class="p-4 [&_svg]:open:-rotate-180">
+                <summary class="flex cursor-pointer list-none items-center gap-4">
+                    <svg class="rotate-0 transform text-blue-700 transition-all duration-300" fill="none"
+                         height="20" width="20" stroke="currentColor" stroke-linecap="round"
+                         stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
+                        <polyline points="6 9 12 15 18 9"></polyline>
+                    </svg>
+                    <div class="font-bold text-2xl mb-2">{{ props.title }}</div>
+                </summary>
+                <div class="px-8 text-gray-600">
+                    <slot name="content"/>
+                </div>
+            </details>
+        </div>
+    </div>
+</template>