<!DOCTYPE html>
<html ng-app="drinks-app">
<head>
<link data-require="bootstrap-css@*" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<script data-require="angular.js@1.0.7" data-semver="1.0.7" src="http://code.angularjs.org/1.0.7/angular.min.js"></script>
<script data-require="jquery@*" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script data-require="bootstrap@2.3.2" data-semver="2.3.2" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script data-require="ui-bootstrap@0.3.0" data-semver="0.3.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Drinks Demo App</h1>
<ng-view></ng-view>
</body>
</html>
// Code goes here
'use strict';
var app = angular.module('drinks-app', ['app.controllers', 'app.services', 'ui.bootstrap']);
//Setting up the app
app.config([ '$routeProvider', function( $routeProvider ) {
// routes
$routeProvider.
when('/', {
templateUrl: 'drinks_list.html',
controller: 'MainCtrl'
}).
when('/:drinkid', {
templateUrl: 'drink_editor.html',
controller: 'MainCtrl'}).
otherwise({
redirectTo: '/drinks',
templateUrl: 'drinks_list.html',
controller: 'MainCtrl'
});
}]);
//CONTROLLERS
var controllers = angular.module('app.controllers',[]);
controllers.controller('MainCtrl', function( $scope, $location, $routeParams, Drink) {
if ($routeParams.drinkid) {
// get the detail info
if ($routeParams.drinkid == 0) {
$scope.pageTitle = "Add Drink";
$scope.drink = new Drink();
$scope.ingredient_new = [];
} else {
$scope.pageTitle = "Edit Drink";
Drink.get({ drinkid: $routeParams.drinkid }).then(function (data) {
$scope.drink = data;
});
}
// all three functions just cancel because can't do saves.
$scope.cancel = function() {
$location.path('/');
}
} else {
// get the list info
$scope.drinks = Drink.list();
console.log($scope.drinks);
$scope.getDrink = function( drink ) {
var newRoute = "/" + drink.id;
$location.path( newRoute );
};
}
});
//SERVICES
var services = angular.module('app.services', [])
services.factory( 'Drink', function($http) {
var Drink = function(data) { angular.extend(this, data); };
Drink.get = function(drink) {
return $http.get('drink.json').then(function(response) { return response.data; });
};
Drink.list = function() {
return $http.get('drinks.json').then(function(response, status) { return response.data; })
};
return Drink;
});
/* Styles go here */
[
{
"description": "A refreshing cocktail of Vodka, peach schnapps, cranberry and orange juice. Can be served over ice as a drink or strained into a shot or martini glass.",
"image": "sexonthebeach.jpg",
"ingredients": [
{
"amount": "2/3 oz.",
"ingredient": "Peach schnapps"
},
{
"amount": "1 1/3 oz.",
"ingredient": "Vodka"
},
{
"amount": "1 1/3 oz.",
"ingredient": "Cranberry juice"
},
{
"amount": "1 1/3 oz.",
"ingredient": "Orange juice"
}
],
"instructions": "Combine ingredients in a cocktail shaker with ice. Shake and strain into a highball glass filled with ice.",
"name": "Sex on the Beach",
"id": "e9ac9d445adc98c9"
},
{
"description": "Similar to a boilermaker: you drop a shot glass full of Irish whiskey and Irish cream into a glass of stout beer and drink it all at once.",
"image": "irishcarbomb.jpg",
"ingredients": [
{
"amount": "1/2 oz.",
"ingredient": "Bailey's Irish Cream"
},
{
"amount": "1/2 pint",
"ingredient": "Guinness Stout"
},
{
"amount": "1/2 oz.",
"ingredient": "Jameson Irish whiskey"
}
],
"instructions": "Pour half a pint of chilled Guinness into a beer mug and let it settle. Take a shot glass filled with 1/2 oz. of Irish whiskey on the bottom and 1/2 oz. of Irish cream on top. Drop the shot glass into the Guinness and chug.",
"name": "Irish Car Bomb",
"id": "9119bdc498c06913"
},
{
"description": "Open the liquor cabinet and follow these simple instructions for an authentic Long Island iced tea. Garnish with a lemon slice and take a sip!",
"image": "longislandicetea.jpg",
"ingredients": [
{
"amount": "1 part",
"ingredient": "Triple Sec"
},
{
"amount": "1 part",
"ingredient": "Gin"
},
{
"amount": "1 part",
"ingredient": "Rum, white"
},
{
"amount": "2 parts",
"ingredient": "Simple syrup"
},
{
"amount": "1 part",
"ingredient": "Tequila, white"
},
{
"amount": "1 part",
"ingredient": "Vodka"
},
{
"amount": "1 part",
"ingredient": "Cola"
},
{
"amount": "2 parts",
"ingredient": "Lemon juice"
}
],
"instructions": "Pour everything into a collins glass, splashing cola on tthe top, and stir gently. Garnish with a lemon spiral and a straw.",
"name": "Long Island Ice Tea",
"id": "552ce0674162e890"
},
{
"description": "They say an apple a day . . . so why not for recipes? This Washington Apple Shot is a little sweet, a little tart — but always smooth and a definite crowd pleaser.",
"image": "washingtonapple.jpg",
"ingredients": [
{
"amount": "2 oz.",
"ingredient": "Canadian whiskey"
},
{
"amount": "2 oz.",
"ingredient": "Sour Apple Pucker"
},
{
"amount": "4 oz.",
"ingredient": "Apple-cranberry juice"
}
],
"instructions": "Mix apple pucker and Crown Royal and fill with Apple-cranberry juice. Mix well serve with ice.",
"name": "Washington Apple",
"id": "229509c1bd784842"
},
{
"description": "This citrusy shooter is made with vodka, triple sec and lime juice.",
"image": "kamikaze.jpg",
"ingredients": [
{
"amount": "1 oz.",
"ingredient": "Triple Sec or Cointreau"
},
{
"amount": "1 oz.",
"ingredient": "Vodka"
},
{
"amount": "1 oz.",
"ingredient": "Lime juice"
},
{
"amount": "1",
"ingredient": "Lime wedge"
}
],
"instructions": "Shake ingredients in a cocktail shaker with ice. Strain into a cocktail glass. Garnish with a lime wedge and a stir stick.",
"name": "Kamikaze",
"id": "3495e74cf9208855"
},
{
"description": "This is an authentic recipe for mojito. I sized the recipe for one serving, but you can adjust it accordingly and make a pitcher full. It's a very refreshing drink for hot summer days.",
"image": "mojito.jpg",
"ingredients": [
{
"amount": "1 1/3 oz.",
"ingredient": "Rum, light"
},
{
"amount": "1 oz.",
"ingredient": "Lime juice"
},
{
"amount": "1 1/2 oz.",
"ingredient": "Simple syrup"
},
{
"amount": "12 pieces",
"ingredient": "Mint leaves"
},
{
"amount": "2",
"ingredient": "Lime wedge"
},
{
"amount": "4 oz.",
"ingredient": "Club soda"
}
],
"instructions": "Gently muddle the lime juice, mint leaves, and sugar syrup together at the bottom of the glass. Fill the glass with ice, then slowly add the rum. Fill with soda and stir gently to bring the leaves upwards into the mixture. Optionally add lime wedges as an addition garnish.",
"name": "Mojito",
"id": "6d9636c6c306f814"
},
{
"description": "A traditional brunch beverage. Enjoy this light delight on Mother's Day, Christmas, or any special occasion.",
"image": "mimosa.jpg",
"ingredients": [
{
"amount": "2 1/2 oz.",
"ingredient": "Champagne"
},
{
"amount": "2 1/2 oz.",
"ingredient": "Orange juice"
}
],
"instructions": "Pour chilled orange juice, and add chilled champagne.",
"name": "Mimosa",
"id": "0e8bf081dd7fdbc6"
},
{
"description": "The cosmopolitan, typically referred to as the 'cosmo,' gained popularity during the 1990s when it was frequently mentioned on the television show Sex and the City. The combination of vodka, orange liqueur, lime juice, and cranberry juice have made it a timeless classic.",
"image": "cosmopolitan.jpg",
"ingredients": [
{
"amount": "1/2 oz.",
"ingredient": "Triple Sec/Cointreau"
},
{
"amount": "1 1/3 oz.",
"ingredient": "Vodka"
},
{
"amount": "1 oz.",
"ingredient": "Cranberry juice"
},
{
"amount": "1",
"ingredient": "Lime wedge"
}
],
"instructions": "Shake ingredients in a cocktail shaker with ice. Strain into a cocktail glass and garnish with a lime slice.",
"name": "Cosmopolitan",
"id": "be926fcea053f827"
},
{
"description": "The Jägerbomb is a bomb shot cocktail that was originally mixed by dropping a shot of Jägermeister into a glass of beer but in recent years has become more popular with Red Bull or other energy drinks.",
"image": "jagerbomb.jpg",
"ingredients": [
{
"amount": "1 shot",
"ingredient": "Jägermeister"
},
{
"amount": "4 oz.",
"ingredient": "Red Bull"
}
],
"instructions": "Pour Red Bull into a regular glass, then drop in a shot glass full of Jagermeister. Shoot the whole thing.",
"name": "Jäger Bomb",
"id": "376a92b790ea09de"
},
{
"description": "An Incredible Hulk, Green Eyed Monster, or Hip and Hen is a green-colored cocktail made by equal parts (2 fl oz each)[1][2][3] of the fruit liqueur Hpnotiq and Hennessy brand cognac poured over ice. It is named for the famously green comic book superhero, the Hulk.",
"image": "incrediblehulk.jpg",
"ingredients": [
{
"amount": "2 oz.",
"ingredient": "Cognac"
},
{
"amount": "2 oz.",
"ingredient": "Hpnotiq"
}
],
"instructions": "Chill both the beverages before use. Add equal parts Hpnotiq and Hennessy cognac. The result is a mean green drink with a fruity but killer bite.",
"name": "Incredible Hulk",
"id": "01b8de83bb826807"
}
]
<table class="table table-bordered table-condensed table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr class="list" ng-repeat="drink in drinks | orderBy:sortingOrder ">
<td nowrap ng-click="getDrink(drink)">{{drink.name}}</td>
<td>{{drink.description}}</td>
</tr>
</tbody>
</table>
<div class="form_content">
<form>
<div class="controlbar">
<h3 class="title">{{pageTitle}}</h3>
<div class="edit_controls">
<input type="submit" id="submit" ng-click="cancel( drinks )" value="Save">
<input type="submit" id="delete" ng-click="cancel( drinks )" value="Delete">
<input type="submit" id="cancel" ng-click="cancel()" value="Cancel">
</div>
</div>
<div>
<label>Name</label><input id="name" type="text" style="width: 300px;" ng-model="drink.name" required />
</div>
<div>
<label>Description</label><textarea style="height: 80px; width: 300px;">{{drink.description}}</textarea>
</div>
<div>
<label>Instructions</label><textarea style="height: 80px; width: 300px;">{{drink.instructions}}</textarea>
</div>
</form>
<form>
<div class="scrollable" id="add_ingredients" style="clear:both;">
<h4>Ingredients</h4>
<table class="table table-bordered table-condensed table-striped table-hover">
<thead>
<tr>
<th>Amount</th>
<th>Ingredient</th>
</tr>
</thead>
<tbody>
<tr class="list" ng-repeat="ingredient in drink.ingredients">
<td><input type="text" id="amount" ng-model="ingredient.amount"></td>
<td><input type="text" id="ingredient" ng-model="ingredient.ingredient"></td>
<td><input type="submit" ng-click="IngredientDelete(ingredient)" value="Delete"></td>
</tr>
<tr class="list">
<td><input type="text" id="amount" ng-model="ingredient_new.amount"></td>
<td><input type="text" id="ingredient" ng-model="ingredient_new.ingredient"></td>
<td rowspan="2"><input type="submit" ng-click="IngredientSave( ingredient_new )" value="Add"></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
</form>
</div>
<pre>{{drink}}</pre>
{
"description": "Open the liquor cabinet and follow these simple instructions for an authentic Long Island iced tea. Garnish with a lemon slice and take a sip!",
"image": "longislandicetea.jpg",
"ingredients": [
{
"amount": "1 part",
"ingredient": "Triple Sec"
},
{
"amount": "1 part",
"ingredient": "Gin"
},
{
"amount": "1 part",
"ingredient": "Rum, white"
},
{
"amount": "2 parts",
"ingredient": "Simple syrup"
},
{
"amount": "1 part",
"ingredient": "Tequila, white"
},
{
"amount": "1 part",
"ingredient": "Vodka"
},
{
"amount": "1 part",
"ingredient": "Cola"
},
{
"amount": "2 parts",
"ingredient": "Lemon juice"
}
],
"instructions": "Pour everything into a collins glass, splashing cola on tthe top, and stir gently. Garnish with a lemon spiral and a straw.",
"name": "Long Island Ice Tea",
"id": "552ce0674162e890"
}