Skip to content

Commit 0d7539d

Browse files
alan-wualan-wu
committed
Add acupoints.
1 parent 7acc664 commit 0d7539d

4 files changed

Lines changed: 561 additions & 0 deletions

File tree

‎src/acupoints.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
export const acupointEntries = {
2+
"LU 1": {
3+
"Acupoint": "LU 1",
4+
"Label": "LU 1",
5+
"Synonym": "Test data",
6+
"UMLS CUI": "",
7+
"Meridian": "LTest data",
8+
"Chinese Name": "Zhongfu",
9+
"English Name": "Central Treasury",
10+
"Location": " z zxczc.",
11+
"Reference": "Test data",
12+
"Indications": "Test data",
13+
"Acupuncture Method": "Test data",
14+
"Vasculature": "Test data",
15+
"Innervation": "Test data"
16+
},
17+
"LU 2": {
18+
"Acupoint": "LU 2",
19+
"Label": "LU 2",
20+
"Synonym": "Test data",
21+
"UMLS CUI": "",
22+
"Meridian": "LTest data",
23+
"Chinese Name": "Yunmen",
24+
"English Name": "Cloud Gate",
25+
"Location": " z zxczc.",
26+
"Reference": "Test data",
27+
"Indications": "Test data",
28+
"Acupuncture Method": "Test data",
29+
"Vasculature": "Test data",
30+
"Innervation": "Test data"
31+
}
32+
}

‎src/components.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export {}
88
declare module 'vue' {
99
export interface GlobalComponents {
1010
AcupointsCard: typeof import('./components/AcupointsCard.vue')['default']
11+
'AcupointsCard copy': typeof import('./components/AcupointsCard copy.vue')['default']
1112
AcupointsInfoSearch: typeof import('./components/AcupointsInfoSearch.vue')['default']
1213
AnnotationTool: typeof import('./components/AnnotationTool.vue')['default']
1314
BadgesGroup: typeof import('./components/BadgesGroup.vue')['default']

‎src/components/AcupointsCard.vue‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
<template>
2+
<div class="dataset-card-container" ref="container">
3+
<div class="dataset-card" ref="card">
4+
<div class="seperator-path"></div>
5+
<div class="card"
6+
@click="cardClicked(entry)"
7+
@mouseover="cardHovered(entry)"
8+
@mouseleave="cardHovered(undefined)"
9+
>
10+
<div class="card-right">
11+
<div class="title">Acupoint: {{ entry.Acupoint }}</div>
12+
<template v-for="field in displayFields" :key="field['name']">
13+
<div class="details" >
14+
<strong>{{ field['name'] }}: </strong>
15+
<span
16+
v-if="!field['isEditing']"
17+
@click="field['isEditing'] = true"
18+
>
19+
{{ entry[field['name']] || 'Not Available' }}
20+
</span>
21+
<el-input
22+
v-else
23+
v-model="entry[field['name']]"
24+
@blur="field['isEditing'] = false"
25+
@keyup.enter="field['isEditing'] = false"
26+
@vue:mounted="inputMounted"
27+
/>
28+
</div>
29+
</template>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
</template>
35+
36+
<script>
37+
import EventBus from './EventBus.js'
38+
/* eslint-disable no-alert, no-console */
39+
40+
export default {
41+
data() {
42+
return {
43+
displayFields: [
44+
{name: "Synonym", isEditing: false},
45+
{name: "Chinese Name", isEditing: false},
46+
{name: "English Name", isEditing: false},
47+
{name: "Reference", isEditing: false},
48+
{name: "Indications", isEditing: false},
49+
{name: "Acupuncture Method", isEditing: false},
50+
{name: "Vasculature", isEditing: false},
51+
{name: "Innervation", isEditing: false},
52+
{name: "Notes", isEditing: false},
53+
]
54+
}
55+
},
56+
name: 'AcupointsCard',
57+
props: {
58+
/**
59+
* Object containing information for
60+
* the required viewing.
61+
*/
62+
entry: {
63+
type: Object,
64+
default: () => {},
65+
},
66+
},
67+
methods: {
68+
cardClicked: function (data) {
69+
EventBus.emit('acupoints-clicked', data);
70+
},
71+
cardHovered: function (data) {
72+
EventBus.emit('acupoints-hovered', data);
73+
},
74+
inputMounted: function(event) {
75+
event.el?.querySelector('input')?.focus();
76+
}
77+
}
78+
}
79+
</script>
80+
81+
<style lang="scss" scoped>
82+
.dataset-card {
83+
padding-left: 5px;
84+
padding-right: 5px;
85+
position: relative;
86+
min-height: 17rem;
87+
}
88+
89+
.title {
90+
padding-bottom: 0.75rem;
91+
font-family: Asap;
92+
font-size: 14px;
93+
font-weight: bold;
94+
font-stretch: normal;
95+
font-style: normal;
96+
line-height: 1.5;
97+
letter-spacing: 1.05px;
98+
color: #484848;
99+
cursor: pointer;
100+
}
101+
.card {
102+
padding-top: 18px;
103+
position: relative;
104+
display: flex;
105+
}
106+
107+
.card-left {
108+
flex: 1;
109+
}
110+
111+
.card-right {
112+
flex: 1.3;
113+
padding-left: 6px;
114+
}
115+
116+
.button {
117+
z-index: 10;
118+
font-family: Asap;
119+
font-size: 14px;
120+
font-weight: normal;
121+
font-stretch: normal;
122+
font-style: normal;
123+
line-height: normal;
124+
letter-spacing: normal;
125+
background-color: $app-primary-color;
126+
border: $app-primary-color;
127+
color: white;
128+
cursor: pointer;
129+
margin-top: 8px;
130+
}
131+
132+
.button:hover {
133+
background-color: $app-primary-color;
134+
color: white;
135+
}
136+
137+
.banner-img {
138+
width: 128px;
139+
height: 128px;
140+
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
141+
background-color: #ffffff;
142+
cursor: pointer;
143+
}
144+
.details {
145+
font-family: Asap;
146+
font-size: 14px;
147+
font-weight: normal;
148+
font-stretch: normal;
149+
font-style: normal;
150+
line-height: 1.5;
151+
letter-spacing: 1.05px;
152+
color: #484848;
153+
}
154+
155+
.badges-container {
156+
margin-top: 0.75rem;
157+
}
158+
159+
.loading-icon {
160+
z-index: 20;
161+
width: 40px;
162+
height: 40px;
163+
left: 80px;
164+
}
165+
166+
.loading-icon :deep(.el-loading-mask) {
167+
background-color: rgba(117, 190, 218, 0) !important;
168+
}
169+
170+
.loading-icon :deep(.el-loading-spinner .path) {
171+
stroke: $app-primary-color;
172+
}
173+
174+
.float-button-container {
175+
position: absolute;
176+
bottom: 8px;
177+
right: 16px;
178+
opacity: 0;
179+
visibility: hidden;
180+
181+
.card:hover & {
182+
opacity: 1;
183+
visibility: visible;
184+
}
185+
}
186+
</style>

0 commit comments

Comments
 (0)