added calendar events for appointments

sidhant-khamankar · Mar 31, 2021 · 19c7b03 · 19c7b03
1 parent ef527a6
commit 19c7b03
Show file tree

Hide file tree

Showing 9 changed files with 203 additions and 15 deletions.
diff --git a/backend/models/appointment.model.js b/backend/models/appointment.model.js
@@ -27,6 +27,9 @@ const appointmentSchema = new Schema({
  doctorName : {
  type : String
  },
+ doctorEmail : {
+ type : String
+ },
  patientName : {
  type : String
  }

diff --git a/backend/routes/doctors.js b/backend/routes/doctors.js
@@ -193,7 +193,8 @@ router.route("/book-slot").post((req, res) => {
  date: date.date,
  slotTime: slot.time,
  doctorName: doctor.name,
- patientName: patientName,
+ doctorEmail: doctor.email,
+ patientName: patientName
  });
 
  newAppointment

diff --git a/backend/server.js b/backend/server.js
@@ -33,10 +33,19 @@ function getCurrentTime() {
  console.log(date)
 }
 
+function getEndDateTime(dateTime) {
+ // 2021-03-22T09:00:00
+ const hrs = (parseInt(dateTime.split('T')[1].split(':')[0]) + 1).toString().padStart(2, '0')
+ const time = hrs + ':00:00'
+ const date = dateTime.split('T')[0]
+ return date + 'T' + time
+}
+
 app.listen(port, () => {
  console.log(`Listening on port ${port}`)
  console.log(`NODE_ENV = ${process.env.NODE_ENV}`)
  getCurrentTime()
+ getEndDateTime("2021-03-22T09:00:00")
 })
 
 app.get('/', (req, res) => {

diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -8,14 +8,13 @@
  <meta name="theme-color" content="#000000" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <title>Hospital Management System</title>
-
+ <script id="googleApi" src="https://apis.google.com/js/api.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
  integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
 </head>
 
 <body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
- <script id="googleApi" src="https://apis.google.com/js/api.js"></script>
  <div id="root"></div>
 </body>
 

diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -1,3 +1,4 @@
+/* global gapi */
 import React, { useEffect, useState } from "react";
 import "bootstrap";
 import "bootstrap/dist/css/bootstrap.css";
@@ -20,6 +21,7 @@ import Selectdate from "./Patient/Selectdate";
 import BookingSlots from "./Doctor/BookingSlots";
 import Payment from "./Patient/Payment";
 import DocAppointments from "./Doctor/PaymentHistory";
+import AppointmentStatus from "./Patient/AppointmentStatus";
 
 function App() {
  const [token, setToken] = useState(window.localStorage.getItem("token"));
@@ -66,6 +68,7 @@ function App() {
  console.log("[Google] inside the else block line 54 App.js");
  setApiLoaded(false);
  }
+
  }, []);
 
  return apiLoaded ? (
@@ -96,6 +99,7 @@ function App() {
  <Route exact path="/patient/selectdate" component={Selectdate} />
  <Route exact path="/patient/book-slot" component={BookingSlots} />
  <Route exact path="/patient/payment" component={Payment} />
+ <Route exact path="/patient/appointment-status" component={AppointmentStatus} />
  <Route path="*">
  <Error />
  </Route>

diff --git a/frontend/src/Dashbaord/LeftsidePatient.js b/frontend/src/Dashbaord/LeftsidePatient.js
@@ -18,7 +18,9 @@ const LeftsidePatient = () => {
  </Link>
  </li>
  <li>
- <Option Value="Appointment Status" />
+ <Link to="/patient/appointment-status">
+ <Option Value="Appointment Status" />
+ </Link>
  </li>
 
  <li>

diff --git a/frontend/src/Doctor/PaymentHistory.js b/frontend/src/Doctor/PaymentHistory.js
@@ -8,17 +8,17 @@ import "../Dashbaord/dashboard.css";
 import Leftside from "../Dashbaord/LeftsideDoctor";
 
 const DocAppointments = () => {
- 
-// console.log(decoded);
+
+ // console.log(decoded);
 
  const [Appointments, setAppointments] = useState([]);
 
-  const fetchAppointments = async () => {
- 
-  var token = localStorage.getItem("token");
-  var decoded = jwt_decode(token);
+ const fetchAppointments = async () => {
+
+ var token = localStorage.getItem("token");
+ var decoded = jwt_decode(token);
  const { data } = await Axios.post(
- `${process.env.REACT_APP_SERVER_URL}/doctors//appointments/`,
+ `${process.env.REACT_APP_SERVER_URL}/doctors/appointments/`,
  {
  doctorId: decoded._id,
  }

diff --git a/frontend/src/Patient/AppointmentStatus.js b/frontend/src/Patient/AppointmentStatus.js
@@ -0,0 +1,116 @@
+/* global gapi */
+import React, { useState, useEffect } from "react";
+import Axios from "axios";
+import jwt_decode from "jwt-decode";
+
+import Navbar from "../Basic/Navbar";
+import "../Dashbaord/dashboard.css";
+
+import Leftside from "../Dashbaord/LeftsidePatient";
+import App from "../App";
+
+const AppointmentStatus = () => {
+ const [appointments, setAppointments] = useState([]);
+ const [isLoading, setIsLoading] = useState()
+ const [filteredAppointments, setFilteredAppointments] = useState()
+
+ function getMeetLink(id) {
+ if(filteredAppointments !== undefined){
+ const meetCode = filteredAppointments.find((apntmnt) => {
+ return apntmnt.id === id
+ })
+
+ const code = meetCode.conferenceData.conferenceId
+
+ console.log(`meet code ${code}`)
+ return `https://meet.google.com/${code}`
+ }
+ return '#'
+ }
+
+ useEffect(() => {
+ setIsLoading(true)
+
+ const fetchAppointments = async () => {
+ var { data } = await Axios.post(
+ `${process.env.REACT_APP_SERVER_URL}/patients/upcoming-appointments/`,
+ {
+ googleId: localStorage.getItem("googleId"),
+ }
+ );
+
+ const response = await window.gapi.client.calendar.events.list({
+ 'calendarId': 'primary',
+ 'timeMin': (new Date()).toISOString(),
+ 'showDeleted': false,
+ 'singleEvents': true,
+ 'maxResults': 100,
+ 'orderBy': 'startTime'
+ })
+
+ // Filter google calendar events
+ const events = response.result.items
+ const filteredEvents = events.filter((event) => {
+ return data.find((it) => it._id === event.id)
+ })
+
+ console.log(data)
+ setAppointments(data);
+ console.log(filteredEvents)
+ setFilteredAppointments(filteredEvents)
+ };
+
+ fetchAppointments()
+ setIsLoading(false)
+ }, []);
+
+
+
+ return (
+ <div className="bg-dark" style={{ height: "100vh" }}>
+ <Navbar />
+ <div>
+ <div className="row m-5" style={{ maxWidth: "100%" }}>
+ <div
+ className="col-3 col-md-3 p-4 bg-white "
+ style={{ height: "80vh" }}
+ >
+ <Leftside />
+ </div>
+ {isLoading && <h1>Loading</h1>}
+ {!isLoading && <div
+ className="col-9 col-md-9 p-4"
+ style={{
+ border: "15px solid yellow ",
+ height: "80vh",
+ backgroundColor: "#6c757d",
+ }}
+ >
+ <table className="table table-hover table-dark">
+ <thead>
+ <tr>
+ <th scope="col">Date</th>
+ <th scope="col">Time</th>
+ <th scope="col">Doctor Name</th>
+ <th scope="col">Meet Link</th>
+ </tr>
+ </thead>
+ <tbody>
+ {appointments.map((Appointment) => (
+ <tr key={Appointment._id}>
+ <th scope="row">{Appointment.date}</th>
+ <th scope="row">{Appointment.slotTime}</th>
+ <th scope="row">{Appointment.doctorName}</th>
+ <th scope="row">Meet <a href={getMeetLink(Appointment._id)}>Link</a></th>
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ </div> }
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default AppointmentStatus;
diff --git a/frontend/src/Patient/Payment.js b/frontend/src/Patient/Payment.js
@@ -5,17 +5,66 @@ import { Link, useHistory } from "react-router-dom";
 import Navbar from "../Basic/Navbar";
 import Leftside from "../Dashbaord/LeftsidePatient";
 
+function getEndDateTime(dateTime) {
+ const hrs = (parseInt(dateTime.split('T')[1].split(':')[0]) + 1).toString().padStart(2, '0')
+ const time = hrs + ':00:00'
+ const date = dateTime.split('T')[0]
+ return date + 'T' + time
+}
+
 const Payment = (props) => {
  const history = useHistory();
- // console.log(JSON.parse(localStorage.getItem("user")).name);
 
- const { dateId, doctor, slotId } = props.location.data;
+ function createEvent(id, dateTime, doctorEmail) {
+ var virtualEvent = {
+ 'id': id,
+ 'summary': 'Appointment',
+ 'location': 'Virtual',
+ 'description': 'Doctor-Patient appointment',
+ 'start': {
+ 'dateTime': dateTime,
+ 'timeZone': 'Asia/Kolkata'
+ },
+ 'end': {
+ 'dateTime': getEndDateTime(dateTime),
+ 'timeZone': 'Asia/Kolkata'
+ },
+ 'conferenceData': {
+ 'createRequest': {
+ 'requestId': "7qxalsvy0e"
+ }
+ },
+ 'attendees': [
+ { 'email': doctorEmail }
+ ],
+ 'guestsCanModify': true,
+ 'reminders': {
+ 'useDefault': false,
+ 'overrides': [
+ { 'method': 'email', 'minutes': 24 * 60 },
+ { 'method': 'popup', 'minutes': 15 }
+ ]
+ }
+ };
 
- const BookSlot = async () => {
+ var request = window.gapi.client.calendar.events.insert({
+ 'calendarId': 'primary',
+ 'resource': virtualEvent,
+ 'sendUpdates': 'all',
+ 'supportsAttachments': true,
+ 'conferenceDataVersion': 1
+ });
 
-
+ request.execute(function (event) {
+ console.log("Executed!")
+ console.log(event);
+ });
 
+ }
 
+ const { dateId, doctor, slotId } = props.location.data;
+
+ const BookSlot = async () => {
  const { data } = await Axios.post(
  `${process.env.REACT_APP_SERVER_URL}/doctors/book-slot/`,
  {
@@ -26,6 +75,11 @@ const Payment = (props) => {
  doctorId: doctor._id,
  }
  );
+
+ if (data.doctorEmail) {
+ createEvent(data._id, data.date + 'T' + data.slotTime, data.doctorEmail)
+ }
+
  history.push("/patient");
  };