Add tag dropdown menu

[LDannijs]

Summary

Add a dropdown menu that lists all the tags added to devices.

Changes

• add rudimentary code for tag dropdown
• added a bit of styling (just for testing mainly)

Notes for Reviewers

@mjamescompton @kschiffer @ryaplots please give this a look and make/note the necessary changes to it. This is my first time trying Hugo so it can definitely be improved.

[LDannijs]

Added some code that does a few things:

• adds a dropdown for selecting a vendor
• put the code for the dropdowns in seperate files
• added the dropdowns to the tag and vendor pages so you do not need to go back to the main page.

[Jaime-Trinidad]

@LDannijs great by vendor is great, there are +/- 120 vendors, do you think adding more dropdowns can be good, as profiles (people can look US, AS, EU devices), thinking in the complete parameters that all devices should contain to be merged.

[pierrephz]

@Jaime-Trinidad can you think of all the filter we can apply and list them here please? With their options

[mjamescompton]

@LDannijs so just a general one for PR's assignees should be you. And then reviewers should be anyone you want to look at it

[LDannijs]

So i could add more filters, i am now working on one that filters through the different frequency plans for example, but i will not be able to have it dynamically change the page depending on what filters you select OR select multiple tags (as @pierrephz noted to me), since Hugo is a static framework.

If i could get some guidelines on what the plan is here i could iterate on it further.

[LDannijs]

@LDannijs so just a general one for PR's assignees should be you. And then reviewers should be anyone you want to look at it

Oh understood, i'll change that.

[Jaime-Trinidad]

Yes agree, is it possible to add more than one dropdown? the one on vendorID is good, and I think other ones can be good for making some filters, I think only from the mandate parameters, i.e. sensors is not mandatory so many devices don't have which sensor have. Here is a list of other possible dropdowns:

• Profiles : EU, US, AS, etc.
• macVersion: 1.0, 1.0.1, 1.0.2, 1.0.3, 1.0.4 or 1.1
• maybe tricky but if possible will be great: supportClass B and C

This are mandatory parameters for the validation, so all of them will contain this ones, at least VendorId and Profiles will be great for the moment.

[LDannijs]

I think only from the mandate parameters, i.e. sensors is not mandatory so many devices don't have which sensor have. Here is a list of other possible dropdowns:

I see, so sensor shouldn't be exposed in the dropdowns?

• Profiles : EU, US, AS, etc.

I already was working on a rudimentary frequency dropdown, should i just combine the countries that have multiple frequencies or?

[mjamescompton]

Pages like tags, vendors etc already have specific pages for strong for SEO. So we should separate idea between filtering the page data or going to a collection page.

So next steps for this would be

• Add data attributes to each device in list, then use js to add to remove items based on what is selected.

So take what items are already on each page and filter them further. You never make a server requests to get more items.

[LDannijs]

Pages like tags, vendors etc already have specific pages for strong for SEO. So we should separate idea between filtering the page data or going to a collection page.

So next steps for this would be

• Add data attributes to each device in list, then use js to add to remove items based on what is selected.

So take what items are already on each page and filter them further. You never make a server requests to get more items.

This goes a bit above my head, so if anything needs to change on that regard i would like some guidance.

[pierrephz]

Before going to development, here is a prototype with filter feature. This is open for discussion

I also think the UI and especially the cards need a new design (see my clip)

https://github.com/TheThingsNetwork/lorawan-devices/assets/26456318/7a834718-e69e-4fa5-bcc8-db48e6eb2db6

I also did work on the dedicated device page, I can share it in another issue

[wienke]

@pierrephz it would be very nice to if we have some kind of device repository statistics in the hero section. Amount of devices for instance, and device profiles.

[KrishnaIyer]

Let's incorporate this as part of https://github.com/TheThingsNetwork/lorawan-devices/issues/697