bravio init project
This commit is contained in:
María
243
pages/index.vue
Normal file
243
pages/index.vue
Normal file
@@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<FormSlice :type="currentSlice.type">
|
||||
<template v-if="currentSliceComponent">
|
||||
<transition name="fade" mode="out-in">
|
||||
<component
|
||||
:is="currentSliceComponent"
|
||||
:key="currentSliceId"
|
||||
:data="currentSlice"
|
||||
:current-index="currentQuestionIndex"
|
||||
:total="questionSlices.length"
|
||||
@previous="goToPrevious"
|
||||
@next="goToNext($event)"
|
||||
|
||||
/>
|
||||
</transition>
|
||||
</template>
|
||||
<br>
|
||||
</FormSlice>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { surveyData } from "@/data/iguales.js" // Ajusta la ruta según la ubicación de tu archivo de datos
|
||||
import FormSlice from "@/components/FormSlice.vue"
|
||||
import SliceWelcome from "@/components/SliceWelcome.vue"
|
||||
import SliceQuestion from "@/components/SliceQuestion.vue"
|
||||
import SliceEnd from "@/components/SliceEnd.vue"
|
||||
import ButtonCTA from "@/components/ButtonCTA.vue"
|
||||
import SliceFeedback from "@/components/SliceFeedback.vue"
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormSlice,
|
||||
SliceWelcome,
|
||||
SliceQuestion,
|
||||
SliceEnd,
|
||||
SliceFeedback,
|
||||
ButtonCTA
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
surveyData,
|
||||
currentSliceId: surveyData.slices[0].id,
|
||||
answers: [],
|
||||
score: null,
|
||||
results: null
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
currentSlice() {
|
||||
return surveyData.slices.find(s => s.id === this.currentSliceId)
|
||||
},
|
||||
|
||||
currentSliceComponent() {
|
||||
switch (this.currentSlice.type) {
|
||||
case "welcome": return "SliceWelcome"
|
||||
case "question": return "SliceQuestion"
|
||||
case "feedback": return "SliceFeedback"
|
||||
case "end": return "SliceEnd"
|
||||
default: return "SliceQuestion"
|
||||
}
|
||||
},
|
||||
|
||||
questionSlices() {
|
||||
return surveyData.slices.filter(s => s.type === "question")
|
||||
},
|
||||
|
||||
currentQuestionIndex() {
|
||||
return this.questionSlices.findIndex(s => s.id === this.currentSliceId)
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
currentSlice() {
|
||||
if (this.currentSlice.type === "feedback") {
|
||||
this.calculateBlockResult()
|
||||
}
|
||||
if (this.currentSlice.type === "end") {
|
||||
this.calculateFinalScore()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// mounted() {
|
||||
// // Al montar, escuchar el evento de recarga/cierre
|
||||
// window.addEventListener("beforeunload", this.clearStorageOnReload)
|
||||
// },
|
||||
|
||||
// beforeUnmount() {
|
||||
// // Limpiar el listener al desmontar el componente
|
||||
// window.removeEventListener("beforeunload", this.clearStorageOnReload)
|
||||
// },
|
||||
|
||||
|
||||
methods: {
|
||||
clearStorageOnReload() {
|
||||
localStorage.removeItem("previous-slices")
|
||||
localStorage.removeItem("answers")
|
||||
localStorage.removeItem("score")
|
||||
localStorage.removeItem("results")
|
||||
localStorage.removeItem("final-score")
|
||||
},
|
||||
|
||||
goToNext(event) {
|
||||
if (this.currentSlice.type === "question" && event !== undefined) {
|
||||
const answerObj = {
|
||||
sectionId: this.currentSlice.section.id,
|
||||
sectionTitle: this.currentSlice.section.title,
|
||||
sliceId: this.currentSlice.id,
|
||||
value: event.value,
|
||||
score: event.score,
|
||||
questionTotalPoints: this.currentSlice.questionTotalPoints || 0,
|
||||
}
|
||||
this.saveAnswer(answerObj)
|
||||
}
|
||||
|
||||
const nextConfig = this.currentSlice.next
|
||||
//console.log("Navegando desde slice:", this.currentSliceId, "con configuración next:", nextConfig)
|
||||
if (!nextConfig) {
|
||||
////console.log("Encuesta finalizada", this.answers)
|
||||
return
|
||||
}
|
||||
|
||||
// Guardar la respuesta en localStorage 'previous-slices' y avanzar a la siguiente pregunta
|
||||
if (nextConfig) {
|
||||
const previousSlices = JSON.parse(localStorage.getItem('previous-slices')) || []
|
||||
previousSlices.push(this.currentSliceId)
|
||||
localStorage.setItem('previous-slices', JSON.stringify(previousSlices))
|
||||
}
|
||||
|
||||
if (typeof nextConfig === "string") {
|
||||
// Navegación lineal
|
||||
this.currentSliceId = nextConfig
|
||||
} else if (typeof nextConfig === "object") {
|
||||
// Navegación condicional por valor de respuesta
|
||||
const nextSlice = nextConfig[event]
|
||||
if (nextSlice) {
|
||||
this.currentSliceId = nextSlice
|
||||
} else {
|
||||
console.warn("No se encontró siguiente slice para:", event)
|
||||
}
|
||||
}
|
||||
},
|
||||
goToPrevious() {
|
||||
// Leer el historial
|
||||
const previousSlices = JSON.parse(localStorage.getItem('previous-slices')) || []
|
||||
////console.log("Historial de slices anteriores:", previousSlices)
|
||||
if (previousSlices.length === 0) {
|
||||
console.warn("No hay slices anteriores en el historial")
|
||||
return
|
||||
}
|
||||
|
||||
// Sacar el último paso visitado
|
||||
const lastSliceId = previousSlices.pop()
|
||||
const currentAnswer = this.answers.pop() // Eliminar la última respuesta guardada
|
||||
|
||||
// Actualizar el historial en localStorage
|
||||
localStorage.setItem('previous-slices', JSON.stringify(previousSlices))
|
||||
localStorage.setItem('answers', JSON.stringify(this.answers))
|
||||
|
||||
// Cambiar al slice anterior
|
||||
this.currentSliceId = lastSliceId
|
||||
},
|
||||
|
||||
saveAnswer(payload) {
|
||||
// payload: { id: "question1", value: "Si" }
|
||||
////console.log("Guardando respuesta:", payload)
|
||||
let el;
|
||||
if (typeof payload !== "object") {
|
||||
el = {
|
||||
value: payload,
|
||||
label: payload,
|
||||
score: 0,
|
||||
}
|
||||
} else {
|
||||
el = payload
|
||||
}
|
||||
////console.log("Guardando respuesta:", el)
|
||||
this.answers.push(el)
|
||||
localStorage.setItem("answers", JSON.stringify(this.answers))
|
||||
},
|
||||
|
||||
calculateBlockResult() {
|
||||
// Calcular el score basado en las respuestas guardadas con el mismo sectionId
|
||||
const answers = JSON.parse(localStorage.getItem('answers'))
|
||||
if (answers && answers.length > 0) {
|
||||
const currentSectionId = this.currentSlice.section.id
|
||||
const sectionAnswers = answers.filter(a => a.sectionId === currentSectionId)
|
||||
const sectionScore = sectionAnswers.reduce((acc, curr) => acc + (curr.score || 0), 0)
|
||||
//console.log(`Score para la sección ${currentSectionId}:`, sectionScore)
|
||||
|
||||
// En funcion de la sección, aplicar regla si existe
|
||||
const evaluate = surveyData.rules[currentSectionId]
|
||||
const sectionResult = evaluate ? evaluate(sectionScore) : "SIN REGLA"
|
||||
//console.log(`Resultado para la sección ${currentSectionId}:`, sectionResult)
|
||||
|
||||
// Calcular los puntos totales posibles para la sección
|
||||
const sectionPossibleTotalPoints = sectionAnswers.reduce((acc, curr) => acc + (curr.questionTotalPoints || 0), 0)
|
||||
//console.log(`Puntos totales posibles para la sección ${currentSectionId}:`, sectionPossibleTotalPoints)
|
||||
|
||||
// Guardar el resultado parcial en localStorage
|
||||
const existingResults = JSON.parse(localStorage.getItem('results')) || []
|
||||
const updatedResults = existingResults.filter(r => r.sectionId !== currentSectionId) // Eliminar resultado previo de la misma sección
|
||||
updatedResults.push({ sectionId: currentSectionId, sectionTitle: this.currentSlice.section.title, sectionPossibleTotalPoints: sectionPossibleTotalPoints, score: sectionScore, result: sectionResult })
|
||||
localStorage.setItem('results', JSON.stringify(updatedResults))
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
calculateFinalScore() {
|
||||
const results = JSON.parse(localStorage.getItem('results'))
|
||||
if (results && results.length > 0) {
|
||||
// Calcular el número total de puntos posibles
|
||||
const totalPossiblePoints = results.reduce((acc, curr) => acc + (curr.sectionPossibleTotalPoints || 0), 0)
|
||||
|
||||
// Calcular el score total sumando los scores de cada sección
|
||||
const totalScore = results.reduce((acc, curr) => acc + (curr.score || 0), 0)
|
||||
this.score = totalScore
|
||||
|
||||
// En funcion del score total, aplicar regla si existe
|
||||
const finalRecommendations = surveyData.finalRecommendations?.total?.(totalScore) ?? null;
|
||||
|
||||
// Guardar el score total en localStorage
|
||||
localStorage.setItem('final-score', JSON.stringify({ totalPossiblePoints: totalPossiblePoints, score: totalScore, recommendations: finalRecommendations || "" }))
|
||||
this.results = results
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
.fade-enter-from, .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.fade-enter-to, .fade-leave-from {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user