kincses/service-finder
1
0
Fork 0
Code Issues 29 Pull Requests Packages Projects 2 Releases Wiki Activity

201 előtti mentés

Browse Source
This commit is contained in:
Roo
2026-03-26 07:09:44 +00:00
parent 89668a9beb
commit 03258db091
124 changed files with 13619 additions and 13347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
frontend/src/components/analytics/FunStats.vue Normal file
View File

@@ -0,0 +1,168 @@
<template>
<div class="fun-stats">
<h2 class="text-2xl font-bold text-gray-800 mb-6">🎮 Fun Stats & Achievements</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Moon Trip Card -->
<div class="bg-gradient-to-br from-blue-50 to-indigo-100 rounded-2xl p-6 shadow-lg border border-blue-200">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mr-4">
<span class="text-2xl">🌙</span>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800">Moon Trip</h3>
<p class="text-sm text-gray-600">Distance traveled</p>
</div>
</div>
<div class="text-center py-4">
<div class="text-4xl font-bold text-blue-700">{{ funFacts.moonTrips }}</div>
<p class="text-gray-600 mt-2">trips to the Moon</p>
</div>
<p class="text-sm text-gray-500 text-center">
You've driven <span class="font-semibold">{{ formatNumber(funFacts.totalKmDriven) }} km</span> - that's {{ funFacts.moonTrips }} trip{{ funFacts.moonTrips !== 1 ? 's' : '' }} to the Moon!
</p>
</div>
<!-- Earth Circuits Card -->
<div class="bg-gradient-to-br from-green-50 to-emerald-100 rounded-2xl p-6 shadow-lg border border-green-200">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mr-4">
<span class="text-2xl">🌍</span>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800">Earth Circuits</h3>
<p class="text-sm text-gray-600">Around the world</p>
</div>
</div>
<div class="text-center py-4">
<div class="text-4xl font-bold text-green-700">{{ funFacts.earthCircuits }}</div>
<p class="text-gray-600 mt-2">times around Earth</p>
</div>
<p class="text-sm text-gray-500 text-center">
Equivalent to {{ funFacts.earthCircuits }} circuit{{ funFacts.earthCircuits !== 1 ? 's' : '' }} around the equator!
</p>
</div>
<!-- Trees Saved Card -->
<div class="bg-gradient-to-br from-amber-50 to-orange-100 rounded-2xl p-6 shadow-lg border border-amber-200">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center mr-4">
<span class="text-2xl">🌳</span>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800">Trees Saved</h3>
<p class="text-sm text-gray-600">Environmental impact</p>
</div>
</div>
<div class="text-center py-4">
<div class="text-4xl font-bold text-amber-700">{{ funFacts.totalTreesSaved }}</div>
<p class="text-gray-600 mt-2">trees preserved</p>
</div>
<p class="text-sm text-gray-500 text-center">
Your efficient driving saved {{ funFacts.totalTreesSaved }} tree{{ funFacts.totalTreesSaved !== 1 ? 's' : '' }} from CO₂ emissions!
</p>
</div>
<!-- CO₂ Saved Card -->
<div class="bg-gradient-to-br from-purple-50 to-pink-100 rounded-2xl p-6 shadow-lg border border-purple-200">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mr-4">
<span class="text-2xl">☁️</span>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800">CO₂ Saved</h3>
<p class="text-sm text-gray-600">Carbon footprint</p>
</div>
</div>
<div class="text-center py-4">
<div class="text-4xl font-bold text-purple-700">{{ funFacts.totalCo2Saved }}</div>
<p class="text-gray-600 mt-2">tons of CO₂</p>
</div>
<p class="text-sm text-gray-500 text-center">
That's like taking {{ Math.round(funFacts.totalCo2Saved * 1.8) }} cars off the road for a year!
</p>
</div>
<!-- Money Saved Card -->
<div class="bg-gradient-to-br from-cyan-50 to-teal-100 rounded-2xl p-6 shadow-lg border border-cyan-200">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-cyan-100 rounded-xl flex items-center justify-center mr-4">
<span class="text-2xl">💰</span>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800">Money Saved</h3>
<p class="text-sm text-gray-600">Smart driving pays off</p>
</div>
</div>
<div class="text-center py-4">
<div class="text-4xl font-bold text-cyan-700">€{{ formatNumber(funFacts.totalMoneySaved) }}</div>
<p class="text-gray-600 mt-2">total savings</p>
</div>
<p class="text-sm text-gray-500 text-center">
Compared to average drivers, you saved €{{ formatNumber(funFacts.totalMoneySaved) }}!
</p>
</div>
<!-- Fuel Efficiency Card -->
<div class="bg-gradient-to-br from-rose-50 to-red-100 rounded-2xl p-6 shadow-lg border border-rose-200">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-rose-100 rounded-xl flex items-center justify-center mr-4">
<span class="text-2xl">⛽</span>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800">Fuel Efficiency</h3>
<p class="text-sm text-gray-600">Your average</p>
</div>
</div>
<div class="text-center py-4">
<div class="text-4xl font-bold text-rose-700">{{ averageFuelEfficiency.toFixed(1) }}</div>
<p class="text-gray-600 mt-2">km per liter</p>
</div>
<p class="text-sm text-gray-500 text-center">
{{ getEfficiencyMessage(averageFuelEfficiency) }}
</p>
</div>
</div>
<!-- Fun Fact of the Day -->
<div class="mt-8 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl p-6 text-white shadow-lg">
<div class="flex items-center">
<div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center mr-4">
<span class="text-xl">💡</span>
</div>
<div>
<h3 class="text-xl font-bold">Fun Fact of the Day</h3>
<p class="text-indigo-100">Did you know?</p>
</div>
</div>
<p class="mt-4 text-lg">
If every driver in your city achieved your fuel efficiency, we'd save enough CO₂ to fill {{ Math.round(funFacts.totalCo2Saved * 100) }} hot air balloons every year!
</p>
</div>
</div>
</template>
<script setup>
import { useAnalyticsStore } from '@/stores/analyticsStore'
import { storeToRefs } from 'pinia'
const analyticsStore = useAnalyticsStore()
const { funFacts, averageFuelEfficiency } = storeToRefs(analyticsStore)
const formatNumber = (num) => {
return new Intl.NumberFormat('en-US').format(num)
}
const getEfficiencyMessage = (efficiency) => {
if (efficiency > 15) return "Outstanding! You're among the top 5% most efficient drivers."
if (efficiency > 12) return "Great job! You're more efficient than 80% of drivers."
if (efficiency > 10) return "Good! You're above average in fuel efficiency."
return 'Room for improvement. Check our tips to save more fuel.'
}
</script>
<style scoped>
.fun-stats {
font-family: 'Inter', sans-serif;
}
</style>