Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d8ee8a3

Browse files
Initial Commit
1 parent 322e74a commit d8ee8a3

File tree

8 files changed

+560
-0
lines changed

8 files changed

+560
-0
lines changed

‎menu-search-REST-API/foundItems.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<h3 ng-if="menu.isEmpty();" style="color: red;">Nothing found</h3>
2+
<div ng-show="menu.found.length">
3+
<h4 style="color: green;">Menu Retreived!</h4>
4+
<div class = "table-responsive" style="display:block;overflow:auto;max-height:248px;">
5+
<table class = "table table-hover table-bordered table-striped" >
6+
<thead>
7+
<tr>
8+
<td style="width:10px;">Short Name</td>
9+
<td style="width:20px;">Name</td>
10+
<td style="width:30px;">Description</td>
11+
<td style="width:15px;">Remove</td>
12+
</tr>
13+
</thead>
14+
<tbody>
15+
<tr ng-repeat="item in menu.found" >
16+
<td style="width:10px;">{{item.short_name}}</td>
17+
<td style="width:20px;">{{item.name}}</td>
18+
<td style="width:30px;">{{item.description}}</td>
19+
<td style="width:15px;"><button ng-click="menu.onRemove({index: $index});">Don't want this one!</button></td>
20+
</tr>
21+
</tbody>
22+
</table>
23+
</div>
24+
</div>

‎menu-search-REST-API/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>Narrow Down Your Menu Choice</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<script src = "scripts/jquery-3.2.1.min.js"></script>
7+
<script src="scripts/angular.min.js"></script>
8+
<script src="scripts/app.js"></script>
9+
10+
<link rel="stylesheet" href="styles/bootstrap.min.css">
11+
<link rel="stylesheet" href="styles/styles.css">
12+
</head>
13+
<body ng-app="NarrowItDownApp">
14+
<div class="container" ng-controller="NarrowItDownController as menu">
15+
<h1>Narrow Down Your Chinese Menu Choice</h1>
16+
<form class="form-inline">
17+
18+
<div class="form-group">
19+
<input type="text" ng-model="menu.itemName" placeholder="search term" class="form-control">
20+
</div>
21+
<div class="form-group narrow-button">
22+
<button class="btn btn-primary" ng-click="menu.getMatchedMenuItems();">Narrow It Down For Me!</button>
23+
</div>
24+
25+
</form>
26+
<!-- Loader implemented -->
27+
<div ng-show="menu.searchButtonText === 'Searching'" class="loader"></div>
28+
<!-- found-items should be implemented as a component -->
29+
<found-items
30+
found="menu.found"
31+
on-remove="menu.removeItem(index)"></found-items>
32+
</div>
33+
34+
</body>
35+
</html>
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div class="loader"></div>

‎menu-search-REST-API/scripts/angular.min.js‎

Lines changed: 332 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎menu-search-REST-API/scripts/app.js‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
(function () {
2+
'use strict';
3+
4+
angular.module('NarrowItDownApp', [])
5+
.controller('NarrowItDownController', NarrowItDownController )
6+
.service('MenuSearchService', MenuSearchService)
7+
.constant('ApiBasePath', "https://davids-restaurant.herokuapp.com")
8+
.directive('foundItems', FoundItems );
9+
10+
function FoundItems() {
11+
var ddo = {
12+
templateUrl: 'foundItems.html',
13+
scope: {
14+
found: '<',
15+
onRemove: '&'
16+
},
17+
18+
controller: MenuSearchDirectiveController,
19+
controllerAs: 'menu',
20+
bindToController: true,
21+
22+
23+
};
24+
return ddo;
25+
}
26+
27+
function MenuSearchDirectiveController() {
28+
var menu = this;
29+
30+
menu.isEmpty = function() {
31+
return menu.found !== undefined && menu.found.length === 0;
32+
};
33+
}
34+
35+
36+
NarrowItDownController.$inject = ['MenuSearchService'];
37+
function NarrowItDownController (MenuSearchService) {
38+
var menu = this;
39+
menu.itemName = "";
40+
menu.searchButtonText = "";
41+
console.log("menu.searchButtonText", menu.searchButtonText);
42+
43+
menu.getMatchedMenuItems = function() {
44+
45+
menu.searchButtonText = "Searching";
46+
console.log("menu.searchButtonText", menu.searchButtonText);
47+
if(menu.itemName === "") {
48+
menu.found =[];
49+
return;
50+
}
51+
52+
var promise= MenuSearchService.getMatchedMenuItems(menu.itemName);
53+
promise.then(function(response){
54+
55+
menu.searchButtonText = "Searched";
56+
console.log("menu.searchButtonText", menu.searchButtonText);
57+
menu.found = response;
58+
})
59+
.catch(function(error) {
60+
console.log("Something went wrong", error);
61+
});
62+
};
63+
64+
menu.removeItem = function(itemIndex) {
65+
MenuSearchService.removeItem(itemIndex);
66+
};
67+
68+
}
69+
70+
71+
MenuSearchService.$inject = ['$http', 'ApiBasePath'];
72+
function MenuSearchService($http, ApiBasePath) {
73+
var service = this;
74+
var foundItems = [];
75+
76+
77+
service.getMatchedMenuItems = function(itemName) {
78+
79+
return $http({
80+
method: "GET",
81+
url: (ApiBasePath + "/menu_items.json")
82+
}).then(function (result) {
83+
84+
var items = result.data.menu_items;
85+
foundItems = [];
86+
87+
for (var i = 0; i < items.length; i++) {
88+
if (items[i].description.toLowerCase().indexOf(itemName.toLowerCase()) >= 0) {
89+
foundItems.push(items[i]);
90+
}
91+
}
92+
console.log("result: ", foundItems);
93+
return foundItems;
94+
});
95+
96+
97+
};
98+
99+
service.removeItem = function(itemIndex) {
100+
foundItems.splice(itemIndex,1);
101+
};
102+
}
103+
104+
105+
106+
})();

‎menu-search-REST-API/scripts/jquery-3.2.1.min.js‎

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎menu-search-REST-API/styles/bootstrap.min.css‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
h1 {
2+
margin-bottom: 30px;
3+
}
4+
input[type="text"] {
5+
width: 200px;
6+
float: left;
7+
}
8+
.narrow-button {
9+
float: left;
10+
margin-left: 10px;
11+
}
12+
.loader {
13+
display: block;
14+
margin-left: 5px;
15+
font-size: 10px;
16+
float: left;
17+
border-top: 1.1em solid rgba(147, 147, 147, 0.2);
18+
border-right: 1.1em solid rgba(147, 147, 147, 0.2);
19+
border-bottom: 1.1em solid rgba(147, 147, 147, 0.2);
20+
border-left: 1.1em solid #676767;
21+
-webkit-transform: translateZ(0);
22+
-ms-transform: translateZ(0);
23+
transform: translateZ(0);
24+
-webkit-animation: load8 1.1s infinite linear;
25+
animation: load8 1.1s infinite linear;
26+
}
27+
.loader,
28+
.loader:after {
29+
border-radius: 50%;
30+
width: 3em;
31+
height: 3em;
32+
}
33+
@-webkit-keyframes load8 {
34+
0% {
35+
-webkit-transform: rotate(0deg);
36+
transform: rotate(0deg);
37+
}
38+
100% {
39+
-webkit-transform: rotate(360deg);
40+
transform: rotate(360deg);
41+
}
42+
}
43+
@keyframes load8 {
44+
0% {
45+
-webkit-transform: rotate(0deg);
46+
transform: rotate(0deg);
47+
}
48+
100% {
49+
-webkit-transform: rotate(360deg);
50+
transform: rotate(360deg);
51+
}
52+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /