Fix the wiring photo being shown when not defined and the item update…

… for other items always showing the first item

app/Http/Controllers/ItemController.php

@@ -26,16 +26,19 @@ public function index(Request $request)
                 $query->where('attribute_type_id', $attributeCategoryId)->whereIn('attributes.id', $attributeIds);
             });
         }
-
-        Session::put('explainer', Carbon::now()->addMinutes(30)->timestamp);
-
+        $showInitialExplainer = true;
+        if(Session::get('explainer') && Carbon::now()->timestamp <= Session::get('explainer')){
+            $showInitialExplainer = false;
+        }else{
+            Session::put('explainer', Carbon::now()->addMinutes(30)->timestamp);
+        }
         return Inertia::render('Items/Index', [
             'items' => $builder->get(),
             'attributeTypes' => AttributeType::with('attributes')->orderBy('created_at', 'desc')->get(),
             'initialFilters' => $filters,
             'questions' => Question::with('answers.attributes:id')->get(),
             'initialSelectedItems' => Item::whereIn('id', $request->session()->get('selected') ?? [])->get(),
-            'explainer' => Carbon::now()->timestamp >= Session::get('explainer') ?? 0,
+            'explainer' => $showInitialExplainer,
         ]);
     }
 

database/seeders/DatabaseSeeder.php

@@ -39,6 +39,57 @@ public function run(): void
             ]
         );
 
+        $types = AttributeType::create(
+            [
+                'title' => 'Type',
+                'description' => 'The type an item can be',
+                'color' => 'red',
+            ]
+        );
+
+        Attribute::create(
+            [
+                'attribute_type_id' => $types->id,
+                'title' => 'Sensor',
+                'description' => 'A sensor is a device that detects events or changes in quantities and provides a corresponding output, generally as an electrical or optical signal',
+            ]
+        );
+
+        Attribute::create(
+            [
+                'attribute_type_id' => $types->id,
+                'title' => 'Actuator',
+                'description' => 'An actuator is a component of a machine that is responsible for moving and controlling a mechanism or system',
+            ]
+        );
+
+        Attribute::create(
+            [
+                'attribute_type_id' => $types->id,
+                'title' => 'Programming Language',
+                'description' => 'A programming language is a formal language comprising a set of instructions that produce various kinds of output',
+            ]
+        );
+
+        Attribute::create(
+            [
+                'attribute_type_id' => $types->id,
+                'title' => 'Development Board',
+                'description' => 'A development board is a printed circuit board containing a microprocessor and the minimal support logic needed for a computer engineer to become a user of a microprocessor',
+            ]
+        );
+
+        Attribute::create(
+            [
+                'attribute_type_id' => $types->id,
+                'title' => 'Supporting technologies',
+                'description' => 'All the items that are used to make the actuators and sensors work together',
+            ]
+        );
+
+
+
+
         Attribute::create(
             [
                 'attribute_type_id' => $processors->id,
@@ -59,28 +110,31 @@ public function run(): void
             Attribute::factory()->count(5)
         )->create();
 
-        Item::factory()->create([
+        $python = Item::factory()->create([
             'title' => 'Python',
         ]);
 
+        $python->attributes()->attach(
+            Attribute::where('title', 'Programming Language')->first()
+        );
+
         $items = Item::factory(10)->create();
         for ($i = 2; $i < 11 - 3; $i += 3) {
             $item = $items[$i];
             $item->json_items = [$i, $i + 1, $i + 2];
             $item->save();
         }
 
-        $attributes = Attribute::all();
         foreach ($items as $item) {
             $item->attributes()->attach(
-                $attributes->random(3)
+                Attribute::all()->random(3)
             );
         }
 
-        Question::factory(10)->has(
+        Question::factory(5)->has(
             Answer::factory()->count(3)
         )->create();
-
+        $attributes = Attribute::all();
         $answers = Answer::all();
         foreach ($answers as $answer) {
             $answer->attributes()->attach(

package.json

@@ -27,7 +27,6 @@
         "highlight.js": "^11.9.0",
         "marked": "^12.0.2",
         "qrcode.vue": "^3.4.1",
-        "v-network-graph": "^0.9.15",
-        "vue-resize-text": "^0.1.1"
+        "v-network-graph": "^0.9.15"
     }
 }

resources/js/CustomComponents/AttributeFilter.vue

@@ -7,13 +7,13 @@ import {computed, nextTick, ref} from "vue";
 
 const props = withDefaults(defineProps<{
     attributeTypes: AttributeType[],
-    initialFilters?: Record<number, number[]>
+    initialFilters?: Record<number, string[]>
     title?: string
 }>(), {
     title: 'filters',
 });
 const emit = defineEmits<{
-    (e: 'update', update:Record<number, number[]>): void
+    (e: 'update', update: Record<number, number[]>): void
 }>()
 
 const check = (attributeType: AttributeType, attribute: Attribute, checked: boolean) => nextTick(() => {
@@ -26,7 +26,6 @@ const check = (attributeType: AttributeType, attribute: Attribute, checked: bool
     if (checkedAttributesMap.value.get(attributeType)?.length === 0) {
         checkedAttributesMap.value.delete(attributeType);
     }
-
     emit('update', checkedAttributes.value);
 });
 
@@ -41,7 +40,7 @@ const addFilterByAttributeId = (id: number) => {
     if (attribute) {
         //find the corresponding attribute type
         const attributeType = props.attributeTypes.find((attributeType) => attributeType.id === attribute.attribute_type_id);
-        if(attributeType && !checkedAttributesMap.value.has(attributeType)){
+        if (attributeType && !checkedAttributesMap.value.has(attributeType)) {
             check(attributeType, attribute, true);
         }
     }
@@ -52,19 +51,32 @@ const reset = () => {
     emit('update', {});
 }
 
+const findAndAddAttribute = (attributeTitle: string) => {
+    for (const attributeType of props.attributeTypes) {
+        const attribute = attributeType.attributes?.find((attribute) => attribute.title === attributeTitle);
+        if (attribute) {
+            check(attributeType, attribute, true);
+            return;
+        }
+    }
+}
+
 const checkedAttributesMap = ref(new Map<AttributeType, Attribute[]>());
 if (props.initialFilters) {
     for (const [attributeTypeId, attributeIds] of Object.entries(props.initialFilters)) {
         const attributeType = props.attributeTypes.find((attributeType) => attributeType.id === parseInt(attributeTypeId));
         if (attributeType) {
             attributeIds.forEach((attributeId) => {
-                const attribute = attributeType.attributes?.find((attribute) => attribute.id === attributeId);
+                const attribute = attributeType.attributes?.find((attribute) => attribute.id === parseInt(attributeId));
                 if (attribute) {
                     check(attributeType, attribute, true);
                 }
             });
         }
     }
+} else {
+    findAndAddAttribute('Actuator')
+    findAndAddAttribute('Sensor')
 }
 
 const checkedAttributes = computed(() => {
@@ -86,7 +98,10 @@ defineExpose({
 })
 </script>
 <template>
-    <div class="w-full text-2xl text-center font-semibold mt-4">{{ capitalizeFirstLetter(title) }}</div>
+    <div class="flex justify-center w-full">
+        <div class="text-2xl text-center font-semibold mt-4">{{ capitalizeFirstLetter(title) }}</div>
+        <pill class="self-end" :color="'red'"></pill>
+    </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, attributes] in checkedAttributesMap.entries()">

resources/js/CustomComponents/TailwindWidth.ts

@@ -0,0 +1,48 @@
+import {computed, ComputedRef, ref} from "vue";
+const screens = {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280
+}
+
+export enum Breakpoints {
+    sm = 'sm',
+    md = 'md',
+    lg = 'lg',
+    xl = 'xl',
+    all = 'all'
+}
+const w = ref(window.innerWidth);
+
+const breakpoint = computed(()=>{
+    if ( w.value >= screens.sm && w.value <= screens.md ) return Breakpoints.sm
+    else if (w.value >= screens.md && w.value <= screens.lg) return Breakpoints.md
+    else if (w.value >= screens.lg && w.value <= screens.xl) return Breakpoints.lg
+    else if (w.value >= screens.xl) return Breakpoints.xl
+    else return Breakpoints.all
+})
+const debounce = function(func: any, wait: number) {
+    let timeout: number | undefined
+    return () => {
+        const later = function() {
+            timeout = undefined
+        }
+        const callNow = !timeout
+        if(timeout) {
+            clearTimeout(timeout)
+        }
+        timeout = setTimeout(later, wait)
+        if (callNow) func()
+    }
+}
+
+window.addEventListener(
+    'resize',
+    debounce(() => {
+        w.value = window.innerWidth
+    }, 200),
+    false
+)
+
+export default breakpoint

resources/js/Pages/Attributes/Edit.vue

@@ -90,7 +90,7 @@ const submit = () => {
                     class="inline-flex h-full items-center w-min text-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150"
                 > Delete Attribute </Link>
                 <PrimaryButton class="ms-4 w-min" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
-                    Update AttributeType
+                    Update attribute
                 </PrimaryButton>
             </div>
         </form>

resources/js/Pages/Items/Edit.vue

@@ -4,12 +4,10 @@ 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 {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 {AttributeType, Item} from "@/types";
 import AttributeFilter from "@/CustomComponents/AttributeFilter.vue";
 
 const props = defineProps<{
@@ -18,7 +16,13 @@ const props = defineProps<{
     items: Item[],
     myAttributes: any
 }>();
-const addSelectedItem = (item: number, idx: number) => {
+
+const addSelectedItem = (item: string, idx: number) => {
+    if(item === "-1") {
+        // @ts-ignore
+        form.edges.splice(idx, 1);
+        return;
+    }
     // @ts-ignore
     form.edges[idx] = item;
 }
@@ -38,9 +42,9 @@ const form = useForm({
     title: props.item?.title ?? '',
     description: props.item?.description ?? '',
     card_description: props.item?.card_description ?? '',
-    wiring_instructions:  props.item?.wiring_instructions ?? '',
+    wiring_instructions: props.item?.wiring_instructions ?? '',
     pros: props.item?.pros ?? '',
-    cons:   props.item?.cons ?? '',
+    cons: props.item?.cons ?? '',
     hardware_considerations: props.item?.hardware_considerations ?? '',
     software_considerations: props.item?.software_considerations ?? '',
     example_code: props.item?.example_code ?? '',
@@ -65,7 +69,7 @@ const submit = () => {
             forceFormData: true,
         });
     } else {
-        router.post(route('items.store'), form.data(),{
+        router.post(route('items.store'), form.data(), {
             forceFormData: true,
         });
     }
@@ -200,10 +204,11 @@ const submit = () => {
                                     // @ts-ignore
                                     $event.target.value, index)"
                             >
-                                <option v-for="selectableItem in props.items"
+                                <option value="-1">Remove block</option>
+                                <option v-for="selectableItem in items"
                                         :value="selectableItem.id"
                                         :key="selectableItem.id"
-                                        :selected="selectedItemId === selectableItem.id">
+                                        :selected="selectableItem.id.toString()===selectedItemId">
                                     {{ selectableItem.title }}
                                 </option>
                             </select>

resources/js/Pages/Items/Graph.vue

@@ -163,7 +163,7 @@ onMounted(() => {
                         <primary-button
                             class="mt-2 w-fit self-end"
                             @click="router.get(route('items.index'))">
-                            Select some {{selectedItems.size<0?'more':''}} items!
+                            Select {{selectedItems.size<0?'some':'more'}} items!
                         </primary-button>
                     </template>
                 </selected-item-dropdown>