From 4d2a3595ed848f6b95888996a8e945595715290d Mon Sep 17 00:00:00 2001 From: Dualmind-Assistant Date: Tue, 21 Apr 2026 13:04:29 +0000 Subject: [PATCH] Add pictogram icons for chief complaints and make symptom selector image-friendly --- backend/app/main.py | 1 + frontend/public/triage/abdomen.svg | 5 ++++ frontend/public/triage/chest.svg | 4 +++ frontend/public/triage/general.svg | 5 ++++ frontend/public/triage/head.svg | 6 ++++ frontend/public/triage/trauma.svg | 6 ++++ frontend/src/components/SymptomSelector.vue | 29 ++++++++++++++++++-- frontend/src/composables/useTriageSession.ts | 1 + mts-config/questions.de.json | 15 ++++++---- mts-config/questions.en.json | 15 ++++++---- 10 files changed, 75 insertions(+), 12 deletions(-) create mode 100644 frontend/public/triage/abdomen.svg create mode 100644 frontend/public/triage/chest.svg create mode 100644 frontend/public/triage/general.svg create mode 100644 frontend/public/triage/head.svg create mode 100644 frontend/public/triage/trauma.svg diff --git a/backend/app/main.py b/backend/app/main.py index 78753b1..a3f111a 100644 --- a/backend/app/main.py +++ b/backend/app/main.py @@ -30,6 +30,7 @@ class MtsPreparation(BaseModel): class QuestionOption(BaseModel): value: str label: str + icon: str | None = None class Question(BaseModel): diff --git a/frontend/public/triage/abdomen.svg b/frontend/public/triage/abdomen.svg new file mode 100644 index 0000000..9c25fe8 --- /dev/null +++ b/frontend/public/triage/abdomen.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/public/triage/chest.svg b/frontend/public/triage/chest.svg new file mode 100644 index 0000000..a738cb9 --- /dev/null +++ b/frontend/public/triage/chest.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/public/triage/general.svg b/frontend/public/triage/general.svg new file mode 100644 index 0000000..0a11f73 --- /dev/null +++ b/frontend/public/triage/general.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/public/triage/head.svg b/frontend/public/triage/head.svg new file mode 100644 index 0000000..6b159e1 --- /dev/null +++ b/frontend/public/triage/head.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/public/triage/trauma.svg b/frontend/public/triage/trauma.svg new file mode 100644 index 0000000..cc807e6 --- /dev/null +++ b/frontend/public/triage/trauma.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/src/components/SymptomSelector.vue b/frontend/src/components/SymptomSelector.vue index 52767f0..62cf740 100644 --- a/frontend/src/components/SymptomSelector.vue +++ b/frontend/src/components/SymptomSelector.vue @@ -4,6 +4,7 @@ const modelValue = defineModel() interface QuestionOption { value: string label: string + icon?: string } const props = defineProps<{ @@ -28,7 +29,10 @@ function select(value: string) { :class="{ active: opt.value === modelValue }" @click="select(opt.value)" > - {{ opt.label }} + + + + {{ opt.label }} @@ -47,7 +51,7 @@ h2 { } .symptom-btn { - padding: 0.85rem 0.75rem; + padding: 0.75rem 0.75rem; border-radius: 18px; border: 1px solid #e5e7eb; background: #f9fafb; @@ -55,10 +59,31 @@ h2 { font-size: 0.95rem; color: #111827; cursor: pointer; + display: flex; + align-items: center; + gap: 0.75rem; transition: background 0.12s ease-out, border-color 0.12s ease-out, box-shadow 0.12s ease-out, transform 0.08s ease-out; } +.icon-wrapper { + flex-shrink: 0; + width: 44px; + height: 44px; + border-radius: 14px; + overflow: hidden; +} + +.icon { + width: 100%; + height: 100%; + object-fit: cover; +} + +.label { + flex: 1; +} + .symptom-btn:hover { background: #f3f4f6; } diff --git a/frontend/src/composables/useTriageSession.ts b/frontend/src/composables/useTriageSession.ts index cc8db47..f70bd84 100644 --- a/frontend/src/composables/useTriageSession.ts +++ b/frontend/src/composables/useTriageSession.ts @@ -5,6 +5,7 @@ const API_BASE_URL = import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:8000 export interface QuestionOption { value: string label: string + icon?: string } export interface Question { diff --git a/mts-config/questions.de.json b/mts-config/questions.de.json index 6febbfa..f4d1d14 100644 --- a/mts-config/questions.de.json +++ b/mts-config/questions.de.json @@ -8,23 +8,28 @@ "options": [ { "value": "chest_pain", - "label": "Brust" + "label": "Brust", + "icon": "/triage/chest.svg" }, { "value": "abdominal_pain", - "label": "Bauch" + "label": "Bauch", + "icon": "/triage/abdomen.svg" }, { "value": "headache", - "label": "Kopf" + "label": "Kopf", + "icon": "/triage/head.svg" }, { "value": "trauma", - "label": "Unfall/Verletzung" + "label": "Unfall/Verletzung", + "icon": "/triage/trauma.svg" }, { "value": "unwell", - "label": "Allgemein schlecht" + "label": "Allgemein schlecht", + "icon": "/triage/general.svg" } ] }, diff --git a/mts-config/questions.en.json b/mts-config/questions.en.json index 842b79f..1fb8c76 100644 --- a/mts-config/questions.en.json +++ b/mts-config/questions.en.json @@ -8,23 +8,28 @@ "options": [ { "value": "chest_pain", - "label": "Chest" + "label": "Chest", + "icon": "/triage/chest.svg" }, { "value": "abdominal_pain", - "label": "Abdomen" + "label": "Abdomen", + "icon": "/triage/abdomen.svg" }, { "value": "headache", - "label": "Head" + "label": "Head", + "icon": "/triage/head.svg" }, { "value": "trauma", - "label": "Accident/Injury" + "label": "Accident/Injury", + "icon": "/triage/trauma.svg" }, { "value": "unwell", - "label": "Generally unwell" + "label": "Generally unwell", + "icon": "/triage/general.svg" } ] },