Skip to content
Snippets Groups Projects
Commit 25b3304b authored by Eline Evje's avatar Eline Evje
Browse files

fix: finished modal for generated challenges

parent a29ed7e8
No related branches found
No related tags found
3 merge requests!66Final merge,!47Feat/implement genereated challenges modal,!4Pipeline fix
Hide whitespace changes
Inline Side-by-side
src/components/ButtonAddGoalOrChallenge.vue
+ 15
− 9
View file @ 25b3304b
......@@ -25,20 +25,26 @@
import { defineProps, ref } from 'vue'
import { useRouter } from 'vue-router'
interface Props {
buttonText: string
type: 'goal' | 'challenge'
}
const props = defineProps({
buttonText: String,
type: String,
showModal: Boolean
});
const emit = defineEmits(['update:showModal']);
const router = useRouter()
const props = defineProps<Props>()
const btnText = ref(props.buttonText)
const routeToGoalOrChallenge = () => {
if (props.type === 'goal') {
router.push('/sparemaal')
} else {
router.push('/spareutfordringer')
router.push('/sparemaal');
} else if (props.type === 'challenge') {
router.push('/spareutfordringer');
} else if (props.type === 'generatedChallenge') {
emit('update:showModal', true);
}
}
};
</script>
src/components/GeneratedChallengesModal.vue
+ 52
− 80
View file @ 25b3304b
<template>
<div
v-if="generatedChallenges.length > 0"
v-if="showModal"
class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50"
>
<div class="relative bg-white pt-10 p-4 rounded-lg shadow-xl" style="width: 40rem">
......@@ -20,91 +20,85 @@
/>
</svg>
</button>
<div class="text-center font-bold text-3xl mb-4 mt-2">
Personlig tilpassede spareutfordringer:
</div>
<div class="grid grid-cols-7 sm:grid-cols-11 gap-2 p-3 pb-1 border-b-2">
<span class="font-bold col-span-2 md:col-span-3 sm:text-lg pt-1 mb-0">Tittel</span>
<span class="font-bold col-span-2 md:col-span-2 sm:text-lg pt-1 mb-0">Målsum</span>
<span class="font-bold col-span-2 md:col-span-1 sm:text-lg pt-1 pr-1 md:pr-3 mb-0"
>Frist</span
>
<span class="col-span-2"></span>
</div>
<div class="space-y-2">
<div
v-for="(challenge, index) in generatedChallenges"
:key="challenge.id"
:class="{ 'bg-gray-100': index % 2 === 0 }"
class="grid grid-cols-7 md:grid-cols-7 sm:grid-cols-2 lg:grid-cols-7 gap-4 items-center border p-3 rounded mt-[-8px]"
>
<span class="break-words col-span-2 md:col-span-1 lg:col-span-2 text-lg">{{
challenge.title
}}</span>
<span class="col-span-2 md:col-span-2 lg:col-span-1 text-lg">{{
challenge.target
}}</span>
<span class="col-span-2 md:col-span-1 lg:col-span-2 text-lg">{{
challenge.due
}}</span>
<div v-if="generatedChallenges.length > 0">
<div class="text-center font-bold text-3xl mb-4 mt-2">
Personlig tilpassede spareutfordringer:
</div>
<div class="grid grid-cols-7 sm:grid-cols-11 gap-2 p-3 pb-1 border-b-2">
<span class="font-bold col-span-2 md:col-span-3 sm:text-lg pt-1 mb-0">Tittel</span>
<span class="font-bold col-span-2 md:col-span-2 sm:text-lg pt-1 mb-0">Målsum</span>
<span class="font-bold col-span-2 md:col-span-1 sm:text-lg pt-1 pr-1 md:pr-3 mb-0">Frist</span>
<span class="col-span-2"></span>
</div>
<div class="space-y-2">
<div
class="col-span-7 sm:col-start-3 sm:col-span-2 md:col-span-2 lg:col-span-2 flex items-center justify-end space-x-2"
v-for="(challenge, index) in generatedChallenges"
:key="index"
:class="{ 'bg-gray-100': index % 2 === 0 }"
class="grid grid-cols-7 md:grid-cols-7 sm:grid-cols-2 lg:grid-cols-7 gap-4 items-center border p-3 rounded mt-[-8px]"
>
<button
@click="declineChallenge(challenge.id)"
class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-1 px-4 mt-[-14px] sm:mt-0"
<span class="break-words col-span-2 md:col-span-1 lg:col-span-2 text-lg">{{ challenge.title }}</span>
<span class="col-span-2 md:col-span-2 lg:col-span-1 text-lg">{{ challenge.target }}</span>
<span class="col-span-2 md:col-span-1 lg:col-span-2 text-lg">{{ challenge.due }}</span>
<div
class="col-span-7 sm:col-start-3 sm:col-span-2 md:col-span-2 lg:col-span-2 flex items-center justify-end space-x-2"
>
Skip
</button>
<button
@click="acceptChallenge(challenge)"
class="text-white font-bold py-1 px-4 mt-[-14px] sm:mt-0">
Godta
</button>
<span v-if="challenge.isAccepted" class="font-bold text-lg">Godtatt!</span>
<button
@click="acceptChallenge(challenge)"
class="text-white font-bold py-1 px-4 mt-[-14px] sm:mt-0"
>
Godta
</button>
</div>
</div>
</div>
</div>
<div v-else class="text-center text-2xl font-bold mt-1">
Ingen nye spareutfordringer enda ... sjekk igjen senere!
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ref, reactive, onMounted } from 'vue'
import authInterceptor from '@/services/authInterceptor'
const generatedChallenges = ref([])
const showModal = ref(true);
const generatedChallenges = reactive([]);
const fetchGeneratedChallenges = async () => {
async function fetchGeneratedChallenges() {
try {
const response = await authInterceptor.get('/challenges/generate');
if (response.status === 200 && response.data.length > 0) {
generatedChallenges.value = response.data.map(challenge => ({
...challenge,
due: new Date(challenge.due).toISOString().split('T')[0],
dueFull: challenge.due
}));
console.log('Generated challenges:', generatedChallenges.value);
if (response.status === 200) {
generatedChallenges.splice(0, generatedChallenges.length, ...response.data.map(ch => ({
...ch,
due: new Date(ch.due).toISOString().split('T')[0],
dueFull: ch.due,
accepted: false
})));
console.log('Generated challenges:', generatedChallenges);
} else {
console.log('No challenges found for the user.');
generatedChallenges.value = [];
generatedChallenges.splice(0, generatedChallenges.length);
}
} catch (error) {
console.error('Error fetching challenges:', error);
generatedChallenges.value = [];
}
}
onMounted(fetchGeneratedChallenges)
onMounted(() => {
fetchGeneratedChallenges();
localStorage.setItem('lastModalShow', Date.now().toString());
});
function acceptChallenge(challenge) {
if (!challenge) {
console.error('No challenge data provided to acceptChallenge function.');
return;
}
console.log('Accepting challenge:', challenge);
const postData = {
title: challenge.title,
saved: 0,
......@@ -114,39 +108,17 @@ function acceptChallenge(challenge) {
due: challenge.dueFull,
type: challenge.type
};
console.log('Posting data:', postData);
authInterceptor.post('/challenges', postData)
.then(response => {
console.log('Challenge accepted and saved:', response.data);
removeChallenge(challenge.id);
challenge.isAccepted = true;
})
.catch(error => {
console.error('Failed to save challenge:', error);
if (error.response && error.response.data) {
console.error('Error details:', error.response.data);
}
});
}
function declineChallenge(id) {
removeChallenge(id);
}
const removeChallenge = (id) => {
const index = generatedChallenges.value.findIndex(c => c.id === id);
if (index !== -1) {
generatedChallenges.value.splice(index, 1);
generatedChallenges.value = [...generatedChallenges.value];
}
if (generatedChallenges.value.length === 0) {
closeModal();
}
}
const closeModal = () => {
generatedChallenges.value = [];
showModal.value = false;
}
</script>
src/views/HomeView.vue
+ 21
− 9
View file @ 25b3304b
......@@ -13,11 +13,18 @@
:buttonText="'Legg til spareutfordring'"
:type="'challenge'"
/>
<ButtonAddGoalOrChallenge
:buttonText="'Generer spareutfordring'"
:type="'generatedChallenge'"
:showModal="showModal"
@click="showModal = true"
@update:showModal="showModal = $event"
/>
</div>
</div>
<savings-path :challenges="challenges" :goal="goal"></savings-path>
</div>
<GeneratedChallengesModal v-if="showModal" />
<GeneratedChallengesModal v-show="showModal" @update:showModal="showModal = $event" />
</template>
<script setup lang="ts">
......@@ -31,7 +38,7 @@ import { useChallengeStore } from '@/stores/challengeStore'
import SavingsPath from '@/components/SavingsPath.vue'
import GeneratedChallengesModal from '@/components/GeneratedChallengesModal.vue'
const showModal = ref(true)
const showModal = ref(false)
const goalStore = useGoalStore()
const challengeStore = useChallengeStore()
......@@ -42,13 +49,18 @@ const goals = ref<Goal[]>([])
const goal = ref<Goal | null | undefined>(null)
onMounted(async () => {
await goalStore.getUserGoals()
await challengeStore.getUserChallenges()
challenges.value = challengeStore.challenges
goals.value = goalStore.goals
goal.value = goals.value[0]
console.log('Goals:', goals.value)
})
await goalStore.getUserGoals();
await challengeStore.getUserChallenges();
challenges.value = challengeStore.challenges;
goals.value = goalStore.goals;
goal.value = goals.value[0];
console.log('Goals:', goals.value);
const lastModalShow = localStorage.getItem('lastModalShow');
if (!lastModalShow || Date.now() - Number(lastModalShow) >= 24 * 60 * 60 * 1000) {
showModal.value = true;
}
});
// Define your speech array
const speechArray = [
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment