├── imgs ├── bg.png ├── ss.png ├── ss1.png ├── ss2.png ├── Gotham Rounded Bold.ttf ├── Gotham Rounded Book.ttf ├── prototypeArtboard 1.jpg ├── prototypeArtboard 2.jpg ├── prototypeArtboard 3.jpg ├── prototypeArtboard 4.jpg └── prototypeArtboard 5.jpg ├── public ├── favicon.ico ├── manifest.json └── index.html ├── src ├── assets │ ├── bg2.png │ ├── img.png │ ├── gotham.ttf │ ├── gotham_thin.ttf │ └── puff.svg ├── index.css ├── App.test.js ├── Loaders │ ├── TodoLoader.js │ ├── TodoLoaderNotes.js │ └── TodoLoaderPatient.js ├── index.js ├── components │ ├── Home.js │ ├── Start.js │ ├── DocMenuBar.js │ ├── Data.js │ ├── MenuBarSmall.js │ ├── PatientDisplay.js │ ├── NavBar.js │ ├── Nurses.js │ ├── Pats.js │ ├── Bar.js │ ├── MenuBar.js │ ├── MainNavBar.js │ ├── Docs.js │ ├── AllNotesPatients.js │ ├── AllNotesDocs.js │ ├── AllDocs.js │ ├── Ward.js │ ├── PatDisplay.js │ ├── Room.js │ ├── Patient.js │ ├── AllP.js │ ├── Doctor.js │ ├── DocChat.js │ └── Chat.js ├── App.js ├── logo.svg ├── queries │ └── Queries.js ├── registerServiceWorker.js └── App.css ├── README.md ├── .gitignore └── package.json /imgs/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodHeK/soulcare/HEAD/imgs/bg.png -------------------------------------------------------------------------------- /imgs/ss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodHeK/soulcare/HEAD/imgs/ss.png -------------------------------------------------------------------------------- /imgs/ss1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodHeK/soulcare/HEAD/imgs/ss1.png -------------------------------------------------------------------------------- /imgs/ss2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodHeK/soulcare/HEAD/imgs/ss2.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodHeK/soulcare/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/bg2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodHeK/soulcare/HEAD/src/assets/bg2.png -------------------------------------------------------------------------------- /src/assets/img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodHeK/soulcare/HEAD/src/assets/img.png -------------------------------------------------------------------------------- /src/assets/gotham.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodHeK/soulcare/HEAD/src/assets/gotham.ttf -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/gotham_thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodHeK/soulcare/HEAD/src/assets/gotham_thin.ttf -------------------------------------------------------------------------------- /imgs/Gotham Rounded Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodHeK/soulcare/HEAD/imgs/Gotham Rounded Bold.ttf -------------------------------------------------------------------------------- /imgs/Gotham Rounded Book.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodHeK/soulcare/HEAD/imgs/Gotham Rounded Book.ttf -------------------------------------------------------------------------------- /imgs/prototypeArtboard 1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodHeK/soulcare/HEAD/imgs/prototypeArtboard 1.jpg -------------------------------------------------------------------------------- /imgs/prototypeArtboard 2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodHeK/soulcare/HEAD/imgs/prototypeArtboard 2.jpg -------------------------------------------------------------------------------- /imgs/prototypeArtboard 3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodHeK/soulcare/HEAD/imgs/prototypeArtboard 3.jpg -------------------------------------------------------------------------------- /imgs/prototypeArtboard 4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodHeK/soulcare/HEAD/imgs/prototypeArtboard 4.jpg -------------------------------------------------------------------------------- /imgs/prototypeArtboard 5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodHeK/soulcare/HEAD/imgs/prototypeArtboard 5.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # soulcare 2 | 3 | ### Link to the enitre presentation 4 | 5 | [presentation](https://drive.google.com/file/d/1eudCnvvLLnJjLP5VO_0ZbV6zQuzJaN7s/view?usp=sharing) 6 | 7 | ![alt](/imgs/ss.png) 8 | 9 | ![alt](/imgs/ss2.png) 10 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /src/Loaders/TodoLoader.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import loader from '../assets/puff.svg'; 3 | import '../App.css'; 4 | 5 | const TodoLoader = () => ( 6 |
7 | 8 |

9 |

Fetching the rooms

10 |
11 | ) 12 | 13 | export default TodoLoader; 14 | -------------------------------------------------------------------------------- /src/Loaders/TodoLoaderNotes.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import loader from '../assets/puff.svg'; 3 | import '../App.css'; 4 | 5 | const TodoLoaderNotes = () => ( 6 |
7 | 8 |

9 |
10 | ) 11 | 12 | export default TodoLoaderNotes; 13 | -------------------------------------------------------------------------------- /src/Loaders/TodoLoaderPatient.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import loader from '../assets/puff.svg'; 3 | import '../App.css'; 4 | 5 | const TodoLoaderPatient = () => ( 6 |
7 | 8 |

9 |

Fetching patients

10 |
11 | ) 12 | 13 | export default TodoLoaderPatient; 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import registerServiceWorker from './registerServiceWorker'; 6 | import { BrowserRouter as Router, Switch, Link, Route, Redirect } from 'react-router-dom'; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | , document.getElementById('root')); 12 | registerServiceWorker(); 13 | -------------------------------------------------------------------------------- /src/components/Home.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ApolloClient from "apollo-boost"; 3 | import { ApolloProvider } from "react-apollo"; 4 | import NavBar from './NavBar'; 5 | import Data from './Data'; 6 | import '../App.css'; 7 | 8 | class Home extends Component { 9 | render() { 10 | return ( 11 |
12 | 13 | 14 |
15 | ); 16 | } 17 | } 18 | 19 | export default Home; 20 | -------------------------------------------------------------------------------- /src/components/Start.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import $ from 'jquery'; 3 | import img from '../assets/img.png'; 4 | import '../App.css'; 5 | 6 | class Start extends Component { 7 | render() { 8 | return ( 9 |
10 |
11 | 12 |
13 |

Lets get you started.

14 |
Select patients or wards to continue.
15 |
16 |
17 | ) 18 | } 19 | } 20 | 21 | export default Start; 22 | -------------------------------------------------------------------------------- /src/components/DocMenuBar.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import $ from 'jquery'; 3 | import '../App.css'; 4 | 5 | class DocMenuBar extends Component { 6 | constructor(props) { 7 | super(props); 8 | } 9 | 10 | select(val, e) { 11 | this.props.func(val); 12 | } 13 | 14 | render() { 15 | return ( 16 |
17 |
18 |
19 | 20 |
21 |
22 |

Doctors

23 |
24 |
25 |
26 | ) 27 | } 28 | } 29 | 30 | export default DocMenuBar; 31 | -------------------------------------------------------------------------------- /src/components/Data.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import '../App.css'; 3 | 4 | class Data extends Component { 5 | render() { 6 | return ( 7 |
8 |

One place to access
everything and
everyone.

9 |
To all the doctos and nurses who wanted their
work to get easier
10 |

Continue as

11 | 12 | 13 | 14 | 15 | 16 |
NurseDoctor
17 |
18 | ) 19 | } 20 | } 21 | 22 | export default Data; 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hasuratodo", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "apollo-boost": "^0.1.16", 7 | "auth0-js": "^9.8.0", 8 | "axios": "^0.18.0", 9 | "cors": "^2.8.4", 10 | "graphql": "^14.0.2", 11 | "graphql-tag": "^2.9.2", 12 | "jquery": "^3.3.1", 13 | "react": "^16.5.2", 14 | "react-apollo": "^2.1.11", 15 | "react-dom": "^16.5.2", 16 | "react-progressbar": "^15.4.1", 17 | "react-router": "^4.3.1", 18 | "react-router-dom": "^4.3.1", 19 | "react-scripts": "1.1.5", 20 | "request": "^2.88.0", 21 | "typename-monkey-patch": "^1.0.1" 22 | }, 23 | "scripts": { 24 | "start": "react-scripts start", 25 | "build": "react-scripts build", 26 | "test": "react-scripts test --env=jsdom", 27 | "eject": "react-scripts eject" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/components/MenuBarSmall.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import $ from 'jquery'; 3 | import '../App.css'; 4 | 5 | class MenuBarSmall extends Component { 6 | render() { 7 | return ( 8 |
9 |
10 |
11 | 12 |
13 |
14 | 15 |
16 |
17 | 18 |
19 |
20 | 21 |
22 |
23 | 24 |
25 |
26 |
27 | ) 28 | } 29 | } 30 | 31 | export default MenuBarSmall; 32 | -------------------------------------------------------------------------------- /src/components/PatientDisplay.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { FetchAllRoomsQuery, FetchNurses, FetchAllPatientsQuery, getDocsQuery, subscribeQuery } from '../queries/Queries'; 3 | import { Query, Mutation } from "react-apollo"; 4 | import TodoLoaderNotes from '../Loaders/TodoLoaderNotes'; 5 | import Nurses from './Nurses'; 6 | import PatDisplay from './PatDisplay'; 7 | import $ from 'jquery'; 8 | import '../App.css'; 9 | 10 | class PatientDisplay extends Component { 11 | constructor(props) { 12 | super(props); 13 | this.state = { 14 | subscribed: "", 15 | } 16 | } 17 | 18 | select(val, e) { 19 | this.props.func(val); 20 | } 21 | 22 | render() { 23 | const { patients } = this.props; 24 | var pats = patients["id"]; 25 | console.log("In PatientDisplay"); 26 | console.log(pats); 27 | const displayPats = pats.map((p) => ); 28 | return ( 29 |
30 | {displayPats} 31 |
32 | ) 33 | } 34 | } 35 | 36 | export default PatientDisplay; 37 | -------------------------------------------------------------------------------- /src/components/NavBar.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import '../App.css'; 3 | 4 | class NavBar extends Component { 5 | render() { 6 | return ( 7 | 26 | ) 27 | } 28 | } 29 | 30 | export default NavBar; 31 | -------------------------------------------------------------------------------- /src/components/Nurses.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ApolloClient from "apollo-boost"; 3 | import { ApolloProvider } from "react-apollo"; 4 | import { Query } from "react-apollo"; 5 | import { FetchAllRoomsQuery, FetchNurses } from '../queries/Queries'; 6 | import NavBar from './NavBar'; 7 | import Data from './Data'; 8 | import '../App.css'; 9 | 10 | class Nurses extends Component { 11 | constructor(props) { 12 | super(props); 13 | } 14 | render() { 15 | const { room_no } = this.props; 16 | return ( 17 |
18 | 19 | { 20 | ({ loading, error, data }) => { 21 | if(loading) 22 | return
loading...
23 | if(error) 24 | return
Error
25 | 26 | return data.nurse.map((n) => ( 27 |
28 |
{n.name}
29 |
30 | )) 31 | } 32 | } 33 | 34 |
35 | ); 36 | } 37 | } 38 | 39 | export default Nurses; 40 | -------------------------------------------------------------------------------- /src/components/Pats.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { FetchAllRoomsQuery, FetchNurses, FetchAllPatientsQuery, getDocsQuery, subscribeQuery, getsubsQuery } from '../queries/Queries'; 3 | import { Query, Mutation } from "react-apollo"; 4 | import TodoLoaderNotes from '../Loaders/TodoLoaderNotes'; 5 | import Nurses from './Nurses'; 6 | import PatientDisplay from './PatientDisplay'; 7 | import $ from 'jquery'; 8 | import '../App.css'; 9 | 10 | class Pats extends Component { 11 | constructor(props) { 12 | super(props); 13 | } 14 | 15 | select(val, e) { 16 | this.props.func(val); 17 | } 18 | 19 | render() { 20 | const { doc_id } = this.props; 21 | console.log("In Pats"); 22 | return ( 23 |
24 |

Subscribed Patients

25 |
26 | 27 | { 28 | ({ loading, error, data }) => { 29 | if(loading) 30 | return 31 | if(error) 32 | return

Check your internet connection

; 33 | 34 | console.log(data.doctors[0].patients); 35 | 36 | return ; 37 | } 38 | } 39 | 40 |
41 | ) 42 | } 43 | } 44 | 45 | export default Pats; 46 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ApolloClient from "apollo-boost"; 3 | import { ApolloProvider } from "react-apollo"; 4 | import { BrowserRouter as Router, Switch, Link, Route, Redirect } from 'react-router-dom'; 5 | import Home from './components/Home'; 6 | import Room from './components/Room'; 7 | import Patient from './components/Patient'; 8 | import Docs from './components/Docs'; 9 | import DocChat from './components/DocChat'; 10 | import './App.css'; 11 | 12 | const client = new ApolloClient({ 13 | uri: "https://hasuratodo.herokuapp.com/v1alpha1/graphql", 14 | }) 15 | 16 | class App extends Component { 17 | render() { 18 | return ( 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 32 | ); 33 | } 34 | } 35 | 36 | export default App; 37 | -------------------------------------------------------------------------------- /src/components/Bar.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { FetchAllRoomsQuery, FetchNurses, FetchAllPatientsQuery, getDocsQuery, subscribeQuery } from '../queries/Queries'; 3 | import { Query, Mutation } from "react-apollo"; 4 | import TodoLoaderNotes from '../Loaders/TodoLoaderNotes'; 5 | import Nurses from './Nurses'; 6 | import PatDisplay from './PatDisplay'; 7 | import Progress from 'react-progressbar'; 8 | import $ from 'jquery'; 9 | import '../App.css'; 10 | 11 | class Bar extends Component { 12 | constructor(props) { 13 | super(props); 14 | this.state = { 15 | subscribed: "", 16 | } 17 | } 18 | 19 | select(val, e) { 20 | this.props.func(val); 21 | } 22 | 23 | render() { 24 | // var { meds } = this.props; 25 | // // console.log(meds["med"]); 26 | // // console.log(meds["med"].length); 27 | // var total = 0, completed = 0; 28 | // for(var i = 0; i < meds["med"].length; i++) { 29 | // total += meds["med"][i].doses; 30 | // completed += meds["med"][i].completed; 31 | // } 32 | // var percy = (completed*100)/total; 33 | var min = 0, max = 100; 34 | const per = Math.floor(Math.random() * (max - min + 1)) + min; 35 | return ( 36 |
37 | 38 |
{per} %
39 |
40 | ) 41 | } 42 | } 43 | 44 | export default Bar; 45 | -------------------------------------------------------------------------------- /src/components/MenuBar.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import $ from 'jquery'; 3 | import '../App.css'; 4 | 5 | class MenuBar extends Component { 6 | constructor(props) { 7 | super(props); 8 | } 9 | 10 | select(val, e) { 11 | this.props.func(val); 12 | } 13 | 14 | 15 | render() { 16 | return ( 17 |
18 |
19 |
20 | 21 |
22 |
23 |

Ward rooms

24 |
25 |
26 | 27 |
28 |
29 | 30 |
31 |
32 |

Patients

33 |
34 |
35 | 36 |
37 |
38 | 39 |
40 |
41 |

Doctors

42 |
43 |
44 |
45 | ) 46 | } 47 | } 48 | 49 | export default MenuBar; 50 | -------------------------------------------------------------------------------- /src/assets/puff.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12 | 19 | 20 | 21 | 28 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /src/components/MainNavBar.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import '../App.css'; 3 | 4 | class MainNavBar extends Component { 5 | render() { 6 | return ( 7 | 35 | ) 36 | } 37 | } 38 | 39 | export default MainNavBar; 40 | -------------------------------------------------------------------------------- /src/components/Docs.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import MainNavBar from './MainNavBar'; 3 | import MenuBar from './MenuBar'; 4 | import Start from './Start'; 5 | import Ward from './Ward'; 6 | import DocMenuBar from './DocMenuBar'; 7 | import Patient from './Patient'; 8 | import AllDocs from './AllDocs'; 9 | import Pats from './Pats'; 10 | import DocChat from './DocChat'; 11 | import '../App.css'; 12 | 13 | class Docs extends Component { 14 | constructor(props) { 15 | super(props); 16 | const { doc_id, pat_id } = this.props.match.params; 17 | console.log(doc_id, pat_id); 18 | if(doc_id) { 19 | this.state = { 20 | option: "pats", 21 | } 22 | } 23 | else if(pat_id) { 24 | this.state = { 25 | option: "chat", 26 | } 27 | } 28 | else { 29 | this.state = { 30 | option: "doctor", 31 | } 32 | } 33 | } 34 | 35 | change(val) { 36 | this.setState({ option: val }) 37 | } 38 | 39 | render() { 40 | const { doc_id, pat_id } = this.props.match.params; 41 | const { option } = this.state; 42 | if(option === "doctor") { 43 | var display = ; 44 | } 45 | else if(option === "pats") { 46 | var display = ; 47 | } 48 | else if(option === "chat") { 49 | var display = ; 50 | } 51 | 52 | return ( 53 |
54 | 55 |
56 |
57 | 58 |
59 |
60 | {display} 61 |
62 |
63 |
64 | ) 65 | } 66 | } 67 | 68 | export default Docs; 69 | -------------------------------------------------------------------------------- /src/components/AllNotesPatients.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { FetchAllNotesQuery} from '../queries/Queries'; 3 | import TodoLoaderNotes from '../Loaders/TodoLoaderNotes'; 4 | import { Query } from "react-apollo"; 5 | import $ from 'jquery'; 6 | import img from '../assets/img.png'; 7 | import '../App.css'; 8 | 9 | class AllNotesPatients extends Component { 10 | constructor(props) { 11 | super(props); 12 | } 13 | render() { 14 | const { patient_id } = this.props; 15 | return ( 16 |
17 | 18 | { 19 | ({ loading, error, data }) => { 20 | if(loading) 21 | return 22 | if(error) 23 | return

Error

24 | 25 | return data.note.map((nt) => ( 26 |
27 |
28 |
29 |
NURSE
30 |
31 |
32 |
{nt.time.slice(0, 10)}
33 |
34 |
35 |
36 |
37 |
38 |
39 |

DOSAGE:

40 |

{nt.desp.split(",")[0]}

41 |
42 |
43 |

MEDICINE:

44 |

{nt.desp.split(",")[1]}

45 |
46 |
47 |
48 |
49 |

NOTE:

50 |

{nt.desp.split(",")[2]}

51 |
52 |
53 |
54 |
55 | )) 56 | } 57 | } 58 | 59 |
60 | ) 61 | } 62 | } 63 | 64 | export default AllNotesPatients; 65 | -------------------------------------------------------------------------------- /src/components/AllNotesDocs.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { FetchAllNotesQuery, FetchAllNotesDocsQuery } from '../queries/Queries'; 3 | import TodoLoaderNotes from '../Loaders/TodoLoaderNotes'; 4 | import { Query } from "react-apollo"; 5 | import $ from 'jquery'; 6 | import img from '../assets/img.png'; 7 | import '../App.css'; 8 | 9 | class AllNotesDocs extends Component { 10 | constructor(props) { 11 | super(props); 12 | } 13 | render() { 14 | const { patient_id } = this.props; 15 | return ( 16 |
17 | 18 | { 19 | ({ loading, error, data }) => { 20 | if(loading) 21 | return 22 | if(error) 23 | return

Error

24 | 25 | return data.note.map((nt) => ( 26 |
27 |
28 |
29 |
DOCTOR
30 |
31 |
32 |
{nt.time.slice(0, 10)}
33 |
34 |
35 |
36 |
37 |
38 |
39 |

DOSAGE:

40 |

{nt.desp.split(",")[0]}

41 |
42 |
43 |

MEDICINE:

44 |

{nt.desp.split(",")[1]}

45 |
46 |
47 |
48 |
49 |

NOTE:

50 |

{nt.desp.split(",")[2]}

51 |
52 |
53 |
54 |
55 | )) 56 | } 57 | } 58 | 59 |
60 | ) 61 | } 62 | } 63 | 64 | export default AllNotesDocs; 65 | -------------------------------------------------------------------------------- /src/components/AllDocs.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { FetchAllRoomsQuery, FetchNurses, FetchAllPatientsQuery, getDocsQuery, subscribeQuery } from '../queries/Queries'; 3 | import { Query, Mutation } from "react-apollo"; 4 | import TodoLoaderNotes from '../Loaders/TodoLoaderNotes'; 5 | import Nurses from './Nurses'; 6 | import $ from 'jquery'; 7 | import '../App.css'; 8 | 9 | class AllDocs extends Component { 10 | constructor(props) { 11 | super(props); 12 | this.state = { 13 | subscribed: "", 14 | } 15 | } 16 | 17 | select(val, e) { 18 | this.props.func(val); 19 | } 20 | 21 | render() { 22 | const { pat_id } = this.props; 23 | return ( 24 |
25 |

Doctors

26 |    

{this.state.subscribed}

27 |
28 | 29 | { 30 | ({ loading, error, data }) => { 31 | if(loading) 32 | return 33 | if(error) 34 | return

Check your internet connection

; 35 | 36 | return data.doctors.map((p) => ( 37 |
38 |
39 |
40 |
41 |

DOCTOR NAME

42 |
{p.name}
43 |
44 |
45 |

POSITION

46 |
{p.position}
47 |
48 |
49 |

SPECIALIZATION

50 |
{p.special}
51 |
52 |
53 | 54 |
55 |
56 |
57 |
58 | )) 59 | } 60 | } 61 | 62 |
63 | ) 64 | } 65 | } 66 | 67 | export default AllDocs; 68 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 26 | React App 27 | 28 | 29 | 32 |
33 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /src/components/Ward.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { FetchAllRoomsQuery, FetchNurses } from '../queries/Queries'; 3 | import { Query } from "react-apollo"; 4 | import TodoLoader from '../Loaders/TodoLoader'; 5 | import Nurses from './Nurses'; 6 | import $ from 'jquery'; 7 | import '../App.css'; 8 | 9 | class Ward extends Component { 10 | constructor(props) { 11 | super(props); 12 | } 13 | 14 | select(val, e) { 15 | this.props.func(val); 16 | } 17 | 18 | render() { 19 | return ( 20 |
21 |

Ward rooms

22 | 23 |
24 | 25 | { 26 | ({ loading, error, data }) => { 27 | if(loading) 28 | return 29 | if(error) 30 | return

Error

; 31 | 32 | if(data.room.length == 0) 33 | return

No rooms added yet! :\/

; 34 | 35 | return data.room.map((r) => ( 36 |
37 |
38 |
39 |
40 |

ROOM NO.

41 |
{r.room_no}
42 |
43 |
44 |

NURSES

45 | 46 |
47 |
48 |
49 |
50 |

CAPACITY

51 |
{r.curr_occupancy} / {r.capacity}
52 |
53 |
54 | 55 |
56 |
57 |
58 | 59 |
60 |
61 |
62 | )) 63 | } 64 | } 65 | 66 |
67 | ) 68 | } 69 | } 70 | 71 | export default Ward; 72 | -------------------------------------------------------------------------------- /src/components/PatDisplay.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { FetchAllRoomsQuery, FetchNurses, FetchAllPatientsQuery, FetchAllPatientsQueryById } from '../queries/Queries'; 3 | import { Query } from "react-apollo"; 4 | import TodoLoaderNotes from '../Loaders/TodoLoaderNotes'; 5 | import Nurses from './Nurses'; 6 | import $ from 'jquery'; 7 | import '../App.css'; 8 | 9 | class PatDisplay extends Component { 10 | constructor(props) { 11 | super(props); 12 | } 13 | 14 | select(val, e) { 15 | this.props.func(val); 16 | } 17 | 18 | render() { 19 | const { pat_id } = this.props; 20 | console.log("In PatDisplay"); 21 | return ( 22 |
23 | 24 | { 25 | ({ loading, error, data }) => { 26 | if(loading) 27 | return 28 | if(error) 29 | return

Check your internet connection

; 30 | 31 | return data.patient.map((p) => ( 32 |
33 |
34 |
35 |
36 |

PATIENT NAME

37 |
{p.name}
38 |
39 |
40 |

AGE

41 |
{p.age}
42 |
43 |
44 |

TIMELINE

45 |
{p.start_date.slice(0, 10)}    {p.discharge_date.slice(0, 10)}
46 |
47 |
48 |

PROBLEM

49 |
{p.disease}
50 |
51 |
52 |
53 | 54 |
55 |
56 |
57 | )) 58 | } 59 | } 60 | 61 |
62 | ) 63 | } 64 | } 65 | 66 | export default PatDisplay; 67 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/components/Room.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import MainNavBar from './MainNavBar'; 3 | import MenuBar from './MenuBar'; 4 | import Start from './Start'; 5 | import Ward from './Ward'; 6 | import MenuBarSmall from './MenuBarSmall'; 7 | import Patient from './Patient'; 8 | import Chat from './Chat'; 9 | import Doctor from './Doctor'; 10 | import AllP from './AllP'; 11 | import '../App.css'; 12 | 13 | class Room extends Component { 14 | constructor(props) { 15 | super(props); 16 | const { room_no, pat_id } = this.props.match.params; 17 | if(room_no) { 18 | this.state = { 19 | open: 1, 20 | option: "patient", 21 | } 22 | } 23 | else if(pat_id) { 24 | this.state = { 25 | open: 1, 26 | option: "chat", 27 | } 28 | } 29 | else { 30 | this.state = { 31 | open: 1, 32 | option: "start", 33 | } 34 | } 35 | } 36 | 37 | close() { 38 | var toggle = this.state.open; 39 | if(toggle === 1) 40 | this.setState({ open: 0 }); 41 | else 42 | this.setState({ open: 1 }); 43 | } 44 | 45 | change(val) { 46 | this.setState({ option: val }) 47 | } 48 | 49 | render() { 50 | const { open, option } = this.state; 51 | const { room_no, pat_id, doc } = this.props.match.params; 52 | if(open === 1) { 53 | var menu = ; 54 | var btn = ; 55 | } 56 | else { 57 | var menu = ; 58 | var btn = ; 59 | } 60 | 61 | if(option === "start") { 62 | var display = ; 63 | } 64 | else if(option == "ward") { 65 | var display = ; 66 | } 67 | else if(option == "patient") { 68 | var display = ; 69 | } 70 | else if(option == "chat") { 71 | var display = ; 72 | } 73 | else if(option == "doctor") { 74 | var display = ; 75 | } 76 | else if(option == "patient_all") { 77 | var display = ; 78 | } 79 | 80 | return ( 81 |
82 | 83 |
84 |
85 | {menu} 86 |
87 |
88 | {display} 89 |
90 |
91 |
92 | ) 93 | } 94 | } 95 | 96 | export default Room; 97 | -------------------------------------------------------------------------------- /src/components/Patient.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { FetchAllRoomsQuery, FetchNurses, FetchAllPatientsQuery } from '../queries/Queries'; 3 | import { Query } from "react-apollo"; 4 | import TodoLoader from '../Loaders/TodoLoader'; 5 | import TodoLoaderPatient from '../Loaders/TodoLoaderPatient'; 6 | import Nurses from './Nurses'; 7 | import $ from 'jquery'; 8 | import '../App.css'; 9 | 10 | class Patient extends Component { 11 | constructor(props) { 12 | super(props); 13 | } 14 | 15 | select(val, e) { 16 | this.props.func(val); 17 | } 18 | 19 | render() { 20 | const { room_no } = this.props; 21 | return ( 22 |
23 |

Patients

24 |

ROOM NO. {this.props.room_no}

25 | 26 |
27 | 28 | { 29 | ({ loading, error, data }) => { 30 | if(loading) 31 | return 32 | if(error) 33 | return

Check your internet connection

; 34 | 35 | if(data.patient.length == 0) 36 | return

No patients added yet! :\/

; 37 | 38 | return data.patient.map((p) => ( 39 |
40 |
41 |
42 |
43 |

PATIENT NAME

44 |
{p.name}
45 |
46 |
47 |

AGE

48 |
{p.age}
49 |
50 |
51 |

TIMELINE

52 |
{p.start_date.slice(0, 10)}    {p.discharge_date.slice(0, 10)}
53 |
54 |
55 |

PROBLEM

56 |
{p.disease}
57 |
58 |
59 |

DOCTOR

60 |
{p.doctor}
61 |
62 |
63 |
64 | 65 |
66 |
67 |
68 | )) 69 | } 70 | } 71 | 72 | 73 | 74 |
75 | ) 76 | } 77 | } 78 | 79 | export default Patient; 80 | -------------------------------------------------------------------------------- /src/components/AllP.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { FetchAllRoomsQuery, FetchNurses, FetchAllPatientsQuery, FetchPatientsQuery } from '../queries/Queries'; 3 | import { Query } from "react-apollo"; 4 | import TodoLoader from '../Loaders/TodoLoader'; 5 | import TodoLoaderPatient from '../Loaders/TodoLoaderPatient'; 6 | import Nurses from './Nurses'; 7 | import Bar from './Bar'; 8 | import $ from 'jquery'; 9 | import '../App.css'; 10 | 11 | class AllP extends Component { 12 | constructor(props) { 13 | super(props); 14 | } 15 | 16 | select(val, e) { 17 | this.props.func(val); 18 | } 19 | 20 | render() { 21 | return ( 22 |
23 |

All Patients

24 | 25 |
26 | 27 | { 28 | ({ loading, error, data }) => { 29 | if(loading) 30 | return 31 | if(error) 32 | return

Check your internet connection

; 33 | 34 | if(data.patient.length == 0) 35 | return

No patients added yet! :\/

; 36 | 37 | return data.patient.map((p) => ( 38 |
39 |
40 |
41 |
42 |

PATIENT NAME

43 |
{p.name}
44 |
45 |
46 |

AGE

47 |
{p.age}
48 |
49 |
50 |

TIMELINE

51 |
{p.start_date.slice(0, 10)}    {p.discharge_date.slice(0, 10)}
52 |
53 | 54 |
55 |
56 |
57 |

PROBLEM

58 |
{p.disease}
59 |
60 |
61 |

DOCTOR

62 |
{p.doctor}
63 |
64 |
65 |
66 | 67 |
68 |
69 |
70 | )) 71 | } 72 | } 73 | 74 |
75 | ) 76 | } 77 | } 78 | 79 | export default AllP; 80 | -------------------------------------------------------------------------------- /src/components/Doctor.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { FetchAllRoomsQuery, FetchNurses, FetchAllPatientsQuery, getDocsQuery, subscribeQuery } from '../queries/Queries'; 3 | import { Query, Mutation } from "react-apollo"; 4 | import TodoLoaderNotes from '../Loaders/TodoLoaderNotes'; 5 | import Nurses from './Nurses'; 6 | import $ from 'jquery'; 7 | import '../App.css'; 8 | 9 | class Patient extends Component { 10 | constructor(props) { 11 | super(props); 12 | this.state = { 13 | subscribed: "", 14 | } 15 | } 16 | 17 | select(val, e) { 18 | this.props.func(val); 19 | } 20 | 21 | subscribeDoc(patients, pat_id, doc_id, subscribe, e) { 22 | var new_patients = patients; 23 | var flag = 0; 24 | for(var i=0;i 46 |

Doctors

47 |    

{this.state.subscribed}

48 |
49 | 50 | { 51 | ({ loading, error, data }) => { 52 | if(loading) 53 | return 54 | if(error) 55 | return

Check your internet connection

; 56 | 57 | return data.doctors.map((p) => ( 58 |
59 |
60 |
61 |
62 |

DOCTOR NAME

63 |
{p.name}
64 |
65 |
66 |

POSITION

67 |
{p.position}
68 |
69 |
70 |

SPECIALIZATION

71 |
{p.special}
72 |
73 | 74 | { 75 | (subscribe, { data }) => ( 76 |
77 | 78 |
79 | ) 80 | } 81 | 82 |
83 |
84 |
85 | )) 86 | } 87 | } 88 | 89 | 90 | ) 91 | } 92 | } 93 | 94 | export default Patient; 95 | -------------------------------------------------------------------------------- /src/queries/Queries.js: -------------------------------------------------------------------------------- 1 | import gql from "graphql-tag"; 2 | 3 | export const FetchAllRoomsQuery = gql` 4 | query roomsQuery { 5 | room { 6 | id 7 | room_no 8 | capacity 9 | curr_occupancy 10 | } 11 | } 12 | `; 13 | 14 | export const FetchNurses = gql` 15 | query nurseQuery($room_no: String!) { 16 | nurse ( 17 | where: { room_no: {_eq: $room_no }} 18 | ) { 19 | id 20 | name 21 | room_no 22 | } 23 | } 24 | `; 25 | 26 | export const FetchAllPatientsQuery = gql` 27 | query patientQuery($room_no: String!) { 28 | patient ( 29 | where: { room_no: {_eq: $room_no }}, 30 | order_by: priority_desc 31 | ) { 32 | id 33 | name 34 | phone 35 | age 36 | room_no 37 | medicine 38 | priority 39 | start_date 40 | discharge_date 41 | disease 42 | doctor 43 | } 44 | } 45 | `; 46 | 47 | export const FetchPatientsQuery = gql` 48 | query patientAllQuery { 49 | patient ( 50 | order_by: priority_desc 51 | ) { 52 | id 53 | name 54 | phone 55 | age 56 | room_no 57 | medicine 58 | priority 59 | start_date 60 | discharge_date 61 | disease 62 | doctor 63 | } 64 | } 65 | `; 66 | 67 | export const FetchAllPatientsQueryById = gql` 68 | query patientQuery($pat_id: Int!) { 69 | patient ( 70 | where: { id: {_eq: $pat_id }}, 71 | order_by: priority_desc 72 | ) { 73 | id 74 | name 75 | phone 76 | age 77 | room_no 78 | medicine 79 | priority 80 | start_date 81 | discharge_date 82 | disease 83 | doctor 84 | } 85 | } 86 | `; 87 | 88 | export const FetchAllNotesQuery = gql` 89 | query notesQuery($patient_id: Int!) { 90 | note ( 91 | where: { patient_id: { _eq: $patient_id }, type: { _eq: "nurse" }}, 92 | order_by: id_desc 93 | ) { 94 | id 95 | type 96 | patient_id 97 | desp 98 | time 99 | } 100 | } 101 | `; 102 | 103 | export const FetchAllNotesDocsQuery = gql` 104 | query notesDocsQuery($patient_id: Int!) { 105 | note ( 106 | where: { patient_id: { _eq: $patient_id }, type: { _eq: "doctor" }}, 107 | order_by: id_desc 108 | ) { 109 | id 110 | type 111 | patient_id 112 | desp 113 | time 114 | } 115 | } 116 | `; 117 | 118 | export const InsertNoteQuery = gql` 119 | mutation addNote($type: String!, $patient_id: Int!, $desp: String!, $time: String!) { 120 | insert_note ( 121 | objects:[ 122 | { 123 | type: $type, 124 | patient_id: $patient_id, 125 | desp: $desp, 126 | time: $time 127 | } 128 | ] 129 | ) { 130 | returning { 131 | id 132 | type 133 | patient_id 134 | desp 135 | time 136 | } 137 | } 138 | } 139 | `; 140 | 141 | export const getPatientNameQuery = gql` 142 | query nameQuery($pat_id: Int!) { 143 | patient ( 144 | where: { id: { _eq: $pat_id }} 145 | ) { 146 | name 147 | } 148 | } 149 | `; 150 | 151 | export const getDocsQuery = gql` 152 | query docsQuery { 153 | doctors { 154 | id 155 | name 156 | special 157 | patients 158 | position 159 | } 160 | } 161 | `; 162 | 163 | export const subscribeQuery = gql` 164 | mutation subscribe($id: Int!, $patients: json) { 165 | update_doctors ( 166 | where: { id: { _eq: $id }}, 167 | _set: { patients: $patients } 168 | ) { 169 | affected_rows 170 | } 171 | } 172 | `; 173 | 174 | export const getsubsQuery = gql` 175 | query subQuery($doc_id: Int!) { 176 | doctors ( 177 | where: { id: { _eq: $doc_id }} 178 | ) { 179 | patients 180 | } 181 | } 182 | `; 183 | -------------------------------------------------------------------------------- /src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' + 44 | 'worker. To learn more, visit https://goo.gl/SC7cgQ' 45 | ); 46 | }); 47 | } else { 48 | // Is not local host. Just register service worker 49 | registerValidSW(swUrl); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then(registration => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | installingWorker.onstatechange = () => { 62 | if (installingWorker.state === 'installed') { 63 | if (navigator.serviceWorker.controller) { 64 | // At this point, the old content will have been purged and 65 | // the fresh content will have been added to the cache. 66 | // It's the perfect time to display a "New content is 67 | // available; please refresh." message in your web app. 68 | console.log('New content is available; please refresh.'); 69 | } else { 70 | // At this point, everything has been precached. 71 | // It's the perfect time to display a 72 | // "Content is cached for offline use." message. 73 | console.log('Content is cached for offline use.'); 74 | } 75 | } 76 | }; 77 | }; 78 | }) 79 | .catch(error => { 80 | console.error('Error during service worker registration:', error); 81 | }); 82 | } 83 | 84 | function checkValidServiceWorker(swUrl) { 85 | // Check if the service worker can be found. If it can't reload the page. 86 | fetch(swUrl) 87 | .then(response => { 88 | // Ensure service worker exists, and that we really are getting a JS file. 89 | if ( 90 | response.status === 404 || 91 | response.headers.get('content-type').indexOf('javascript') === -1 92 | ) { 93 | // No service worker found. Probably a different app. Reload the page. 94 | navigator.serviceWorker.ready.then(registration => { 95 | registration.unregister().then(() => { 96 | window.location.reload(); 97 | }); 98 | }); 99 | } else { 100 | // Service worker found. Proceed as normal. 101 | registerValidSW(swUrl); 102 | } 103 | }) 104 | .catch(() => { 105 | console.log( 106 | 'No internet connection found. App is running in offline mode.' 107 | ); 108 | }); 109 | } 110 | 111 | export function unregister() { 112 | if ('serviceWorker' in navigator) { 113 | navigator.serviceWorker.ready.then(registration => { 114 | registration.unregister(); 115 | }); 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /src/components/DocChat.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { FetchAllRoomsQuery, FetchNurses, FetchAllPatientsQuery, InsertNoteQuery, FetchAllNotesQuery , FetchAllNotesDocsQuery, getPatientNameQuery } from '../queries/Queries'; 3 | import { Query, Mutation } from "react-apollo"; 4 | import TodoLoader from '../Loaders/TodoLoader'; 5 | import TodoLoaderPatient from '../Loaders/TodoLoaderPatient'; 6 | import Nurses from './Nurses'; 7 | import AllNotesPatients from './AllNotesPatients'; 8 | import AllNotesDocs from './AllNotesDocs'; 9 | import $ from 'jquery'; 10 | import '../App.css'; 11 | 12 | class DocChat extends Component { 13 | constructor(props) { 14 | super(props); 15 | this.state = { 16 | dosage: "", 17 | medicine: "", 18 | note: "", 19 | } 20 | } 21 | 22 | dosage(e) { 23 | this.setState({ dosage: e.target.value }); 24 | } 25 | 26 | medicine(e) { 27 | this.setState({ medicine: e.target.value }); 28 | } 29 | 30 | note(e) { 31 | this.setState({ note: e.target.value }); 32 | } 33 | 34 | select(val, e) { 35 | this.props.func(val); 36 | } 37 | 38 | createNote(addNote, e) { 39 | const { dosage, medicine, note } = this.state; 40 | const desp = dosage+","+medicine+","+note; 41 | var today = new Date(); 42 | var time = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate(); 43 | console.log(this.props.pat_id, desp, time); 44 | addNote({ 45 | variables: { type: "doctor", patient_id: this.props.pat_id, desp: desp, time: time }, 46 | refetchQueries: [{ query: FetchAllNotesQuery, variables: { patient_id: this.props.pat_id } }, { query: FetchAllNotesDocsQuery, variables: { patient_id: this.props.pat_id } }], 47 | }); 48 | } 49 | 50 | render() { 51 | const { pat_id } = this.props; 52 | console.log("DocCHat"); 53 | return ( 54 | 55 | { 56 | (addNote, { data }) => ( 57 |
58 |

Patient Logs

59 |

PATIENT ID. {this.props.pat_id}

60 |
61 |
62 |
63 |
64 |
65 | 66 |
67 |
68 | 69 |
70 |
71 | 72 | { 73 | ({ loading, error, data}) => { 74 | if(loading) 75 | return

Loading...

; 76 | 77 | if(error) 78 | return

Error loading patient name

; 79 | 80 | return

{data.patient[0].name}

; 81 | } 82 | } 83 | 84 |
85 |
86 | 87 |
88 |
89 |
90 | 91 |
92 |
93 |
94 | 95 |
96 |
97 | 98 |
99 |
100 |
101 | 102 |
103 |
104 |
105 | 106 |
107 |
108 | 109 |
110 |
111 |
112 |
113 |
114 |
115 | 116 |
117 |
118 | 119 |
120 |
121 |
122 |
123 |
124 | ) 125 | } 126 | 127 | ) 128 | } 129 | } 130 | 131 | export default DocChat; 132 | -------------------------------------------------------------------------------- /src/components/Chat.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { FetchAllRoomsQuery, FetchNurses, FetchAllPatientsQuery, InsertNoteQuery, FetchAllNotesQuery , FetchAllNotesDocsQuery, getPatientNameQuery } from '../queries/Queries'; 3 | import { Query, Mutation } from "react-apollo"; 4 | import TodoLoader from '../Loaders/TodoLoader'; 5 | import TodoLoaderPatient from '../Loaders/TodoLoaderPatient'; 6 | import Nurses from './Nurses'; 7 | import AllNotesPatients from './AllNotesPatients'; 8 | import AllNotesDocs from './AllNotesDocs'; 9 | import $ from 'jquery'; 10 | import '../App.css'; 11 | 12 | class Chat extends Component { 13 | constructor(props) { 14 | super(props); 15 | this.state = { 16 | dosage: "", 17 | medicine: "", 18 | note: "", 19 | } 20 | } 21 | 22 | dosage(e) { 23 | this.setState({ dosage: e.target.value }); 24 | } 25 | 26 | medicine(e) { 27 | this.setState({ medicine: e.target.value }); 28 | } 29 | 30 | note(e) { 31 | this.setState({ note: e.target.value }); 32 | } 33 | 34 | select(val, e) { 35 | this.props.func(val); 36 | } 37 | 38 | createNote(addNote, e) { 39 | const { dosage, medicine, note } = this.state; 40 | const desp = dosage+","+medicine+","+note; 41 | var today = new Date(); 42 | var time = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate(); 43 | console.log(this.props.pat_id, desp, time); 44 | addNote({ 45 | variables: { type: "nurse", patient_id: this.props.pat_id, desp: desp, time: time }, 46 | refetchQueries: [{ query: FetchAllNotesQuery, variables: { patient_id: this.props.pat_id } }, { query: FetchAllNotesDocsQuery, variables: { patient_id: this.props.pat_id } }], 47 | }); 48 | } 49 | 50 | render() { 51 | const { pat_id } = this.props; 52 | return ( 53 | 54 | { 55 | (addNote, { data }) => ( 56 |
57 |

Patient Logs

58 |

PATIENT ID. {this.props.pat_id}

59 |
60 |
61 |
62 |
63 |
64 | 65 |
66 |
67 | 68 |
69 |
70 | 71 | { 72 | ({ loading, error, data}) => { 73 | if(loading) 74 | return

Loading...

; 75 | 76 | if(error) 77 | return

Error loading patient name

; 78 | 79 | return

{data.patient[0].name}

; 80 | } 81 | } 82 | 83 |
84 |
85 | 86 |
87 |
88 |
89 | 90 |
91 |
92 |
93 | 94 |
95 |
96 | 97 |
98 |
99 |
100 | 101 |
102 |
103 |
104 | 105 |
106 |
107 | 108 |
109 |
110 |
111 |
112 |
113 |
114 | 115 |
116 |
117 | 118 |
119 |
120 |
121 |
122 |
123 | ) 124 | } 125 | 126 | ) 127 | } 128 | } 129 | 130 | export default Chat; 131 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family:"gotham"; 3 | src: url("assets/gotham.ttf") format("truetype"); 4 | } 5 | 6 | @font-face { 7 | font-family:"gotham_thin"; 8 | src: url("assets/gotham_thin.ttf") format("truetype"); 9 | } 10 | 11 | .App { 12 | font-family: 'gotham', sans-serif; 13 | } 14 | 15 | .container-fluid { 16 | padding: 0; 17 | margin: 0; 18 | } 19 | 20 | #home { 21 | background-image: url('assets/bg2.png'); 22 | background-position: 0% -5%; 23 | background-repeat: no-repeat; 24 | background-size: contain; 25 | width: 100%; 26 | height: 850px; 27 | } 28 | 29 | nav { 30 | background-color: transparent; 31 | border-radius: 0; 32 | } 33 | 34 | .navbar { 35 | border: 0; 36 | background-color: transparent; 37 | } 38 | 39 | .navbar-brand { 40 | color: #fb7875; 41 | font-size: 32px; 42 | margin: 0.5em; 43 | padding-left: 2.3em; 44 | padding-top: 1em; 45 | font-weight: 100; 46 | } 47 | 48 | .data { 49 | font-size: 45px; 50 | color: #4f497c; 51 | } 52 | 53 | .data_down { 54 | font-size: 17px; 55 | color: #4f497c; 56 | font-family: 'gotham_thin', sans-serif; 57 | padding: 0.2em; 58 | } 59 | 60 | .data_cont { 61 | font-size: 20px; 62 | color: #4f497c; 63 | margin-top: 10%; 64 | } 65 | 66 | .content { 67 | padding: 5em; 68 | padding-top: 3em; 69 | letter-spacing: 0.7px; 70 | margin-top: 8%; 71 | margin-left: 3%; 72 | } 73 | 74 | .my_btn { 75 | width: 160px; 76 | height: 40px; 77 | border-radius: 10px; 78 | background-color: #fb7875; 79 | color: white; 80 | font-size: 17px; 81 | text-align: center; 82 | border: 0; 83 | line-height: 30px; 84 | } 85 | 86 | .my_btn1 { 87 | width: 160px; 88 | height: 40px; 89 | border-radius: 10px; 90 | background-color: #fb7875; 91 | color: white; 92 | font-size: 17px; 93 | text-align: center; 94 | border: 0; 95 | margin-left: 1em; 96 | line-height: 30px; 97 | } 98 | 99 | .menu { 100 | width: 90%; 101 | height: 720px; 102 | background-color: #fb7875; 103 | color: white; 104 | font-family: 'gotham_thin', sans-serif; 105 | padding: 0.5em; 106 | text-align: left; 107 | font-size: 18px 108 | } 109 | 110 | .menu_close { 111 | width: 25%; 112 | height: 720px; 113 | background-color: #fb7875; 114 | color: white; 115 | font-family: 'gotham_thin', sans-serif; 116 | padding: 0.5em; 117 | text-align: center; 118 | font-size: 18px 119 | } 120 | 121 | .name { 122 | height: 60px; 123 | line-height: 40px; 124 | padding-top: 0.2em; 125 | font-size: 16px; 126 | } 127 | 128 | .name h3 { 129 | padding-top: 2%; 130 | font-size: 20px; 131 | } 132 | 133 | .each { 134 | height: 70px; 135 | margin-top: 1.5em; 136 | } 137 | 138 | .each:hover { 139 | color: #fb7875; 140 | background-color: white; 141 | cursor: pointer; 142 | } 143 | 144 | .each:hover .icon_left { 145 | color: #fb7875; 146 | background-color: white; 147 | cursor: pointer; 148 | } 149 | 150 | .icon { 151 | color: white; 152 | font-size: 20px; 153 | float: right; 154 | padding: 0.6em; 155 | width: 100%; 156 | height: 80px; 157 | text-align: right; 158 | } 159 | 160 | .icon:hover { 161 | color: white; 162 | font-size: 20px; 163 | float: right; 164 | padding: 0.6em; 165 | width: 100%; 166 | height: 80px; 167 | text-align: right; 168 | cursor: pointer; 169 | } 170 | 171 | .icon_left { 172 | color: white; 173 | font-size: 24px; 174 | float: right; 175 | padding: 0.3em; 176 | padding-top: 1em; 177 | } 178 | 179 | .icon_right { 180 | color: white; 181 | font-size: 24px; 182 | float: right; 183 | padding: 0.4em; 184 | } 185 | 186 | .icon_left1 { 187 | color: white; 188 | font-size: 24px; 189 | text-align: center; 190 | padding: 0.3em; 191 | padding-top: 1em; 192 | } 193 | 194 | .icon_left2 { 195 | font-size: 24px; 196 | color: #fb7875; 197 | padding-top: 0.8em; 198 | } 199 | 200 | .close { 201 | display: none; 202 | } 203 | 204 | .cont { 205 | text-align: center; 206 | padding-top: 10%; 207 | } 208 | 209 | .started { 210 | font-size: 30px; 211 | color: #737373; 212 | } 213 | 214 | .select { 215 | font-size: 19px; 216 | font-family: 'gotham_thin', sans-serif; 217 | letter-spacing: 1.5px; 218 | } 219 | 220 | .link { 221 | color: #fb7875; 222 | } 223 | 224 | .navbar-right, .dropdown { 225 | width: 100px; 226 | } 227 | 228 | .dropdown-toggle:hover { 229 | background-color: transparent; 230 | } 231 | 232 | .room, .patient { 233 | text-align: center; 234 | } 235 | 236 | .title { 237 | font-size: 30px; 238 | color: #fb7875; 239 | } 240 | 241 | .box { 242 | width: 490px; 243 | height: 220px; 244 | border: 1px solid black; 245 | border-radius: 10px; 246 | margin-left: 3%; 247 | } 248 | 249 | .box1 { 250 | width: 92%; 251 | height: 140px; 252 | border: 1px solid black; 253 | border-radius: 10px; 254 | margin-left: 3%; 255 | padding-top: 2%; 256 | margin-top: 3%; 257 | } 258 | 259 | .search { 260 | width: 240px; 261 | height: 35px; 262 | border: 0; 263 | margin-left: 2%; 264 | border: 1px solid #737373; 265 | border-radius: 10px; 266 | font-size: 16px; 267 | font-family: 'gotham_thin', sans-serif; 268 | color: black; 269 | margin-top: 3%; 270 | } 271 | 272 | .header { 273 | font-size: 18px; 274 | color: #000; 275 | font-family: 'gotham_thin', sans-serif; 276 | } 277 | 278 | .head_val { 279 | font-size: 15px; 280 | color: #737373; 281 | font-family: 'gotham_thin', sans-serif; 282 | } 283 | 284 | .dat { 285 | text-align: left; 286 | padding: 1em; 287 | width: 98%; 288 | display: block; 289 | } 290 | 291 | .box { 292 | margin-top: 2%; 293 | } 294 | 295 | .arrow { 296 | border-radius: 50%; 297 | width: 50px; 298 | height: 50px; 299 | background-color: #fb7875; 300 | color: white; 301 | text-align: center; 302 | padding: 1%; 303 | float: right; 304 | margin-top: -10%; 305 | } 306 | 307 | .arrow1 { 308 | border-radius: 50%; 309 | width: 50px; 310 | height: 50px; 311 | background-color: #fb7875; 312 | color: white; 313 | text-align: center; 314 | padding-top: 0.5%; 315 | padding-right: 0.3%; 316 | float: right; 317 | } 318 | 319 | .top_nav { 320 | background-color: white; 321 | height: 80px; 322 | width: 95%; 323 | } 324 | 325 | .pat_name { 326 | color: #000; 327 | text-align: left; 328 | } 329 | 330 | .arr { 331 | font-size: 20px; 332 | color: #fb7875; 333 | text-align: center; 334 | } 335 | 336 | .icons { 337 | color: #fb7875; 338 | font-size: 30px; 339 | float: right; 340 | margin-top: 36%; 341 | width: 100%; 342 | height: 80px; 343 | text-align: right; 344 | } 345 | 346 | .chat_area { 347 | background-color: rgb(211,211,211,0.3); 348 | height: 370px; 349 | width: 95%; 350 | overflow-y: scroll; 351 | overflow-x: hidden; 352 | border-radius: 5px; 353 | } 354 | 355 | .icon_left2 { 356 | color: #fb7875; 357 | font-size: 38px; 358 | float: right; 359 | margin-top: -22%; 360 | margin-right: 20%; 361 | text-align: left; 362 | } 363 | 364 | .icon_left_sq { 365 | color: #fb7875; 366 | font-size: 33px; 367 | float: right; 368 | text-align: left; 369 | margin-top: 5.5%; 370 | } 371 | 372 | .icon_left_sq:hover { 373 | color: #fb7875; 374 | font-size: 33px; 375 | float: right; 376 | text-align: left; 377 | margin-top: 5.5%; 378 | cursor: pointer; 379 | } 380 | 381 | .icon_left_sq1 { 382 | color: #fff; 383 | font-size: 23px; 384 | float: right; 385 | text-align: left; 386 | margin-right: 10%; 387 | margin-top: 5%; 388 | margin-top: 5.5%; 389 | } 390 | 391 | .icon_left_sq1:hover { 392 | color: #fff; 393 | font-size: 23px; 394 | float: right; 395 | text-align: left; 396 | margin-right: 10%; 397 | margin-top: 5%; 398 | margin-top: 5.5%; 399 | cursor: pointer; 400 | } 401 | 402 | .add_note { 403 | padding-left: 2em; 404 | font-family: 'gotham_thin', sans-serif; 405 | color: black; 406 | font-size: 16px; 407 | height: 40px; 408 | border: 0; 409 | width: 100%; 410 | background-color: rgb(211,211,211,0.3); 411 | border-radius: 8px; 412 | } 413 | 414 | .add_note1 { 415 | padding-left: 2em; 416 | font-family: 'gotham_thin', sans-serif; 417 | color: black; 418 | font-size: 16px; 419 | height: 40px; 420 | border: 0; 421 | width: 103%; 422 | background-color: rgb(211,211,211,0.3); 423 | border-radius: 8px; 424 | } 425 | 426 | .inp_area { 427 | padding-right: 40%; 428 | padding-top: 0.8em; 429 | width: 100%; 430 | background-color: white; 431 | height: 80px; 432 | bottom: 0; 433 | position: fixed; 434 | z-index: 100; 435 | } 436 | 437 | .inp_form { 438 | padding-right: 40%; 439 | padding-top: 0.8em; 440 | width: 100%; 441 | background-color: white; 442 | height: 60px; 443 | z-index: 100; 444 | margin-bottom: 15%; 445 | position: relative; 446 | display: run-in; 447 | text-align: left; 448 | } 449 | 450 | .note_add { 451 | width: 100px; 452 | height: 35px; 453 | border: 0; 454 | background-color: #fb7875; 455 | color: white; 456 | font-family: 'gotham_thin', sans-serif; 457 | border-radius: 8px; 458 | } 459 | 460 | .note_format { 461 | width: 400px; 462 | height: 195px; 463 | background-color: white; 464 | color: black; 465 | font-size: 20px; 466 | margin: 1em; 467 | border-radius: 10px; 468 | padding-left: 1.2em; 469 | } 470 | 471 | .note_format_d { 472 | width: 400px; 473 | height: 195px; 474 | background-color: white; 475 | color: black; 476 | font-size: 20px; 477 | margin: 1em; 478 | border-radius: 10px; 479 | padding-left: 1em; 480 | border: 1px solid #fb7875; 481 | } 482 | 483 | .note_tit { 484 | font-family: 'gotham_thin', sans-serif; 485 | color: #000; 486 | font-size: 16px; 487 | text-align: left; 488 | } 489 | 490 | .note_dat { 491 | font-family: 'gotham', sans-serif; 492 | color: #000; 493 | font-size: 16px; 494 | text-align: left; 495 | letter-spacing: 1px; 496 | } 497 | 498 | .date { 499 | font-size: 20px; 500 | font-family: 'gotham', sans-serif; 501 | color: black; 502 | position: absolute; 503 | text-align: left; 504 | padding: 0.3em; 505 | } 506 | 507 | .block { 508 | padding: 0.4em; 509 | } 510 | 511 | .p_bar { 512 | text-align: center; 513 | width: 200px; 514 | height: 15px; 515 | margin-left: 18%; 516 | } 517 | --------------------------------------------------------------------------------