Best possible data for vaccinatethestates

[simonw]

(Turning this work into an issue thread to unblock myself.)

The goal here is for vaccinatethestates to get the most useful possible versions of our data for vaccine and appointment availability. This work has been scattered across multiple issues including #504 and #568 and #475.

[simonw]

Here's a new tool which shows all of our API representations for any given location, plus the source locations and most recent report - essentially all of the possible inputs and outputs for a location: https://vial-staging.calltheshots.us/location/ldpwd

[simonw]

The most useful code file to guide the next steps here is https://github.com/CAVaccineInventory/vaccinatethestates/blob/cc5737aa2f906514c298a102747c10e2b107f191/webpack/templates/siteCard.handlebars - which shows exactly which fields from the mapbox export are being used to power pages on www.vaccinatethestates.com

[simonw]

Particularly relevant snippets:

        {{#if availabilityKnown}}
            <div class="flex flex-row text-xs {{#if vaccinesKnown}}mb-2{{/if}}">
                {{#if appointmentsAndWalkins}}
                    <span class="rounded-full bg-gray-200 px-2 py-1 text-black whitespace-nowrap flex me-2">{{t "walkin_accepted" }}</span>
                    <span class="rounded-full bg-gray-200 px-2 py-1 text-black whitespace-nowrap flex">{{t "appointments_accepted" }}</span>
                {{else}}
                    {{#if walkins}}
                        <span class="rounded-full bg-gray-200 px-2 py-1 text-black whitespace-nowrap flex me-2">{{t "walkin_only" }}</span>
                    {{/if}}
                    {{#if appointments}}
                        <span class="rounded-full bg-gray-200 px-2 py-1 text-black whitespace-nowrap flex">{{t "appointments_required" }}</span>
                    {{/if}}
                {{/if}}
            </div>
        {{/if}}

        {{#if vaccinesKnown}}
            <div class="flex flex-row flex-wrap text-sm">
                {{> offersVaccine offersVaccine=offersModerna name=(t "moderna")}}
                {{> offersVaccine offersVaccine=offersPfizer name=(t "pfizer")}}
                {{> offersVaccine offersVaccine=offersJJ name=(t "jj") last=true}}
            </div>
        {{/if}}

And

        {{#if appointmentDetails}}
            <div class="grid grid-cols-1 px-4 py-2">
                <h5 class="font-bold mb-1">{{t "appointment_details"}}</h5>
                <div class="text-sm break-words" dir="ltr">
                    {{{appointmentDetails}}}
                </div>
            </div>
        {{/if}}

These are populated from the Mapbox exported data by https://github.com/CAVaccineInventory/vaccinatethestates/blob/b93584af6725fd4ca1845d336d2bcc9a5f4cfdb4/webpack/site.js#L123-L143

  availability() {
    const appointments = !!this.properties["accepts_appointments"];
    const walkins = !!this.properties["accepts_walkins"];
    return {
      availabilityKnown: appointments || walkins,
      appointmentsAndWalkins: appointments && walkins,
      appointments,
      walkins,
    };
  }
  offeredVaccines() {
    const offersModerna = !!this.properties["vaccine_moderna"];
    const offersPfizer = !!this.properties["vaccine_pfizer"];
    const offersJJ = !!this.properties["vaccine_jj"];
    return {
      vaccinesKnown: offersModerna || offersPfizer || offersJJ,
      offersModerna,
      offersPfizer,
      offersJJ,
    };
  }

[simonw]

So the crucial details we need to get right are:

• accepts_appointments
• accepts_walkins
• vaccine_moderna
• vaccine_pfizer
• vaccine_jj

[simonw]

I'm going to populate the fields on Location in the database first.