Book appointment page

FIT5032-Assignment/App_Start/BundleConfig.cs

@@ -1,30 +1,23 @@
 using System.Web;
 using System.Web.Optimization;
 
-namespace FIT5032_Assignment
-{
-    public class BundleConfig
-    {
+namespace FIT5032_Assignment {
+  public class BundleConfig {
     // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
-        public static void RegisterBundles(BundleCollection bundles)
-        {
-            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
-                        "~/Scripts/jquery-{version}.js"));
-
-            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
-                        "~/Scripts/jquery.validate*"));
+    public static void RegisterBundles(BundleCollection bundles) {
+      bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
+      bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.validate*"));
 
       // Use the development version of Modernizr to develop with and learn from. Then, when you're
       // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
-            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
-                        "~/Scripts/modernizr-*"));
+      bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));
+      bundles.Add(new Bundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));
+      bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css", "~/Content/site.css"));
 
-            bundles.Add(new Bundle("~/bundles/bootstrap").Include(
-                      "~/Scripts/bootstrap.js"));
-
-            bundles.Add(new StyleBundle("~/Content/css").Include(
-                      "~/Content/bootstrap.css",
-                      "~/Content/site.css"));
+      // Bootstrap.v3.Datetimepicker.CSS
+      bundles.Add(new StyleBundle("~/bundles/datetimepicker.style").Include("~/Content/bootstrap-datetimepicker.min.css"));
+      bundles.Add(new ScriptBundle("~/bundles/moment").Include("~/Scripts/moment.min.js"));
+      bundles.Add(new Bundle("~/bundles/datetimepicker").Include("~/Scripts/bootstrap-datetimepicker.min.js"));
     }
   }
 }

FIT5032-Assignment/Controllers/AppointmentsController.cs

@@ -22,22 +22,28 @@ namespace FIT5032_Assignment.Controllers {
     }
 
     // GET: Appointments/Create
-    public ActionResult Create() {
+    public ActionResult Create(string id) {
+      if (id == null) {
         // Pass a dropdown list for all doctors
         List<Doctors> doctors = db.Doctors.ToList();
-      // Create a tuple for put uuid and displayName into it
-      List<Tuple<string, string>> doctorsList = new List<Tuple<string, string>>();
-      List<Users> users = db.Users.ToList();
-      for (int i = 0; i < doctors.Count; i++) {
-        // Get displayName from users table
-        string displayName = users.Find(user => user.uuid == doctors[i].user).displayName;
-        Tuple<string, string> doctor = new Tuple<string, string>(doctors[i].user, displayName);
-        doctorsList.Add(doctor);
+        List<Tuple<Users, Doctors>> usersList = new List<Tuple<Users, Doctors>>();
+        foreach (var doctor in doctors) {
+          // Fetch the user obj
+          Users user = db.Users.Find(doctor.user);
+          usersList.Add(new Tuple<Users, Doctors>(user, doctor));
+        }
+        ViewBag.doctorsList = usersList;
+      } else {
+        ViewBag.doctorId = id;
+        // Fetch doctor profile
+        ViewBag.doctor = db.Doctors.Where(d => d.user == id);
+        ViewBag.doctorUser = db.Users.Find(id);
       }
-      ViewBag.doctorsList = new SelectList(doctorsList, "Item1", "Item2");
       return View();
+
     }
 
+
     // POST: Appointments/Create
     [HttpPost]
     public ActionResult Create(FormCollection collection) {

FIT5032-Assignment/FIT5032-Assignment.csproj

@@ -295,6 +295,10 @@
     <Content Include="Scripts\jquery.validate.unobtrusive.js" />
     <Content Include="Scripts\jquery.validate.unobtrusive.min.js" />
     <Content Include="Scripts\modernizr-2.8.3.js" />
+    <Content Include="Scripts\moment-with-locales.js" />
+    <Content Include="Scripts\moment-with-locales.min.js" />
+    <Content Include="Scripts\moment.js" />
+    <Content Include="Scripts\moment.min.js" />
     <Content Include="Web.config" />
     <Content Include="Web.Debug.config">
       <DependentUpon>Web.config</DependentUpon>
@@ -318,6 +322,7 @@
     <Content Include="Views\Home\ImageUpload.cshtml" />
     <Content Include="Views\Appointments\Index.cshtml" />
     <Content Include="Views\Appointments\Create.cshtml" />
+    <Content Include="Views\Appointments\CreateByDoctor.cshtml" />
   </ItemGroup>
   <ItemGroup>
     <Folder Include="Views\Default\" />

FIT5032-Assignment/FIT5032-Assignment.csproj.user

@@ -15,7 +15,7 @@
     <WebStackScaffolding_LayoutPageFile>~/Views/Shared/_Layout.cshtml</WebStackScaffolding_LayoutPageFile>
     <WebStackScaffolding_IsLayoutPageSelected>True</WebStackScaffolding_IsLayoutPageSelected>
     <WebStackScaffolding_IsPartialViewSelected>False</WebStackScaffolding_IsPartialViewSelected>
-    <WebStackScaffolding_IsReferencingScriptLibrariesSelected>True</WebStackScaffolding_IsReferencingScriptLibrariesSelected>
+    <WebStackScaffolding_IsReferencingScriptLibrariesSelected>False</WebStackScaffolding_IsReferencingScriptLibrariesSelected>
     <WebStackScaffolding_DbContextTypeFullName>FIT5032_Assignment.Models.Database1Entities</WebStackScaffolding_DbContextTypeFullName>
     <WebStackScaffolding_IsViewGenerationSelected>False</WebStackScaffolding_IsViewGenerationSelected>
     <WebStackScaffolding_IsAsyncSelected>False</WebStackScaffolding_IsAsyncSelected>

FIT5032-Assignment/Views/Appointments/Create.cshtml

@@ -1,40 +1,65 @@
 @model FIT5032_Assignment.Models.Appointments
 
 @{
-  ViewBag.Title = "Create";
+  ViewBag.Title = "Book an appointment";
   Layout = "~/Views/Shared/_Layout.cshtml";
 }
 
-<h2>Create</h2>
+<h2>Book an appointment</h2>
 
-
-@using (Html.BeginForm()) {
-  @Html.AntiForgeryToken()
-
-  <div class="form-horizontal">
-    <h4>Appointments</h4>
 <hr />
-    <!-- Dropdown menu for select a doctor -->
-    <div class="form-group">
-      @Html.LabelFor(model => model.responsibleBy, "Select a doctor", htmlAttributes: new { @class = "control-label col-md-2" })
-      <div class="col-md-10">
-        @Html.DropDownList("user.displayName", @ViewBag.doctorsList as SelectList, htmlAttributes: new { @class = "form-control" })
-        @Html.ValidationMessageFor(model => model.responsibleBy, "", new { @class = "text-danger" })
-      </div>
-    </div>
 
-    <div class="form-group">
-      <div class="col-md-offset-2 col-md-10">
-        <input type="submit" value="Create" class="btn btn-default" />
+@if (ViewBag.doctorId == null) {
+  <h3>Which doctor do you prefer?</h3>
+  <!-- List doctors -->
+  <!-- ViewBag.doctorsList-->
+  <!-- List all doctors into grid view -->
+  foreach (var doctor in ViewBag.doctorsList) {
+    <div class="col-md-3 card">
+      <a href='@Url.Action("Create", "Appointments", new {id = doctor.Item1.uuid})' style="color: black; text-decoration: none;">
+        <div class="card-body">
+          <img src="@doctor.Item1.avatar" style="width: 50px;" />
+          <h5 class="card-title" style="margin-top: 10px;">@doctor.Item1.displayName</h5>
+          <p class="card-text">
+            @if (doctor.Item2.bio != "") {@doctor.Item2.bio } else { <i>No bio yet.</i>}
+          </p>
         </div>
+      </a>
     </div>
+    <div>
+      @Html.ActionLink("Cancel", "Index")
     </div>
   }
-
-<div>
-  @Html.ActionLink("Back to List", "Index")
+} else {
+  <h3>Book an appointment with @ViewBag.doctorUser.displayName</h3>
+  <form>
+    <div class="form-group">
+      <label for="datepicker">Select the appointment date</label>
+      <div class='input-group'>
+        <input data-provide="datepicker" id="datepicker" class="form-control" />
       </div>
+    </div>
+    <button type="submit" class="btn btn-primary">Submit</button>
+  </form>
+  <div>
+    @Html.ActionLink("Choose another doctor", "Create", "Appointments", new { id = "" }, null)
+  </div>
+}
 
 @section Scripts {
   @Scripts.Render("~/bundles/jqueryval")
+  @Scripts.Render("https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js")
+  @Styles.Render("https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.standalone.min.css")
+  <script type="text/javascript">
+    $("#datepicker").val(() => {
+      // Return dd/mm/yyyy
+      let date = new Date()
+      return date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear();
+    }).datepicker({
+      format: "dd/mm/yyyy",
+      startDate: new Date(),
+      autoclose: true,
+      todayHighlight: true
+    });
+  </script>
 }

FIT5032-Assignment/packages.config

@@ -3,6 +3,7 @@
   <package id="Antlr" version="3.5.0.2" targetFramework="net48" />
   <package id="BCrypt.Net-Next" version="4.0.3" targetFramework="net48" />
   <package id="bootstrap" version="5.2.3" targetFramework="net48" />
+  <package id="bootstrap.less" version="3.4.1" targetFramework="net48" />
   <package id="BouncyCastle" version="1.8.9" targetFramework="net48" />
   <package id="EntityFramework" version="6.4.4" targetFramework="net48" />
   <package id="jQuery" version="3.4.1" targetFramework="net48" />
@@ -21,6 +22,7 @@
   <package id="Microsoft.jQuery.Unobtrusive.Validation" version="3.2.11" targetFramework="net48" />
   <package id="Microsoft.Web.Infrastructure" version="2.0.1" targetFramework="net48" />
   <package id="Modernizr" version="2.8.3" targetFramework="net48" />
+  <package id="Moment.js" version="2.9.0" targetFramework="net48" />
   <package id="Newtonsoft.Json" version="13.0.2" targetFramework="net48" />
   <package id="RestSharp" version="110.2.0" targetFramework="net48" />
   <package id="System.Buffers" version="4.5.1" targetFramework="net48" />