Skip to content

Commit 6bae292

Browse files
cseitzcseitz
committed
lots more changes, primarily hospital lists and patient lists
1 parent 0a5c565 commit 6bae292

File tree

19 files changed

+628
-73
lines changed

19 files changed

+628
-73
lines changed

‎app/src/components/lists/Hospitals.vue‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<template>
2+
<div class="hospitals-list list" style="width: 460px; margin-left: auto; margin-right: auto;">
3+
<div style="">
4+
Search:<br>
5+
<input v-model="search" style="width: 400px" v-on:input="runSearch">
6+
<!-- <button v-on:click="runSearch" style="width: calc(100px - 15px)">Search</button> -->
7+
<br><br>
8+
<div v-if="loaded">
9+
<a v-for="item in data" style="margin-bottom: 30px; text-decoration: none; display: block; color: inherit;"
10+
v-bind:href="'/database/hospital/' + item.hospital_id">
11+
<h3 style="margin-bottom: 0px;;">{{ item.name }}</h3>
12+
<p>{{ item.address }}</p>
13+
<p>{{ item.capabilities.split(',').map(o => o.trim()).join(', ') }}</p>
14+
</a>
15+
</div>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script>
21+
import ViewBase from './';
22+
23+
export default {
24+
extends: ViewBase,
25+
name: 'HospitalsList',
26+
data() {
27+
return {
28+
table: 'hospitals',
29+
path: '/api/db/hospitals.json?limit=30&search=${this.search ? "%" + this.search + "%" : ""}',
30+
allowEmpty: true,
31+
data: {},
32+
loaded: false,
33+
query: false,
34+
physician: false,
35+
search: '',
36+
}
37+
},
38+
methods: {
39+
runSearch() {
40+
this.fetchData()
41+
}
42+
},
43+
components: {
44+
45+
},
46+
}
47+
</script>
48+
49+
50+
<style scoped lang="scss">
51+
@import './';
52+
53+
</style>

‎app/src/components/lists/Patients.vue‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<template>
2+
<div class="patients-list list" style="width: 460px; margin-left: auto; margin-right: auto;">
3+
<div style="">
4+
Search:<br>
5+
<input v-model="search" style="width: 400px" v-on:input="runSearch">
6+
<!-- <button v-on:click="runSearch" style="width: calc(100px - 15px)">Search</button> -->
7+
<br><br>
8+
<div v-if="loaded">
9+
<a v-for="item in data" style="margin-bottom: 10px; text-decoration: none; display: block; color: inherit;"
10+
v-bind:href="'/database/patient/' + item.patient_id">
11+
<h3 style="margin-bottom: 0px;;">{{ item.last_name }}, {{ item.first_name }}</h3>
12+
<p>{{ item.address }}</p>
13+
</a>
14+
</div>
15+
</div>
16+
</div>
17+
</template>
18+
19+
<script>
20+
import ViewBase from './';
21+
22+
export default {
23+
extends: ViewBase,
24+
name: 'PatientsList',
25+
data() {
26+
return {
27+
table: 'patients',
28+
path: '/api/db/patients.json?limit=30&search=${this.search ? "%" + this.search + "%" : ""}',
29+
data: {},
30+
loaded: false,
31+
query: false,
32+
physician: false,
33+
search: '',
34+
}
35+
},
36+
methods: {
37+
runSearch() {
38+
this.fetchData()
39+
}
40+
},
41+
components: {
42+
43+
},
44+
}
45+
</script>
46+
47+
48+
<style scoped lang="scss">
49+
@import './';
50+
51+
</style>

‎app/src/components/lists/index.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
export default {
2+
methods: {
3+
async fetchData(url=false) {
4+
if (!url) {
5+
if (this.search.length <= 1 && !('allowEmpty' in this)) {
6+
this.data = [];
7+
this._data = JSON.stringify([]);
8+
this.loaded = false;
9+
this.query = false;
10+
return;
11+
}
12+
}
13+
let path = encodeURI(templateString(url || this.path, this));
14+
let resp = await (
15+
await fetch(path)
16+
).json();
17+
if (!url) {
18+
this.query = resp.query;
19+
this.data = resp.results;
20+
this._data = JSON.stringify(resp.results);
21+
this.loaded = true;
22+
if ('afterFetch' in this) {
23+
await this.afterFetch();
24+
}
25+
} else {
26+
return resp;
27+
}
28+
},
29+
reset() {
30+
this.data = JSON.parse(this._data);
31+
}
32+
},
33+
computed: {
34+
modified() {
35+
return !(JSON.stringify(this.data) == this._data);
36+
}
37+
},
38+
mounted() {
39+
this.fetchData();
40+
}
41+
}

‎app/src/components/lists/index.scss‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.queryDisplay {
2+
background-color: rgba(0, 0, 0, 0.15);
3+
padding: 10px;
4+
border-radius: 1em;
5+
}
6+
7+
input, button {
8+
border: none;
9+
padding: 10px;
10+
margin: 5px;
11+
border-radius: 0.5em;
12+
background-color: rgba(0, 0, 0, 0.15);
13+
}
14+
15+
button:not(:disabled) {
16+
cursor: pointer;
17+
}
18+
19+
.field {
20+
padding-left: 10px;
21+
float: left;
22+
}
23+
24+
.view {
25+
padding: 10px;
26+
}

‎app/src/components/views/Patient.vue‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<template>
2+
<div class="patient-view view" style="width: 460px; margin-left: auto; margin-right: auto;">
3+
<div v-if="loaded" style="float: left;">
4+
<input v-model="data.first_name" style="width: 200px" placeholder="First Name">
5+
<input v-model="data.last_name" style="width: 200px" placeholder="First Name">
6+
<br>
7+
<input v-model="data.address" style="width: 430px" placeholder="Address">
8+
<br>
9+
<br>
10+
<span class="field">Medication:</span>
11+
<br>
12+
<input v-model="data.medication" style="width: 430px" placeholder="None">
13+
<br>
14+
<span class="field">Conditions:</span>
15+
<br>
16+
<input v-model="data.conditions" style="width: 430px" placeholder="None">
17+
18+
<br><br>
19+
20+
<div v-if="data.physician_id && physician">
21+
Physician:
22+
<a v-bind:href="'/physician/' + data.physician_id">Dr. {{ physician.first_name }} {{ physician.last_name }}</a>
23+
</div>
24+
25+
<br><br>
26+
27+
<button>Assign Physician</button>
28+
<button>Assign Room</button>
29+
30+
<input v-model="data.physician_id">
31+
32+
33+
<br><br>
34+
<button v-bind:disabled="!modified" style="text-align: center;">Save Changes</button>
35+
<br>
36+
<div v-if="modified" v-on:click="reset" style="cursor: pointer;">Undo Edits</div>
37+
<div v-else style="opacity: 0;">No changes made</div>
38+
</div>
39+
</div>
40+
</template>
41+
42+
<script>
43+
import ViewBase from './';
44+
45+
export default {
46+
extends: ViewBase,
47+
name: 'PatientView',
48+
props: {
49+
id: String,
50+
},
51+
data() {
52+
return {
53+
table: 'patients',
54+
path: '/api/db/patients/${this.id}.json',
55+
data: {},
56+
loaded: false,
57+
query: false,
58+
physician: false,
59+
}
60+
},
61+
methods: {
62+
async getPhysician() {
63+
if (this.physician) {
64+
if (this.physician.physician_id === this.data.physician_id) {
65+
return this.physician;
66+
}
67+
};
68+
if (this.data.physician_id) {
69+
this.physician = (await this.fetchData(`/api/db/physicians/${this.data.physician_id}.json`)).results;
70+
} else {
71+
this.physician = false;
72+
}
73+
return this.physician;
74+
},
75+
async afterFetch() {
76+
await this.getPhysician();
77+
//console.log(this.physician);
78+
}
79+
},
80+
components: {
81+
82+
},
83+
}
84+
</script>
85+
86+
87+
<style scoped lang="scss">
88+
@import './';
89+
90+
</style>

‎app/src/components/views/index.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
export default {
2+
methods: {
3+
async fetchData(url=false) {
4+
let path = templateString(url || this.path, this);
5+
console.log(path);
6+
let resp = await (
7+
await fetch(path)
8+
).json();
9+
if (!url) {
10+
this.query = resp.query;
11+
this.data = resp.results;
12+
this._data = JSON.stringify(resp.results);
13+
this.loaded = true;
14+
if ('afterFetch' in this) {
15+
await this.afterFetch();
16+
}
17+
} else {
18+
return resp;
19+
}
20+
},
21+
reset() {
22+
this.data = JSON.parse(this._data);
23+
}
24+
},
25+
computed: {
26+
modified() {
27+
return !(JSON.stringify(this.data) == this._data);
28+
}
29+
},
30+
mounted() {
31+
this.fetchData();
32+
}
33+
}

‎app/src/components/views/index.scss‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.queryDisplay {
2+
background-color: rgba(0, 0, 0, 0.15);
3+
padding: 10px;
4+
border-radius: 1em;
5+
}
6+
7+
input, button {
8+
border: none;
9+
padding: 10px;
10+
margin: 5px;
11+
border-radius: 0.5em;
12+
background-color: rgba(0, 0, 0, 0.15);
13+
}
14+
15+
button:not(:disabled) {
16+
cursor: pointer;
17+
}
18+
19+
.field {
20+
padding-left: 10px;
21+
float: left;
22+
}
23+
24+
.view {
25+
padding: 10px;
26+
}

‎app/src/main.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,8 @@ import App from './App.vue'
33
import router from './router'
44
import store from './store'
55

6+
window.templateString = function(str, obj) {
7+
return new Function("return `" + str + "`;").call(obj)
8+
}
9+
610
createApp(App).use(store).use(router).mount('#app')

‎app/src/router/index.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,30 @@ const routes = [
1414
// this generates a separate chunk (about.[hash].js) for this route
1515
// which is lazy-loaded when the route is visited.
1616
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
17+
},
18+
{
19+
path: '/database/hospitals',
20+
name: 'Hospitals',
21+
// route level code-splitting
22+
// this generates a separate chunk (about.[hash].js) for this route
23+
// which is lazy-loaded when the route is visited.
24+
component: () => import(/* webpackChunkName: "about" */ '../views/database/Hospitals.vue')
25+
},
26+
{
27+
path: '/database/patients',
28+
name: 'Patients',
29+
// route level code-splitting
30+
// this generates a separate chunk (about.[hash].js) for this route
31+
// which is lazy-loaded when the route is visited.
32+
component: () => import(/* webpackChunkName: "about" */ '../views/database/Patients.vue')
33+
},
34+
{
35+
path: '/database/patient/:id',
36+
name: 'Patient',
37+
// route level code-splitting
38+
// this generates a separate chunk (about.[hash].js) for this route
39+
// which is lazy-loaded when the route is visited.
40+
component: () => import(/* webpackChunkName: "about" */ '../views/database/Patient.vue')
1741
}
1842
]
1943

‎app/src/views/Home.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,21 @@
22
<div class="home">
33
<img alt="Vue logo" src="../assets/logo.png">
44
<HelloWorld msg="Welcome to Your Vue.js App"/>
5+
<PatientView id="1"/>
6+
57
</div>
68
</template>
79

810
<script>
911
// @ is an alias to /src
1012
import HelloWorld from '@/components/HelloWorld.vue'
13+
import PatientView from '@/components/views/Patient.vue'
1114
1215
export default {
1316
name: 'Home',
1417
components: {
15-
HelloWorld
18+
HelloWorld,
19+
PatientView
1620
}
1721
}
1822
</script>

0 commit comments

Comments
 (0)