Ability to sort list of components

[Konstantin-Levin]

Would be helpful to be able to sort the list of components for a given bike. For example by: date added, alphabetically, next service due.

I like the active and inactive separation of components though.

Many thanks :)

[Gerben321]

Do you want this to be a global sorting? Or different per bike?

Right now, it's displayed from old to new from top to bottom.

I can image a dropdown above your component with the options (date, alphabet, service) would be a welcome change, especially with a huge list of components.

Sorting schedule due time is difficult though, because we have time and distance, but I can do it based on the percentage maybe. But that could be a bit slow and complex. Let me know what you think would work here.

[Konstantin-Levin]

In my opinion it would be best as a drop down selection at the top of the components list page of every bike. With date, alphabet, service along with a ascending/descending modifier as well. I think having the information at a glance about what services are coming up soon for each bike would be helpful for planning.

I see what you mean about the difficulty of sorting by service. If it can be done on a percentage basis as you suggest that could work well. A visual indication (like a small version from the serivce schedule page) on the same line as each component would be nice and not too cluttered?

Something like this is what I'm picturing:

(excuse terrible image editing)

[OleksiyRudenko]

I reckoned the time-to-next-service would be helpful ( https://github.com/Gerben321/bike-care-tracker/issues/5 )

Sorting schedule due time is difficult though, because we have time and distance, but I can do it based on the percentage maybe. But that could be a bit slow and complex. Let me know what you think would work here.

How about time prediction by linear regression based on n recent (from last 30-45 days to void seasonal bias, unless having at least 2 data points for regression requires a longer period of backtracking) log entries? Estimation of avg kms/day, moving_hrs/day should be enough to predict number of days to next service.

If Activities data is supplied to the web app raw and rendering done on FE then the same data could be used by FE to perform calculations on user's machine.

What do you think?

[Gerben321]

Thanks for the ideas. This will be a major change. I am planning to pull apart the frontend and backend in this case. But this means I have to build an API and use a new frontend library and connect those etc. So this will take a bit, but I think it will open major features.

The idea is that the server (backend) can give the information on the bike (with all components etc.) to the frontend to get it rendered on the user machine. This makes it a lot easier to do complex filtering and ordering etc, without sending hundreds of heavy queries to the server.

[Gerben321]

I've got the first version that I'm happy with and want to show!

Desktop: Mobile: Mobile with drawer:

So as you can see I've added the filters and ordering. On mobile there's a drawer/flyout in which the filters are shown because otherwise it would be a bit cramped.

Here are the sorting options:

I'm happy with this first version. It makes it a lot easier to find something.

Let me know what you guys think!

[Gerben321]

Oh and here are the filters: Searching:

[Konstantin-Levin]

Nicely done, that looks fantastic! Even better than I was hoping for. The search box is a nice touch, should make it really easy to find a specific component :)

Out of curiosity will a chosen sort order be maintained upon refreshing the page or will it return to the default sort?

[Gerben321]

Thanks! I really find it useful myself too now.

Right now it defaults to the current way of displaying, but it can be something that I can store locally on the device. Or as as option if that would make more sense.

[Gerben321]

I've added saving the state of ordering/filtering on the device as well. Right now I'm looking at finishing up things and then I will deploy it. I am really looking forward to what you guys think.

[Gerben321]

@Konstantin-Levin @OleksiyRudenko This is now deployed. Let me know what you think!

[Konstantin-Levin]

This is great! A really nice improvement, thank you. Working well for me on Firefox desktop, just one tiny bug that I came across where the upper separator line disappears when clicking to show the dropdown for a particular component.

The red and yellow icons indicating service status is useful importation to have at a glance, and it keeps the page looking clean.

As I mentioned in my earlier post I think it would be nice to have just one more line of text in the component drop down showing the km/hrs remaining (or overdue) until the service. This saves the 2 click throughs to Details and then Service to see that number. This would also help when I want to quickly check the service info for 2 or more components one after the other.

[Gerben321]

Thanks for that, didn't notice that before! Will have a look at that.

I think that would be a good idea to add the remaining service.

[Gerben321]

Fixed the bug.

How would this work for you?

You can also leave feedback on the looks, not just function. I want to make it look as good as possible while I'm at it.

[Konstantin-Levin]

Nice one, looks ideal - you read my mind! 👌

The font colour to match the priority is a nice touch, helps it stand out. Only thing I'd say is check the legibility of the coloured text when on light mode. The yellow might be a little hard to make out?

One more small thing that is totally a personal preference thing for me is showing 2 decimal places on everything measured kilometres. For example:

13,409 km just looks less fussy and quicker to glance at than 13,409.08 km

I0s and 100s of metres (along with seconds in time) are not really relevant to me when tracking anything on my bikes 😅 but that's just me.

[Gerben321]

Good point about both! Will take a look at that tomorrow.

[Gerben321]

How about this?

Turned it into an alert type of message so the text can be black or white depending on the color.

I've also removed the seconds now, but after these screenshots. 😋

[Gerben321]

It's now published so you can check it out yourself. Let me know if it's good now.

[Konstantin-Levin]

Nice 😎 That's even better, stands out really well now. Just the right amount of info in that drop down now I think