Create appointment dialog on click

src/appointment.php

@@ -8,6 +8,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="static/style.css" type="text/css" media="screen"/>
         <link rel="stylesheet" href="static/fullcalendar.css" type="text/css" media="screen"/>
+        <link rel="stylesheet" href="static/jquery-ui.css" type="text/css" media="screen"/>
         <script src="static/jquery-3.5.1.min.js"></script>
         <script src="static/jquery-ui.min.js"></script>
         <script src="static/moment.min.js"></script>
@@ -20,6 +21,8 @@
     include 'database.php';
 
     $pdo = connectDatabase();
+    $list = listPatients($pdo);
+    $calendar_settings = fetchCalendarSettings($pdo, $doctor);
     ?>
     <?php if($_SESSION["user_type"] == 1): ?>
         <form name="select_doctor" method="post" action="appointment_management.php">
@@ -35,6 +38,31 @@
         </div>
     <?php endif; ?>
     <?php closeDatabase($pdo); ?>
+        <div id="dialog-form" title="Añadir cita">
+            <form>
+                <div class="input-group">
+                    <label for="hora">Hora</label>
+                    <input type="time" name="hora" value="">
+                </div>
+                <div class="input-group">
+                    <label for="duracion">Duración</label>
+                    <input type="number" name="duracion" value="<?php echo $calendar_settings[8]; ?>" step="30">
+                </div>
+                <div class="input-group">
+                    <label for="observaciones">Observaciones</label>
+                    <input type="text" name="observaciones" value="">
+                </div>
+                <div class="input-group">
+                <select id="paciente" name="paciente">
+                    <option>Seleccione un paciente</option>
+                    <?php foreach ($patients as $row) : ?>
+                        <option value="<?php echo $row[0]; ?>"><?php echo $row[1]; ?></option>
+                    <?php endforeach ?>
+                </select>
+                </div>
+                <button class="create_btn" type="submit" name="crear" >Añadir cita</button>
+            </form>
+        </div>
         <div class="response"></div>
         <div id="calendar"></div>
     </body>

src/appointment_management.php

@@ -31,18 +31,8 @@ function listHolidays(){
 }
 
 
-function listCalendarSettings(){
-    $pdo = connectDatabase();
-    $doctor = fetchDoctor($pdo);
-    $calendar_settings = fetchCalendarSettings($pdo, $doctor);
-    closeDatabase($pdo);
-    return json_encode($events);
-}
-
-
 if (isset($_GET["list"])) {
     listEvents();
     listHolidays();
-    listCalendarSettings();
     header('location: appointment.php');
 }

src/calendar.js

@@ -17,7 +17,7 @@
 
     left: 'prev,next,today',
 
-    center: 'title',
+    center: 'patient',
 
     right: 'month,agendaWeek,agendaDay'
 
@@ -27,17 +27,17 @@
    events: "appointment_management.php?list=1",
 
 
-   eventRender: function(event, element, view) {
+    eventRender: function(event, element, view) {
 
-    if (event.allDay === 'true') {
+        if (event.allDay === 'true') {
 
-     event.allDay = true;
+        event.allDay = true;
 
-    } else {
+        } else {
 
-     event.allDay = false;
+        event.allDay = false;
 
-    }
+        }
 
    },
 
@@ -45,43 +45,19 @@
 
    selectHelper: true,
 
-   select: function(start, end, allDay) {
+    select: function(start, end, allDay) {
 
-   var title = prompt('Título: ');
+        $("#dialog-form").dialog({ modal: true, patient: event.paciente, width:450});
 
-   var duration = prompt('Duración: ');
-
-   var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
-
-   var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
-
-   $.ajax({
-
-	   url: 'appointment_management.php',
-
-	   data: 'title='+ title+'&start='+ start +'&end='+ end,
-
-	   type: "POST",
-
-	   success: function(json) {
-
-	   alert('Added Successfully');
-
-	   }
-
-   });
 
    calendar.fullCalendar('renderEvent',
-
    {
 
-	   title: title,
+        start: start,
 
-	   start: start,
+        end: end,
 
-	   end: end,
+        allDay: allDay
-
-	   allDay: allDay
 
    },
 
@@ -106,7 +82,7 @@
 
 	   url: 'update_events.php',
 
-	   data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
+	   data: 'patient='+ event.patient+'&start='+ start +'&end='+ end +'&id='+ event.id ,
 
 	   type: "POST",
 
@@ -122,9 +98,9 @@
 
    eventClick: function(event) {
 
-	var decision = confirm("Do you really want to do that?"); 
+    element.click(function() {
+    });
 
-	if (decision) {
 
 	$.ajax({
 
@@ -142,7 +118,6 @@
 
 	});
 
-	}
 
   	},
 
@@ -156,7 +131,7 @@
 
 	    url: 'update_events.php',
 
-	    data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
+	    data: 'patient='+ event.patient+'&start='+ start +'&end='+ end +'&id='+ event.id ,
 
 	    type: "POST",
 

src/database.php

@@ -326,6 +326,9 @@ function fetchCalendarSettings($pdo, $doctor)
     $result = $pdo->prepare($query);
     $result->execute([$doctor]);
     $data = $result->fetch();
+    if(empty($data[8])){
+        $data[8] = 60;
+    }
     return $data;
 }
 

src/report_edit_form.php

@@ -14,6 +14,7 @@
 
     $pdo = connectDatabase();
     $data = fetchReportData($pdo, $_GET["edit"]);
+    $list = listPatients($pdo);
     ?>
     <form name="create_form" method="post" action="report_management.php">
         <div class="input-group">