-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
157 lines (132 loc) · 6.62 KB
/
index.html
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en" ng-app="confusionApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Ristorante Con Fusion: Menu</title>
<!-- Bootstrap -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="bootstrap-3.3.7-dist/css/font-awesome.min.css" rel="stylesheet">
<link href="bootstrap-3.3.7-dist/css/bootstrap-social.css" rel="stylesheet">
<link href="mystyle.css" rel="stylesheet">
<style type="text/css">
.ng-touched.ng-valid{
border:2px green solid;
}
.ng-touched.ng-invalid{
border:2px red solid;
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--ASSIGNMENT 1-->
<div class="container">
<div class="row row-content" ng-controller='dishDetailController'>
<div class="col-xs-12">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" ng-src="{{dish.image}}" alt="Pizza" style="border:1px solid black;">
</a>
</div>
<div class="media-body">
<h3 class="media-heading">{{dish.name}}
<span class = "label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price|currency}}</span></h3>
<p>{{dish.description}}</p>
</div>
</div>
<br>
<p><b style="margin-left: 15px;">Customer Comments</b>
<span style="padding-left: 7px;">Sort by:
<input type="text" name="comments" ng-model = "filterText" />
</span>
</p>
</div><!--col-->
<div class="col-xs-9 col-xs-offset-1">
<br><br><br>
<blockquote ng-repeat="c in dish.comments | orderBy: filterText">
<p >{{c.rating}}</p>
<p>{{c.comment}}</p>
<footer>{{c.author}} , <cite title="Source Title">{{c.date|date :'MMM,dd,yyyy'}}</cite></footer>
</blockquote>
</div>
<br><br>
<!--ASSIGNMENT 2-->
<div class="col-xs-9 col-xs-offset-1" ng-controller="DishCommentController">
<ul class="list-unstyled" ng-show="commentForm.comment.$valid && !commentForm.comment.$pristine">
<blockquote>
<p >{{fedbck.rating}}</p>
<p>{{fedbck.comment}}</p>
<footer>{{fedbck.author}} , <cite title="Source Title">{{fedbck.date|date :'MMM,dd,yyyy'}}</cite></footer>
</blockquote>
</ul>
<br><br>
<!--form-->
<form class="form-horizontal" name="commentForm" method="post" novalidate>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Your Name </label>
<div class="col-sm-10">
<input type="text" class="form-control" name="author" placeholder="Your Name"
ng-model="fedbck.author" required>
<span ng-if="commentForm.author.$error.required && commentForm.author.$touched">NAME is required</span>
</div>
</div>
<br>
<div class="form-check">
<b style="padding-right: 10px;">No.of Stars</b>
<label class="form-check-label" style="padding-right: 10px;">
<input class="form-check-input" type="radio" name="rating" ng-value='5'
ng-model='fedbck.rating' ng-value="true">5
</label>
<label class="form-check-label" style="padding-right: 10px;">
<input class="form-check-input" type="radio" name="rating" value='4'
ng-model="fedbck.rating">4
</label>
<label class="form-check-label" style="padding-right: 10px;">
<input class="form-check-input" type="radio" name="rating" value='3'
ng-model="fedbck.rating">3
</label>
<label class="form-check-label" style="padding-right: 10px;">
<input class="form-check-input" type="radio" name="rating" value='2'
ng-model="fedbck.rating">2
</label>
<label class="form-check-label" style="padding-right: 10px;">
<input class="form-check-input" type="radio" name="rating" value='1'
ng-model="fedbck.rating">1
</label>
</div>
<br>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Your Comment</label>
<div class="col-sm-10">
<textarea placeholder="Your Comment" rows="6" cols="49" name="comment"
ng-model="fedbck.comment" required></textarea>
<span ng-if="commentForm.comment.$error.required && !commentForm.comment.$pristine">Comment is required</span>
</div>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-10" style="float: center;">
<button type="submit" class="btn btn-primary" ng-click="go(fedbck)"
ng-disabled="commentForm.$invalid">Submit Comment</button>
</div>
</div>
</form>
</div> <!--col-xs-9-->
</div><!--row-->
</div><!--container-->
</body>
<!--scripts-->
<script src="angular.min.js"></script>
<script src="dish.js"></script>
</html>