path: root/templates/beerpage.jinja2

{% extends "base.html" %}
{% block content %}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
    google.charts.load('current', {packages: ['corechart', 'bar']});
    google.charts.setOnLoadCallback(drawAnnotations);

    function drawAnnotations() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Style');
          data.addColumn('number', 'Degree likeness');

          data.addRows([
        {% for item in style_map %}
             [{v: '{{ item['name'] | replace(')', '') | replace('(','')}}'}, {{ item['score'] }} ],
        {% endfor %}
          ]);

          var options = {
            hAxis: {
              title: 'Style'
            },
            vAxis: {
              title: 'Taste more like'
            },
            tooltip : {
                    trigger: 'none'
                    },
            legend: {position: 'none'}
          };

          var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
          chart.draw(data, options);
    }
    </script>

    <nav class="navbar navbar-dark bg-info mb-3">
      <a class="navbar-brand" href="/">similar.beer</a>
      <form class="form-inline" action="/search" method="post">
        <div class="autocomplete" style="width:300px;">
          <input id="myInput" class="form-control mr-sm-2 typeahead" type="search" name="q" placeholder="Search Beers" aria-label="Search">
        </div>
        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Go</button>
      </form>
      <a href="/random" class="btn btn-secondary my-2 my-sm-0">Random Beer!</a>
    </nav>

    <div id="title" class="text-center">
        <h2>{{ beer_data.brewer if beer_data != None else 'DELICOUS BREWER' }}</h2>
        <h2>{{ beer_data.name if beer_data != None else 'DELICOUS BEER' }}</h2>
    </div>
    <div id="stats">
        <table class="table">
            <tr>
                <th scope="col">Parent Style</th>
                <th scope="col">Specific Style</th>
                <th scope="col">Alcohol by Volume </th>
            </tr>
            <tr>
                <td>{{ beer_data.parent_style if beer_data != None else 'ASS BEER' }}</td>
                <td>{{ beer_data.base_style if beer_data != None else 'TURBO ASS BEER' }}</td>
                <td>{{ beer_data.abv if beer_data != None else 'BETWEEN 0 and 100' }} (drinks like {{beer_data.drinks_like|round(2)}})</td>
            </tr>
        </table>
    </div>
    <div id="chart_div"></div>

    <h5>Beers like {{ beer_data.name }}</h5>
    <table class="table">
      <tr>
        <th>Beer</th> 
        <th>Style</th>
        <th>ABV</th>
      </tr>
      {% for similar_beer in similar_beers %}
      <tr>
        <td><a href="{{ similar_beer.link }}" >{{ similar_beer.name }} ({{ similar_beer.brewer }})</a></td>
        <td>{{similar_beer.base_style}}</td>
        <td>{{similar_beer.abv}}</td>
      </tr>
      {% endfor %}
    </table>

    <div class="row">
      <div class="col">
        <form action="" method="post" class="alert alert-secondary form-inline">
          Show me beers which are
          <select name="direction" class="form-control">
              <option {% if direction == '3' %}selected{% endif %} value="3">Much more</option>
              <option {% if direction == '2' %}selected{% endif %} value="2">More</option>
              <option {% if direction == '1' or not direction%}selected{% endif %} value="1">Slightly more</option>
          </select>
          <select name="attr" class="form-control">
            {% for a in attrs %}
              <option {% if a == attr %}selected{% endif %} value="{{ a }}">{{ a }}</option>
            {% endfor %}
          </select>
          <input type="submit" value="Go" class="btn btn-outline-primary">
        </form>
      </div>
      <div class="col">
        <form action="" method="post" class="alert alert-secondary form-inline">
          Show me similar beers in the style of
          <select name="style" class="form-control">
            <option>American Adjunct Lager</option>
            <option>American Amber / Red Ale</option>
            <option>American Amber / Red Lager</option>
            <option>American Barleywine</option>
            <option>American Black Ale</option>
            <option>American Blonde Ale</option>
            <option>American Brett</option>
            <option>American Brown Ale</option>
            <option>American Brut IPA</option>
            <option>American Cream Ale</option>
            <option>American Dark Wheat Ale</option>
            <option>American IPA</option>
            <option>American Imperial IPA</option>
            <option>American Imperial Pilsner</option>
            <option>American Imperial Porter</option>
            <option>American Imperial Red Ale</option>
            <option>American Imperial Stout</option>
            <option>American Lager</option>
            <option>American Light Lager</option>
            <option>American Malt Liquor</option>
            <option>American Pale Ale (APA)</option>
            <option>American Pale Wheat Ale</option>
            <option>American Porter</option>
            <option>American Stout</option>
            <option>American Strong Ale</option>
            <option>American Wheatwine Ale</option>
            <option>American Wild Ale</option>
            <option>Baltic Porter</option>
            <option>Belgian Blonde Ale </option>
            <option>Belgian Dark Ale</option>
            <option>Belgian Dubbel</option>
            <option>Belgian Faro</option>
            <option>Belgian Fruit Lambic</option>
            <option>Belgian Gueuze</option>
            <option>Belgian IPA</option>
            <option>Belgian Lambic</option>
            <option>Belgian Pale Ale</option>
            <option>Belgian Quadrupel (Quad)</option>
            <option>Belgian Saison</option>
            <option>Belgian Strong Dark Ale</option>
            <option>Belgian Strong Pale Ale</option>
            <option>Belgian Tripel</option>
            <option>Belgian Witbier</option>
            <option>Berliner Weisse</option>
            <option>Bière de Champagne / Bière Brut</option>
            <option>Bohemian Pilsener</option>
            <option>Braggot</option>
            <option>British Barleywine</option>
            <option>California Common / Steam Beer</option>
            <option>Chile Beer</option>
            <option>English Bitter</option>
            <option>English Brown Ale</option>
            <option>English Dark Mild Ale</option>
            <option>English Extra Special / Strong Bitter (ESB)</option>
            <option>English India Pale Ale (IPA)</option>
            <option>English Oatmeal Stout</option>
            <option>English Old Ale</option>
            <option>English Pale Ale</option>
            <option>English Pale Mild Ale</option>
            <option>English Porter</option>
            <option>English Stout</option>
            <option>English Strong Ale</option>
            <option>English Sweet / Milk Stout</option>
            <option>European Dark Lager</option>
            <option>European Export / Dortmunder</option>
            <option>European Pale Lager</option>
            <option>European Strong Lager</option>
            <option>Finnish Sahti</option>
            <option>Flanders Oud Bruin</option>
            <option>Flanders Red Ale</option>
            <option>Foreign / Export Stout</option>
            <option>French Bière de Garde</option>
            <option>Fruit and Field Beer</option>
            <option>German Altbier</option>
            <option>German Bock</option>
            <option>German Doppelbock</option>
            <option>German Dunkelweizen</option>
            <option>German Eisbock</option>
            <option>German Hefeweizen</option>
            <option>German Helles</option>
            <option>German Kellerbier / Zwickelbier</option>
            <option>German Kristalweizen</option>
            <option>German Kölsch</option>
            <option>German Maibock</option>
            <option>German Märzen / Oktoberfest</option>
            <option>German Pilsner</option>
            <option>German Rauchbier</option>
            <option>German Roggenbier</option>
            <option>German Schwarzbier</option>
            <option>German Weizenbock</option>
            <option>Herb and Spice Beer</option>
            <option>Irish Dry Stout</option>
            <option>Irish Red Ale</option>
            <option>Japanese Happoshu</option>
            <option>Japanese Rice Lager</option>
            <option>Leipzig Gose</option>
            <option>Low Alcohol Beer</option>
            <option>Munich Dunkel Lager</option>
            <option>New England IPA</option>
            <option>Pumpkin Beer</option>
            <option>Robust Porter </option>
            <option>Russian Imperial Stout</option>
            <option>Russian Kvass</option>
            <option>Rye Beer</option>
            <option>Scotch Ale / Wee Heavy</option>
            <option>Scottish Ale</option>
            <option>Scottish Gruit / Ancient Herbed Ale</option>
            <option>Smoke Beer</option>
            <option>Smoke Porter</option>
            <option>Vienna Lager</option>
            <option>Winter Warmer</option>
          </select>
          <input type="submit" value="Go" class="btn btn-outline-primary">
        </form>
      </div>
    </div>

    {% if attr_beers %}
    <h5>Beers like {{ beer_data.name }} but {{ direction }} {{ attr }}</h5>
    <table class="table">
      <tr>
        <th>Beer</th>
        <th>Style</th>
        <th>ABV</th>
      </tr>
      {% for attr_beer in attr_beers %}
      <tr>
        <td><a href="{{ attr_beer.link }}" >{{ attr_beer.brewer }} - {{ attr_beer.name }}</a></td>
        <td>{{attr_beer.base_style}}</td>
        <td>{{attr_beer.abv}}</td>
      </tr>
      {% endfor %}
    </table>
    {% endif %}

    {% if style_beers %}
    <h5>Beers like {{ beer_data.name }} but in the {{ style }} style</h5>
    <table class="table">
      <tr>
        <th>Beer</th>
        <th>Style</th>
        <th>ABV</th>
      </tr>
      {% for style_beer in style_beers %}
      <tr>
        <td><a href="{{ style_beer.link }}" > {{ style_beer.name }} ({{ style_beer.brewer }})</a></td>
        <td>{{style_beer.base_style}}</td>
        <td>{{style_beer.abv}}</td>
      </tr>
      {% endfor %}
    </table>
    {% endif %}

<script>
(function() {

  fetch('/all_beers.json')
    .then(res => res.json())
    .then(names => {
      autocomplete(document.getElementById("myInput"), names);
    })

  function autocomplete(inp, arr) {
  /*the autocomplete function takes two arguments,
  the text field element and an array of possible autocompleted values:*/
  var currentFocus;
  /*execute a function when someone writes in the text field:*/
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      /*close any already open lists of autocompleted values*/
      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      /*create a DIV element that will contain the items (values):*/
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      /*append the DIV element as a child of the autocomplete container:*/
      this.parentNode.appendChild(a);
      /*for each item in the array...*/
      for (i = 0; i < arr.length; i++) {
        /*check if the item starts with the same letters as the text field value:*/
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          /*create a DIV element for each matching element:*/
          b = document.createElement("DIV");
          /*make the matching letters bold:*/
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          /*insert a input field that will hold the current array item's value:*/
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          /*execute a function when someone clicks on the item value (DIV element):*/
              b.addEventListener("click", function(e) {
              /*insert the value for the autocomplete text field:*/
              inp.value = this.getElementsByTagName("input")[0].value;
              /*close the list of autocompleted values,
              (or any other open lists of autocompleted values:*/
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });
  /*execute a function presses a key on the keyboard:*/
  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        /*If the arrow DOWN key is pressed,
        increase the currentFocus variable:*/
        currentFocus++;
        /*and and make the current item more visible:*/
        addActive(x);
      } else if (e.keyCode == 38) { //up
        /*If the arrow UP key is pressed,
        decrease the currentFocus variable:*/
        currentFocus--;
        /*and and make the current item more visible:*/
        addActive(x);
      } else if (e.keyCode == 13) {
        /*If the ENTER key is pressed, prevent the form from being submitted,*/
        e.preventDefault();
        if (currentFocus > -1) {
          /*and simulate a click on the "active" item:*/
          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    /*a function to classify an item as "active":*/
    if (!x) return false;
    /*start by removing the "active" class on all items:*/
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    /*add class "autocomplete-active":*/
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    /*a function to remove the "active" class from all autocomplete items:*/
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  function closeAllLists(elmnt) {
    /*close all autocomplete lists in the document,
    except the one passed as an argument:*/
    var x = document.getElementsByClassName("autocomplete-items");
    for (var i = 0; i < x.length; i++) {
      if (elmnt != x[i] && elmnt != inp) {
      x[i].parentNode.removeChild(x[i]);
    }
  }
}
/*execute a function when someone clicks in the document:*/
document.addEventListener("click", function (e) {
    closeAllLists(e.target);
});
}


})()
  </script>
{% endblock %}