WatheqAlshowaiter/yemen-currency
1
1
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

feat: implement pagination and enhance UI with modern design

تصفح المصدر
هذا الالتزام موجود في:
Watheq Alshowaiter
2025-06-01 00:15:29 +03:00
الأصل 12b88cef45
التزام 8219154335
6 ملفات معدلة مع 532 إضافات و115 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

17
README.md
عرض الملف

@@ -8,15 +8,20 @@ to be added
## Plan
- [x] Add html view to show the currency data
- [x] Save command data to database
- [ ] email when failing fetching currency using resen
- [ ] caching for fetching command (6 hours), and for the controller (1 hour)
- [ ] make proper pagination
- [ ] save tabs state as query param
- [ ] make a complete test for the project
- [x] make proper pagination
- [x] make a complete test for the project
- [x] save tabs state as local storage
- [ ] email when failing fetching currency using resend
- [ ] caching for the controller (1 hour)
- [ ] make the app A PWA
- [ ] put a place for ads
- [ ] add some useful information like what is buy price and sell price, the resource of the data, etc
- [ ] improve the SEO
- [ ] add place for ads
- [ ] add place for some useful information like
- [ ] 1. what is sell price & buy price
- [ ] 2. why our data is different from online apis
- [ ] 3. where is the data from
## Future Plans
- add react native app to show the currency data

4
app/Providers/AppServiceProvider.php
عرض الملف

@@ -3,11 +3,13 @@
namespace App\Providers;
use Carbon\CarbonImmutable;
use Illuminate\Contracts\Pagination\LengthAwarePaginator;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\Date;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\URL;
use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator;
class AppServiceProvider extends ServiceProvider
{
@@ -31,5 +33,7 @@ class AppServiceProvider extends ServiceProvider
Model::shouldBeStrict(! app()->isProduction());
Date::use(CarbonImmutable::class);
Paginator::defaultSimpleView('vendor/pagination/simple-default');
}
}

51
app/Services/RateService.php
عرض الملف

@@ -7,7 +7,7 @@ use App\Models\Rate;
class RateService
{
public function getFormattedRates(): array
public function getFormattedRates()
{
$supportedCities = City::query()
->whereIn('name', City::supportedCities()) // Filter only supported cities
@@ -15,37 +15,48 @@ class RateService
->sortByDesc(fn($city) => $city->name === 'sanaa') // Sort to put 'sanaa' first
->values(); // Reset array keys to be sequential
// Get the latest exchange rates for each currency in each city
$latestRates = Rate::query()
->whereIn('city_id', $supportedCities->pluck('id'))
->with('currency', 'city')
->orderBy('city_id', 'asc')
->orderBy('currency_id', 'asc')
->orderBy('date', 'desc')
->get()
->groupBy(fn($rate) => $rate->city_id . '-' . $rate->currency_id)
->map(fn($group) => $group->first())
->groupBy('city_id');
->orderBy('date', 'desc') // first sort by latest date
->orderBy('city_id', 'asc') // then sort by city_id
->orderBy('currency_id', 'asc') // then sort by currency_id
->simplePaginate(4);
// Format the rates
$rates = $supportedCities->map(function ($city) use ($latestRates) {
$cityRates = $latestRates->get($city->id, collect())->map(function ($rate) {
$transformedRates = $latestRates->getCollection()
->map(function($rate) {
return [
'currency' => $rate->currency->name,
'city_name' => $rate->city->label,
'currency_name' => $rate->currency->name,
'buy_price' => $rate->buy_price,
'sell_price' => $rate->sell_price,
'date' => $rate->date->toDateString(),
'day' => $rate->date->locale('ar')->isoFormat('dddd'),
'is_today' => $rate->date->isToday(),
'last_update' => $rate->updated_at->diffForHumans(),
];
})->values()->toArray();
})
->groupBy('city_name')
->map(function($cityRates, $cityName) {
return [
'city' => $city->label ,
'rates' => $cityRates,
'city' => $cityName,
'rates' => $cityRates->map(function($rate) {
return [
'currency' => $rate['currency_name'],
'buy_price' => $rate['buy_price'],
'sell_price' => $rate['sell_price'],
'date' => $rate['date'],
'day' => $rate['day'],
'is_today' => $rate['is_today'],
'last_update' => $rate['last_update'],
];
})->toArray();
})->values()->toArray()
];
})
->values(); // Reset keys to be sequential
return $rates;
$latestRates->setCollection($transformedRates);
return $latestRates;
}
}

508
resources/views/rates.blade.php
عرض الملف

@@ -5,154 +5,522 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>أسعار العملات في اليمن</title>
<style>
/* Mobile-first styles */
:root {
--primary-color: #2c3e50;
--secondary-color: #3498db;
--success-color: #27ae60;
--warning-color: #f39c12;
--danger-color: #e74c3c;
--light-gray: #f8f9fa;
--medium-gray: #6c757d;
--dark-gray: #343a40;
--border-color: #dee2e6;
--shadow: 0 2px 8px rgba(0,0,0,0.1);
--border-radius: 8px;
--transition: all 0.3s ease;
}
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
margin: 0;
padding: 15px;
color: #333;
color: var(--dark-gray);
background-color: #f5f6fa;
min-height: 100vh;
}
.container {
max-width: 400px;
max-width: 500px;
margin: 0 auto;
background: white;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
padding: 20px;
}
h1 {
color: #2c3e50;
font-size: 24px;
margin-bottom: 10px;
.header {
text-align: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid var(--light-gray);
}
.header h1 {
color: var(--primary-color);
font-size: 26px;
margin: 0 0 10px 0;
font-weight: 700;
}
.header .subtitle {
color: var(--medium-gray);
font-size: 14px;
margin: 0;
}
.tabs {
display: flex;
margin-bottom: 10px;
border-bottom: 1px solid #ddd;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 20px;
padding: 0;
border-bottom: 2px solid var(--light-gray);
}
.tab {
padding: 10px 20px;
flex: 1;
min-width: 80px;
padding: 12px 16px;
cursor: pointer;
background: #f1f1f1;
border: 1px solid #ddd;
background: var(--light-gray);
border: 1px solid var(--border-color);
border-bottom: none;
border-radius: 5px 5px 0 0;
margin-left: 5px;
font-weight: light;
border-radius: var(--border-radius) var(--border-radius) 0 0;
font-weight: 500;
text-align: center;
transition: var(--transition);
user-select: none;
position: relative;
}
.tab:hover {
background: #e9ecef;
transform: translateY(-2px);
}
.tab.active {
background: #fff;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
font-weight: bold;
text-decoration: underline;
text-decoration-style: wavy;
text-underline-offset: 5px;
background: white;
border-color: var(--secondary-color);
border-bottom: 2px solid white;
margin-bottom: -2px;
font-weight: 700;
color: var(--secondary-color);
z-index: 1;
}
.tab.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background: white;
}
.currency-card {
background: #f9f9f9;
border-radius: 8px;
padding: 15px;
margin-bottom: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
background: white;
border-radius: var(--border-radius);
padding: 0;
margin-bottom: 20px;
display: none;
animation: fadeIn 0.3s ease;
}
.currency-card.active {
display: block;
}
.currency-info {
margin-bottom: 5px;
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.rate-item {
padding: 15px;
border-bottom: 1px solid #f0f0f0;
transition: var(--transition);
}
.rate-item:hover {
background: var(--light-gray);
}
.rate-item:last-child {
border-bottom: none;
border-radius: 0 0 var(--border-radius) var(--border-radius);
}
.rate-item:first-child {
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.currency-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.currency-info strong {
font-weight: bold;
.currency-name {
font-size: 18px;
font-weight: 700;
color: var(--primary-color);
}
.date-info {
.currency-flag {
width: 24px;
height: 16px;
background: var(--medium-gray);
border-radius: 2px;
display: inline-block;
}
.price-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 10px;
}
.price-box {
text-align: center;
margin-top: 15px;
font-style: italic;
color: #666;
padding: 10px;
border-radius: 6px;
border: 1px solid var(--border-color);
}
.price-box.buy {
background: rgba(39, 174, 96, 0.1);
border-color: var(--success-color);
}
.price-box.sell {
background: rgba(231, 76, 60, 0.1);
border-color: var(--danger-color);
}
.price-label {
font-size: 12px;
font-weight: 600;
margin-bottom: 5px;
text-transform: uppercase;
}
.buy .price-label {
color: var(--success-color);
}
.sell .price-label {
color: var(--danger-color);
}
.price-value {
font-size: 16px;
font-weight: 700;
color: var(--dark-gray);
}
.rate-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: var(--medium-gray);
margin-top: 10px;
}
.date-badge {
background: var(--secondary-color);
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 500;
}
.today-badge {
background: var(--success-color);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* Pagination Styles */
.pagination-container {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
.pagination-nav {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
gap: 15px;
}
.pagination-link, .pagination-disabled {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
border: 2px solid var(--border-color);
border-radius: var(--border-radius);
transition: var(--transition);
min-width: 140px;
text-align: center;
}
.pagination-link {
background: white;
color: var(--primary-color);
cursor: pointer;
}
.pagination-link:hover {
background: var(--secondary-color);
color: white;
border-color: var(--secondary-color);
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.pagination-disabled {
background: var(--light-gray);
color: var(--medium-gray);
cursor: not-allowed;
border-color: var(--border-color);
}
.arrow::before {
margin-left: 8px;
}
.arrow-left::before {
content: "▶";
margin-left: 8px;
}
.arrow-right::after {
content: "◀";
margin-right: 8px;
}
/* Loading State */
.loading {
text-align: center;
padding: 40px;
color: var(--medium-gray);
}
.spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid var(--border-color);
border-radius: 50%;
border-top-color: var(--secondary-color);
animation: spin 1s ease-in-out infinite;
margin-left: 10px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Responsive Design */
@media (max-width: 480px) {
.container {
margin: 0;
border-radius: 0;
min-height: 100vh;
}
.tabs {
flex-direction: column;
}
.tab {
border-radius: var(--border-radius);
border-bottom: 1px solid var(--border-color);
margin-bottom: 5px;
}
.tab.active {
border-bottom: 1px solid var(--secondary-color);
margin-bottom: 5px;
}
.pagination-nav {
flex-direction: column;
gap: 10px;
}
.pagination-link, .pagination-disabled {
width: 100%;
}
}
/* Tablet and larger screens */
@media (min-width: 600px) {
h1 {
font-size: 28px;
.container {
max-width: 600px;
padding: 30px;
}
.currency-card {
padding: 20px;
.header h1 {
font-size: 32px;
}
.price-row {
gap: 20px;
}
.price-value {
font-size: 18px;
}
}
/* Accessibility */
.tab:focus,
.pagination-link:focus {
outline: 2px solid var(--secondary-color);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<h1>أسعار العملات في اليمن</h1>
<p class="subtitle">أحدث أسعار الصرف لليوم</p>
</header>
<div class="tabs">
<div class="tabs" role="tablist">
@foreach ($rates as $index => $rate)
<div class="tab {{ $loop->first ? 'active' : '' }}" onclick="showTab(event, 'city-{{ $index }}')">
<button class="tab {{ $loop->first ? 'active' : '' }}"
role="tab"
aria-selected="{{ $loop->first ? 'true' : 'false' }}"
aria-controls="city-{{ $index }}"
onclick="showTab(event, 'city-{{ $index }}', {{ $index }})">
{{ $rate['city'] }}
</div>
</button>
@endforeach
</div>
@foreach ($rates as $index => $cityRates)
<div id="city-{{ $index }}"
class="currency-card {{ $loop->first ? 'active' : '' }}"
role="tabpanel"
aria-labelledby="tab-{{ $index }}">
<div id="city-{{ $index }}" class="currency-card {{ $loop->first ? 'active' : '' }}">
@foreach ($cityRates['rates'] as $rate)
<div style="margin-bottom: {{ $loop->last ? '0' : '10px' }}; border-bottom: {{ $loop->last ? 'none' : '1px dashed #ccc' }}; padding-bottom: 10px;">
<div class="currency-info">
<strong>العملة:</strong>
<span>{{ $rate['currency'] }}</span>
@forelse ($cityRates['rates'] as $rate)
<div class="rate-item">
<div class="currency-header">
<span class="currency-name">{{ $rate['currency'] }}</span>
</div>
<div class="currency-info">
<strong>سعر الشراء:</strong>
<span>{{ $rate['buy_price'] }} ريال يمني</span>
<div class="price-row">
<div class="price-box buy">
<div class="price-label">شراء</div>
<div class="price-value">{{ number_format($rate['buy_price']) }}</div>
</div>
<div class="currency-info">
<strong>سعر البيع:</strong>
<span>{{ $rate['sell_price'] }} ريال يمني</span>
<div class="price-box sell">
<div class="price-label">بيع</div>
<div class="price-value">{{ number_format($rate['sell_price']) }}</div>
</div>
<div class="currency-info">
<strong>التاريخ:</strong>
<span>{{ $rate['date'] }} ({{ $rate['day'] }})</span>
</div>
<div class="date-info">
آخر تحديث: {{ $rate['last_update'] }}
<div class="rate-meta">
<span>{{ $rate['day'] }}</span>
<span class="date-badge {{ isset($rate['is_today']) && $rate['is_today'] ? 'today-badge' : '' }}">
{{ $rate['date'] }}
@if(isset($rate['is_today']) && $rate['is_today'])
- اليوم
@endif
</span>
<small>{{ $rate['last_update'] }}</small>
</div>
</div>
@empty
<div class="loading">
لا توجد بيانات متاحة
</div>
@endforelse
</div>
@endforeach
</div>
@endforeach
{{ $rates->links() }}
</div>
<script>
function showTab(event, tabId) {
// Hide all cards
function showTab(event, tabId, index) {
// Remove active class from all cards and tabs
document.querySelectorAll('.currency-card').forEach(card => {
card.classList.remove('active');
});
// Show selected
document.getElementById(tabId).classList.add('active');
// Update tabs
document.querySelectorAll('.tab').forEach(tab => {
tab.classList.remove('active');
tab.setAttribute('aria-selected', 'false');
});
event.currentTarget.classList.add('active');
// Show selected card and activate tab
const selectedCard = document.getElementById(tabId);
const selectedTab = event.currentTarget;
if (selectedCard) {
selectedCard.classList.add('active');
}
selectedTab.classList.add('active');
selectedTab.setAttribute('aria-selected', 'true');
// Optional: Save active tab to localStorage
localStorage.setItem('activeTab', index);
}
// Restore active tab on page load
document.addEventListener('DOMContentLoaded', function() {
const savedTab = localStorage.getItem('activeTab');
if (savedTab) {
const tabButton = document.querySelector(`.tab:nth-child(${parseInt(savedTab) + 1})`);
if (tabButton) {
tabButton.click();
}
}
});
// Add keyboard navigation
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
const activeTab = document.querySelector('.tab.active');
if (!activeTab) return;
const tabs = Array.from(document.querySelectorAll('.tab'));
const currentIndex = tabs.indexOf(activeTab);
let nextIndex;
if (e.key === 'ArrowRight') {
nextIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
} else {
nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
}
tabs[nextIndex].click();
tabs[nextIndex].focus();
}
});
</script>
</body>
</html>

29
resources/views/vendor/pagination/simple-default.blade.php مباع Normal file
عرض الملف

@@ -0,0 +1,29 @@
<div class="pagination-container">
@if ($paginator->hasPages())
<nav class="pagination-nav" role="navigation" aria-label="صفحات أسعار الصرف">
@if ($paginator->onFirstPage())
<span class="pagination-disabled">
🚫
</span>
@else
<a href="{{ $paginator->previousPageUrl() }}"
class="pagination-link arrow-right"
rel="prev">
الأسعار التالية
</a>
@endif
@if ($paginator->hasMorePages())
<a href="{{ $paginator->nextPageUrl() }}"
class="pagination-link arrow-left"
rel="next">
الأسعار السابقة
</a>
@else
<span class="pagination-disabled arrow-left">
الأسعار السابقة
</span>
@endif
</nav>
@endif
</div>

4
tests/Feature/RateControllerTest.php
عرض الملف

@@ -102,11 +102,11 @@ class RateControllerTest extends TestCase
// Assert
$response->assertStatus(200)
->assertViewIs('rates')
->assertViewHasAll(['rates']);
->assertViewHas('rates');
$viewData = $response->original->getData();
$ratesCities = array_column($viewData['rates'], 'city');
$ratesCities = $viewData['rates']->pluck('city')->toArray();
$this->assertContains($sanaa->label, $ratesCities);
$this->assertContains($aden->label, $ratesCities);