USER
import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Modal from 'react-native-modal'; // importovat modální komponentu
const App = () => {
const [pocetVKartonu, setPocetVKartonu] = useState('');
const [pocetNaPaletu, setPocetNaPaletu] = useState('');
const [celkovyPocetKusu, setCelkovyPocetKusu] = useState('');
const [itemNumber, setItemNumber] = useState('');
const [output, setOutput] = useState(null);
const [history, setHistory] = useState([]);
const [isModalVisible, setIsModalVisible] = useState(false); // přidat stav pro viditelnost modálního okna
const [selectedItem, setSelectedItem] = useState(null); // přidat stav pro vybranou položku z historie
const handleSubmit = async () => {
const parsedPocetVKartonu = parseInt(pocetVKartonu);
const parsedPocetNaPaletu = parseInt(pocetNaPaletu);
const parsedCelkovyPocetKusu = parseInt(celkovyPocetKusu);
if (
isNaN(parsedPocetVKartonu) ||
isNaN(parsedPocetNaPaletu) ||
isNaN(parsedCelkovyPocetKusu) ||
parsedPocetNaPaletu % parsedPocetVKartonu !== 0
) {
Alert.alert(
'Chyba',
'Zadejte platné číselné hodnoty a ujistěte se, že počet kusů na paletu je dělitelný počtem kusů v jednom kartonu.'
);
return;
}
const result = vypocetPaletAKartonu(
parsedPocetVKartonu,
parsedPocetNaPaletu,
parsedCelkovyPocetKusu
);
setOutput(result);
// uložit výsledek do historie
try {
let storedHistory = await AsyncStorage.getItem('history');
if (storedHistory === null) {
storedHistory = [];
} else {
storedHistory = JSON.parse(storedHistory);
}
storedHistory.push({ itemNumber, result });
await AsyncStorage.setItem('history', JSON.stringify(storedHistory));
setHistory(storedHistory);
} catch (error) {
console.error(error);
}
};
const vypocetPaletAKartonu = (pocet_v_kartonu, pocet_na_paletu, celkovy_pocet_kusu) => {
let pocet_kartonu_na_paletu = Math.floor(pocet_na_paletu / pocet_v_kartonu);
let celkovy_pocet_palet = Math.floor(celkovy_pocet_kusu / pocet_na_paletu);
let zbytek_kartonu = Math.floor((celkovy_pocet_kusu % pocet_na_paletu) / pocet_v_kartonu);
let zbytek_kusu = celkovy_pocet_kusu % pocet_na_paletu;
let celkovy_pocet_kusu_na_paletach = celkovy_pocet_palet * pocet_na_paletu;
return {
pocetVKartonu: pocet_v_kartonu,
pocetNaPaletu: pocet_na_paletu,
pocetKartonuNaPaletu: pocet_kartonu_na_paletu,
celkovyPocetPalet: celkovy_pocet_palet,
zbytekKusu: zbytek_kusu,
zbytekKartonu: zbytek_kartonu,
neuplnyPosledniKarton: celkovy_pocet_kusu % pocet_v_kartonu,
};
};
const handleDelete = async (index) => {
// smazat výsledek z historie
try {
let storedHistory = await AsyncStorage.getItem('history');
if (storedHistory !== null) {
storedHistory = JSON.parse(storedHistory);
storedHistory.splice(index, 1);
await AsyncStorage.setItem('history', JSON.stringify(storedHistory));
setHistory(storedHistory);
}
} catch (error) {
console.error(error);
}
};
const handleShowHistory = async () => {
// zobrazit historii z úložiště
try {
let storedHistory = await AsyncStorage.getItem('history');
if (storedHistory !== null) {
storedHistory = JSON.parse(storedHistory);
setHistory(storedHistory);
setIsModalVisible(true); // nastavit viditelnost modálního okna na true
}
} catch (error) {
console.error(error);
}
};
const handleSelectItem = (item) => {
// vybrat položku z historie a zobrazit detaily
setSelectedItem(item); // nastavit vybranou položku do stavu
};
const handleHideModal = () => {
// skrýt modální okno
setIsModalVisible(false); // nastavit viditelnost modálního okna na false
setSelectedItem(null); // vymazat vybranou položku ze stavu
};
return (
<View style={styles.container}>
<Text style={styles.title}>Příjemka</Text>
<View>
<Text style={styles.label}>Číslo položky:</Text>
<TextInput
style={[styles.input, { backgroundColor: '#ffffcc' }]} // změna barvy pole pro číslo položky
keyboardType="numeric"
value={itemNumber}
onChangeText={setItemNumber}
/>
<Text style={styles.label}>Počet kusů v jednom kartonu:</Text>
<TextInput
style={styles.input}
keyboardType="numeric"
value={pocetVKartonu}
onChangeText={setPocetVKartonu}
/>
<Text style={styles.label}>Počet kusů na jedné paletě:</Text>
<TextInput
style={styles.input}
keyboardType="numeric"
value={pocetNaPaletu}
onChangeText={setPocetNaPaletu}
/>
<Text style={styles.label}>Celkový počet kusů:</Text>
<TextInput
style={styles.input}
keyboardType="numeric"
value={celkovyPocetKusu}
onChangeText={setCelkovyPocetKusu}
/>
<TouchableOpacity style={styles.button} onPress={handleSubmit}>
<Text style={styles.buttonText}>Vypočítat</Text>
</TouchableOpacity>
</View>
{output && (
<View style={styles.result}>
<Text style={styles.resultItem}>
<Text style={styles.resultTitle}>Číslo položky:</Text> <Text style={[styles.number, { fontSize: 18 }]}>{itemNumber}</Text>
</Text>
<Text style={styles.resultItem}>
<Text style={styles.resultTitle}>Počet kusů v jednom kartonu:</Text>{' '}
<Text style={[styles.number, { fontSize: 18 }]}>{output.pocetVKartonu}</Text>
</Text>
<Text style={styles.resultItem}>
<Text style={styles.resultTitle}>Počet kusů na paletu:</Text>{' '}
<Text style={[styles.number, { fontSize: 18 }]}>{output.pocetNaPaletu}</Text>{' '}
(<Text style={[styles.number, { fontSize: 18 }]}>{output.pocetKartonuNaPaletu}</Text> kartonů)
</Text>
<Text style={styles.resultItem}>
<Text style={styles.resultTitle}>Celkový počet palet:</Text>{' '}
<Text style={[styles.number, { fontSize: 18 }]}>{output.celkovyPocetPalet}</Text>
</Text>
<Text style={styles.resultItem}>
<Text style={styles.resultTitle}>Zbytek kusů:</Text>{' '}
<Text style={[styles.number, { fontSize: 18 }]}>{output.zbytekKusu}</Text>{' '}
(<Text style={[styles.number, { fontSize: 18 }]}>{output.zbytekKartonu}</Text> kartonů)
</Text>
{output.neuplnyPosledniKarton !== 0 && (
<>
<Text style={styles.resultItem}>
<Text style={styles.resultTitle}>Neúplný poslední karton:</Text>{' '}
<Text style={[styles.number, { fontSize: 18 }]}>{output.neuplnyPosledniKarton}</Text> kusů </Text>
<Text style={styles.warning}>
<Text style={styles.warningTitle}>Upozornění:</Text> V jednom kartonu je jiný počet kusů.
</Text>
</>
)}
</View>
)}
<TouchableOpacity style={styles.historyButton} onPress={handleShowHistory}>
<Text style={styles.historyButtonText}>Historie</Text>
</TouchableOpacity>
{/* Přidat modální okno pro zobrazení historie */}
<Modal isVisible={isModalVisible} onBackdropPress={handleHideModal}>
<View style={styles.modal}>
{history.length > 0 && (
<View style={styles.history}>
{history.map((item, index) => (
<View key={index} style={styles.historyItem}>
{/* Zobrazit jen číslo položky a přidat tlačítko pro zobrazení detailů */}
<TouchableOpacity style={styles.historyResult} onPress={() => handleSelectItem(item)}>
<Text style={styles.historyResultItem}>
<Text style={styles.historyResultTitle}>Číslo položky:</Text>{' '}
<Text style={[styles.number, { fontSize: 16 }]}>{item.itemNumber}</Text>
</Text>
</TouchableOpacity>
{/* Zobrazit detaily pouze pro vybranou položku */}
{selectedItem && selectedItem.itemNumber === item.itemNumber && (
<>
<Text style={styles.historyResultItem}>
<Text style={styles.historyResultTitle}>Počet kusů v jednom kartonu:</Text>{' '}
<Text style={[styles.number, { fontSize: 16 }]}>{item.result.pocetVKartonu}</Text>
</Text>
<Text style={styles.historyResultItem}>
<Text style={styles.historyResultTitle}>Počet kusů na paletu:</Text>{' '}
<Text style={[styles.number, { fontSize: 16 }]}>{item.result.pocetNaPaletu}</Text>{' '}
(<Text style={[styles.number, { fontSize: 16 }]}>{item.result.pocetKartonuNaPaletu}</Text> kartonů)
</Text>
<Text style={styles.historyResultItem}>
<Text style={styles.historyResultTitle}>Celkový počet palet:</Text>{' '}
<Text style={[styles.number, { fontSize: 16 }]}>{item.result.celkovyPocetPalet}</Text>
</Text>
<Text style={styles.historyResultItem}>
<Text style={styles.historyResultTitle}>Zbytek kusů:</Text>{' '}
<Text style={[styles.number, { fontSize: 16 }]}>{item.result.zbytekKusu}</Text>{' '}
(<Text style={[styles.number, { fontSize: 16 }]}>{item.result.zbytekKartonu}</Text> kartonů)
</Text>
{item.result.neuplnyPosledniKarton !== 0 && (
<>
<Text style={styles.historyResultItem}>
<Text style={styles.historyResultTitle}>Neúplný poslední karton:</Text>{' '}
<Text style={[styles.number, { fontSize: 16 }]}>{item.result.neuplnyPosledniKarton}</Text> kusů
</Text>
<Text style={styles.warning}>
<Text style={styles.warningTitle}>Upozornění:</Text> V jednom kartonu je jiný počet kusů.
</Text>
</>
)}
</>
)}
{/* Přidat tlačítko pro skrytí detailů */}
{selectedItem && selectedItem.itemNumber === item.itemNumber && (
<TouchableOpacity
style={[styles.deleteButton, { backgroundColor: '#2196f3' }]}
onPress={() => setSelectedItem(null)}
>
<Text style={styles.deleteButtonText}>Skrýt detaily</Text>
</TouchableOpacity>
)}
{/* Ponechat tlačítko pro smazání položky */}
<TouchableOpacity style={styles.deleteButton} onPress={() => handleDelete(index)}>
<Text style={styles.deleteButtonText}>Smazat</Text>
</TouchableOpacity>
</View>
))}
</View>
)}
</View>
</Modal>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff',
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 20,
},
title: {
fontSize: 32,
fontWeight: 'bold',
color: '#333333',
textAlign: 'center',
marginBottom: 20,
},
label: {
fontSize: 20,
fontWeight: 'bold',
color: '#333333',
marginBottom: 5,
},
input: {
fontSize: 24,
paddingHorizontal: 10,
paddingVertical: 5,
borderWidth: 1,
borderColor: '#cccccc',
borderRadius: 4,
marginBottom: 15,
},
button: {
backgroundColor: '#4caf50',
paddingHorizontal: 20,
paddingVertical: 10,
borderRadius: 4,
},
buttonText: {
fontSize: 20,
color: '#ffffff',
},
resultTitle:{
fontWeight :'bold' ,
},
resultItem:{
marginBottom :5 ,
},
number:{
color :'#4caf50' ,
fontWeight :'bold' ,
},
warning:{
marginTop :20 ,
fontSize :18 ,
color :'red' ,
fontWeight :'bold' ,
},
warningTitle:{
fontWeight :'bold' ,
},
historyButton:{
marginTop :20 ,
backgroundColor :'#2196f3' ,
paddingHorizontal :20 ,
paddingVertical :10 ,
borderRadius :4 ,
},
historyButtonText:{
fontSize :20 ,
color :'#ffffff' ,
},
// Přidat styly pro modální okno a jeho obsah
modal:{
backgroundColor :'#ffffff' ,
padding :20 ,
borderRadius :10 ,
maxHeight :'80%' , // omezit maximální výšku modálního okna
},
history:{
marginTop :20 ,
padding :10 ,
backgroundColor :'rgba(255 ,255 ,255 ,0.8)' ,
borderRadius :5 ,
},
historyItem:{
flexDirection :'row' ,
alignItems :'center' ,
justifyContent :'space-between' ,
marginBottom :10 ,
},
historyResult:{
flexShrink :1 ,
},
historyResultTitle:{
fontWeight :'bold' ,
},
historyResultItem:{
marginBottom :5 ,
},
deleteButton:{
backgroundColor :'#f44336' ,
paddingHorizontal :10 ,
paddingVertical :5 ,
borderRadius :4 ,
marginLeft :10 ,
},
deleteButtonText:{
fontSize :16 ,
color :'#ffffff' ,
},
});
export default App;