Answered by:
Blacking out selected options

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