Sunday, 3 September 2017

Movie Booking Application- Using Web API,MVC,JQuery

//Model

    public class Movie
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

   public class Screen
   {
       [Key]
       public int Id { get; set; }
       public string Name { get; set; }
       public int MovieId { get; set; }
      
       public bool _1 { get; set; }
       public bool _2 { get; set; }
       public bool _3 { get; set; }
       public bool _4 { get; set; }
       public bool _5 { get; set; }
       public bool _6 { get; set; }
       public bool _7 { get; set; }
       public bool _8 { get; set; }
       public bool _9 { get; set; }
       public bool _10 { get; set; }
       public bool _11 { get; set; }
       public bool _12 { get; set; }
       public bool _13 { get; set; }
       public bool _14 { get; set; }
       public bool _15 { get; set; }
       public bool _16 { get; set; }
       public bool _17 { get; set; }
       public bool _18 { get; set; }
       public bool _19 { get; set; }
       public bool _20 { get; set; }
   }

//API

public class MoviesController : ApiController
   {
       ApplicationDbContext _context;
       public MoviesController()
       {
           _context = new ApplicationDbContext();
       }
       // GET api/<controller>
       [HttpGet]
       public IHttpActionResult Get()
       {
           return Ok(_context.Movies.ToList());
       }
       [HttpGet]
       public IHttpActionResult Get(int id)
       {
           var screen=_context.Screens.Where(s=>s.MovieId==id);
           if (screen == null)
               return NotFound();
           else
               return Ok(screen);
       }
}

//Controller

using FisMovieBooking.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace FisMovieBooking.Controllers
{
    public class MovieController : Controller
    {
        ApplicationDbContext _context;
        public MovieController()
        {
            _context = new ApplicationDbContext();
        }
        // GET: Movie
        public ActionResult Index()
        {
            
            return View();
        }
        public ActionResult ConfirmBooking(string movieId,string selectedSeats)
        {
            int id=Convert.ToInt32(movieId);
            float totalPrice;
            float rate=15.24f;
            List<string> lstselected = new List<string>();
            lstselected = selectedSeats.Split(',').ToList();
        
            var screen = _context.Screens.SingleOrDefault(s => s.MovieId ==id );
            if (lstselected.Count() <= 10)
            {
                totalPrice = lstselected.Count() * rate;
            }
            else {
                totalPrice = (10 * rate) + (lstselected.Count() - 10) * (rate + 10);
            }
         
            ViewBag.MovieName = _context.Movies.SingleOrDefault(m => m.Id == id).Name;
            ViewBag.ScreenName = screen.Name;
            ViewBag.NumberOfSeatsSelected = lstselected.Count();
            ViewBag.TotalPrice = totalPrice;
            ViewBag.SelectedTickets = selectedSeats;
            ViewBag.MovieId = id;
            ViewBag.SeatId = selectedSeats;
            return View();
        }
        public ActionResult BookTicket(string movieId, string seatIds)
        {
            int id = Convert.ToInt32(movieId);
            List<string> lstselected = new List<string>();
            lstselected = seatIds.Split(',').ToList();
            var dataFromDb = _context.Screens.SingleOrDefault(s => s.MovieId == id);
            foreach (string s in lstselected)
            {
                dataFromDb.GetType().GetProperty("_" + s).SetValue(dataFromDb,true);
            }
            
            _context.SaveChanges();
            return RedirectToAction("Index");
        }
    }
}



//JavaScript

$.ajax({
    type: "get",
    url: "http://" + window.location.host + "/api/Movies",
    success: function (result) {
        for (var i = 0; i < result.length; i++) {
            $('#ddlMovie').append('<option value="' + result[i].Id + '">' + result[i].Name + '</option>');
        }
    },
    error: function (error) {
    }
});
$(document).ready(function ()
{
    if ($('#ddlMovie').prop('selectedIndex') != 0)
    {
        $('#screen').removeClass('hidden');
    }
    $('#ddlMovie').change(function ()
    {
        var movieId = $(this).prop('selectedIndex');
        var bookedSeats = [];
        if (movieId != 0) {
            $('#screen').removeClass('hidden');
            $.ajax({
                type: "get",
                url: "http://" + window.location.host + "/api/Movies/" + movieId,
                success: function (result) {
                    var screenDetails = Object.keys(result[0]);
                    var totalCol = screenDetails.length - 3;
                    for (var item in result[0]) {
                        if (result[0][item] === true) {
                            bookedSeats.push(parseInt(item.substring(1)));
                        }
                    }
                    // Settings
                    var settings = {
                        rows: 4,
                        cols: totalCol / 5,
                        rowCssPrefix: 'row-',
                        colCssPrefix: 'col-',
                        seatWidth: 35,
                        seatHeight: 35,
                        seatCss: 'seat',
                        selectedSeatCss: 'selectedSeat',
                        selectingSeatCss: 'selectingSeat'
                    };
                   
                    //Seat LayOut
                    var init = function (reservedSeat)
                    {
                        var str = [], seatNo, className;
                        for (i = 0; i < settings.rows; i++)
                        {
                            for (j = 0; j < settings.cols; j++)
                            {
                                seatNo = (i + j * settings.rows + 1);
                                className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
                              
                                if ($.isArray(reservedSeat))
                                {
                                    if ($.inArray(seatNo, reservedSeat) != -1)
                                    {
                                        className += ' ' + settings.selectedSeatCss;
                                    }
                                }
                                str.push('<li class="' + className + '"' +
                                          'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' +
                                          '<a title="' + seatNo + '">' + seatNo + '</a>' +
                                          '</li>');
                            }
                        }
                        $('#place').html(str.join(''));
                    };
                    init(bookedSeats);
                    var allSeats = $('.' + settings.seatCss);
                    allSeats.click(function () {
                        if ($(this).hasClass(settings.selectedSeatCss)) {
                            alert('This seat is already reserved');
                            $('#btnBook').addClass('hidden');
                        }
                        else {
                            $(this).toggleClass(settings.selectingSeatCss);
                            var recentySelected = allSeats.filter("." + settings.selectingSeatCss);
                            if (recentySelected.length > 0) {
                                $('#btnBook').removeClass('hidden');
                            }
                            else {
                                $('#btnBook').addClass('hidden');
                            }
                        }
                    });
                },
                error: function (error) {
                }
            });
        }
        else {
            $('#screen').addClass('hidden');
        }
    });
    $('#btnBook').on('click', function () {
        var str = [];
        $.each($('#place li.' + 'selectingSeat' + ' a'), function (index, value) {
            str.push($(this).attr('title'));
        });
        window.location.href = "http://" + window.location.host + "/Movie/ConfirmBooking/?movieId=" + $('#ddlMovie :selected').val() + "&selectedSeats=" + str;
    });
    $('#btnConfirmBooking').on('click', function () {
        if (confirm('Are you sure you want to book the tickets')) {
            window.location.href = "http://" + window.location.host + "/Movie/BookTicket?movieId=" + $('#hdnModieId').val() + "&seatIds=" + $('#hdnSeatId').val();
        }
    });
});


//Css

    
#holder
{    
height:200px;    
width:400px;
background-color:gray;
border:1px solid;
margin-left:10px;   
}
#place {
position:relative;
margin:7px;
}
#place a{
font-size:0.6em;
}
#place li
{
 list-style: none outside none;
 position: absolute;   
}    
#place li:hover
{
background-color:green;      
 /*default seat color*/
#place .seat{
background-color:white;
height:33px;
width:33px;
display:block;   
}
/*Booked Tickets*/
#place .selectedSeat
background-color:black;         
}
/*Once clicked on a li*/
#place .selectingSeat
background-color:blue     
}
#place .row-3, #place .row-4{
margin-top:10px;
}
#seatDescription li{
verticle-align:middle;    
list-style: none outside none;
padding-left:35px;
height:35px;
float:left;
}
//Views

//Index
<p><b>Welcome!</b></p>
<div class="well-lg">
    <select class="dropdown" id="ddlMovie">
        <option value="0">
            -- Select Movie --
        </option>
    </select>
    <br />
    <br />
    <div id="screen" class="hidden">
        <div id="holder">
            <ul id="place"></ul>
        </div>
        <div style="float:left;" class="col-sm-9 row">
            <div class="col-sm-3" style="background-color:black">Booked</div>
            <div class="col-sm-3" style="background-color:white">Available</div>
            <div class="col-sm-3" style="background-color:blue">Selected</div>
          
        <br />
        <br />
        <div>
            <input type="button" id="btnBook" value="Book" class="hidden"/>
        </div>
    </div>
   
</div>
@section scripts
{
<link href="~/Content/custom.css" rel="stylesheet" />
    
<script src="~/Scripts/custom.js"></script>
    
    }
//Confirm Booking
@{
    ViewBag.Title = "ConfirmBooking";
}
<h2>ConfirmBooking</h2>
<div class="form-group"> Your selection
    <div>
        Movie Name :  @ViewBag.MovieName 
    </div>
    <div>
        Screen Name :   @ViewBag.ScreenName  
    </div>
    <div>
        Total Seats:   @ViewBag.NumberOfSeatsSelected  
    </div>
    <div>
       Total Price :   @ViewBag.TotalPrice $ 
    </div>
  <input type="hidden" id="hdnModieId" value=@ViewBag.MovieId />
    <input type="hidden" id="hdnSeatId" value=@ViewBag.SeatId />
    <div>
        <input type="button" value="Confirm Booking" id="btnConfirmBooking" />
    </div>
</div>
@section Scripts
{
    
<script src="~/Scripts/custom.js"></script>
    }