Improve query interface for get recordings page

[arthurmcgregor]

Significant changes to the get recordings page.

• Changed layout of columns to be more responsive (#76)
• Changed terms for date selection. Before date and after date become From Date and To Date (which makes more sense to me)
• Replaced longer than, shorter than with duration range slider
• Duration range slider initially has range from 0 to 100 s, however clicking the arrow will increase the max range by 100s (up to 600s)
• Date and duration automatically create new conditions (and remove old conditions) when their input changes. I am assuming you only ever want one set of bounds for each condition
• Conditions have been hidden. Now that they always reflect the dates and duration boxes you do not need to see them or delete old conditions.
• Shifted device and tag selectors to the top of the page. I am assuming these are more commonly used
• Rearranged limit and offset to be closer to table
• Rearranged other buttons
• Added table-responsive class to table which means it becomes scroll-able on small screens (better than alternative)

So hopefully that all works and is an improvement.

A few questions (because I don't really know how this is actually used!)

• Are devices and tags the most commonly used query fields, or should something else be at the top of the page?
• Do you ever want to filter by (devices || tags) && (duration || date)? Because 'get all' only does (devices || tags) and 'get all from conditions' only does (date || duration). I feel these two could be combined into one 'Search' button or 'Filter' or 'Get recordings'
• Do you ever want to choose several devices? ie a checklist rather than a drop down list
• Ditto for tags

Screenshots Desktop size - before Desktop size - after Mobile size - before Mobile size - after

[mjs]

This is excellent. Thanks! Answers to your questions:

Are devices and tags the most commonly used query fields, or should something else be at the top of the page?

The device and tags fields are the most common ones.

Do you ever want to filter by (devices || tags) && (duration || date)? Because 'get all' only does (devices || tags) and 'get all from conditions' only does (date || duration). I feel these two could be combined into one 'Search' button or 'Filter' or 'Get recordings'

There should be just one button. I like "Search" as the name for it.

Do you ever want to choose several devices? ie a checklist rather than a drop down list

Not really, but we would like to be able to filter by "device group". We'll have to figure out how to query the API for that.

Ditto for tags

The field called "Tags" should actually be called "Tag type" or "Tag class". The current combinations in the drop down are all we need right now.

At some stage we need to add searching by tag (i.e. animal). That would be nice to do as a series of checkboxes.

See my email too for more UI suggestions. No need to do them all in one PR though. This is a great start.

I'll leave the code review for @CameronRP .

[arthurmcgregor]

Thanks for your email and feedback @mjs. Will look to incorporate those ideas as well...

[mjs]

@arthurmcgregor Did you want to land this and then propose more PRs with some of the other suggestions?

[arthurmcgregor]

@mjs Yup will do :-)

[CameronRP]

@arthurmcgregor Code is now live on the test server :) https://browse-test.cacophony.org.nz/get_recordings

[arthurmcgregor]

Yay! Now I can see how well it works on an actual mobile phone...

Plus summarised all of these ideas in #81

[mjs]

@arthurmcgregor it's already so much better - thank you! Looking forward to seeing what else you come up with.