lunch-ordering-system/index.html at master · smbuthia/lunch-ordering-system · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!doctype html>
<html ng-app="lunchOrdering">
	<head>
		<meta charset="UTF-8">

		<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.0.8/angular-material.css"/>

		<script src="node_modules/angular/angular.js"></script>
		<script src="node_modules/angular-resource/angular-resource.js"></script>
		<script src="node_modules/angular-animate/angular-animate.js"></script>
		<script src="node_modules/angular-route/angular-route.js"></script>
		<script src="node_modules/angular-aria/angular-aria.js"></script>
		<script src="node_modules/angular-messages/angular-messages.js"></script>
		<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
		<script src="node_modules/angular-material/angular-material.js"></script>
		<script src="js/lunch.js"></script>
		<style>
			#main {
				width: 800px;
				background-color: white;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>

		<div id="main" ng-controller="RestaurantSelector as selector" layout="column" ng-cloak>
			<md-content class="md-padding">
				<form ng-submit="$event.preventDefault()">
					<p>
						Welcome {{ selector.user | capitalize}}:
					</p>
					<p>
						Select a restaurant to order from:
					</p>
					<md-autocomplete
					ng-disabled="selector.isDisabled"
					md-no-cache="selector.noCache"
					md-selected-item="selector.selectedItem"
					md-search-text-change="selector.searchTextChange(selector.searchText)"
					md-search-text="selector.searchText"
					md-selected-item-change="selector.selectedItemChange(item)"
					md-items="item in selector.querySearch(selector.searchText)"
					md-item-text="item.display"
					md-min-length="0"
					placeholder="Your restaurant of choice for today?">
						<md-item-template>
							<span md-highlight-text="selector.searchText" md-highlight-flags="^i">{{item.display}}</span>
						</md-item-template>
						<md-not-found>
							"{{selector.searchText}}" is not among the options :(.
						</md-not-found>
					</md-autocomplete>
					<!--menu begins here-->
					<md-subheader class="md-no-sticky">
						{{ selector.activeRestaurant | uppercase }} MENU
					</md-subheader>
					<md-list-item ng-repeat="menuItem in selector.activeMenu">
						<p>
							{{ menuItem.item }}
						</p>
						<md-checkbox
						class="md-secondary"
						ng-model="menuItem.wanted"
						ng-change="selector.menuItemChange(menuItem)"></md-checkbox>
					</md-list-item>
					<md-divider></md-divider>
					<!--menu ends here-->
					<p>
						Total Price - {{ selector.totalPrice }}
					</p>

					<br/>

					<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
						<md-button class="md-raised md-primary" ng-click="selector.placeOrder($event)">
							Order
						</md-button>
						<md-button ng-disabled="true" class="md-raised md-primary">
							Cancel
						</md-button>
					</section>

					<md-list>
						<md-subheader class="md-no-sticky">
							Active Orders
						</md-subheader>
						<md-list-item
						class="md-3-line"
						ng-repeat="order in selector.activeOrders"
						ng-click="selector.modifyOrder(order, $event)">
							<div class="md-list-item-text" layout="column">
								<h3>{{ order.user }}</h3>
								<h4>{{ order.order.restaurant }}</h4>
								<p>
									{{ order.order.food }}
								</p>
							</div>
						</md-list-item>
						<md-divider ></md-divider>
						<md-subheader class="md-no-sticky">
							Archived Orders
						</md-subheader>
						<md-list-item class="md-3-line" ng-repeat="order in selector.activeOrders">
							<div class="md-list-item-text" layout="column">
								<h3>{{ order.user }}</h3>
								<h4>{{ order.order.restaurant }}</h4>
								<p>
									{{ order.order.food }}
								</p>
							</div>
						</md-list-item>
					</md-list>
				</form>

			</md-content>
		</div>

	</body>
</html>