When the app is running in a development environment a user should have the option to simulate bar code scanning so that it can be QA tested without having an actual barcode scanner handy

This might look like a collapsible side panel with an input for what the value of the barcode should be and a button to simulate scanning.

Additionally, it would be nice if there were also a list of table cards generated to pick from. Clicking on a card should simulate scanning that card.
If the developer is really bored, let's also somehow indicate that a table card should be missing. After booking a party, the card associated with that party appears grayed out in this list to indicate that the card should be in the hands of that party's maid rather than at the podium.

Barcode scanners don't give any special indication that the input is coming from a barcode scanner, so this simulation will probably look like a bunch of keypress events in rapid succession. ⌨️

in #19 we renamed the FanimaidButler module to Butler. Let's also rename the app from :fanimaid_butler to just :butler accordingly.

Steps:

• update the app name in mix.exs
• update subsequent references to :fanimaid_butler

https://devcenter.heroku.com/articles/upgrading-to-the-latest-stack

• As staff I can search the list of reservations by various filters so that I can more easily find a reservation in the list. (Not pictured) the results should be paginated as usual. (this means that filtering will likely need to happen on the backend)
• (Not pictured) Please also add a column for reservation name to the table, and include it as a search filter

features

feature	mockup
- add a "filters" button which toggles the visibility of the filter options
- add a form (hidden by default) which allows filtering by the following fields
- when filters are applied, the "filters" button reflects the number of filters applied

styles

• you can use the following bootstrap styles:

<form>
  <div class="form-group row">
    <label class="col-sm-2 col-form-label">Shinkansen</label>
    <div class="col-sm-10">
      <input type="checkbox" class="form-control-plaintext">
    </div>
  </div>
  <div class="form-group row">
    <label class="col-sm-2 col-form-label">Staff</label>
    <div class="col-sm-10">
      <input type="checkbox" class="form-control-plaintext">
    </div>
  </div>
  <div class="form-group row">
    <label class="col-sm-2 col-form-label">Table #</label>
    <div class="col-sm-10">
      <input type="text" class="form-control-plaintext">
    </div>
  </div>
  <div class="form-group row">
    <label class="col-sm-2 col-form-label">Party Size</label>
    <div class="col-sm-10">
      <input type="text" class="form-control-plaintext">
    </div>
  </div>
  <div class="form-group row">
    <label class="col-sm-2 col-form-label">Maid</label>
    <div class="col-sm-10">
      <input type="text" class="form-control-plaintext">
    </div>
  </div>
  <div class="form-group row">
    <label class="col-sm-2 col-form-label">Party id</label>
    <div class="col-sm-10">
      <input type="text" class="form-control-plaintext">
    </div>
  </div>
  <div class="form-group">
    <button class="btn btn-primary">Apply filters</button>
  </div>
</form>

this ticket needs elaboration/design and is not ready for development

as a new volunteer I will receive an email being prompted to create an account on butler.
After logging in I will see the fanimaid volunteers portal with helpful links and information, as well as a checklist of all the items I need to complete to prepare for fanime

as a returning volunteer I will receive an email reminding me to log in to butler and complete the required action items

as staff I can use butler to customize the pages/content in the volunteer portal
as staff I can view a list of all volunteers for the upcoming year and how many action items each volunteer has completed

this issue needs elaboration/design and is not ready for development

as a goshujinsama I have the option to provide my email when creating my reservation. When my reservation is closed out I will receive a thank you email from the maid cafe with a call to action to post on twitter/ig about their experience in the cafe, as well as a channel for providing feedback. e.g "tweet about your experience #FANIMAID2019"

questions:

• do we need permission from the con/compliance with any privacy policies in order to voluntarily collect patron's email addresses?

The Party model is confusingly named. It more accurately represents a card that is associated with a table, so we should rename it to reflect that. All references to a Party in the codebase should be updated to Card.

We should write some happy path e2e tests 😄
make sure you also update the circleci config to run these tests

the following e2e tests need to be written:

• login flow
• checking a maid in and out
• adding a party to the waitlist, editing that party, seating them, and clearing the party
• seating a party without a waitlist reservation, editing the party, and clearing the party

please feel free to pick up individual items off this list and make PRs for them separately; one person doesn't have to do all of these!

We should probably be testing our socket logic!
In terms of how to test it....

this issue needs elaboration and is not ready for development

as a line lead I should be able to combine parties from the waitlist who have made friends in line and want to sit together.

• elixir & postgres versions + maybe installation instructions?
• add linter to "running the tests" section
• is mix deps.get required to be run before running tests? - probably yes
• npm is a requirement lol
• probably running the app should come before running the tests.... or at least installing the dependencies
• postgres credentials

for windows:

• we had to do some bullshit involving visual studio c++ build tools and following the instructions here: https://github.com/riverrun/comeonin/wiki/Requirements#windows
• add elixir and erl to PATH
• learn how .env works in windows?

$ createdb 'fanimaid_butler_test'                                                                                                                                                       
$ psql -d fanimaid_butler_test
fanimaid_butler_test=# CREATE USER postgres SUPERUSER;
fanimaid_butler_test=# ALTER USER postgres WITH CREATEDB;

on the reservations list:

• a party over 35min should display orange(? I think)
• a party over 45min should display in red(? I think)

FanimaidButler is a pretty long module name. Can we just rename it to Butler?

All tables/lists should have alternating row color so it's easier to read

This can be achieved with the css rules :nth-child(odd) and :nth-child(even)

there are a bunch of placeholder moduledocs everywhere now

they look like:

  @moduledoc """
  Placeholder moduledoc
  """

fill them out with descriptive text!

No need to knock all of these out in a single PR, please open a PR for however many you can realistically get done quickly to allow multiple people to work on these asynchronously! 🌸

To Do:

• fanimaid_butler.ex (this file may be renamed to simply butler.ex after completion of #24 )
• error_handler.ex
• guardian.ex
• pipeline.ex
• user.ex
• factory.ex
• controller_test_helper.ex
• room_channel.ex
• maid.ex
• party.ex
• reservation.ex
• table.ex

Let's turn all the .html.eex files into react components so we can turn the front end into a SPA

blocks #21

When picking up these tickets please follow this process:

1. Pick any item off the to do list below and double check in the thread below that no one is already working on it
2. Leave a comment saying which component you're working on
3. Feel free to look at existing react components in the codebase and use them as a guide for how the new components should be written
4. Make a PR following the usual contribution guidelines

Please include component tests in your PR

To do

• app.html.eex (may not be immediately portable, it's enough to just clone this page's html elements into a react component which isn't yet surfaced)
• pagination.html.eex
• /maid/edit.html.eex (depends on /maid/form.html.eex)
• /maid/form.html.eex
• /maid/index.html.eex
• /maid/new.html.eex (depends on /maid/form.html.eex)
• /maid/search.html.eex
• /maid/show.html.eex
• /page/index.html.eex
• /party/clear.html.eex (only one of the clear.html.eex files is actually used, we need to check which one)
• /party/edit.html.eex (depends on /party/form.html.eex)
• /party/form.html.eex
• /party/index.html.eex
• /party/new.html.eex (depends on /party/form.html.eex)
• /party/show.html.eex (may not be necessary)
• /reservation/clear.html.eex (only one of the clear.html.eex files is actually used, we need to check which one)
• /reservation/edit.html.eex (depends on /reservation/form.html.eex)
• /reservation/form.html.eex
• /reservation/index.html.eex
• /reservation/new.html.eex
• /reservation/seat.html.eex (may be able to reuse component from /reservation/new.html.eex or /reservation/edit.html.eex)
• /reservation/show.html.eex
• /switch_tables/index.html.eex
• /table/edit.html.eex (depends on /table/form.html.eex)
• /table/form.html.eex
• /table/index.html.eex
• /table/new.html.eex (depends on /table/form.html.eex)
• /table/show.html.eex
• /waitlist/edit.html.eex
• /waitlist/index.html.eex
• /waitlist/new.html.eex

this feature needs elaboration and isn't ready for development

We should have an indication of which maids have been clocked in for longer than one shift, so we know who to give a break.

when running mix credo several refactoring and design warnings are given.

we should address these warnings. Once mix credo is entirely green, we can remove --ignore design,refactor from the .circleci/config.yml

As a line lead on the Tables index page the "Book" button next to each table should be given the .not-suggested class if the party seated there has requested to be seated alone.

The confirmation page which displays after a party is seated (at /reservations/:id) should include the name on the party as one of the displayed fields.

Although we recently fixed a ton of warnings and ran a bunch of updates we still have a couple of vulnerabilities in our dependencies. Let's investigate them and update accordingly!

Spin up a new react app for patron facing app

As a patron
When I visit the app
I see an FAQ page and a button to book a reservation

As a patron
When I click the book reservation button
I see a list of available time slots for that day

Implementation details:
Timeslots are fetched from the Butler API at /timeslots

As a patron
When I select a time slot
I see a form to finalize my reservation
I have 2 minutes to confirm my reservation
The selected time slot is "locked" (can't be booked by someone else) within those 2 minutes
The selected time slot is "unlocked" if the reservation is not confirmed within 2 minutes
I am redirected to the home page if the reservation is not confirmed within 2 minutes

The form fields are:
Name (required)
Party size (required, Max 4, min 1)
Email (required)
Phone number (optional) (hint text: "Provide your phone number if you would like to receive text message updates about your reservation.)
Notes (optional)

As a patron
When I confirm my reservation
I am added to the Butler wait-list

As an admin
I can see the reservation time on waitlisted parties
I can sort the waitlist by reservation time

As a patron
When I confirm my reservation
I receive a text or email confirmation
When 20 minutes from my reservation
I receive a text or email reminder to arrive 10 minutes before my reservation time

As a patron
When I follow a link in the confirmation message
I can update or cancel my reservation

As an admin with no technical experience (not a hacker maid)
I can update the text on the FAQ page

As an admin with no technical experience (not a hacker maid)
I can manage the reservation time slots

let's run npm audit and fix the vulnerabilities ( *• ̀ω•́ )b

Butler deserves a cute bishounen mascot character. Can we commission someone to draw one for us? ✨

with new contributors rolling on we should add templates to the repo so that new contributors are writing valuable pr/issue messages

Describe the bug

when checking in/out maids, x button to clear should clear the prompt only, not refresh page

To Reproduce

Steps to reproduce the behavior:

1. Go to the maid check in/out page
2. Search for any maid
3. Click on the x button to clear the search
4. the page is refreshed

Expected behavior

We wish to clear the search results on the front end rather than triggering a page refresh.

Additional context

This bug might be fixed for free when we migrate to a react front end.

Add shinkansen option for waitlist parties during waitlist check-in

If self-waitlist #13 is already implemented when this is picked up, shinkansen option should only be exposed to admin view, not for patrons checking themselves in.

We should be able to import and export maids from csv and export cafe data to csv

Currently when searching for a maid by maid name it only supports exact matches (for example, searching "Chii" will return the maid "Chii" but "Chi" returns nothing.

We want to add support for partial search, so that "Chi" would return both "Chii" and "Chihiro".

As much flexibility as possible would be nice, for example allowing matching for the middle of the string, such that "yo" could match: "Sayori" and "Yohane", but we should make sure results are returned in a sensible order (so that a maid named exactly "Yo" would be returned first, etc)

This is somewhat up to the developer, and may be discussed in your PR review.

as staff I can indicate that a maid is volunteering but unable to table so that she will get credit for her hours volunteering even if she is at Fanimaid☆LIVE, bussing tables, working at the merch table, or otherwise unable to take tables, or for staff members on break
As staff When I check volunteers in/out, I want to see that it aligns with their shift times, so that I can validate their volunteer hours

/maids:

• checked in since is in AM/PM time format in PST timezone
• checked in maids have an additional break button next to the check out button
• putting a maid on break keeps them checked in, but removes them from the available maids list in table seating
• clicking on a row reveals shift details. Only one should be expanded at a time.
• Show directs to /maids/:maid_id for each maid

/maids/:maid_id:

• maid profile includes shift info and removes old/broken fields

/maids/:maid_id/edit:

• should include a field to add/modify shift data for each maid

As a line lead on the Tables index page I can scroll through multiple pages of the waitlist
so that I can seat parties which are newly added to the waitlist.

should be able to add notes when scanning out a party, not just entering.

this feature needs elaboration and is not ready for development

with new contributors rolling on, we should add a precommit hook to make sure linters are being run :)

as staff I can see a list of all check in/check out actions on an individual maid in the cafe. This data can be used to synthesize the total hours in cafe so that butler can be used as the sole source of truth for tracking volunteer hours

An audit log which lists all the actions taken in the app in chronological order.

Not sure what the priority is on this or who requested it exactly 🤔

Make list of maids orderable in ascending or descending order.

(nice to have) make list of maids orderable by time checked in or time modified

The readme could use some 💓, let's update it with the new mix tasks and generally make it more presentable.

allow maids to sign up for their shifts via butler

as an admin I need some way to indicate that a table has been "pushed" (gently asked to leave when their reservation time is nearing an end).

This might look like a button that can be pushed to indicate that they have already been pushed, but this feature needs more thought before it can be actionable.

/tables

• push button next to each party
• clicking the push button displays a "pushed" button (not clickable) to indicate the party has been pushed already

/reservations/:reservation_id/edit

• pushed status is editable when editing a reservation
• push status should only be displayed for seated parties (maybe only if there is a table attached to the reservation?)

this issue requires elaboration/design and is not yet ready for development

as a goshujinsama when I enter the line I receive instructions on how to join the waitlist on my phone (perhaps a QR code and instructions printed on an end of line sign?). I am allowed to enter my name and party size to be added to the waitlist. I can check my reservation to edit or delete it at any time while I am still in line.

as an admin I see average wait time on the waitlist admin page.

questions

• should a goshujinsama be allowed to mark themselves as "seat alone", or should that option be visible only to line maids?
• should a goshujinsama be allowed to add notes to their reservation, or should that option be visible only to line maids?
• should we show them the average wait time, how many parties are ahead of them, how long they have been waiting, etc? Or are those numbers too depressing to surface to them 😂

the tests got quite out of date since the fanime crunch period 😭 Let's update all the existing tests plz!

• maid_controller_test.exs
• page_controller_test.exs
• party_controller_test.exs
• reservation_controller_test.exs
• switch_tables_controller_test.exs
• table_controller_test.exs
• waitlist_controller_test.exs
• maid_test.exs
• party_test.exs
• reservation_test.exs
• table_test.exs

let's run mix deps.update --all to address the vulnerabilities in the codebase!

... if that is a horrible idea then let's just update the vulnerable dependencies in whatever sane manner makes sense ^^;

there has been some confusion and ambiguity over which particular card a party has been assigned to. To make this more clear:

1. replace all instances of "party id" with "card id" on the front end.
   note for the maintainer: updating the documentation around "party id" should also be included as part of merging this issue.
2. Add "card id" column to the table on /tables corresponding to "maids" and "# of goshujinsama"

still need clarification on whether this is allowed

only midori has this power currently ψ(｀∇´)ψ

while we are at it, maybe we should finally put butler on a human readable domain name and create a deployment pipeline including staging and development ^^;

let's set up ci so that tests can run on PRs

We should use jest to test our existing react components 👍
make sure you also update the circleci config to run these tests

Feel free to resolve this issue in two parts:

• install and set up jest with one component fully tested
  add tests for the remaining components:
• tables.jsx
• waitlist.jsx
• waitlistEdit.jsx
• waitlistForm.jsx
• waitlistNew.jsx

as a maid I can generate a check-in or check-out QR code on my phone

as staff I can scan a check-in or check-out QR code to check in a maid without needing to look up her maid name.
as staff I can still check girls in and out manually if they can't generate the QR code for whatever reason

blocked by #20

Let's stop server side rendering each individual page and make the front end into a SPA