locked
Blacking out selected options RRS feed

  • Question

  • User-1694438709 posted

    Hey, looking for some guidance on a project I'm working on!

    I'm looking at making a booking system and once a time slot has been taken I want that option to become unavailable.

    I'm not quite sure how the best way to handle this is but in my head I'm thinking I should check to see if the user has either got a booking for the venue or the booking time isn't available stop the booking from being entered and send a message back, or if neither of these are the case allow the booking to go ahead

    Html that displays the buttons

    @model Aspnetcorewebsite.Models.Events
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Administration</title>
    
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="/css/bootstrap.min.css">
        <link rel="stylesheet" href="/css/booking.css">
    
    </head>
    
    
    @{
        ViewData["Title"] = "Book Event";
        TimeSpan ts1 = TimeSpan.Parse(Model.StartTime);
        TimeSpan ts2 = TimeSpan.Parse(Model.EndTime);
        TimeSpan hours = (ts2 - ts1);
    
        // number of hours
        var intHours = hours.Ticks;
        var totalHours = TimeSpan.FromTicks(intHours).TotalHours;
        var TimeSlots = totalHours / 0.25;
    
        var startTime = ts1;
        var EndTime = ts1;
    
    }
    
    <div class="calculator">
    
        <h1> Welcome @User.Identity.Name</h1>
        <h2> These are the available timeslots to book</h2>
    
    
    
        <div class="calculator-keys">
            @for (var i = 0; i < @TimeSlots; i++)
            {
    
                EndTime = EndTime.Add(TimeSpan.FromMinutes(15));
    
                <a class="btn btn-primary" href="/Venues/BookSlot/?slotstart=@startTime&slotEnd=@EndTime&eventId=@Model.Id"> @startTime - @EndTime </a><br />
    
                startTime = EndTime;
    
            }
        </div>
        
    </div>
    <div class="Backbutton">
        <a asp-controller="Musician" asp-action="Index">Back to Menu</a>
    </div>
            [HttpGet]
            public IActionResult BookSlot()
            {
    
                ViewData["currentUserId"] = HttpContext.User.FindFirstValue(ClaimTypes.NameIdentifier);
    
                var booking = new Bookings()
                {
                    EventID = Int32.Parse(HttpContext.Request.Query["EventID"]),
                    slotStart = HttpContext.Request.Query["slotStart"],
                    slotEnd = HttpContext.Request.Query["slotEnd"]
                };
    
                return View(booking);
            }
    
            [HttpPost]
            public async Task<IActionResult> BookSlot([Bind("slotStart,slotEnd ,EventID,BookingUserID")] Bookings Bookings)
            {
    
                if (ModelState.IsValid)
                {
                    _context.Add(Bookings);
                    await _context.SaveChangesAsync();
                    return RedirectToAction(nameof(SlotBooked));
                }
    
                return View(Bookings);
    
            }
    Saturday, July 11, 2020 12:32 AM

Answers

  • User1686398519 posted

    Hi binaary,

    I made an example according to your needs, please refer to it.

    Model

        public class Events
        {
            public int Id { get; set; }
            public string StartTime { get; set; }
            public string EndTime { get; set; }
        }
        public class Bookings
        {
            public int EventID { get; set; }
            public string slotStart { get; set; }
            public string slotEnd { get; set; }
        }

    Controller

            public IActionResult Index()
            {
                Events test = new Events
                {
                    Id = 1,
                    StartTime = "13:05:26",
                    EndTime= "21:05:26"
                };
    
                return View(test);
            }
            [HttpGet]
            public IActionResult BookSlot()
            {
    
                ViewData["currentUserId"] = 1;
    
                var booking = new Bookings()
                {
                    EventID = Int32.Parse(HttpContext.Request.Query["EventID"]),
                    slotStart = HttpContext.Request.Query["slotStart"],
                    slotEnd = HttpContext.Request.Query["slotEnd"]
                };
                return View(booking);
            }
            public bool checkuserhasbook()
            {
                //Determine if the current user is already booked
                return true;
            }
            public bool checkavailable()
            {
                //Determine whether the current time can be scheduled
                return true;
            }
            [HttpPost]
            public List<string> setlink(string slotstart,string slotEnd,int Id)
            {
                List<string> links = new List<string>();
                TimeSpan ts1 = TimeSpan.Parse(slotstart);
                TimeSpan ts2 = TimeSpan.Parse(slotEnd);
                TimeSpan hours = (ts2 - ts1);
                var intHours = hours.Ticks;
                var totalHours = TimeSpan.FromTicks(intHours).TotalHours;
                var TimeSlots = totalHours / 0.25;
                var startTime = ts1;
                var EndTime = ts1;
                for (var i = 0; i < @TimeSlots; i++)
                {
                    EndTime = EndTime.Add(TimeSpan.FromMinutes(15));
                    if (checkuserhasbook()&checkavailable()& CompareTime(EndTime.ToString()))
                    {
                        links.Add("<a class='btn btn-primary' href='/Test1/BookSlot/?slotstart=" + startTime + "&slotEnd=" + EndTime + " &eventId=" + Id + "'>" + startTime + " - " + EndTime + "</a>");
                    }
                    else
                    {
                        links.Add("<a class='btn btn-primary disabledlink' onclick='Message(this)' disabled='disabled' href='#'>" + startTime + " - " + EndTime + "</a>");
    
                    }
                    startTime = EndTime;
                }
                return links;
            }
            public bool CompareTime(string EndTime)
            {
                bool flag = true;
                if (DateTime.Parse(EndTime) < DateTime.Parse(getCurrentTime()))
                {
                    flag = false;
                }
                return flag;
            }
            public string getCurrentTime()
            {
                var time = DateTime.Now.ToLongTimeString();
                return time;
            }
            [HttpPost]
            public async Task<IActionResult> BookSlot([Bind("slotStart,slotEnd ,EventID,BookingUserID")] Bookings Bookings)
            {
    
                return View(Bookings);
    
            }

    Page

    <div class="calculator">
        <h1> Welcome @User.Identity.Name</h1>
        <h2> These are the available timeslots to book</h2>
        <div class="calculator-keys">
        </div>
    </div>
    <div class="Backbutton">
        <a asp-controller="Musician" asp-action="Index">Back to Menu</a>
    </div>
    @section scripts{ 
        <script>
            $(function () {
            $.ajax({
                url: "@Url.Action("setlink")",
                type: "Post",
                data: { slotstart: '@Model.StartTime', slotEnd: '@Model.EndTime',Id: '@Model.Id'},
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $(data[i]).appendTo(".calculator-keys");
                    }
                }
            });
                
        });
            function Message(obj) {
                alert("Sorry, this time period cannot be selected.");
            }
        </script>
    }

    Here is the result.

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 13, 2020 8:34 AM

All replies

  • User1686398519 posted

    Hi binaary,

    I made an example according to your needs, please refer to it.

    Model

        public class Events
        {
            public int Id { get; set; }
            public string StartTime { get; set; }
            public string EndTime { get; set; }
        }
        public class Bookings
        {
            public int EventID { get; set; }
            public string slotStart { get; set; }
            public string slotEnd { get; set; }
        }

    Controller

            public IActionResult Index()
            {
                Events test = new Events
                {
                    Id = 1,
                    StartTime = "13:05:26",
                    EndTime= "21:05:26"
                };
    
                return View(test);
            }
            [HttpGet]
            public IActionResult BookSlot()
            {
    
                ViewData["currentUserId"] = 1;
    
                var booking = new Bookings()
                {
                    EventID = Int32.Parse(HttpContext.Request.Query["EventID"]),
                    slotStart = HttpContext.Request.Query["slotStart"],
                    slotEnd = HttpContext.Request.Query["slotEnd"]
                };
                return View(booking);
            }
            public bool checkuserhasbook()
            {
                //Determine if the current user is already booked
                return true;
            }
            public bool checkavailable()
            {
                //Determine whether the current time can be scheduled
                return true;
            }
            [HttpPost]
            public List<string> setlink(string slotstart,string slotEnd,int Id)
            {
                List<string> links = new List<string>();
                TimeSpan ts1 = TimeSpan.Parse(slotstart);
                TimeSpan ts2 = TimeSpan.Parse(slotEnd);
                TimeSpan hours = (ts2 - ts1);
                var intHours = hours.Ticks;
                var totalHours = TimeSpan.FromTicks(intHours).TotalHours;
                var TimeSlots = totalHours / 0.25;
                var startTime = ts1;
                var EndTime = ts1;
                for (var i = 0; i < @TimeSlots; i++)
                {
                    EndTime = EndTime.Add(TimeSpan.FromMinutes(15));
                    if (checkuserhasbook()&checkavailable()& CompareTime(EndTime.ToString()))
                    {
                        links.Add("<a class='btn btn-primary' href='/Test1/BookSlot/?slotstart=" + startTime + "&slotEnd=" + EndTime + " &eventId=" + Id + "'>" + startTime + " - " + EndTime + "</a>");
                    }
                    else
                    {
                        links.Add("<a class='btn btn-primary disabledlink' onclick='Message(this)' disabled='disabled' href='#'>" + startTime + " - " + EndTime + "</a>");
    
                    }
                    startTime = EndTime;
                }
                return links;
            }
            public bool CompareTime(string EndTime)
            {
                bool flag = true;
                if (DateTime.Parse(EndTime) < DateTime.Parse(getCurrentTime()))
                {
                    flag = false;
                }
                return flag;
            }
            public string getCurrentTime()
            {
                var time = DateTime.Now.ToLongTimeString();
                return time;
            }
            [HttpPost]
            public async Task<IActionResult> BookSlot([Bind("slotStart,slotEnd ,EventID,BookingUserID")] Bookings Bookings)
            {
    
                return View(Bookings);
    
            }

    Page

    <div class="calculator">
        <h1> Welcome @User.Identity.Name</h1>
        <h2> These are the available timeslots to book</h2>
        <div class="calculator-keys">
        </div>
    </div>
    <div class="Backbutton">
        <a asp-controller="Musician" asp-action="Index">Back to Menu</a>
    </div>
    @section scripts{ 
        <script>
            $(function () {
            $.ajax({
                url: "@Url.Action("setlink")",
                type: "Post",
                data: { slotstart: '@Model.StartTime', slotEnd: '@Model.EndTime',Id: '@Model.Id'},
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $(data[i]).appendTo(".calculator-keys");
                    }
                }
            });
                
        });
            function Message(obj) {
                alert("Sorry, this time period cannot be selected.");
            }
        </script>
    }

    Here is the result.

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 13, 2020 8:34 AM
  • User-1694438709 posted

    Hey, thanks very much for the quick reply! 

    I'll take a look at it now. 

    Tuesday, July 14, 2020 9:18 AM