Create attendance tracking screen UI

[evan10s]

Figma mockups

Event/team selection

Before showing the BuzzCard scanning UI, fetch the team list and list of events happening today. Users can toggle between seeing events or visible and attendable (the same list the kiosk shows) teams, with teams being the default. After selecting a team or event, the UI transitions to the BuzzCard scanning mode.

BuzzCard scanning

This screen consists of:

• The result of the last tap (user's name, succcess/failure)
• A status area to indicate when to scan the next BuzzCard. Possible states include:
  • Enable NFC to continue
  • Ready to scan
  • Sending data...
  • Error preventing scan (e.g., NFC error, no connection, etc.)
• Count of total swipes, for fun
• The currently selected team/event and a way to go back and change it

Nice to haves to round out the experience:

• Flash a message if a BuzzCard is tapped while a swipe is already being processed
• Play a sound on success or error

[RossIV]

Maybe not for the first iteration, but support for offline bulk collection of BuzzCard swipes for upload later may be useful if there are whatever kind of issues preventing real time sync. I'd see this being implemented on this same screen if the list of events/teams is locally cached, with a checkbox or other option for offline collection.

[evan10s]

I made #10 so we can groom offline scanjng in the future, but I think it'll be more clear if we even need it once we use this in the wild some.

[kberzinch]

I think if you could put teams and events on the same screen (possibly under separate headers) that might be more intuitive.