120 lines
2.5 KiB
Vue
120 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useTriageSession } from '../composables/useTriageSession'
|
|
|
|
const router = useRouter()
|
|
const { result, priorityClass, priorityLabel } = useTriageSession()
|
|
|
|
const hasResult = computed(() => !!result.value)
|
|
|
|
onMounted(() => {
|
|
if (!hasResult.value) {
|
|
router.replace('/language')
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<section v-if="hasResult" class="result" :class="priorityClass">
|
|
<div class="result-header">
|
|
<div>
|
|
<h2>Vorbereitung für MTS</h2>
|
|
<p class="result-subtitle">Automatisierte Einschätzung anhand der Antworten</p>
|
|
</div>
|
|
<p v-if="priorityLabel" class="priority-pill">
|
|
{{ priorityLabel }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="result-body">
|
|
<p class="result-line">
|
|
<span class="label">Sitzungs-ID</span>
|
|
<span class="value">{{ result!.session_id }}</span>
|
|
</p>
|
|
<p v-if="result!.proposed_presenting_flowchart" class="result-line">
|
|
<span class="label">Flussdiagramm</span>
|
|
<span class="value">{{ result!.proposed_presenting_flowchart }}</span>
|
|
</p>
|
|
<p v-if="result!.red_flag_indicators.length" class="result-line">
|
|
<span class="label">Red Flags</span>
|
|
<span class="value">{{ result!.red_flag_indicators.join(', ') }}</span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<button class="primary" type="button" @click="router.push('/language')">
|
|
Neue Erfassung starten
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<p v-else class="status">Kein Ergebnis vorhanden.</p>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.result {
|
|
padding: 1.2rem 1rem 1rem;
|
|
border-radius: 20px;
|
|
background: #f9fafb;
|
|
border-left: 4px solid #e5e7eb;
|
|
}
|
|
|
|
.result-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.result h2 {
|
|
font-size: 1.05rem;
|
|
margin-bottom: 0.15rem;
|
|
}
|
|
|
|
.result-subtitle {
|
|
font-size: 0.8rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.priority-pill {
|
|
padding: 0.3rem 0.7rem;
|
|
border-radius: 999px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
background: #fee2e2;
|
|
color: #b91c1c;
|
|
}
|
|
|
|
.result-body {
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.result-line {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
font-size: 0.9rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.result-line .label {
|
|
color: #6b7280;
|
|
}
|
|
|
|
.result-line .value {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status {
|
|
margin-top: 1rem;
|
|
font-size: 0.9rem;
|
|
color: #4b5563;
|
|
}
|
|
|
|
.actions {
|
|
margin-top: 1.5rem;
|
|
}
|
|
</style>
|