282 lines
8.8 KiB
TypeScript
282 lines
8.8 KiB
TypeScript
import { Ionicons, MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons';
|
|
import axios from 'axios';
|
|
import { addDays, addMonths, endOfMonth, endOfWeek, format, getMonth, getYear, isSameDay, startOfMonth, startOfWeek, subMonths } 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';
|
|
const NAV_ITEMS = [
|
|
{ key: 'profile', label: 'Profilom', icon: (color: string) => <MaterialIcons name="person" size={28} color={color} /> },
|
|
{ key: 'schedule', label: 'Beosztás', icon: (color: string) => <MaterialCommunityIcons name="calendar-month" size={28} color={color} /> },
|
|
{ key: 'requests', label: 'Kérelmek', icon: (color: string) => <Ionicons name="mail" size={28} color={color} /> },
|
|
];
|
|
|
|
export default function Profile() {
|
|
const [fullName, setFullName] = useState('');
|
|
const [email, setEmail] = useState('');
|
|
const [userId, setUserId] = useState('');
|
|
const [activeTab, setActiveTab] = useState('profile');
|
|
const [currentMonth, setCurrentMonth] = useState(new Date());
|
|
const [workdays, setWorkdays] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
const name = await SecureStore.getItemAsync('fullName');
|
|
const mail = await SecureStore.getItemAsync('email');
|
|
const uid = await SecureStore.getItemAsync('userId');
|
|
setFullName(name || '');
|
|
setEmail(mail || '');
|
|
setUserId(uid || '');
|
|
})();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (activeTab === 'schedule') {
|
|
fetchWorkdays();
|
|
}
|
|
// eslint-disable-next-line
|
|
}, [currentMonth, activeTab]);
|
|
|
|
async function fetchWorkdays() {
|
|
setLoading(true);
|
|
try {
|
|
const userCookie = await SecureStore.getItemAsync('cookie');
|
|
const year = getYear(currentMonth);
|
|
const month = getMonth(currentMonth) + 1;
|
|
const response = await axios.post(
|
|
'https://mymenu.mcdonalds.hu/api/UserDataApi/GetWorkDayMonthList',
|
|
{ Data: { Year: year, Month: month } },
|
|
{
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'cookie': userCookie,
|
|
'origin': 'https://mymenu.mcdonalds.hu',
|
|
},
|
|
}
|
|
);
|
|
setWorkdays(response.data.data.Data || []);
|
|
} catch (e) {
|
|
setWorkdays([]);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
async function handleLogout() {
|
|
await SecureStore.deleteItemAsync('cookie');
|
|
await SecureStore.deleteItemAsync('userId');
|
|
await SecureStore.deleteItemAsync('email');
|
|
await SecureStore.deleteItemAsync('password');
|
|
await SecureStore.deleteItemAsync('fullName');
|
|
router.replace('/');
|
|
}
|
|
|
|
function renderCalendar() {
|
|
const monthStart = startOfMonth(currentMonth);
|
|
const monthEnd = endOfMonth(monthStart);
|
|
const startDate = startOfWeek(monthStart, { weekStartsOn: 1 });
|
|
const endDate = endOfWeek(monthEnd, { 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);
|
|
}
|
|
rows.push(<View key={day.toString()} style={{ flexDirection: 'row' }}>{days}</View>);
|
|
days = [];
|
|
}
|
|
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>
|
|
</View>
|
|
<View style={{ flexDirection: 'row', marginBottom: 4 }}>
|
|
{["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>{rows}</View>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function renderContent() {
|
|
if (activeTab === 'profile') {
|
|
return (
|
|
<View style={styles.card}>
|
|
<Text style={styles.label}>Név:</Text>
|
|
<Text style={styles.value}>{fullName}</Text>
|
|
<Text style={styles.label}>Email:</Text>
|
|
<Text style={styles.value}>{email}</Text>
|
|
<Text style={styles.label}>UserID:</Text>
|
|
<Text style={styles.value}>{userId}</Text>
|
|
<TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
|
|
<Text style={styles.logoutText}>Kijelentkezés</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
} else if (activeTab === 'schedule') {
|
|
return (
|
|
<ScrollView style={{ width: '100%' }} contentContainerStyle={{ alignItems: 'center' }}>
|
|
<View style={styles.card}>
|
|
<Text style={styles.label}>Beosztás naptár</Text>
|
|
{renderCalendar()}
|
|
</View>
|
|
</ScrollView>
|
|
);
|
|
} else if (activeTab === 'requests') {
|
|
return (
|
|
<View style={styles.card}>
|
|
<Text style={styles.value}>Kérelmek funkció hamarosan…</Text>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.title}>Profil</Text>
|
|
{renderContent()}
|
|
<View style={styles.navBar}>
|
|
{NAV_ITEMS.map(item => (
|
|
<TouchableOpacity
|
|
key={item.key}
|
|
style={styles.navItem}
|
|
onPress={() => setActiveTab(item.key)}
|
|
>
|
|
{item.icon(activeTab === item.key ? PRIMARY : '#bdbdbd')}
|
|
<Text style={[styles.navLabel, { color: activeTab === item.key ? PRIMARY : '#bdbdbd' }]}>{item.label}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: BG,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
paddingBottom: 64,
|
|
},
|
|
title: {
|
|
color: '#fff',
|
|
fontWeight: 'bold',
|
|
fontSize: 28,
|
|
textAlign: 'center',
|
|
marginBottom: 24,
|
|
marginTop: 32,
|
|
},
|
|
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,
|
|
},
|
|
label: {
|
|
color: '#bdbdbd',
|
|
fontSize: 16,
|
|
marginTop: 12,
|
|
fontWeight: 'bold',
|
|
},
|
|
value: {
|
|
color: PRIMARY,
|
|
fontSize: 18,
|
|
marginBottom: 8,
|
|
},
|
|
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',
|
|
},
|
|
logoutButton: {
|
|
backgroundColor: PRIMARY,
|
|
borderRadius: 12,
|
|
paddingVertical: 16,
|
|
alignItems: 'center',
|
|
marginTop: 32,
|
|
shadowColor: PRIMARY,
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 8,
|
|
shadowOffset: { width: 0, height: 2 },
|
|
elevation: 2,
|
|
},
|
|
logoutText: {
|
|
color: '#fff',
|
|
fontWeight: 'bold',
|
|
fontSize: 18,
|
|
letterSpacing: 1,
|
|
},
|
|
});
|