Refactor Schedule component to use week-based navigation and improve workdays fetching logic
This commit is contained in:
181
app/schedule.tsx
181
app/schedule.tsx
@@ -1,5 +1,5 @@
|
||||
import { Ionicons, MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons';
|
||||
import { addDays, addMonths, endOfMonth, endOfWeek, format, getMonth, getYear, isSameDay, startOfMonth, startOfWeek, subMonths } from 'date-fns';
|
||||
import { addDays, addWeeks, format, getMonth, getYear, isSameDay, startOfWeek, subWeeks } from 'date-fns';
|
||||
import { useRouter } from 'expo-router';
|
||||
import * as SecureStore from 'expo-secure-store';
|
||||
import React, { useEffect, useState } from "react";
|
||||
@@ -9,14 +9,14 @@ const PRIMARY = '#A24BFA';
|
||||
const BG = '#0c0a0a';
|
||||
|
||||
export default function Schedule() {
|
||||
const [currentMonth, setCurrentMonth] = useState(new Date());
|
||||
const [currentWeek, setCurrentWeek] = useState(new Date());
|
||||
const [workdays, setWorkdays] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
fetchWorkdays();
|
||||
}, [currentMonth]);
|
||||
}, [currentWeek]);
|
||||
|
||||
async function fetchWorkdays() {
|
||||
setLoading(true);
|
||||
@@ -26,27 +26,35 @@ export default function Schedule() {
|
||||
throw new Error('Nincs elmentett token, kérlek jelentkezz be újra!');
|
||||
}
|
||||
|
||||
const year = getYear(currentMonth);
|
||||
const month = getMonth(currentMonth) + 1;
|
||||
// Az aktuális hét első és utolsó napja
|
||||
const weekStart = startOfWeek(currentWeek, { weekStartsOn: 1 });
|
||||
const weekEnd = addDays(weekStart, 6);
|
||||
const months = new Set([
|
||||
getMonth(weekStart) + 1,
|
||||
getMonth(weekEnd) + 1
|
||||
]);
|
||||
const years = new Set([
|
||||
getYear(weekStart),
|
||||
getYear(weekEnd)
|
||||
]);
|
||||
|
||||
const response = await fetch(`https://menuapi.devbeni.lol/api/@me/schedule?year=${year}&month=${month}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
console.log('API teljes válasz:', data);
|
||||
if (!data || !data.data || !Array.isArray(data.data.Data)) {
|
||||
console.log('Nincs beosztás adat a válaszban!');
|
||||
setWorkdays([]);
|
||||
return;
|
||||
let allWorkdays: any[] = [];
|
||||
for (const year of years) {
|
||||
for (const month of months) {
|
||||
const response = await fetch(`https://menuapi.devbeni.lol/api/@me/schedule?year=${year}&month=${month}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
});
|
||||
const data = await response.json();
|
||||
if (data && data.data && Array.isArray(data.data.Data)) {
|
||||
allWorkdays = allWorkdays.concat(data.data.Data);
|
||||
}
|
||||
}
|
||||
}
|
||||
setWorkdays(data.data.Data);
|
||||
|
||||
setWorkdays(allWorkdays);
|
||||
} catch (e) {
|
||||
const err = e as any;
|
||||
if (err.response) {
|
||||
@@ -63,59 +71,83 @@ export default function Schedule() {
|
||||
}
|
||||
|
||||
function renderCalendar() {
|
||||
const monthStart = startOfMonth(currentMonth);
|
||||
const monthEnd = endOfMonth(monthStart);
|
||||
const startDate = startOfWeek(monthStart, { weekStartsOn: 1 });
|
||||
const endDate = endOfWeek(monthEnd, { weekStartsOn: 1 });
|
||||
const weekStart = startOfWeek(currentWeek, { weekStartsOn: 1 });
|
||||
const today = new Date();
|
||||
const rows = [];
|
||||
let days = [];
|
||||
let day = startDate;
|
||||
let formattedDate = '';
|
||||
while (day <= endDate) {
|
||||
for (let i = 0; i < 7; i++) {
|
||||
formattedDate = format(day, 'yyyy-MM-dd');
|
||||
const wd = workdays.find(w => w.WorkDay?.slice(0, 10) === formattedDate);
|
||||
let bg = 'rgba(24,20,28,0.7)';
|
||||
let color = '#fff';
|
||||
let borderWidth = 0;
|
||||
if (isSameDay(day, today)) {
|
||||
borderWidth = 2;
|
||||
color = PRIMARY;
|
||||
}
|
||||
if (wd) {
|
||||
bg = wd.color || 'deepskyblue';
|
||||
color = '#222';
|
||||
}
|
||||
days.push(
|
||||
<View key={day.toString()} style={{ flex: 1, aspectRatio: 1, margin: 2 }}>
|
||||
<View style={{
|
||||
backgroundColor: bg,
|
||||
borderRadius: 8,
|
||||
borderWidth,
|
||||
borderColor: PRIMARY,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
}}>
|
||||
<Text style={{ color, fontWeight: isSameDay(day, today) ? 'bold' : 'normal' }}>{format(day, 'd')}</Text>
|
||||
{wd && <Text style={{ color, fontSize: 10 }}>{wd.text}</Text>}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
day = addDays(day, 1);
|
||||
// 2 soros grid: első sor 4 nap, második sor 3 nap
|
||||
const weekDays = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i));
|
||||
const firstRow = weekDays.slice(0, 4);
|
||||
const secondRow = weekDays.slice(4);
|
||||
|
||||
function renderDayBox(day: string | number | Date) {
|
||||
const formattedDate = format(day, 'yyyy-MM-dd');
|
||||
const wd = workdays.find(w => w.WorkDay?.slice(0, 10) === formattedDate);
|
||||
let bg = '#ede7f6';
|
||||
let color = '#6a1b9a';
|
||||
let borderWidth = 0;
|
||||
if (isSameDay(day, today)) {
|
||||
borderWidth = 2;
|
||||
color = PRIMARY;
|
||||
}
|
||||
rows.push(<View key={day.toString()} style={{ flexDirection: 'row' }}>{days}</View>);
|
||||
days = [];
|
||||
if (wd) {
|
||||
if (wd.Type === 1) {
|
||||
bg = '#B388FF';
|
||||
color = '#311b92';
|
||||
} else if (wd.Type === 10) {
|
||||
bg = '#A24BFA';
|
||||
color = '#fff';
|
||||
}
|
||||
}
|
||||
return (
|
||||
<View
|
||||
key={day.toString()}
|
||||
style={{
|
||||
flex: 1,
|
||||
margin: 6,
|
||||
minWidth: 60,
|
||||
minHeight: 70,
|
||||
maxWidth: 120,
|
||||
maxHeight: 120,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<View style={{
|
||||
backgroundColor: bg,
|
||||
borderRadius: 18,
|
||||
borderWidth,
|
||||
borderColor: PRIMARY,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
minHeight: 60,
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 4,
|
||||
shadowColor: '#a24bfa',
|
||||
shadowOpacity: 0.10,
|
||||
shadowRadius: 8,
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<Text style={{ color, fontWeight: 'bold', fontSize: 22, textAlign: 'center', width: '100%' }}>{format(day, 'd')}</Text>
|
||||
{wd && wd.Type === 1 && (
|
||||
<Text style={{ color, fontSize: 15, fontWeight: 'bold', marginTop: 4, textAlign: 'center', width: '100%' }} numberOfLines={2} ellipsizeMode="tail">PN</Text>
|
||||
)}
|
||||
{wd && wd.Type === 10 && wd.text && (
|
||||
<Text style={{ color, fontSize: 15, fontWeight: 'bold', marginTop: 4, textAlign: 'center', width: '100%' }} numberOfLines={2} ellipsizeMode="tail">{wd.text}</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
|
||||
<TouchableOpacity onPress={() => setCurrentMonth(subMonths(currentMonth, 1))}><Ionicons name="chevron-back" size={28} color="#fff" /></TouchableOpacity>
|
||||
<Text style={{ color: '#fff', fontSize: 18, fontWeight: 'bold' }}>{format(currentMonth, 'yyyy. MMMM')}</Text>
|
||||
<TouchableOpacity onPress={() => setCurrentMonth(addMonths(currentMonth, 1))}><Ionicons name="chevron-forward" size={28} color="#fff" /></TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => setCurrentWeek(subWeeks(currentWeek, 1))}><Ionicons name="chevron-back" size={28} color="#fff" /></TouchableOpacity>
|
||||
<Text style={{ color: '#fff', fontSize: 18, fontWeight: 'bold' }}>{format(weekStart, 'yyyy. MMMM d.') + ' - ' + format(addDays(weekStart, 6), 'MMMM d.')}</Text>
|
||||
<TouchableOpacity onPress={() => setCurrentWeek(addWeeks(currentWeek, 1))}><Ionicons name="chevron-forward" size={28} color="#fff" /></TouchableOpacity>
|
||||
</View>
|
||||
<View style={{ flexDirection: 'row', marginBottom: 4 }}>
|
||||
<View style={{ flexDirection: 'row', marginBottom: 4, width: '100%' }}>
|
||||
{["H", "K", "Sz", "Cs", "P", "Szo", "V"].map(d => (
|
||||
<Text key={d} style={{ flex: 1, color: '#bdbdbd', textAlign: 'center', fontWeight: 'bold' }}>{d}</Text>
|
||||
))}
|
||||
@@ -123,16 +155,23 @@ export default function Schedule() {
|
||||
{loading ? (
|
||||
<Text style={{ color: '#fff', textAlign: 'center', marginTop: 24 }}>Betöltés…</Text>
|
||||
) : (
|
||||
<View>{rows}</View>
|
||||
<View style={{ width: '100%', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<View style={{ flexDirection: 'row', width: '100%', justifyContent: 'center' }}>
|
||||
{firstRow.map(renderDayBox)}
|
||||
</View>
|
||||
<View style={{ flexDirection: 'row', width: '75%', justifyContent: 'center' }}>
|
||||
{secondRow.map(renderDayBox)}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ScrollView style={{ flex: 1, backgroundColor: BG }} contentContainerStyle={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center', minHeight: '100%', paddingBottom: 80 }}>
|
||||
<ScrollView style={{ flex: 1, backgroundColor: BG }} contentContainerStyle={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center', minHeight: '100%', paddingBottom: 80, width: '100%' }}>
|
||||
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', width: '100%' }}>
|
||||
<View style={[styles.card, { alignSelf: 'center', marginTop: 48, marginBottom: 48 }]}>
|
||||
<View style={[styles.card, { alignSelf: 'center', marginTop: 48, marginBottom: 48, width: '100%' }]}>
|
||||
<Text style={styles.label}>Beosztás naptár</Text>
|
||||
{(!loading && workdays.length === 0) && (
|
||||
<Text style={{ color: '#ff5252', textAlign: 'center', marginBottom: 12, fontWeight: 'bold' }}>
|
||||
|
||||
Reference in New Issue
Block a user