Best possible data for vaccinatethestates
simonw opened this issue · comments
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
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
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,
};
}
So the crucial details we need to get right are:
accepts_appointments
accepts_walkins
vaccine_moderna
vaccine_pfizer
vaccine_jj
I'm going to populate the fields on Location
in the database first.