Blacking out selected options[Answered] RSS

2 replies

Last post Jul 14, 2020 09:18 AM by binaary

‹ Previous Thread|Next Thread ›

Shortcuts

Related Links

binaary

Member

2 Points

7 Posts

Blacking out selected options

Jul 11, 2020 12:32 AM|binaary|LINK

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);

        }

YihuiSun

Contributor

2690 Points

771 Posts

Re: Blacking out selected options

Jul 13, 2020 08:34 AM|YihuiSun|LINK

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

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

- Reply
binaary
Member

2 Points

7 Posts

Re: Blacking out selected options

Jul 14, 2020 09:18 AM|binaary|LINK

Hey, thanks very much for the quick reply!

I'll take a look at it now.

‹ Previous Thread|Next Thread ›