Dateien nach "frontend/src/components" hochladen

frontend/src/components/LanguageSelect.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+const modelValue = defineModel<string>()
+
+const options = [
+  { code: 'de', label: 'Deutsch' },
+  { code: 'en', label: 'English' },
+  { code: 'ar', label: 'العربية' }
+]
+
+function select(code: string) {
+  modelValue.value = code
+}
+</script>
+
+<template>
+  <div>
+    <h2>Sprache auswählen</h2>
+    <div class="grid">
+      <button
+        v-for="opt in options"
+        :key="opt.code"
+        type="button"
+        class="lang-btn"
+        :class="{ active: opt.code === modelValue }"
+        @click="select(opt.code)"
+      >
+        {{ opt.label }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+}
+
+.lang-btn {
+  padding: 0.75rem 0.5rem;
+}
+
+.lang-btn.active {
+  background: #2563eb;
+  color: white;
+}
+</style>

frontend/src/components/PainSlider.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const modelValue = defineModel<number>({ default: 0 })
+
+function onInput(ev: Event) {
+  const target = ev.target as HTMLInputElement
+  modelValue.value = Number(target.value)
+}
+</script>
+
+<template>
+  <div>
+    <h2>Wie stark sind die Schmerzen?</h2>
+    <div class="value">{{ modelValue }}</div>
+    <input
+      type="range"
+      min="0"
+      max="10"
+      :value="modelValue"
+      @input="onInput"
+    />
+  </div>
+</template>
+
+<style scoped>
+.value {
+  text-align: center;
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+input[type='range'] {
+  width: 100%;
+}
+</style>

frontend/src/components/SymptomSelector.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const modelValue = defineModel<string | null>()
+
+const options = [
+  { code: 'chest_pain', label: 'Brust' },
+  { code: 'abdominal_pain', label: 'Bauch' },
+  { code: 'headache', label: 'Kopf' },
+  { code: 'trauma', label: 'Unfall/Verletzung' },
+  { code: 'unwell', label: 'Allgemein schlecht' }
+]
+
+function select(code: string) {
+  modelValue.value = code
+}
+</script>
+
+<template>
+  <div>
+    <h2>Wo ist das Hauptproblem?</h2>
+    <div class="grid">
+      <button
+        v-for="opt in options"
+        :key="opt.code"
+        type="button"
+        class="symptom-btn"
+        :class="{ active: opt.code === modelValue }"
+        @click="select(opt.code)"
+      >
+        {{ opt.label }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5rem;
+}
+
+.symptom-btn {
+  padding: 1rem 0.5rem;
+}
+
+.symptom-btn.active {
+  background: #16a34a;
+  color: white;
+}
+</style>