258 lines
11 KiB
TypeScript
258 lines
11 KiB
TypeScript
import { Ionicons, MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons';
|
|
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";
|
|
import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
|
|
|
|
const PRIMARY = '#A24BFA';
|
|
const BG = '#0c0a0a';
|
|
|
|
export default function Schedule() {
|
|
const [currentWeek, setCurrentWeek] = useState(new Date());
|
|
const [workdays, setWorkdays] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
fetchWorkdays();
|
|
}, [currentWeek]);
|
|
|
|
async function fetchWorkdays() {
|
|
setLoading(true);
|
|
try {
|
|
const token = await SecureStore.getItemAsync('token');
|
|
if (!token) {
|
|
throw new Error('Nincs elmentett token, kérlek jelentkezz be újra!');
|
|
}
|
|
|
|
// 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)
|
|
]);
|
|
|
|
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(allWorkdays);
|
|
} catch (e) {
|
|
const err = e as any;
|
|
if (err.response) {
|
|
console.log('API error response:', {
|
|
data: err.response.data,
|
|
});
|
|
} else {
|
|
console.log('Network error:', e);
|
|
}
|
|
setWorkdays([]);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
function renderCalendar() {
|
|
const weekStart = startOfWeek(currentWeek, { weekStartsOn: 1 });
|
|
const today = new Date();
|
|
// 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;
|
|
}
|
|
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={() => 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, 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>
|
|
))}
|
|
</View>
|
|
{loading ? (
|
|
<Text style={{ color: '#fff', textAlign: 'center', marginTop: 24 }}>Betöltés…</Text>
|
|
) : (
|
|
<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, width: '100%' }}>
|
|
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', width: '100%' }}>
|
|
<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' }}>
|
|
Nincs beosztás vagy nem vagy bejelentkezve!
|
|
</Text>
|
|
)}
|
|
{renderCalendar()}
|
|
</View>
|
|
</View>
|
|
<View style={styles.navBar}>
|
|
<NavBar activeTab="schedule" />
|
|
</View>
|
|
</ScrollView>
|
|
);
|
|
}
|
|
|
|
function NavBar({ activeTab }: { activeTab: string }) {
|
|
const router = useRouter();
|
|
return (
|
|
<View style={styles.navBar}>
|
|
<TouchableOpacity style={styles.navItem} onPress={() => router.push('/profile')}>
|
|
<MaterialIcons name="person" size={28} color={activeTab === 'profile' ? PRIMARY : '#bdbdbd'} />
|
|
<Text style={[styles.navLabel, { color: activeTab === 'profile' ? PRIMARY : '#bdbdbd' }]}>Profilom</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={styles.navItem} onPress={() => router.push('/schedule')}>
|
|
<MaterialCommunityIcons name="calendar-month" size={28} color={activeTab === 'schedule' ? PRIMARY : '#bdbdbd'} />
|
|
<Text style={[styles.navLabel, { color: activeTab === 'schedule' ? PRIMARY : '#bdbdbd' }]}>Beosztás</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={styles.navItem} onPress={() => router.push('/requests')}>
|
|
<Ionicons name="mail" size={28} color={activeTab === 'requests' ? PRIMARY : '#bdbdbd'} />
|
|
<Text style={[styles.navLabel, { color: activeTab === 'requests' ? PRIMARY : '#bdbdbd' }]}>Kérelmek</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
backgroundColor: 'rgba(24, 20, 28, 0.95)',
|
|
borderRadius: 24,
|
|
padding: 32,
|
|
width: '90%',
|
|
maxWidth: 400,
|
|
shadowColor: '#000',
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 24,
|
|
shadowOffset: { width: 0, height: 8 },
|
|
elevation: 8,
|
|
marginBottom: 32,
|
|
marginTop: 32,
|
|
},
|
|
label: {
|
|
color: '#bdbdbd',
|
|
fontSize: 16,
|
|
marginBottom: 16,
|
|
fontWeight: 'bold',
|
|
textAlign: 'center',
|
|
},
|
|
navBar: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-around',
|
|
alignItems: 'center',
|
|
backgroundColor: 'rgba(24, 20, 28, 0.98)',
|
|
borderTopWidth: 1,
|
|
borderTopColor: '#222',
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: 64,
|
|
paddingHorizontal: 16,
|
|
},
|
|
navItem: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
navLabel: {
|
|
fontSize: 13,
|
|
marginTop: 2,
|
|
fontWeight: 'bold',
|
|
},
|
|
});
|