From 26793ebc12ee9f0d60dfa6404318442c1599000f Mon Sep 17 00:00:00 2001
From: "Burgstede, W.Y. (Ysbrand, Student B-CREA)"
 <w.y.burgstede@student.utwente.nl>
Date: Mon, 10 Jun 2024 23:12:13 +0200
Subject: [PATCH] Add edges, finish the update and creation of the attributes
 and types and add some responsiveness

---
 app/Http/Controllers/AttributeController.php  |  55 +++
 .../Controllers/AttributeTypeController.php   |  14 +-
 app/Http/Controllers/ItemController.php       |  64 +++-
 app/Models/Attribute.php                      |   4 +-
 app/Models/Edge.php                           |  33 ++
 app/Models/Item.php                           |   6 +
 database/factories/EdgeFactory.php            |  24 ++
 .../2024_06_09_223050_create_edges_table.php  |  23 ++
 database/seeders/DatabaseSeeder.php           |  48 ++-
 package-lock.json                             |  19 +
 package.json                                  |   2 +
 resources/js/Components/Card.vue              |  13 +
 .../js/CustomComponents/AttributeFilter.vue   |  82 +++++
 resources/js/CustomComponents/OpeningCard.vue |   5 +-
 .../js/CustomComponents/OpeningComponent.vue  |  15 +-
 resources/js/Layouts/AuthenticatedLayout.vue  |  24 +-
 resources/js/Pages/AttributeTypes/Edit.vue    |  96 +++++
 resources/js/Pages/AttributeTypes/Index.vue   |  33 ++
 resources/js/Pages/Attributes/Edit.vue        |  54 ++-
 resources/js/Pages/Attributes/Index.vue       |  36 ++
 resources/js/Pages/Dashboard.vue              |  11 +
 resources/js/Pages/Items/Edit.vue             | 342 +++++++++++-------
 resources/js/Pages/Items/Index.vue            | 116 ++----
 resources/js/Pages/Items/Show.vue             |  18 +-
 resources/js/app.ts                           |   1 -
 resources/js/types/index.d.ts                 |  32 ++
 routes/web.php                                |   2 +
 27 files changed, 861 insertions(+), 311 deletions(-)
 create mode 100644 app/Http/Controllers/AttributeController.php
 create mode 100644 app/Models/Edge.php
 create mode 100644 database/factories/EdgeFactory.php
 create mode 100644 database/migrations/2024_06_09_223050_create_edges_table.php
 create mode 100644 resources/js/Components/Card.vue
 create mode 100644 resources/js/CustomComponents/AttributeFilter.vue
 create mode 100644 resources/js/Pages/AttributeTypes/Edit.vue
 create mode 100644 resources/js/Pages/AttributeTypes/Index.vue
 create mode 100644 resources/js/Pages/Attributes/Index.vue

diff --git a/app/Http/Controllers/AttributeController.php b/app/Http/Controllers/AttributeController.php
new file mode 100644
index 0000000..7941bb3
--- /dev/null
+++ b/app/Http/Controllers/AttributeController.php
@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Attribute;
+use App\Models\AttributeType;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+class AttributeController extends Controller
+{
+    public function index()
+    {
+        return Inertia::render('Attributes/Index', [
+            'attributeTypes' => AttributeType::with('attributes')->get(),
+        ]);
+    }
+
+    public function create()
+    {
+        return Inertia::render('Attributes/Edit', [
+            'attributeTypes' => AttributeType::all(),
+        ]);
+    }
+
+    public function store(Request $request)
+    {
+        $id = Attribute::create($request->all())->id;
+        return to_route('attributes.edit',$id);
+    }
+
+    public function show($id)
+    {
+    }
+
+    public function edit($id)
+    {
+        $attribute = Attribute::findOrFail($id);
+        return Inertia::render('Attributes/Edit', [
+            'attributeTypes' => AttributeType::all(),
+            'attribute' => $attribute,
+        ]);
+    }
+
+    public function update(Request $request, $id)
+    {
+        $attribute = Attribute::findOrFail($id);
+        $attribute->update($request->all());
+        return to_route('attributes.index');
+    }
+
+    public function destroy($id)
+    {
+    }
+}
diff --git a/app/Http/Controllers/AttributeTypeController.php b/app/Http/Controllers/AttributeTypeController.php
index f409291..6caee81 100644
--- a/app/Http/Controllers/AttributeTypeController.php
+++ b/app/Http/Controllers/AttributeTypeController.php
@@ -11,18 +11,20 @@ class AttributeTypeController extends Controller
 {
     public function index()
     {
-        return Inertia::render('AttributeType/Index', [
-            'attributeTypes' => AttributeType::all(),
+        return Inertia::render('AttributeTypes/Index', [
+            'attributeTypes' => AttributeType::with('attributes')->get(),
         ]);
     }
 
     public function create()
     {
-        return Inertia::render('Attributes/Edit', ['colors' => AttributeType::$colors]);
+        return Inertia::render('AttributeTypes/Edit', ['colors' => AttributeType::$colors]);
     }
 
     public function store(Request $request)
     {
+        $id = AttributeType::create($request->all())->id;
+        return to_route('attribute_types.edit',$id);
     }
 
     public function show($id)
@@ -31,10 +33,16 @@ public function show($id)
 
     public function edit($id)
     {
+        $attributeType = AttributeType::findOrFail($id);
+        return Inertia::render('AttributeTypes/Edit',
+            ['colors' => AttributeType::$colors, 'attributeType' => $attributeType]);
     }
 
     public function update(Request $request, $id)
     {
+        $attributeType = AttributeType::findOrFail($id);
+        $attributeType->update($request->all());
+        return to_route('attribute_types.index');
     }
 
     public function destroy($id)
diff --git a/app/Http/Controllers/ItemController.php b/app/Http/Controllers/ItemController.php
index cbcd401..49fe283 100644
--- a/app/Http/Controllers/ItemController.php
+++ b/app/Http/Controllers/ItemController.php
@@ -3,6 +3,7 @@
 namespace App\Http\Controllers;
 
 use App\Http\Requests\StoreItemRequest;
+use App\Models\Attribute;
 use App\Models\AttributeType;
 use App\Models\Item;
 use Illuminate\Http\Request;
@@ -39,7 +40,10 @@ public function index(Request $request)
      */
     public function create()
     {
-        return Inertia::render('Items/Edit', []);
+        return Inertia::render('Items/Edit', [
+            'items' => Item::query()->get(),
+            'attributeTypes' => AttributeType::with('attributes')->get(),
+        ]);
     }
 
     /**
@@ -51,9 +55,12 @@ public function store(StoreItemRequest $request)
         $photo?->storeAs('photos/' . $photo->hashName(), ['disk' => 'public']);
         $wiringPhoto = $request->file('wiring_photo');
         $wiringPhoto?->storeAs('photos/' . $photo->hashName(), ['disk' => 'public']);
-        $item = Item::create($request->all());
+
+        $item = Item::create($request->except('attributes', 'photo', 'wiring_photo'));
+        $item->attributes()->sync(explode(',', $request->input('attributes')));
         $item->photo = $photo?->hashName();
         $item->wiring_photo = $wiringPhoto?->hashName();
+        $item->save();
         return redirect(route('items.index'));
     }
 
@@ -75,7 +82,18 @@ public function show(string $publicId)
     public function edit(int $id)
     {
         return Inertia::render('Items/Edit', [
-            'item' => Item::findorFail($id),
+            'item' => Item::with('attributes')->findorFail($id),
+            'items' => Item::query()->select('id', 'title')->get(),
+            'attributeTypes' => AttributeType::with('attributes')->get(),
+            'myAttributes' => AttributeType::whereHas('attributes', function ($attributes) use ($id) {
+                $attributes->whereHas('items', function ($query) use ($id) {
+                    $query->where('items.id', $id);
+                });
+            })->with(['attributes' => function ($attributes) use ($id) {
+                $attributes->whereHas('items', function ($query) use ($id) {
+                    $query->where('items.id', $id);
+                });
+            }])->get(),
         ]);
     }
 
@@ -85,23 +103,31 @@ public function edit(int $id)
     public function update(StoreItemRequest $request, int $id)
     {
         $item = Item::findOrFail($id);
-        $photo = $request->file('photo');
-        $photo->storeAs('photos/' . $photo->hashName(), ['disk' => 'public']);
 
-        $photo = $request->file('wiring_photo');
-        $photo->storeAs('photos/' . $photo->hashName(), ['disk' => 'public']);
+        $photo = $request->file('photo');
+        if($photo){
+            $photo->storeAs('photos/' . $photo->hashName(), ['disk' => 'public']);
 
-        if ($item->photo) {
-            //delete the old photo
-            Storage::disk('public')->delete('photos/' . $item->photo);
+            if ($item->photo) {
+                //delete the old photo
+                Storage::disk('public')->delete('photos/' . $item->photo);
+            }
+            $item->photo = $photo->hashName();
         }
-        if ($item->wiring_photo) {
-            //delete the old photo
-            Storage::disk('public')->delete('photos/' . $item->wiring_photo);
+
+        $wiring_photo = $request->file('wiring_photo');
+        if($wiring_photo){
+            $wiring_photo->storeAs('photos/' . $wiring_photo->hashName(), ['disk' => 'public']);
+
+            if ($item->wiring_photo) {
+                //delete the old photo
+                Storage::disk('public')->delete('photos/' . $item->wiring_photo);
+            }
+            $item->wiring_photo = $wiring_photo->hashName();
         }
-        $item->update($request->all());
-        $item->photo = $photo->hashName();
-        $item->wiring_photo = $photo->hashName();
+
+        $item->update($request->except('attributes', 'photo', 'wiring_photo'));
+        $item->attributes()->sync(explode(',', $request->input('attributes')));
         $item->save();
         return redirect()->back();
     }
@@ -115,6 +141,12 @@ public function destroy(Item $item)
             //delete the old photo
             Storage::disk('public')->delete('photos/' . $item->photo);
         }
+        if ($item->wiring_photo) {
+            //delete the old photo
+            Storage::disk('public')->delete('photos/' . $item->wiring_photo);
+        }
+        $item->attributes()->detach();
+        $item->edges()->delete();
         $item->delete();
     }
 }
diff --git a/app/Models/Attribute.php b/app/Models/Attribute.php
index 6dc8315..619b960 100644
--- a/app/Models/Attribute.php
+++ b/app/Models/Attribute.php
@@ -8,12 +8,14 @@
 use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 
 /**
- * @property string name
+ * @property string title
  * @property string description
  */
 class Attribute extends Model
 {
     use HasFactory;
+
+    protected $fillable = ['title', 'description', 'attribute_type_id'];
     public function items(): BelongsToMany
     {
         return $this->belongsToMany(Item::class);
diff --git a/app/Models/Edge.php b/app/Models/Edge.php
new file mode 100644
index 0000000..1340ab0
--- /dev/null
+++ b/app/Models/Edge.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class Edge extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'from_item_id',
+        'to_item_id',
+        'belongsto_item_id'
+    ];
+
+    public function fromItem(): BelongsTo
+    {
+        return $this->belongsTo(Attribute::class, 'from_item_id');
+    }
+
+    public function toItem(): BelongsTo
+    {
+        return $this->belongsTo(Attribute::class, 'to_item_id');
+    }
+
+    public function belongsToItem(): BelongsTo
+    {
+        return $this->belongsTo(Attribute::class, 'belongsto_item_id');
+    }
+}
diff --git a/app/Models/Item.php b/app/Models/Item.php
index 5fa75b0..6569728 100644
--- a/app/Models/Item.php
+++ b/app/Models/Item.php
@@ -3,6 +3,7 @@
 namespace App\Models;
 
 use Illuminate\Database\Eloquent\Relations\BelongsToMany;
+use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Support\HigherOrderCollectionProxy;
 use Vinkla\Hashids\Facades\Hashids;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
@@ -51,6 +52,11 @@ public function attributes(): BelongsToMany
         return $this->belongsToMany(Attribute::class);
     }
 
+    public function edges(): HasMany
+    {
+        return $this->hasMany(Edge::class);
+    }
+
     public function getPhotoUrlAttribute(): string
     {
         return asset('storage/photos/' . $this->photo);
diff --git a/database/factories/EdgeFactory.php b/database/factories/EdgeFactory.php
new file mode 100644
index 0000000..057af88
--- /dev/null
+++ b/database/factories/EdgeFactory.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Models\Attribute;
+use App\Models\Edge;
+use Illuminate\Database\Eloquent\Factories\Factory;
+use Illuminate\Support\Carbon;
+
+class EdgeFactory extends Factory
+{
+    protected $model = Edge::class;
+
+    public function definition(): array
+    {
+        return [
+            'created_at' => Carbon::now(),
+            'updated_at' => Carbon::now(),
+
+            'from_attribute_id' => Attribute::factory(),
+            'to_attribute_id' => Attribute::factory(),
+        ];
+    }
+}
diff --git a/database/migrations/2024_06_09_223050_create_edges_table.php b/database/migrations/2024_06_09_223050_create_edges_table.php
new file mode 100644
index 0000000..e8aff39
--- /dev/null
+++ b/database/migrations/2024_06_09_223050_create_edges_table.php
@@ -0,0 +1,23 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration {
+    public function up(): void
+    {
+        Schema::create('edges', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('from_item_id');
+            $table->foreignId('to_item_id');
+            $table->foreignId('belongsto_item_id');
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('edges');
+    }
+};
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index 18b97c2..f4d6218 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -4,6 +4,7 @@
 
 use App\Models\Attribute;
 use App\Models\AttributeType;
+use App\Models\Edge;
 use App\Models\Item;
 use App\Models\Processor;
 use App\Models\User;
@@ -31,25 +32,48 @@ public function run(): void
             'email' => 'test@example.com',
         ]);
 
+        $processors = AttributeType::create(
+            [
+                'title' => 'Controllers',
+                'description' => 'All the controllers you can use to interact with the sensors and actuators',
+                'color' => 'blue',
+            ]
+        );
+
+        Attribute::create(
+            [
+                'attribute_type_id' => $processors->id,
+                'title' => 'Arduino',
+                'description' => 'A microcontroller that can be used to interact with sensors and actuators',
+            ]
+        );
+
+        Attribute::create(
+            [
+                'attribute_type_id' => $processors->id,
+                'title' => 'ESP8266',
+                'description' => 'The ESP8266 is a low-cost Wi-Fi microchip with full TCP/IP stack and microcontroller capability produced by Espressif Systems',
+            ]
+        );
+
         AttributeType::factory(10)->has(
             Attribute::factory()->count(5)
         )->create();
 
-        Item::factory(10)->create();
-        foreach (Item::all() as $item) {
+        $items = Item::factory(10)->create();
+        $attributes = Attribute::all();
+        foreach ($items as $item) {
             $item->attributes()->attach(
-                Attribute::all()->random(3)
+                $attributes->random(3)
             );
         }
 
-
-        Processor::create([
-            'name' => 'Laptop',
-            'description' => 'A portable computer',
-        ]);
-
-
-
-
+        for($i = 0; $i < sizeof($items) - 1; $i++) {
+            Edge::create([
+                'from_item_id' => $items->get($i)->id,
+                'to_item_id' => $items->get($i+1)->id,
+                'belongsto_item_id' => $items->first()->id,
+            ]);
+        }
     }
 }
diff --git a/package-lock.json b/package-lock.json
index 41d0eb2..e0af84e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,8 @@
     "packages": {
         "": {
             "dependencies": {
+                "@highlightjs/vue-plugin": "^2.1.0",
+                "highlight.js": "^11.9.0",
                 "marked": "^12.0.2",
                 "qrcode.vue": "^3.4.1",
                 "v-network-graph": "^0.9.15"
@@ -520,6 +522,15 @@
                 "node": ">=12"
             }
         },
+        "node_modules/@highlightjs/vue-plugin": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/@highlightjs/vue-plugin/-/vue-plugin-2.1.0.tgz",
+            "integrity": "sha512-E+bmk4ncca+hBEYRV2a+1aIzIV0VSY/e5ArjpuSN9IO7wBJrzUE2u4ESCwrbQD7sAy+jWQjkV5qCCWgc+pu7CQ==",
+            "peerDependencies": {
+                "highlight.js": "^11.0.1",
+                "vue": "^3"
+            }
+        },
         "node_modules/@inertiajs/core": {
             "version": "1.0.16",
             "resolved": "https://registry.npmjs.org/@inertiajs/core/-/core-1.0.16.tgz",
@@ -1873,6 +1884,14 @@
                 "he": "bin/he"
             }
         },
+        "node_modules/highlight.js": {
+            "version": "11.9.0",
+            "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
+            "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==",
+            "engines": {
+                "node": ">=12.0.0"
+            }
+        },
         "node_modules/is-binary-path": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
diff --git a/package.json b/package.json
index 149d196..ec5a0a2 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,8 @@
         "vue-tsc": "^1.8.27"
     },
     "dependencies": {
+        "@highlightjs/vue-plugin": "^2.1.0",
+        "highlight.js": "^11.9.0",
         "marked": "^12.0.2",
         "qrcode.vue": "^3.4.1",
         "v-network-graph": "^0.9.15"
diff --git a/resources/js/Components/Card.vue b/resources/js/Components/Card.vue
new file mode 100644
index 0000000..271182a
--- /dev/null
+++ b/resources/js/Components/Card.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const props = defineProps<{
+    color?: string;
+}>();
+</script>
+<template>
+    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 pb-4 h-min w-full mx-2">
+        <div :class="color?`bg-${color}-100 dark:bg-${color}-900`:'bg-white dark:bg-gray-80'"
+             class="overflow-hidden shadow-sm rounded-lg h-full flex flex-col p-4">
+            <slot></slot>
+            </div>
+        </div>
+</template>
diff --git a/resources/js/CustomComponents/AttributeFilter.vue b/resources/js/CustomComponents/AttributeFilter.vue
new file mode 100644
index 0000000..08a33c4
--- /dev/null
+++ b/resources/js/CustomComponents/AttributeFilter.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+
+import OpeningComponent from "@/CustomComponents/OpeningComponent.vue";
+import Pill from "@/CustomComponents/Pill.vue";
+import {Attribute, AttributeType} from "@/types";
+import {nextTick, ref} from "vue";
+
+const props = defineProps<{
+    attributeTypes: AttributeType[],
+    checkedAttributes: any,
+    title: string
+}>();
+
+const emit = defineEmits(['update:checkedAttributes']);
+
+const checkedAttributes = ref(props.checkedAttributes);
+
+const check = (attributeType: { id: number, color: string }, attribute: {
+    id: number
+}, checked: boolean) => nextTick(() => {
+    if (checked) {
+        if (!Object.hasOwn(checkedAttributes.value, attributeType.id)) {
+            checkedAttributes.value[attributeType.id] = {
+                color: attributeType.color,
+                attributes: []
+            };
+        }
+        checkedAttributes.value[attributeType.id].attributes.push(attribute);
+    } else {
+        checkedAttributes.value[attributeType.id].attributes = checkedAttributes.value[attributeType.id].attributes.filter((oldAttribute: Attribute) => oldAttribute.id !== attribute.id);
+    }
+    //filter out the attribute type if there are no attributes
+    //@ts-ignore
+    checkedAttributes.value = Object.fromEntries(Object.entries(checkedAttributes.value).filter(([key, value]) => value.attributes.length > 0));
+    emit('update:checkedAttributes', checkedAttributes.value);
+});
+
+function capitalizeFirstLetter(string: string) {
+    return string[0].toUpperCase() + string.slice(1);
+}
+</script>
+<template>
+        <div class="w-full text-2xl text-center font-semibold mt-4">{{ capitalizeFirstLetter(title) }}</div>
+        <div
+            class="mx-2 mt-1 flex flex-wrap text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
+            <template v-for="(attributeType, idx) in checkedAttributes">
+                <pill class="cursor-pointer" @click="check({id:idx, color:attributeType.color}, attribute, false)"
+                      v-for="attribute in attributeType.attributes" :key="attribute.id"
+                      :color="attributeType.color">
+                    {{ attribute.title }} <span class="ms-2 text-red-600">x</span>
+                </pill>
+            </template>
+            <div v-if="Object.entries(checkedAttributes).length<=0" class="w-full p-2 text-center text-gray-500">
+                No {{ title }} applied
+            </div>
+        </div>
+        <OpeningComponent v-for="attributeType in attributeTypes" :title="attributeType.title">
+            <template #title>
+                <div class="font-bold text-sm md:text-lg p-1 md:p3 rounded rounded-lg"
+                     :class="`bg-${attributeType.color}-100`">{{ attributeType.title }}
+                </div>
+            </template>
+            <template #content>
+                <ul class="w-full mt-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
+                    <li v-for="attribute in attributeType.attributes" :key="attribute.id"
+                        class="w-full border-b border-gray-200 rounded-t-lg dark:border-gray-600">
+                        <div class="flex items-center ps-3">
+                            <input type="checkbox"
+                                   :checked="Object.hasOwn(checkedAttributes, attributeType.id) && checkedAttributes[attributeType.id].attributes.some((checkedAttribute: Attribute) => checkedAttribute.id === attribute.id)"
+                                   @change="check(attributeType, attribute, ($event as HTMLInputElement|any).target.checked)"
+                                   :id="attribute.id.toString()" :value="attribute.id"
+                                   class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
+                            <label :for="attribute.id.toString()"
+                                   class="w-full py-2 md:py-3 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">{{
+                                    attribute.title
+                                }}</label>
+                        </div>
+                    </li>
+                </ul>
+            </template>
+        </OpeningComponent>
+</template>
diff --git a/resources/js/CustomComponents/OpeningCard.vue b/resources/js/CustomComponents/OpeningCard.vue
index 607ee29..1165383 100644
--- a/resources/js/CustomComponents/OpeningCard.vue
+++ b/resources/js/CustomComponents/OpeningCard.vue
@@ -4,12 +4,13 @@ import OpeningComponent from "@/CustomComponents/OpeningComponent.vue";
 
 const props = defineProps<{
     title: string;
+    open?: boolean;
 }>();
 </script>
 <template>
     <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 pb-4 h-min">
-        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg h-full flex flex-col">
-           <OpeningComponent :title="title">
+        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm rounded-lg h-full flex flex-col">
+           <OpeningComponent :title="title" :open="props.open">
                 <template #content>
                     <div class="px-4 h-full">
                    <slot name="content"/>
diff --git a/resources/js/CustomComponents/OpeningComponent.vue b/resources/js/CustomComponents/OpeningComponent.vue
index 5c48c60..59032dc 100644
--- a/resources/js/CustomComponents/OpeningComponent.vue
+++ b/resources/js/CustomComponents/OpeningComponent.vue
@@ -1,18 +1,27 @@
 <script setup lang="ts">
+import {onMounted, ref} from "vue";
+
 const props = defineProps<{
     title: string;
+    open?: boolean;
 }>();
+let details = ref<HTMLElement | null>(null);
+onMounted(() => {
+    if (props.open) {
+        details.value?.setAttribute('open', 'true');
+    }
+});
 </script>
 <template>
-    <details class="p-2 m-2 block [&_svg]:open:-rotate-180 border border-gray-200 rounded-lg flex-1">
-        <summary class="flex cursor-pointer list-none items-center gap-4 bg-white dark:bg-gray-800 dark:text-gray-100">
+    <details class="p-2 m-2 block [&_svg]:open:-rotate-180 border border-gray-200 rounded-lg flex-1" ref="details">
+        <summary class="flex cursor-pointer list-none items-center gap-4 dark:bg-gray-800 dark:text-gray-100">
             <svg class="rotate-0 transform text-blue-700 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>
             <slot name="title">
-                <div class="font-bold text-2xl">{{title}}</div>
+                <div class="font-bold text-lg md:text-2xl">{{ title }}</div>
             </slot>
         </summary>
         <div class="text-gray-600 dark:text-gray-400">
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index b218aaa..0454634 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -8,6 +8,12 @@ import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
 import { Link } from '@inertiajs/vue3';
 
 const showingNavigationDropdown = ref(false);
+const links = [
+    { href: route('dashboard'), active: route().current('dashboard'), text: 'Dashboard' },
+    { href: route('items.index'), active: route().current('items.index'), text: 'Items' },
+    { href: route('attribute_types.index'), active: route().current('attribute_types.index'), text: 'Attribute Types' },
+    { href: route('attributes.index'), active: route().current('attributes.index'), text: 'Attributes' },
+];
 </script>
 
 <template>
@@ -28,18 +34,12 @@ const showingNavigationDropdown = ref(false);
                             </div>
 
                             <!-- Navigation Links -->
-                            <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
-                                <NavLink :href="route('dashboard')" :active="route().current('dashboard')">
-                                    Dashboard
+                            <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex" v-for="link in links">
+                                <NavLink :href="link.href" :active="link.active">
+                                    {{ link.text }}
                                 </NavLink>
                             </div>
 
-                            <!-- Items -->
-                            <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
-                                <NavLink :href="route('items.index')" :active="route().current('items.index')">
-                                    Items
-                                </NavLink>
-                            </div>
                         </div>
 
                         <div class="hidden sm:flex sm:items-center sm:ms-6">
@@ -118,9 +118,9 @@ const showingNavigationDropdown = ref(false);
                     :class="{ block: showingNavigationDropdown, hidden: !showingNavigationDropdown }"
                     class="sm:hidden"
                 >
-                    <div class="pt-2 pb-3 space-y-1">
-                        <ResponsiveNavLink :href="route('dashboard')" :active="route().current('dashboard')">
-                            Dashboard
+                    <div class="pt-2 pb-3 space-y-1" v-for="link in links">
+                        <ResponsiveNavLink :href="link.href" :active="link.active">
+                            {{ link.text }}
                         </ResponsiveNavLink>
                     </div>
 
diff --git a/resources/js/Pages/AttributeTypes/Edit.vue b/resources/js/Pages/AttributeTypes/Edit.vue
new file mode 100644
index 0000000..43e8568
--- /dev/null
+++ b/resources/js/Pages/AttributeTypes/Edit.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import GuestLayout from '@/Layouts/GuestLayout.vue';
+import InputError from '@/Components/InputError.vue';
+import InputLabel from '@/Components/InputLabel.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import TextInput from '@/Components/TextInput.vue';
+import {Head, router, useForm} from '@inertiajs/vue3';
+import {marked} from 'marked';
+import {computed, ref} from "vue";
+import axios from "axios";
+import MarkDownTextArea from "@/CustomComponents/MarkDownTextArea.vue";
+import {AttributeType} from "@/types";
+
+const props = defineProps<{
+    attributeType?: AttributeType
+    colors: string[];
+}>();
+
+const form = useForm({
+    title: props.attributeType?.title ?? '',
+    description: props.attributeType?.description ?? '',
+    color: props.attributeType?.color ?? '',
+});
+
+function capitalizeFirstLetter(string:string) {
+    return string[0].toUpperCase() + string.slice(1);
+}
+const submit = () => {
+    if (props.attributeType) {
+        router.put(route('attribute_types.update', props.attributeType.id), form.data());
+    } else {
+        router.post(route('attribute_types.store'), form.data());
+    }
+};
+</script>
+
+<template>
+    <GuestLayout>
+        <Head title="Update AttributeType"/>
+
+        <form @submit.prevent="submit">
+            <div>
+                <InputLabel for="title" value="Title"/>
+
+                <TextInput
+                    id="title"
+                    type="text"
+                    class="mt-1 block w-full"
+                    initial-value="form.title"
+                    v-model="form.title"
+                    required
+                    autofocus
+                />
+
+                <InputError class="mt-2" :message="form.errors.title"/>
+            </div>
+
+
+            <div class="w-96 mt-4">
+                <div class="relative w-full min-w-[200px] mt-6">
+                    <textarea
+                        required
+                        v-model="form.description"
+                        class="peer h-full min-h-[100px] w-full resize-none rounded-[7px] border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-2.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-gray-900 focus:border-t-transparent focus:outline-0 disabled:resize-none disabled:border-0 disabled:bg-blue-gray-50"
+                        rows="5"></textarea>
+                    <InputError class="mt-2" :message="form.errors.description"/>
+                    <label
+                        class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-gray-900 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-gray-900 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
+                        Description
+                    </label>
+                </div>
+            </div>
+
+            <div class="mt-4">
+                <InputLabel for="color" value="Color"/>
+                <select
+                    id="color"
+                    v-model="form.color"
+                    :class="`bg-${props.colors.find(color=>color===form.color)}-100`"
+                    class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+                >
+                    <option :class="`bg-${color}-100`" v-for="color in props.colors" :value="color" :key="color">
+                        {{ color }} </option>
+                </select>
+                <InputError class="mt-2" :message="form.errors.color"/>
+            </div>
+
+
+            <div class="flex items-center justify-end mt-4">
+                <PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                    Update item
+                </PrimaryButton>
+            </div>
+        </form>
+    </GuestLayout>
+</template>
diff --git a/resources/js/Pages/AttributeTypes/Index.vue b/resources/js/Pages/AttributeTypes/Index.vue
new file mode 100644
index 0000000..76740f3
--- /dev/null
+++ b/resources/js/Pages/AttributeTypes/Index.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import {AttributeType} from "@/types";
+import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
+import NavLink from "@/Components/NavLink.vue";
+import OpeningCard from "@/CustomComponents/OpeningCard.vue";
+
+const props = defineProps<{
+    attributeTypes: AttributeType[];
+}>();
+</script>
+
+<template>
+    <AuthenticatedLayout>
+        <template #header>
+            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">Attribute Types</h2>
+        </template>
+        <div class="grid sm:grid-cols-1 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4">
+                    <NavLink v-for="attributeType in attributeTypes" class="px-6"
+                             :href="route('attribute_types.edit', attributeType.id)">
+                        <div
+                            :class="`bg-${attributeType.color}-100 dark:bg-${attributeType.color}-900`"
+                            class="w-full dark:bg-gray-800 overflow-hidden shadow-sm rounded-lg flex !flex-row justify-between">
+                            <div class="px-4 py-2">
+                                <div class="font-semibold text-lg text-gray-800 dark:text-gray-200">{{
+                                        attributeType.title
+                                    }}
+                                </div>
+                            </div>
+                        </div>
+                    </NavLink>
+        </div>
+    </AuthenticatedLayout>
+</template>
diff --git a/resources/js/Pages/Attributes/Edit.vue b/resources/js/Pages/Attributes/Edit.vue
index 9dae03b..15c3ff8 100644
--- a/resources/js/Pages/Attributes/Edit.vue
+++ b/resources/js/Pages/Attributes/Edit.vue
@@ -5,40 +5,35 @@ import InputLabel from '@/Components/InputLabel.vue';
 import PrimaryButton from '@/Components/PrimaryButton.vue';
 import TextInput from '@/Components/TextInput.vue';
 import {Head, router, useForm} from '@inertiajs/vue3';
-import {marked} from 'marked';
-import {computed, ref} from "vue";
-import axios from "axios";
-import MarkDownTextArea from "@/CustomComponents/MarkDownTextArea.vue";
+import {Attribute, AttributeType} from "@/types";
 
 const props = defineProps<{
-    attributeType?: {
-        id: number;
-        title: string;
-        description: string;
-        color: string;
-    };
-    colors: string[];
+    attributeTypes: AttributeType[];
+    attribute?: Attribute;
 }>();
 
 const form = useForm({
-    title: props.attributeType?.title ?? '',
-    description: props.attributeType?.description ?? '',
-    color: props.attributeType?.color ?? '',
-    errors: {},
-    processing: false,
+    title: props.attribute?.title ?? '',
+    description: props.attribute?.description ?? '',
+    attribute_type_id: props.attribute?.attribute_type_id ?? '',
 });
 
-function capitalizeFirstLetter(string:string) {
+function capitalizeFirstLetter(string: string) {
     return string[0].toUpperCase() + string.slice(1);
 }
+
 const submit = () => {
-    router.post(route('attributes.store'), form.data());
+    if (props.attribute) {
+        router.put(route('attributes.update', props.attribute.id), form.data());
+    } else {
+        router.post(route('attributes.store'), form.data());
+    }
 };
 </script>
 
 <template>
     <GuestLayout>
-        <Head title="Update AttributeType"/>
+        <Head title="Update Attribute"/>
 
         <form @submit.prevent="submit">
             <div>
@@ -48,7 +43,6 @@ const submit = () => {
                     id="title"
                     type="text"
                     class="mt-1 block w-full"
-                    initial-value="form.title"
                     v-model="form.title"
                     required
                     autofocus
@@ -72,24 +66,24 @@ const submit = () => {
                     </label>
                 </div>
             </div>
-
-            <div class="mt-4">
-                <InputLabel for="color" value="Color"/>
+            <div class="w-96 mt-4">
+                <input-label for="attribute_type_id" value="Attribute Type"/>
                 <select
-                    id="color"
-                    v-model="form.color"
+                    v-model="form.attribute_type_id"
+                    :class="`bg-${props.attributeTypes.find(attributeType=>attributeType.id===form.attribute_type_id)?.color}-100`"
                     class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
                 >
-                    <option :class="`bg-${color}-100`" v-for="color in props.colors" :value="color" :key="color">
-                        {{ color }} </option>
+                    <option :class="`bg-${attributeType.color}-100`" v-for="attributeType in props.attributeTypes"
+                            :value="attributeType.id"
+                            :key="attributeType.id">
+                        {{ attributeType.title }}
+                    </option>
                 </select>
-                <InputError class="mt-2" :message="form.errors.color"/>
             </div>
 
-
             <div class="flex items-center justify-end mt-4">
                 <PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
-                    Update item
+                    Update Attribute
                 </PrimaryButton>
             </div>
         </form>
diff --git a/resources/js/Pages/Attributes/Index.vue b/resources/js/Pages/Attributes/Index.vue
new file mode 100644
index 0000000..8074811
--- /dev/null
+++ b/resources/js/Pages/Attributes/Index.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import {AttributeType} from "@/types";
+import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
+import NavLink from "@/Components/NavLink.vue";
+import OpeningCard from "@/CustomComponents/OpeningCard.vue";
+import Card from "@/Components/Card.vue";
+
+const props = defineProps<{
+    attributeTypes: AttributeType[];
+}>();
+</script>
+
+<template>
+    <AuthenticatedLayout>
+        <template #header>
+            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">Attributes</h2>
+        </template>
+        <div class="grid sm:grid-cols-1 md:grid-cols-4 lg:grid-cols-6 mt-4">
+           <card class="w-full" v-for="attributeType in props.attributeTypes" :color="attributeType.color">
+               <NavLink v-for="attribute in attributeType.attributes" class="w-full"
+                        :href="route('attributes.edit', attribute.id)">
+                   <div
+                       class="w-full bg-white dark:bg-gray-800 overflow-hidden shadow-sm rounded-lg flex !flex-row justify-between">
+                       <div class="px-4 py-2">
+                           <div class="font-semibold text-lg text-gray-800 dark:text-gray-200">{{
+                                   attribute.title
+                               }}
+                           </div>
+                       </div>
+                   </div>
+               </NavLink>
+           </card>
+
+        </div>
+    </AuthenticatedLayout>
+</template>
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index 0282da7..6e7a60f 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
 import {Head} from '@inertiajs/vue3';
+import Modal from "@/Components/Modal.vue";
+import {ref} from "vue";
+import SecondaryButton from "@/Components/SecondaryButton.vue";
+const showModal = ref(true);
 </script>
 
 <template>
@@ -28,8 +32,15 @@ import {Head} from '@inertiajs/vue3';
                     <div class="ml-3 w-full p-8 bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                         <div class="p-6 text-gray-900 text-2xl dark:text-gray-100">Sensing</div>
                     </div>
+                    <secondary-button @click="showModal=true">hallo allemaal 1</secondary-button>
                 </div>
             </div>
         </div>
+
+        <Modal :show="showModal">
+            <div class="mt-6 flex justify-end">
+                <SecondaryButton @click="showModal=false"> hallo allemaal dit wordt gecancelled </SecondaryButton>
+            </div>
+        </Modal>
     </AuthenticatedLayout>
 </template>
diff --git a/resources/js/Pages/Items/Edit.vue b/resources/js/Pages/Items/Edit.vue
index a5d8448..071bf46 100644
--- a/resources/js/Pages/Items/Edit.vue
+++ b/resources/js/Pages/Items/Edit.vue
@@ -1,38 +1,52 @@
 <script setup lang="ts">
-import GuestLayout from '@/Layouts/GuestLayout.vue';
 import InputError from '@/Components/InputError.vue';
 import InputLabel from '@/Components/InputLabel.vue';
 import PrimaryButton from '@/Components/PrimaryButton.vue';
 import TextInput from '@/Components/TextInput.vue';
-import {Head, useForm} from '@inertiajs/vue3';
-import {marked} from 'marked';
+import {Head, router, useForm} from '@inertiajs/vue3';
 import {computed, ref} from "vue";
 import axios from "axios";
 import MarkDownTextArea from "@/CustomComponents/MarkDownTextArea.vue";
+import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
+import Card from "@/Components/Card.vue";
+import {Attribute, AttributeType, Item} from "@/types";
+import AttributeFilter from "@/CustomComponents/AttributeFilter.vue";
 
 const props = defineProps<{
-    item?: {
-        id: number;
-        title: string;
-        description: string;
-        wiring_instructions: string;
-        pros: string;
-        cons: string;
-        hardware_considerations: string;
-        software_considerations: string;
-        example_code: string;
-    };
+    item?: Item,
+    attributeTypes: AttributeType[],
+    items: Item[],
+    myAttributes: any
 }>();
-const thumbnail = ref({
-    name: '',
-    data: null,
+
+const initialSelectedAttributes = {} as Record<string, { color:string, attributes: Attribute[]|undefined }>;
+props.myAttributes?.forEach((attributeType: AttributeType) => {
+    initialSelectedAttributes[attributeType.id.toString()] = {
+        color: attributeType.color,
+        attributes: attributeType.attributes
+    };
 });
 
-const wiringPhoto = ref({
-    name: '',
-    data: null,
+const selectedAttributes = ref<Record<string, { color:string, attributes: Attribute[]|undefined }>>(initialSelectedAttributes);
+
+
+const flattenedSelectedAttributes = computed(() => {
+    let flattened: number[] = [];
+    Object.values(selectedAttributes.value).forEach((attributeType: { attributes: Attribute[]|undefined }) => {
+        if(attributeType.attributes === undefined) return;
+        attributeType.attributes.forEach((attribute: Attribute) => {
+            flattened.push(attribute.id);
+        });
+    });
+    return flattened;
 });
 
+const selectedItems = ref<string[]>([])
+const addSelectedItem = (item: number, idx: number) => {
+    // @ts-ignore
+    selectedItems.value[idx] = item;
+}
+
 const descriptionMarkdown = ref(props.item?.description ?? "");
 const wiringMarkdown = ref(props.item?.wiring_instructions ?? "");
 const prosMarkdown = ref(props.item?.pros ?? "");
@@ -47,14 +61,14 @@ const exampleCodeMarkdown = ref(props.item?.example_code ?? "");
 // });
 
 const form = useForm({
-    title: props.item?.title??'',
-    description: descriptionMarkdown?.value??'',
-    wiring_instructions: wiringMarkdown?.value??'',
-    pros: prosMarkdown?.value??'',
-    cons: consMarkdown?.value??'',
-    hardware_considerations: hardwareMarkdown?.value??'',
-    software_considerations: softwareMarkdown?.value??'',
-    example_code: exampleCodeMarkdown?.value??'',
+    title: props.item?.title ?? '',
+    description: descriptionMarkdown?.value ?? '',
+    wiring_instructions: wiringMarkdown?.value ?? '',
+    pros: prosMarkdown?.value ?? '',
+    cons: consMarkdown?.value ?? '',
+    hardware_considerations: hardwareMarkdown?.value ?? '',
+    software_considerations: softwareMarkdown?.value ?? '',
+    example_code: exampleCodeMarkdown?.value ?? '',
 });
 
 const submit = () => {
@@ -68,6 +82,10 @@ const submit = () => {
     formData.append('photo', thumbnail.value.data);
     // @ts-ignore
     formData.append('wiring_photo', wiringPhoto.value.data);
+    // @ts-ignore
+    formData.append('edges', selectedItems.value ?? []);
+    // @ts-ignore
+    formData.append('attributes', flattenedSelectedAttributes.value ?? [])
     //weird put method hack to actually let laravel know this is a put request
     if (props.item) formData.append('_method', 'put');
     console.log(...formData.entries());
@@ -76,12 +94,21 @@ const submit = () => {
         headers: {
             'Content-Type': 'multipart/form-data'
         }
-    })
-        .then((res) => {
-            console.log(res);
-        });
+    }).then(() => {
+            return router.get(route('items.index'));
+        }
+    );
 };
 
+const thumbnail = ref({
+    name: '',
+    data: null,
+});
+
+const wiringPhoto = ref({
+    name: '',
+    data: null,
+});
 const updatePhoto = (files: any) => {
     if (!files.length) return;
 
@@ -100,118 +127,173 @@ const updateWiringPhoto = (files: any) => {
 </script>
 
 <template>
-    <GuestLayout>
-        <Head title="Update item"/>
-
-        <form @submit.prevent="submit">
-            <div>
-                <InputLabel for="title" value="Title"/>
-
-                <TextInput
-                    id="title"
-                    type="text"
-                    class="mt-1 block w-full"
-                    v-model="form.title"
-                    required
-                    autofocus
-                />
-
-                <InputError class="mt-2" :message="form.errors.title"/>
-            </div>
+    <AuthenticatedLayout>
+        <form @submit.prevent="submit" class="m-4">
+            <div class="flex lg:flex-row flex-col">
+                <Card>
+                    <Head title="Update item"/>
+                    <div>
+                        <InputLabel for="title" value="Title"/>
 
-            <div class="mt-4">
-                <InputLabel for="photo" value="Photo"/>
+                        <TextInput
+                            id="title"
+                            type="text"
+                            class="mt-1 block w-full"
+                            v-model="form.title"
+                            required
+                            autofocus
+                        />
 
-                <input type="file" accept="image/*" class="form-control-file"
-                       name="photo"
-                       required
-                       @change="updatePhoto(
-                           //@ts-ignore
-                           $event as HTMLInputElement).target.files"
-                >
-            </div>
+                        <InputError class="mt-2" :message="form.errors.title"/>
+                    </div>
 
-            <div class="w-96 mt-4">
-                <MarkDownTextArea
-                    id="description"
-                    @updateMarkdown="descriptionMarkdown = $event; form.description = $event"
-                    :markdown="descriptionMarkdown"
-                    :description="form.description"
-                    :error="form.errors.description??''"/>
-            </div>
+                    <div class="mt-4">
+                        <InputLabel for="photo" value="Photo"/>
 
-            <div class="mt-4">
-                <InputLabel for="wiring_photo" value="Wiring Photo"/>
+                        <img class="w-[50%] mx-auto" :src="item?.photo_url"/>
 
-                <input type="file" accept="image/*" class="form-control-file"
-                       name="wiring_photo"
-                       required
-                       @change="updateWiringPhoto(
+                        <input type="file" accept="image/*" class="form-control-file"
+                               name="photo"
+                               @change="updatePhoto(
                            //@ts-ignore
-                           $event as HTMLInputElement).target.files"
-                >
-            </div>
+                           $event.target.files)"
+                        >
+                    </div>
 
-            <div class="w-96 mt-4">
-                <MarkDownTextArea
-                    id="wiring_instructions"
-                    @updateMarkdown="wiringMarkdown = $event; form.wiring_instructions = $event"
-                    :markdown="wiringMarkdown"
-                    :description="form.wiring_instructions"
-                    :error="form.errors.wiring_instructions??''"/>
-            </div>
+                    <div class="w-96 mt-4">
+                        <MarkDownTextArea
+                            id="description"
+                            @updateMarkdown="descriptionMarkdown = $event; form.description = $event"
+                            :markdown="descriptionMarkdown"
+                            :description="form.description"
+                            :error="form.errors.description??''"/>
+                    </div>
 
-            <div class="w-96 mt-4">
-                <MarkDownTextArea
-                    id="pros"
-                    @updateMarkdown="prosMarkdown = $event; form.pros = $event"
-                    :markdown="prosMarkdown"
-                    :description="form.pros"
-                    :error="form.errors.pros??''"/>
-            </div>
+                    <div class="mt-4">
+                        <InputLabel for="wiring_photo" value="Wiring Photo"/>
 
-            <div class="w-96 mt-4">
-                <MarkDownTextArea
-                    id="cons"
-                    @updateMarkdown="consMarkdown = $event; form.cons = $event"
-                    :markdown="consMarkdown"
-                    :description="form.cons"
-                    :error="form.errors.cons??''"/>
-            </div>
+                        <img class="w-[50%] mx-auto" :src="item?.wiring_photo_url"/>
 
-            <div class="w-96 mt-4">
-                <MarkDownTextArea
-                    id="hardware_considerations"
-                    @updateMarkdown="hardwareMarkdown = $event; form.hardware_considerations = $event"
-                    :markdown="hardwareMarkdown"
-                    :description="form.hardware_considerations"
-                    :error="form.errors.hardware_considerations??''"/>
-            </div>
+                        <input type="file" accept="image/*" class="form-control-file"
+                               name="wiring_photo"
+                               @change="updateWiringPhoto(
+                           //@ts-ignore
+                           $event.target.files
+)"
+                        >
+                    </div>
 
-            <div class="w-96 mt-4">
-                <MarkDownTextArea
-                    id="software_considerations"
-                    @updateMarkdown="softwareMarkdown = $event; form.software_considerations = $event"
-                    :markdown="softwareMarkdown"
-                    :description="form.software_considerations"
-                    :error="form.errors.software_considerations??''"/>
+                    <div class="w-96 mt-4">
+                        <MarkDownTextArea
+                            id="wiring_instructions"
+                            @updateMarkdown="wiringMarkdown = $event; form.wiring_instructions = $event"
+                            :markdown="wiringMarkdown"
+                            :description="form.wiring_instructions"
+                            :error="form.errors.wiring_instructions??''"/>
+                    </div>
 
-            </div>
+                    <div class="w-96 mt-4">
+                        <MarkDownTextArea
+                            id="pros"
+                            @updateMarkdown="prosMarkdown = $event; form.pros = $event"
+                            :markdown="prosMarkdown"
+                            :description="form.pros"
+                            :error="form.errors.pros??''"/>
+                    </div>
 
-            <div class="w-96 mt-4">
-                <MarkDownTextArea
-                    id="example_code"
-                    @updateMarkdown="exampleCodeMarkdown = $event; form.example_code = $event"
-                    :markdown="exampleCodeMarkdown"
-                    :description="form.example_code"
-                    :error="form.errors.example_code??''"/>
-            </div>
+                    <div class="w-96 mt-4">
+                        <MarkDownTextArea
+                            id="cons"
+                            @updateMarkdown="consMarkdown = $event; form.cons = $event"
+                            :markdown="consMarkdown"
+                            :description="form.cons"
+                            :error="form.errors.cons??''"/>
+                    </div>
+
+                    <div class="w-96 mt-4">
+                        <MarkDownTextArea
+                            id="hardware_considerations"
+                            @updateMarkdown="hardwareMarkdown = $event; form.hardware_considerations = $event"
+                            :markdown="hardwareMarkdown"
+                            :description="form.hardware_considerations"
+                            :error="form.errors.hardware_considerations??''"/>
+                    </div>
+
+                    <div class="w-96 mt-4">
+                        <MarkDownTextArea
+                            id="software_considerations"
+                            @updateMarkdown="softwareMarkdown = $event; form.software_considerations = $event"
+                            :markdown="softwareMarkdown"
+                            :description="form.software_considerations"
+                            :error="form.errors.software_considerations??''"/>
+                    </div>
 
-            <div class="flex items-center justify-end mt-4">
-                <PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
-                    Update item
-                </PrimaryButton>
+                    <div class="w-96 mt-4">
+                        <MarkDownTextArea
+                            id="example_code"
+                            @updateMarkdown="exampleCodeMarkdown = $event; form.example_code = $event"
+                            :markdown="exampleCodeMarkdown"
+                            :description="form.example_code"
+                            :error="form.errors.example_code??''"/>
+                    </div>
+                </Card>
+                <card>
+                    <div class="w-96 mt-4 text-center">
+                        <attribute-filter
+                            title="attributes"
+                            :attribute-types="props.attributeTypes"
+                            :checked-attributes="initialSelectedAttributes"
+                            @update:checked-attributes="selectedAttributes=$event;"/>
+                    </div>
+                </card>
+                <card>
+                    <div class="w-96 mt-4 text-center">
+                        <div class="text-md">This item</div>
+                        <div v-for="(selectedItemId, index) in selectedItems" :key="index">
+                            <div class="text-lg font-bold">↓</div>
+                            <select
+                                :id="index.toString()"
+                                class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+                                @change="addSelectedItem(
+                                    // @ts-ignore
+                                    $event.target.value, index)"
+                            >
+                                <option v-for="selectableItem in props.items"
+                                        :value="selectableItem.id"
+                                        :key="selectableItem.id"
+                                        :selected="selectedItemId === selectableItem.id.toString()">
+                                    {{ selectableItem.title }}
+                                </option>
+                            </select>
+                        </div>
+                        <div class="text-lg font-bold">↓</div>
+                        <select
+                            class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+                            @change="addSelectedItem(
+                                // @ts-ignore
+                                $event.target.value, selectedItems?.length??0); $event.target.value = '';"
+                        >
+                            <option value="" selected disabled hidden>Choose another block</option>
+                            <option v-for="selectableItem in props.items"
+                                    :value="selectableItem.id"
+                                    :key="selectableItem.id"
+                            >
+                                {{ selectableItem.title }}
+                            </option>
+                        </select>
+                        <div class="text-lg font-bold">↓</div>
+                        <div class="text-md">
+                            Python
+                        </div>
+                        <div class="flex items-center justify-end mt-4">
+                            <PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }"
+                                           :disabled="form.processing">
+                                Update item
+                            </PrimaryButton>
+                        </div>
+                    </div>
+                </card>
             </div>
         </form>
-    </GuestLayout>
+    </AuthenticatedLayout>
 </template>
diff --git a/resources/js/Pages/Items/Index.vue b/resources/js/Pages/Items/Index.vue
index 8f73459..354d0bb 100644
--- a/resources/js/Pages/Items/Index.vue
+++ b/resources/js/Pages/Items/Index.vue
@@ -1,30 +1,10 @@
 <script setup lang="ts">
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
 import NavLink from "@/Components/NavLink.vue";
-import OpeningComponent from "@/CustomComponents/OpeningComponent.vue";
-import {nextTick, ref} from "vue";
 import {router} from "@inertiajs/vue3";
-import Pill from "@/CustomComponents/Pill.vue";
-import Checkbox from "@/Components/Checkbox.vue";
-
-interface Item {
-    public_id: string;
-    title: string;
-    photo_url: string;
-    wiring_photo_url: string;
-}
-
-interface Attribute {
-    id: number;
-    title: string;
-}
-
-interface AttributeType {
-    id: number;
-    title: string;
-    color: string;
-    attributes: Attribute[];
-}
+import {AttributeType, Item} from "@/types";
+import Card from "@/Components/Card.vue";
+import AttributeFilter from "@/CustomComponents/AttributeFilter.vue";
 
 const props = defineProps<{
     items: Item[],
@@ -32,33 +12,13 @@ const props = defineProps<{
     filters: string
 }>();
 
-
-//all the attributes that are checked
-const checkedAttributes = ref(JSON.parse(props.filters) ?? {});
-
-const check = (attributeType: { id: number, color: string }, attribute: { id: number }, checked: boolean) => nextTick(() => {
-    console.log(checkedAttributes.value, attributeType.id, attribute.id, checked)
-    if (checked) {
-        if (!Object.hasOwn(checkedAttributes.value, attributeType.id)) {
-            checkedAttributes.value[attributeType.id] = {
-                color: attributeType.color,
-                attributes: []
-            };
-        }
-        checkedAttributes.value[attributeType.id].attributes.push(attribute);
-    } else {
-        checkedAttributes.value[attributeType.id].attributes = checkedAttributes.value[attributeType.id].attributes.filter((oldAttribute: Attribute) => oldAttribute.id !== attribute.id);
-    }
-    //filter out the attribute type if there are no attributes
-    //@ts-ignore
-    checkedAttributes.value = Object.fromEntries(Object.entries(checkedAttributes.value).filter(([key, value]) => value.attributes.length > 0));
-
+const reloadWithFilters = (filters: object) => {
     router.reload({
         data: {
-            filters: JSON.stringify(checkedAttributes.value)
+            filters: JSON.stringify(filters)
         }
     })
-});
+};
 </script>
 
 <template>
@@ -73,63 +33,33 @@ const check = (attributeType: { id: number, color: string }, attribute: { id: nu
                     <NavLink :href="route('attribute_types.create')">
                         New Attribute Type
                     </NavLink>
+                    <NavLink :href="route('attributes.create')">
+                        New Attribute
+                    </NavLink>
                 </div>
             </div>
         </template>
 
         <section class="w-full h-full mx-auto">
-            <div class="grid md:grid-cols-12 gap-4">
-                <div class="md:col-span-3 md:pt-0">
-                    <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 mt-4">
-                            <div class="w-full text-2xl text-center font-semibold mt-4">Filters</div>
-                            <div class="mx-2 mt-1 flex flex-wrap text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
-                                <template v-for="(attributeType, idx) in checkedAttributes">
-                                    <pill class="cursor-pointer" @click="check({id:idx, color:attributeType.color}, attribute, false)"
-                                          v-for="attribute in attributeType.attributes" :key="attribute.id"
-                                          :color="attributeType.color">
-                                        {{ attribute.title }} <span class="ms-2 text-red-600">x</span>
-                                    </pill>
-                                </template>
-                                <div v-if="Object.entries(checkedAttributes).length<=0" class="w-full p-2 text-center text-gray-500">
-                                    No filters applied
-                                </div>
-                            </div>
-                            <OpeningComponent v-for="attributeType in attributeTypes" :title="attributeType.title">
-                                <template #title>
-                                    <div class="font-bold text-lg p-3 rounded rounded-lg"
-                                         :class="`bg-${attributeType.color}-100`">{{ attributeType.title }}
-                                    </div>
-                                </template>
-                                <template #content>
-                                    <ul class="w-full mt-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
-                                        <li v-for="attribute in attributeType.attributes" :key="attribute.id"
-                                            class="w-full border-b border-gray-200 rounded-t-lg dark:border-gray-600">
-                                            <div class="flex items-center ps-3">
-                                                <input type="checkbox"
-                                                       :checked="Object.hasOwn(checkedAttributes, attributeType.id) && checkedAttributes[attributeType.id].attributes.some((checkedAttribute: Attribute) => checkedAttribute.id === attribute.id)"
-                                                       @change="check(attributeType, attribute, ($event as HTMLInputElement|any).target.checked)"
-                                                       :id="attribute.id.toString()" :value="attribute.id"
-                                                       class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
-                                                <label :for="attribute.id.toString()"
-                                                       class="w-full py-3 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">{{
-                                                        attribute.title
-                                                    }}</label>
-                                            </div>
-                                        </li>
-                                    </ul>
-                                </template>
-                            </OpeningComponent>
+            <div class="grid grid-cols-3 md:grid-cols-6 lg:grid-cols-12  gap-4">
+                <div class="col-span-3 md:pt-0">
+                    <card class="mt-4">
+                        <div class="w-full text-center">
+                            <attribute-filter
+                                title="filters"
+                                @update:checked-attributes="reloadWithFilters"
+                                :attribute-types="attributeTypes"
+                                :checked-attributes="JSON.parse(props.filters) ?? {}"/>
                         </div>
-                    </div>
+                    </card>
                 </div>
-                <div class="md:col-span-9">
-                    <div class="grid grid-cols-4 gap-4 mt-4">
+                <div class="lg:col-span-9 col-span-3">
+                    <div class="grid lg:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-4 mt-4">
                         <NavLink v-for="item in items" class="px-6" :href="route('items.show', item.public_id)">
                             <div
-                                class="w-full bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg flex !flex-row justify-between">
+                                class="w-full bg-white dark:bg-gray-800 overflow-hidden shadow-sm rounded-lg flex !flex-row justify-between">
 
-                                <img :src="item.photo_url" width="100" height="100" alt="item photo">
+                                <img :src="item.photo_url" class="w-[50%]" alt="item photo">
                                 <div class="px-2">{{ item.title }}</div>
                             </div>
                         </NavLink>
diff --git a/resources/js/Pages/Items/Show.vue b/resources/js/Pages/Items/Show.vue
index 56fb2c6..b5b21ae 100644
--- a/resources/js/Pages/Items/Show.vue
+++ b/resources/js/Pages/Items/Show.vue
@@ -29,14 +29,13 @@ const props = defineProps<{
     };
 }>();
 
-import {ref} from 'vue'
 import QrcodeVue from 'qrcode.vue'
-import {marked} from "marked";
 import OpeningCard from "@/CustomComponents/OpeningCard.vue";
 import Pill from "@/CustomComponents/Pill.vue";
-
-const value = ref(route('items.show', props.item.public_id))
-const description = marked(props.item.description)
+import HighlightJSVuePlugin from '@highlightjs/vue-plugin';
+import 'highlight.js/lib/common';
+const VHighlightjs = HighlightJSVuePlugin.component;
+import 'highlight.js/styles/atom-one-dark.css';
 </script>
 
 <template>
@@ -52,6 +51,9 @@ const description = marked(props.item.description)
                 <NavLink class="px-6" :href="route('items.edit', item)">
                     Edit item {{ item.id }}
                 </NavLink>
+                <NavLink class="px-6" :href="route('items.destroy', item)">
+                    Delete item {{ item.id }}
+                </NavLink>
             </div>
         </template>
         <section class="w-full h-full mx-auto">
@@ -94,19 +96,19 @@ const description = marked(props.item.description)
 
                     <OpeningCard title="Example code">
                         <template #content>
-                            {{ item.example_code }}
+                            <v-highlightjs autodetect :code="item.example_code" />
                         </template>
                     </OpeningCard>
                 </div>
                 <div class="md:col-span-3 md:pt-0 mt-4">
                     <div class="sticky top-8 max-w-7xl mx-auto sm:pr-6 lg:pr-4">
                         <div
-                            class="p-8 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg aspect-[63/88] overflow-hidden">
+                            class="p-8 bg-white dark:bg-gray-800 shadow-sm rounded-lg aspect-[63/88] overflow-hidden">
                             <div class="dark:text-gray-100 font-bold text-2xl mb-2">{{ item.title }}</div>
                             <img :src="item.photo_url" class="rounded-lg w-[75%] mx-auto" alt="item photo">
                             <div class="text-gray-600 text-sm my-2">{{ item.description }}</div>
                             <qrcode-vue class="float-right max-w-[80px] max-h-[80px] dark:bg-gray-800 dark:text-gray-100"
-                                        :value="value" level="M"
+                                        :value="route('items.show', props.item.public_id)" level="M"
                                         render-as="svg"/>
                             <div class="flex flex-wrap">
                                 <pill v-for="attribute in item.attributes" :key="attribute.id" :color="attribute.attribute_type.color">
diff --git a/resources/js/app.ts b/resources/js/app.ts
index 3f0623b..c429405 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -5,7 +5,6 @@ import { createApp, h, DefineComponent } from 'vue';
 import { createInertiaApp } from '@inertiajs/vue3';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 import { ZiggyVue } from '../../vendor/tightenco/ziggy';
-
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
 createInertiaApp({
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
index 688ce28..9b87b3d 100644
--- a/resources/js/types/index.d.ts
+++ b/resources/js/types/index.d.ts
@@ -5,6 +5,38 @@ export interface User {
     email_verified_at: string;
 }
 
+export interface Item {
+    id: number;
+    title: string;
+    description: string;
+    wiring_instructions: string;
+    pros: string;
+    cons: string;
+    hardware_considerations: string;
+    software_considerations: string;
+    example_code: string;
+    public_id: string;
+    photo_url?: string;
+    wiring_photo_url?: string;
+    attributes?: Attribute[];
+}
+
+export interface Attribute {
+    id: number;
+    title: string;
+    description: string;
+    attribute_type_id: number;
+    attribute_type?: AttributeType;
+}
+
+export interface AttributeType {
+    id: number;
+    title: string;
+    description: string;
+    color: string;
+    attributes?: Attribute[];
+}
+
 export type PageProps<T extends Record<string, unknown> = Record<string, unknown>> = T & {
     auth: {
         user: User;
diff --git a/routes/web.php b/routes/web.php
index 7d0ada7..f2c4158 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\AttributeController;
 use App\Http\Controllers\AttributeTypeController;
 use App\Http\Controllers\ItemController;
 use App\Http\Controllers\ProfileController;
@@ -14,6 +15,7 @@
 });
 
 Route::resource('attribute_types', AttributeTypeController::class);
+Route::resource('attributes', AttributeController::class);
 
 Route::get('/', function () {
     return Inertia::render('Welcome', [