Drinkbot UI (Angular.js)

by Andrew Maxwell

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
  <div class="container">

    <div ng-repeat="drink in drinks" title="{{ drink }}">
      <h3>{{ drink.displayName }}</h3>
      <ul>
        <li ng-repeat="(ing, shots) in drink.recipe">
          {{ shots }} shots {{ ing }}
        </li>
      </ul>
      <button class="btn btn-primary" ng-click="order(drink)">Order</button>
    </div>

  </div>
</body>

JavaScript

// define a module for this application, call it app 
var app = angular.module('app', []);

// define a controller in the app
app.controller('ctrl', ($scope, $http) => {

  var base = 'http://8ff1fb42.ngrok.io/';

  // to initialize, request the config from the server with an HTTP GET request (Angular's $http makes this simple)
  $http.get(base + 'config')
    .then(response => $scope.drinks = response.data.drinks)
    .catch(err => alert(err));

  // this function is called when you press an Order button
  $scope.order = (drink) => {

    // send an HTTP POST request to the server with the drink id
    $http.post(base + 'request/' + drink.id)
      .then(response => alert(response.data))
      .catch(err => alert(err));
  };

});