beverages.js

When people know you like teas or good coffees, it quickly become a go-to gift idea and you can end up with quite a collection. So, when you propose a hot beverage to your guests, the "Sure! What you got?" answer can become problematic.

This utility aims at solving this problem. Store all your beverages in a Google Drive sheet and show the list to your guests. They can use filters (or even full-text search) to show only the beverages they are interested in, and if there's is still too much choice, let chance decide.

When they're done, you only have to check the pick summary to know how many cups you must prepare in each temperature and how long to brew each.

The list is designed to be responsive and work on mobile devices, so that you can pick your tablet, bring the menu up and pass it among your guests.

But... "beverages"?

True, the name is a bit broad, as this was more specifically designed for hot beverages, especially teas. It should however not require that much work to adapt it to work fine with beers or even wines, replacing the basis with the wine color or beer type, the brand with the brewery, time with the type of dish this goes with…

You are welcome to fork and make it your own.

Use it

Jet start

Easy enough:

1. Prepare your Google Sheet:

• Go to the template and log into your Google account (don't have one? Sorry, I can't help you there). It has some comments if you hover over a header to know how to fill the data. Don't change the header names as those are required to parse the data into a nice-looking menu.
• Click File → Make a copy. Save to your own Google Drive.
• Fill it out with your data.

2. Make your data available to the plugin:

• Publish your Google Sheet (File &rightarrow Publish to the web...; Publish).
• Copy the ID of your sheet in the URL (e.g. 15DoM_Y1uH9zQWAgPxpiSegYGlP7gnoelFpxv4d91zJI in https://docs.google.com/spreadsheets/d/15DoM_Y1uH9zQWAgPxpiSegYGlP7gnoelFpxv4d91zJI/edit#gid=0).

3. Prepare your page to run the script:

• Include the plugin stylesheet (or write your own):

<link href="dist/beverages.css" rel="stylesheet"/>

• Include the plugin JavaScript (in the language you prefer; English and French available):

<script src="dist/beverages.fr.js" type="text/javascript"></script>

• Call it up and pass the ID from you Google Sheet:

beverages('15DoM_Y1uH9zQWAgPxpiSegYGlP7gnoelFpxv4d91zJI');

Options

You can pass options to the plugin if need be:

beverages({
    gSheetId: '15DoM_Y1uH9zQWAgPxpiSegYGlP7gnoelFpxv4d91zJI',
    filters: {
        basis: ['teas'],
        autoTime: true,
        times: ['unknown']
    }
});

Option	Mandatory	Format	Description
gSheetId	Yes	String	The ID of the Google Sheet containing your data. This ID can be found in the URL to the published sheet (e.g. 15DoM_Y1uH9zQWAgPxpiSegYGlP7gnoelFpxv4d91zJI in https://docs.google.com/spreadsheets/d/15DoM_Y1uH9zQWAgPxpiSegYGlP7gnoelFpxv4d91zJI/pubhtml)
celsius	No	boolean	Set this to true if you want to use Celsius. Fahrenheit will be used otherwise.
filters	No	Object	The filters which are active by default. All filters are active if this option is not supplied.
filters.teas	No	Array	The tea basis filters to be activated by default. The possible values are: tea-black tea-green tea-oolong tea-white tea-rooibos teas (special value to activate all of the above) infusion coffee cocoa If several filters are activated, teas with at least one valid condition will show (it's an OR, not an AND). If this property is not supplied, all filters will be active by default.
filters.times	No	Array	The times filters to be activated by default. The possible values are: morning: show teas advised for morning; daytime: show teas advised for daytime; evening: show teas advised for evening; unknown: show teas with no advice. If several filters are activated, teas with at least one valid condition will show (it's an OR, not an AND). If neither this property nor autoTime are supplied, all filters will be active by default. If autoTime is active, you may want to enable unknown to include teas with no time recommendation.
filters.autoTime	No	boolean	If true, the times filters will automatically activate depending on the time of day. This option will not deactivate any filter set using the times property of filters.

Compatibility

This plugin was written to be compatible with:

• the latest two versions of each major browsers;
• Internet Explorer from version 9;
• the latest ESR version of Firefox.

Since this was primarily developed for my own use and I have up-to-date browsers, I did not however test the backwards compatibility. Please let me know if you notice any bug.

Contribute/fork

This project was built using yarn, Gulp and Webpack. A Gulp task (serve) has been included to run it as a local server.

After cloning this project, supposing you already installed yarn and Gulp, you only need opening a terminal to the root of your project and run the following command lines:

yarn install  # install all dependencies for the project
gulp serve    # run the local webserver-dev

The local webserver will be accessible at http://localhost:8080/. The corresponding source pages are dev/index.html and dev/offline.html.

Customizing the stylesheet

The easiest way is to create your own style is to clone the project. You may be able to get the appearance you wish for simply by updating the _variables.scss file. If not, update the style as you wish.

Known issues

Issue #22: This plugin is built upon Bootstrap v4-alpha. The styles imported from it leak outside of the target container and may wreak havoc your own styling. To sum up: this plugin is best used on its own or with your own custom stylesheet.

This is to be fixed however as we work to design our own style, totally independent from Bootstrap.