Skip to content

Instantly share code, notes, and snippets.

@rohanBagchi

rohanBagchi/index.html

Created April 25, 2015 08:31
Show Gist options
  • Save rohanBagchi/b6823971ea4184f51d1a to your computer and use it in GitHub Desktop.
Save rohanBagchi/b6823971ea4184f51d1a to your computer and use it in GitHub Desktop.
Download ZIP
zGxxyg
Raw
index.html
<html>
<head>
<title>Welcome | Fame Cinema</title>
</head>
<body ng-app="fameCinemaApp" ng-controller="BehaviourController as bController">
<div class="jumbotron">
<div class="container">
<h1 ng-show="bController.showWelcomeText">Fame Cinema Official Ticketing App</h1>
<p>{{bController.mainText}}</p>
<form ng-submit="bController.nextStep()">
<div class="jumbotron-input">
<div class="input-group" ng-show="bController.showNameInput">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1" ng-model="bController.name">
</div>
<div class="input-group" ng-show="bController.showTicketQtyInput">
<span class="input-group-addon" id="basic-addon1"> * </span>
<input type="text" class="form-control" placeholder="Number of tickets" aria-describedby="basic-addon1" ng-model="bController.count">
</div>
</div>
<button type="submit" class="btn btn-primary">
{{bController.buttonText}}
</button>
</form>
{{selected}}
</div>
</div>
</div>
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">Fame Cinema</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="row">
<div class="col-md-12">
<ul class="tile-group" ng-show="bController.showCategories">
<li ng-repeat="seat in bController.seats" ng-class="{selected:seat.reserved}" ng-click="bController.select(seat.name)">
<a href="#" class="tile-group-item">
{{seat.name}}|{{seat.reserved}}
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Raw
script.js
var app = angular.module("fameCinemaApp", []);
app.controller("BehaviourController", function($scope) {
this.showWelcomeText = true;
this.showCategories = false;
this.showNameInput = false;
this.showTicketQtyInput = false;
this.mainText = "Welcome! Would you like to book a ticket?";
this.buttonText = "Yes!";
this.name = undefined;
this.count = undefined;
this.selected = {};
var self = this;
this.nextStep = function() {
this.buttonText = "Next";
if (undefined === this.name) {
this.mainText = "Okay, please tell us your name";
toggleInput(self, "name");
} else if (undefined === this.count) {
// user has already input name. Show greeting
this.mainText = "Hi " + this.name + "! Please enter the number of tickets you wish to buy";
toggleInput(self, "count");
this.buttonText = "Show me seats!";
} else {
this.showWelcomeText = false;
this.mainText = "Fantastic! Now " + this.name + ", Please choose your seats";
toggleInput(self);
if (!this.showCategories) {
this.showCategories = true;
} else {
this.showCategories = false;
}
this.buttonText = "Confirm my booking!";
}
};
var toggleInput = function(self, input) {
self.showNameInput = false;
self.showTicketQtyInput = false;
if ("name" === input) {
self.showNameInput = true;
} else if ("count" === input) {
self.showTicketQtyInput = true;
}
};
this.select = function(seat) {
alert(this.selected.length);
if ( undefined != this.selected) {
if ()
}
&& this.count >= this.selected.length) {
return;
} else {
this.selected.push(seat);
var seatIndex = _.findIndex(this.seats, { 'name': seat });
alert(seatIndex);
this.seats[seatIndex].reserved = true;
alert(this.seats[seatIndex]);
}
};
this.seats = [
{
"id": 1,
"reserved":false,
"name": "A1"
}, {
"id": 2,
"reserved":false,
"name": "A2"
}, {
"id": 3,
"reserved":false,
"name": "A3"
}, {
"id": 4,
"reserved":false,
"name": "A4"
},
{
"id": 5,
"reserved":false,
"name": "A5"
}, {
"id": 6,
"reserved":false,
"name": "A6"
}, {
"id": 7,
"reserved":false,
"name": "A7"
}, {
"id": 8,
"reserved":false,
"name": "A8"
},{
"id": 12,
"reserved":false,
"name": "B1"
}, {
"id": 8,
"reserved":false,
"name": "B2"
}, {
"id": 9,
"reserved":false,
"name": "B3"
}, {
"id": 11,
"reserved":false,
"name": "B4"
}, {
"id": 23,
"reserved":false,
"name": "C1"
}, {
"id": 1,
"reserved":false,
"name": "C2"
}
];
});
Raw
style.css
body {
padding-top:3%;
}
@media (min-width: 768px)
.tile-group li a{
width: 12.5%;
font-size: 12px;
}
ul.tile-group li{
list-style:none;
float:left;
}
.tile-group li{
float: left;
width: 7%;
height: 7%;
padding: 10px;
font-size: 10px;
line-height: 1.4;
text-align: center;
background-color: #f9f9f9;
border: 1px solid #fff;
}
.tile-group li.selected,.tile-group li:hover{
color: #fff;
background-color: #563d7c;
}
.tile-group li a.tile-group-item {
color:#000;
text-decoration:none;
display: block;
text-align: center;
word-wrap: break-word;
font-size:large;
}
.tile-group li:hover a.tile-group-item {
color: #fff;
}
.jumbotron-input {
width:40%;
line-height:1.4;
padding-bottom:1%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment