JSFiddle - React, Tailwind, and code Playground

by Luiza CICONE

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="content" ng-app ng-controller="CellarCtrl">
  <h2><i class="fa fa-glass"></i> Cellar explorer</h2>

  <div>
    <p>Select an existing cellar (<span ng-bind="cellars.length"></span> available):</p>
    <select class="form-control" ng-options="cellar as cellar.name for cellar in cellars track by cellar.id" ng-model="selected">

    </select>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Cellar name" ng-model="cellarName" />
      <span class="input-group-btn">
                <button class="btn btn-default" type="button" ng-click="createCellar()"><i class="fa fa-plus"></i> Add</button>
            </span>

    </div>
  </div>
  <div>
    <p>Content (<span ng-bind="bottles.length"></span> bottle(s) available)</p>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Bottle name, price" ng-model="bottleNameAndPrice" />
      <span class="input-group-btn">
                <button class="btn btn-default" type="button" ng-click="createBottle()"><i class="fa fa-plus"></i> Add</button>
            </span>

    </div>
    <p ng-if="bottles.length < 1">Cellar is empty !</p>
    <div>
      <h4 ng-repeat="bottle in bottles">{{bottle.name}} - {{bottle.price}}$
                <button type="button" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i>  Delete</button>
            </h4>
    </div>
  </div>
</div>

CSS

h2 {
  margin-bottom: 30px;
}

.content {
  padding: 20px;
}

.input-group {}

.form-control {
  margin-bottom: 10px;
}

p {
  margin-top: 10px;
  margin-bottom: 10px;
}

JavaScript

var myApp = angular.module('app', []);

myApp.controller('CellarCtrl', function($scope, $http) {
  var scope = $scope;

  $scope.cellars = [];

  reloadCellars();

  scope.$watch('selected', function(selectedCellar) {
    if (selectedCellar === null || selectedCellar === undefined) {
      return;
    }
    reloadBottles(selectedCellar);

  });

  function reloadCellars(selectedId) {
    $http.get('https://cellars.herokuapp.com/api/cellars').then(function(response) {
      $scope.cellars = response.data;
      if (selectedId === null || selectedId === undefined) {
        return;
      }
      $scope.selected = $scope.cellars.find(function(item) {
        return item.id === selectedId;
      })
    });
  }

  function reloadBottles(selectedCellar) {
    $http.get('https://cellars.herokuapp.com/api/cellars/' + selectedCellar.id).then(function(response) {
      $scope.bottles = response.data.bottles;
    });
  }

  $scope.createCellar = function() {
    $http.post('https://cellars.herokuapp.com/api/cellars', {
      name: $scope.cellarName
    }).then(function(response) {
      reloadCellars(response.data.id);
    })
  }
  $scope.createBottle = function() {
    var bottle = $scope.bottleNameAndPrice.split(',');
    $http.post('https://cellars.herokuapp.com/api/cellars/' + $scope.selected.id + '/bottles', {
      name: bottle[0],
      price: bottle[1]
    }).then(function(response) {
      console.log(response.data);
      reloadBottles($scope.selected);

    })
  }
});