11 changed files with 1587 additions and 74 deletions
@ -0,0 +1,361 @@
|
||||
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; |
||||
import { List, TouchableRipple, TextInput, Card, Text, Button } from 'react-native-paper'; |
||||
import { View, StyleSheet, ScrollView } from 'react-native'; |
||||
import DateTimePicker from '@react-native-community/datetimepicker'; |
||||
import moment from 'moment'; |
||||
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; |
||||
import { colors } from '../../../utils/color'; |
||||
import { |
||||
BottomSheetModal, |
||||
BottomSheetModalProvider, |
||||
BottomSheetScrollView |
||||
} from '@gorhom/bottom-sheet'; |
||||
import { strings } from '../../../utils/i18n'; |
||||
export default function ChronologyScreen({ route, navigation }) { |
||||
const [chronology, setChronology] = useState('') |
||||
const [incidentRiskPotential, setIncidentRiskPotential] = useState({ impact: "", likelihood: "", value: "", impactDescription: "", likelihoodDescription: "" }) |
||||
const [riskLevel, setRiskLevel] = useState({ level: "", backgroundColor: '', color: '' }) |
||||
const bottomSheetModalImpactRef = useRef(null); |
||||
const bottomSheetModalLikelihoodRef = useRef(null); |
||||
|
||||
const snapPoints = useMemo(() => ['25%', '50%'], []); |
||||
|
||||
const handleOpenImpact = useCallback(() => { |
||||
bottomSheetModalImpactRef.current?.present(); |
||||
}, []); |
||||
|
||||
const handleOpenLikelihood = useCallback(() => { |
||||
bottomSheetModalLikelihoodRef.current?.present(); |
||||
}, []); |
||||
|
||||
|
||||
useEffect(() => { |
||||
if (incidentRiskPotential.impact !== "" && incidentRiskPotential.likelihood !== "") { |
||||
const impactValue = dataSelectImpact.find(item => item.label === incidentRiskPotential.impact)?.value || 0; |
||||
const likelihoodValue = dataSelectLikelihood.find(item => item.label === incidentRiskPotential.likelihood)?.value || 0; |
||||
|
||||
const val = impactValue * likelihoodValue; |
||||
let newRiskLevel, backgroundColor, color; |
||||
if (val >= 1 && val <= 5) { |
||||
backgroundColor = '#E3F8E8' |
||||
color = '#17C13E' |
||||
newRiskLevel = 'Rendah'; |
||||
} else if (val >= 6 && val <= 10) { |
||||
backgroundColor = "#F8DC49" |
||||
color = "white" |
||||
newRiskLevel = 'Sedang'; |
||||
} else if (val >= 11 && val <= 15) { |
||||
backgroundColor = '#FFD9AF' |
||||
color = '#EC9C3D' |
||||
newRiskLevel = 'Tinggi'; |
||||
} else { |
||||
backgroundColor = '#FFC5C3' |
||||
color = '#D9534F' |
||||
newRiskLevel = 'Bencana'; |
||||
} |
||||
|
||||
if (incidentRiskPotential.value !== val.toString() || riskLevel.level !== newRiskLevel || riskLevel.backgroundColor !== backgroundColor || riskLevel.color !== color) { |
||||
setIncidentRiskPotential(prevState => ({ ...prevState, value: val.toString() })); |
||||
setRiskLevel({ level: newRiskLevel, backgroundColor: backgroundColor, color: color }); |
||||
} |
||||
} |
||||
}, [incidentRiskPotential, riskLevel]); |
||||
|
||||
|
||||
|
||||
const handleSelectImpact = (impact) => { |
||||
setIncidentRiskPotential(prevState => ({ |
||||
...prevState, |
||||
impact: impact.label, |
||||
value: impact.value, |
||||
impactDescription: impact.description |
||||
})); |
||||
bottomSheetModalImpactRef.current?.dismiss(); |
||||
}; |
||||
|
||||
const handleSelectLikelihood = (likelihood) => { |
||||
setIncidentRiskPotential(prevState => ({ |
||||
...prevState, |
||||
likelihood: likelihood.label, |
||||
likelihoodDescription: likelihood.description |
||||
})); |
||||
bottomSheetModalLikelihoodRef.current?.dismiss(); |
||||
}; |
||||
|
||||
const dataSelectImpact = [ |
||||
{ label: 'Insignificant', value: 1, description: 'Tidak ada Gangguan Operasional Perusahaan' }, |
||||
{ label: 'Minor', value: 2, description: 'Operasional Perusahaan Terganggu Namun tidak terlalu signifikan dapat berjalan 75%' }, |
||||
{ label: 'Moderate', value: 3, description: 'Operasional Perusahaan Terganggu Namun tidak dapat berjalan 50%' }, |
||||
{ label: 'Major', value: 4, description: 'Operasional Perusahaan Terganggu, Namun tidak dapat berjalan 25%' }, |
||||
{ label: 'Extreme', value: 5, description: 'Operasional Perusahaan Terhenti akibat Gangguan Yang Ada' } |
||||
]; |
||||
|
||||
const dataTranslasiImpact = { |
||||
Insignificant: 'Tidak signifikan', |
||||
Minor: 'Kecil', |
||||
Moderate: 'Sedang', |
||||
Major: 'Besar', |
||||
Extreme: 'Ekstrim', |
||||
} |
||||
|
||||
const dataSelectLikelihood = [ |
||||
{ label: 'Rare', value: 1, description: '< 5%, Terjadi dalam 1x lebih 20 Tahun' }, |
||||
{ label: 'Unlikely', value: 2, description: '5% - 29%, Terjadi dalam 1x dalam setiap 20 Tahun' }, |
||||
{ label: 'Possible', value: 3, description: '30% - 59%, Terjadi dalam 1x dalam setiap 5 Tahun' }, |
||||
{ label: 'Likely', value: 4, description: '60% - 89%, Terjadi dalam 1x dalam setiap tahun' }, |
||||
{ label: 'Almost Certain', value: 5, description: '90%, Terjadi dalam 1x dalam setiap bulan' } |
||||
] |
||||
|
||||
const dataTranslasiLikelihood = { |
||||
Rare: 'Langka', |
||||
Unlikely: 'Jarang', |
||||
Possible: 'Mungkin terjadi', |
||||
Likely: 'Sangat memungkinkan', |
||||
"Almost Certain": 'Sudah pasti', |
||||
} |
||||
|
||||
console.log("incidentRiskPotential", incidentRiskPotential); |
||||
|
||||
const renderImpact = (data) => ( |
||||
<View> |
||||
<TouchableRipple key={dataTranslasiImpact[data.label]} onPress={() => handleSelectImpact(data)}> |
||||
<List.Item |
||||
title={dataTranslasiImpact[data.label]} |
||||
/> |
||||
</TouchableRipple> |
||||
</View> |
||||
); |
||||
const renderLikelihood = (data) => ( |
||||
<View> |
||||
<TouchableRipple key={dataTranslasiLikelihood[data.label]} onPress={() => handleSelectLikelihood(data)}> |
||||
<List.Item |
||||
title={dataTranslasiLikelihood[data.label]} |
||||
/> |
||||
</TouchableRipple> |
||||
</View> |
||||
); |
||||
|
||||
return ( |
||||
<> |
||||
<Card style={{ backgroundColor: colors.semiRed, paddingVertical: 15, paddingHorizontal: 15, marginHorizontal: 8, marginVertical: 5, borderRadius: 5 }}> |
||||
<View> |
||||
<Text variant="bodySmall" style={{ color: colors.beanRed, fontWeight: 'bold', fontSize: 16 }}> |
||||
Kronologis kejadian |
||||
</Text> |
||||
<Text variant="bodySmall" style={{ color: colors.beanRed, fontSize: 12 }}> |
||||
Jelaskan bagaimana terjadinya insiden |
||||
</Text> |
||||
</View> |
||||
</Card> |
||||
<ScrollView> |
||||
<View style={styles.container}> |
||||
<TextInput |
||||
dense={true} |
||||
underlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
label="Kronologis Singkat Kejadian" |
||||
mode="outlined" |
||||
placeholder='Isi kronologis' |
||||
multiline={true} |
||||
numberOfLines={5} |
||||
value={chronology} |
||||
onChangeText={(text) => { |
||||
setChronology(text) |
||||
}} |
||||
/> |
||||
|
||||
<TextInput |
||||
dense={true} |
||||
underlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
mode="outlined" |
||||
label="Penjelasan Permasalahan" |
||||
placeholder='Isi Permasalahan' |
||||
multiline={true} |
||||
numberOfLines={5} |
||||
onChangeText={(text) => { |
||||
setChronology(text) |
||||
}} |
||||
/> |
||||
<TouchableRipple onPress={handleOpenImpact}> |
||||
<TextInput |
||||
style={{ marginTop: 10 }} |
||||
dense={true} |
||||
editable={false} |
||||
underlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
mode="outlined" |
||||
label='Impact' |
||||
value={incidentRiskPotential.impact ? dataTranslasiImpact[incidentRiskPotential.impact] : ''} |
||||
right={<TextInput.Icon icon="chevron-down" onPress={handleOpenImpact} />} |
||||
/> |
||||
</TouchableRipple> |
||||
{incidentRiskPotential.impactDescription && ( |
||||
<Card style={{ backgroundColor: colors.pureWhite, paddingVertical: 15, paddingHorizontal: 15, marginVertical: 5, borderRadius: 5 }}> |
||||
<Text variant="bodySmall" style={{ fontSize: 12 }}> |
||||
{incidentRiskPotential.impactDescription} |
||||
</Text> |
||||
</Card> |
||||
)} |
||||
<TouchableRipple onPress={handleOpenLikelihood}> |
||||
<TextInput |
||||
dense={true} |
||||
editable={false} |
||||
underlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
mode="outlined" |
||||
label='Likelihood' |
||||
value={incidentRiskPotential.likelihood ? dataTranslasiLikelihood[incidentRiskPotential.likelihood] : ''} |
||||
right={<TextInput.Icon icon="chevron-down" onPress={handleOpenLikelihood} />} |
||||
/> |
||||
</TouchableRipple> |
||||
|
||||
{incidentRiskPotential.likelihoodDescription && ( |
||||
<Card style={{ backgroundColor: colors.pureWhite, paddingVertical: 15, paddingHorizontal: 15, marginVertical: 5, borderRadius: 5 }}> |
||||
<Text variant="bodySmall" style={{ fontSize: 12 }}> |
||||
{incidentRiskPotential.likelihoodDescription} |
||||
</Text> |
||||
</Card> |
||||
)} |
||||
<View style={styles.row}> |
||||
<Card style={{ flex: 1, marginRight: 5, backgroundColor: '#FFC5C3', paddingVertical: 15, paddingHorizontal: 15, marginVertical: 5, borderRadius: 5 }}> |
||||
<Text variant="bodySmall" style={{ fontSize: 12, color: '#D9534F' }}> |
||||
Critical |
||||
</Text> |
||||
</Card> |
||||
<Card style={{ flex: 1, marginLeft: 5, backgroundColor: riskLevel.backgroundColor, paddingVertical: 15, paddingHorizontal: 15, marginVertical: 5, borderRadius: 5 }}> |
||||
<Text variant="bodySmall" style={{ fontSize: 12, color: riskLevel.color }}> |
||||
{riskLevel.level} {incidentRiskPotential.value} |
||||
</Text> |
||||
</Card> |
||||
</View> |
||||
<Text variant="bodySmall" style={{ color: colors.black, fontSize: 14 }}> |
||||
Rencana tindakan pencegahan |
||||
</Text> |
||||
|
||||
<Card elevation={2} style={styles.card}> |
||||
<View style={styles.cardContent}> |
||||
<View style={styles.leftContent}> |
||||
<Icon name="view-list" size={25} color={colors.blue} /> |
||||
</View> |
||||
<View style={styles.midContent}> |
||||
<Text variant="bodySmall" style={styles.subText}>01-03-2024</Text> |
||||
<Text variant="headlineMedium" style={styles.Text}>Farhan</Text> |
||||
<Text variant="bodySmall" style={styles.subText}>Melakukan pengamatan dan patroli area pagar luar Depo MRT</Text> |
||||
</View> |
||||
</View> |
||||
<View style={styles.buttonContainer}> |
||||
<Button mode="outlined" style={styles.button} textColor={colors.beanRed} onPress={() => { navigation.goBack() }} > |
||||
Edit |
||||
</Button> |
||||
<Button mode="contained" style={[styles.button, { backgroundColor: colors.beanRed }]} onPress={() => console.log('Handle Saved')}> |
||||
Hapus |
||||
</Button> |
||||
</View> |
||||
</Card> |
||||
|
||||
{/* color: (typeRiskIncident === 'Critical' ? '#D9534F' : (typeRiskIncident === 'Major' ? '#EC9C3D' : 'black')) */} |
||||
</View> |
||||
</ScrollView> |
||||
<Button icon="plus" style={{ borderRadius: 10, backgroundColor: colors.semiBlue, marginHorizontal: 8, }} textColor={colors.blue} mode="contained-tonal" onPress={() => { navigation.navigate('ContainedActionScreen') }}> |
||||
{strings('incidentReport.containedAction')} |
||||
</Button> |
||||
<BottomSheetModalProvider> |
||||
<BottomSheetModal |
||||
ref={bottomSheetModalImpactRef} |
||||
index={1} |
||||
snapPoints={snapPoints} |
||||
> |
||||
<BottomSheetScrollView contentContainerStyle={styles.scrollView}> |
||||
{dataSelectImpact.map(item => renderImpact(item))} |
||||
</BottomSheetScrollView> |
||||
</BottomSheetModal> |
||||
</BottomSheetModalProvider> |
||||
<BottomSheetModalProvider> |
||||
<BottomSheetModal |
||||
ref={bottomSheetModalLikelihoodRef} |
||||
index={1} |
||||
snapPoints={snapPoints} |
||||
> |
||||
<BottomSheetScrollView contentContainerStyle={styles.scrollView}> |
||||
{dataSelectLikelihood.map(item => renderLikelihood(item))} |
||||
</BottomSheetScrollView> |
||||
</BottomSheetModal> |
||||
</BottomSheetModalProvider> |
||||
</> |
||||
) |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
containerModal: { |
||||
flex: 1, |
||||
padding: 24, |
||||
justifyContent: 'center', |
||||
backgroundColor: 'grey', |
||||
}, |
||||
|
||||
contentContainer: { |
||||
flex: 1, |
||||
alignItems: 'center', |
||||
}, |
||||
buttonContainer: { |
||||
flexDirection: 'row', |
||||
justifyContent: 'space-between', |
||||
padding: 10, |
||||
paddingBottom: 20, |
||||
}, |
||||
button: { |
||||
flex: 1, |
||||
margin: 5, |
||||
borderRadius: 5 |
||||
}, |
||||
container: { |
||||
flex: 1, |
||||
marginVertical: 10, |
||||
marginHorizontal: 10 |
||||
}, |
||||
|
||||
Text: { |
||||
fontSize: 16, |
||||
fontWeight: 'bold', |
||||
color: colors.blue |
||||
}, |
||||
card: { |
||||
flex: 1, |
||||
marginHorizontal: 8, |
||||
marginVertical: 5, |
||||
backgroundColor: colors.pureWhite, |
||||
}, |
||||
subText: { |
||||
fontSize: 12, |
||||
color: colors.blue |
||||
}, |
||||
|
||||
row: { |
||||
flexDirection: 'row', |
||||
justifyContent: 'space-between', |
||||
marginBottom: 5 |
||||
}, |
||||
cardContent: { |
||||
flexDirection: 'row', |
||||
justifyContent: 'space-between', |
||||
paddingVertical: 10, |
||||
}, |
||||
leftContent: { |
||||
flex: 1, |
||||
justifyContent: 'center', |
||||
alignItems: 'flex-start', |
||||
marginLeft: 15 |
||||
}, |
||||
midContent: { |
||||
flex: 7, |
||||
justifyContent: 'flex-start', |
||||
alignItems: 'flex-start', |
||||
}, |
||||
rightContent: { |
||||
flex: 1, |
||||
justifyContent: 'center', |
||||
alignItems: 'flex-end', |
||||
marginRight: 15, |
||||
}, |
||||
}); |
||||
@ -0,0 +1,159 @@
|
||||
import React, { useState, useRef, useMemo, useCallback } from 'react'; |
||||
import { TouchableRipple, TextInput, Appbar, List, Button } from 'react-native-paper'; |
||||
import { View, StyleSheet, ScrollView } from 'react-native'; |
||||
import DateTimePicker from '@react-native-community/datetimepicker'; |
||||
import moment from 'moment'; |
||||
import { colors } from '../../../utils/color'; |
||||
import { strings } from '../../../utils/i18n'; |
||||
import { |
||||
BottomSheetModal, |
||||
BottomSheetModalProvider, |
||||
BottomSheetView |
||||
} from '@gorhom/bottom-sheet'; |
||||
|
||||
export default function ReportScreen({ route, navigation }) { |
||||
const [showIncidentDatePicker, setShowIncidentDatePicker] = useState(false); |
||||
const [date, setDate] = useState(''); |
||||
const [status, setStatus] = useState('') |
||||
const bottomSheetModal = useRef(null); |
||||
const showIncidentDatePickerFunc = () => { |
||||
setShowIncidentDatePicker(true); |
||||
}; |
||||
// const snapPoints = useMemo(() => ['10%', ], []);
|
||||
const handleOpenSheet = useCallback(() => { |
||||
bottomSheetModal.current?.present(); |
||||
}, []); |
||||
|
||||
const handleStatus = (data) => { |
||||
setStatus(data) |
||||
bottomSheetModal.current?.dismiss(); |
||||
} |
||||
|
||||
const handleIncidentDateChange = (event, selectedDate) => { |
||||
const currentDate = selectedDate; |
||||
setShowIncidentDatePicker(false); |
||||
setDate(currentDate); |
||||
}; |
||||
return ( |
||||
<> |
||||
<Appbar.Header mode='center-aligned' style={{ backgroundColor: colors.beanRed }}> |
||||
<Appbar.BackAction color={colors.pureWhite} onPress={() => { navigation.goBack() }} /> |
||||
<Appbar.Content color={colors.pureWhite} title='Rencana pencegahan' /> |
||||
</Appbar.Header> |
||||
<View style={styles.container}> |
||||
<ScrollView> |
||||
<TextInput |
||||
dense={true} |
||||
underlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
label="RENCANA TINDAKAN PENCEGAHAN" |
||||
mode="outlined" |
||||
multiline={true} |
||||
numberOfLines={5} |
||||
/> |
||||
|
||||
<TextInput |
||||
style={{ marginTop: 10, marginBottom: 15 }} |
||||
dense={true} |
||||
outlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
mode="outlined" |
||||
label='Who' |
||||
placeholder='Who' |
||||
/> |
||||
<TouchableRipple onPress={showIncidentDatePickerFunc}> |
||||
<TextInput |
||||
style={{ marginBottom: 15 }} |
||||
dense={true} |
||||
outlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
mode="outlined" |
||||
label=" When" |
||||
value={date ? moment(date).format("DD-MM-YYYY") : ''} |
||||
editable={false} |
||||
right={<TextInput.Icon icon="calendar" onPress={showIncidentDatePickerFunc} />} |
||||
/> |
||||
</TouchableRipple> |
||||
<TouchableRipple onPress={handleOpenSheet}> |
||||
<TextInput |
||||
style={{ marginBottom: 15 }} |
||||
dense={true} |
||||
outlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
mode="outlined" |
||||
label=" Status" |
||||
value={status ? status : ''} |
||||
editable={false} |
||||
right={<TextInput.Icon icon="list-status" onPress={handleOpenSheet} />} |
||||
/> |
||||
</TouchableRipple> |
||||
</ScrollView > |
||||
</View> |
||||
|
||||
<View style={styles.buttonContainer}> |
||||
<Button mode="outlined" style={styles.button} textColor={colors.mistBlue} onPress={() => { navigation.goBack() }} > |
||||
Kembali |
||||
</Button> |
||||
<Button mode="contained" style={[styles.button, { backgroundColor: colors.beanRed }]} onPress={() => console.log('Handle Saved')}> |
||||
Simpan |
||||
</Button> |
||||
</View> |
||||
|
||||
{ |
||||
showIncidentDatePicker && ( |
||||
<DateTimePicker |
||||
value={date || new Date()} |
||||
mode="date" |
||||
display="default" |
||||
onChange={handleIncidentDateChange} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
<BottomSheetModalProvider> |
||||
<BottomSheetModal |
||||
ref={bottomSheetModal} |
||||
index={0} |
||||
snapPoints={['20%']} |
||||
bottomInset={10} |
||||
detached={true} |
||||
style={{ marginHorizontal: 15 }} |
||||
> |
||||
<BottomSheetView > |
||||
<TouchableRipple onPress={() => handleStatus("Open")}> |
||||
<List.Item |
||||
title="OPEN" |
||||
left={props => <List.Icon {...props} icon="" />} |
||||
/> |
||||
</TouchableRipple> |
||||
<TouchableRipple onPress={() => handleStatus("Close")}> |
||||
<List.Item |
||||
title="CLOSE" |
||||
left={props => <List.Icon {...props} icon="" />} |
||||
/> |
||||
</TouchableRipple> |
||||
</BottomSheetView> |
||||
</BottomSheetModal> |
||||
</BottomSheetModalProvider> |
||||
</> |
||||
) |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
flex: 1, |
||||
marginVertical: 10, |
||||
marginHorizontal: 10 |
||||
}, |
||||
button: { |
||||
flex: 1, |
||||
margin: 5, |
||||
borderRadius: 5 |
||||
}, |
||||
buttonContainer: { |
||||
flexDirection: 'row', |
||||
justifyContent: 'space-between', |
||||
padding: 10, |
||||
paddingBottom: 20, |
||||
}, |
||||
}); |
||||
@ -0,0 +1,75 @@
|
||||
import React, { useState } from 'react'; |
||||
import { TouchableRipple, Chip, Card, Text } from 'react-native-paper'; |
||||
import { View, StyleSheet, ScrollView } from 'react-native'; |
||||
import DateTimePicker from '@react-native-community/datetimepicker'; |
||||
import moment from 'moment'; |
||||
import { colors } from '../../../utils/color'; |
||||
import { jenisKejadian } from '../../../config/ApiConst' |
||||
import Icon from 'react-native-vector-icons/MaterialCommunityIcons' |
||||
|
||||
export default function IncidentScreen() { |
||||
const [selectedItems, setSelectedItems] = useState([]); |
||||
const [dataIncidentReport, setDataIncidentReport] = useState(jenisKejadian[0].data) |
||||
const [typeRiskIncident, setTypeRiskIncident] = useState("") |
||||
|
||||
const handleCheckboxChange = (item) => { |
||||
const updatedDataIncidentReport = dataIncidentReport.map(dataItem => { |
||||
if (dataItem.label === item.label) { |
||||
return { ...dataItem, checked: !dataItem.checked }; |
||||
} |
||||
return dataItem; |
||||
}); |
||||
setDataIncidentReport(updatedDataIncidentReport); |
||||
const hasCritical = updatedDataIncidentReport.some(item => item.level === 'Critical' && item.checked); |
||||
setTypeRiskIncident(updatedDataIncidentReport.some(item => item.checked) ? (hasCritical ? 'Critical' : 'Major') : ''); |
||||
}; |
||||
|
||||
|
||||
const isItemSelected = (label) => { |
||||
return dataIncidentReport.some(item => item.label === label && item.checked); |
||||
}; |
||||
|
||||
return ( |
||||
<> |
||||
<Card style={{ backgroundColor: colors.semiRed, paddingVertical: 15, paddingHorizontal: 15, marginHorizontal: 8, marginVertical: 5, borderRadius: 5 }}> |
||||
<View> |
||||
<Text variant="bodySmall" style={{ color: colors.beanRed, fontWeight: 'bold', fontSize: 16 }}> |
||||
Jenis kejadian |
||||
</Text> |
||||
<Text variant="bodySmall" style={{ color: colors.beanRed, fontSize: 12 }}> |
||||
Kejadian apa saja yang terjadi di lokasi, bisa pilih lebih dari satu |
||||
</Text> |
||||
</View> |
||||
</Card> |
||||
<View style={styles.container}> |
||||
<Text variant="bodySmall" style={{ color: colors.black, fontSize: 16 }}> |
||||
Pilih Jenis Kejadian |
||||
</Text> |
||||
<ScrollView style={styles.listData}> |
||||
<View> |
||||
{dataIncidentReport.map(item => ( |
||||
<> |
||||
<Chip |
||||
icon={() => ( |
||||
<Icon name={isItemSelected(item.label) ? 'circle-slice-8' : 'circle-outline'} size={20} color={isItemSelected(item.label) ? colors.pureWhite : colors.blue} /> |
||||
)} textStyle={{ color: isItemSelected(item.label) ? colors.pureWhite : colors.blue }} onPress={() => handleCheckboxChange(item)} style={{ backgroundColor: isItemSelected(item.label) ? colors.beanRed : colors.semiBlue, marginBottom: 5 }}>{item.label}</Chip > |
||||
</> |
||||
))} |
||||
</View> |
||||
</ScrollView > |
||||
</View > |
||||
</> |
||||
) |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
flex: 1, |
||||
marginVertical: 10, |
||||
marginHorizontal: 10 |
||||
}, |
||||
listData: { |
||||
flex: 1, |
||||
marginTop: 10, |
||||
}, |
||||
}); |
||||
@ -0,0 +1,187 @@
|
||||
import React, { useEffect, useCallback, useMemo, useState, useRef } from 'react'; |
||||
import { TextInput, Card, Checkbox, Text, TouchableRipple } from 'react-native-paper'; |
||||
import { StyleSheet, View, ScrollView } from 'react-native'; |
||||
import { colors } from '../../../utils/color' |
||||
import { useNavigation } from '@react-navigation/native'; |
||||
|
||||
export default function LocationScreen() { |
||||
const navigation = useNavigation(); |
||||
const [selectedProject, setSelectedProject] = useState(null); |
||||
const [area, setArea] = useState({ external: false, internal: false }) |
||||
const handleProjectPress = () => { |
||||
navigation.navigate('SearchPage', { dummyData, onSelect: handleProjectSelect }); |
||||
}; |
||||
|
||||
const handleCheckboxArea = (data) => { |
||||
const { name } = data; |
||||
setArea(prevState => ({ |
||||
...prevState, |
||||
[name]: !prevState[name] |
||||
})); |
||||
setBottomSheetIndex(0); |
||||
}; |
||||
console.log("Area :", area); |
||||
const handleProjectSelect = (project) => { |
||||
setSelectedProject(project); |
||||
}; |
||||
|
||||
const dummyData = [ |
||||
{ id: '1', name: 'MRT', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '2', name: 'PLN', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '3', name: 'Pertamina', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '4', name: 'MD Entertaiment', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '5', name: 'Jhonny', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '6', name: 'AIA', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '7', name: 'PLN Pulogadung', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '8', name: 'Google', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '9', name: 'Amazon', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '10', name: 'Microsoft', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '11', name: 'Facebook', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '12', name: 'Apple', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '13', name: 'Tesla', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '14', name: 'Netflix', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '15', name: 'Twitter', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '16', name: 'LinkedIn', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '17', name: 'Instagram', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '18', name: 'Snapchat', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '19', name: 'WhatsApp', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '20', name: 'Uber', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '21', name: 'Airbnb', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '22', name: 'Spotify', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '23', name: 'Pinterest', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '24', name: 'Reddit', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '25', name: 'Dropbox', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '26', name: 'Zoom', icn: 'test1', sicn: 'test"1' }, |
||||
{ id: '27', name: 'Etsy' } |
||||
]; |
||||
|
||||
return ( |
||||
<> |
||||
<Card style={{ backgroundColor: colors.semiRed, paddingVertical: 15, paddingHorizontal: 15, marginHorizontal: 8, marginVertical: 5, borderRadius: 5 }}> |
||||
<View> |
||||
<Text variant="bodySmall" style={{ color: colors.beanRed, fontWeight: 'bold', fontSize: 16 }}> |
||||
Lokasi kejadian |
||||
</Text> |
||||
<Text variant="bodySmall" style={{ color: colors.beanRed, fontSize: 12 }}> |
||||
Harap memasukan lokasi kejadian yang sesuai |
||||
</Text> |
||||
</View> |
||||
</Card> |
||||
<ScrollView> |
||||
<View style={styles.container}> |
||||
<Text variant="bodySmall" style={{ color: colors.black, fontSize: 16, marginBottom: 6 }}> |
||||
Lokasi Kejadian |
||||
</Text> |
||||
<TouchableRipple onPress={handleProjectPress}> |
||||
<TextInput |
||||
dense={true} |
||||
outlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
mode="outlined" |
||||
editable={false} |
||||
label='Pilih Proyek' |
||||
placeholder='Pilih Proyek' |
||||
value={selectedProject ? selectedProject.name : ''} |
||||
right={<TextInput.Icon icon="chevron-down" />} |
||||
/> |
||||
</TouchableRipple> |
||||
|
||||
<TextInput |
||||
style={{ marginTop: 10 }} |
||||
dense={true} |
||||
outlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
mode="outlined" |
||||
label='Lokasi Kejadian' |
||||
placeholder='Lokasi Kejadian' |
||||
/> |
||||
|
||||
<TextInput |
||||
style={{ marginTop: 10 }} |
||||
dense={true} |
||||
outlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
mode="outlined" |
||||
label='Sub Lokasi Kejadian' |
||||
placeholder='Sub Lokasi Kejadian' |
||||
|
||||
/> |
||||
<View style={styles.row}> |
||||
<Checkbox |
||||
status={area.internal ? 'checked' : 'unchecked'} |
||||
color={colors.blue} |
||||
uncheckedColor={colors.amethystSmoke} |
||||
onPress={() => handleCheckboxArea({ name: 'internal', checked: !area.internal })} |
||||
/> |
||||
<Text variant="bodySmall" style={{ color: colors.black, fontSize: 14, marginBottom: 6, marginTop: 10 }}> |
||||
Internal (Didalam area/kawasan/parimeter Project) |
||||
</Text> |
||||
</View> |
||||
<View style={styles.row}> |
||||
<Checkbox |
||||
status={area.external ? 'checked' : 'unchecked'} |
||||
color={colors.blue} |
||||
uncheckedColor={colors.amethystSmoke} |
||||
onPress={() => handleCheckboxArea({ name: 'external', checked: !area.external })} |
||||
/> |
||||
<Text variant="bodySmall" style={{ color: colors.black, fontSize: 14, marginBottom: 6, marginTop: 10 }}> |
||||
External (Diluar area/kawasan/parimeter Project) |
||||
</Text> |
||||
</View> |
||||
|
||||
<Text variant="bodySmall" style={{ color: colors.black, fontSize: 16, marginBottom: 6, marginTop: 10 }}> |
||||
Lokasi Pelaporan |
||||
</Text> |
||||
<TouchableRipple onPress={handleProjectPress}> |
||||
<TextInput |
||||
dense={true} |
||||
outlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
mode="outlined" |
||||
label='Pilih Proyek' |
||||
placeholder='Pilih Proyek' |
||||
|
||||
/> |
||||
</TouchableRipple> |
||||
|
||||
<TextInput |
||||
style={{ marginTop: 10 }} |
||||
dense={true} |
||||
outlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
mode="outlined" |
||||
label='Lokasi Laporan' |
||||
placeholder='Lokasi Laporan' |
||||
|
||||
|
||||
/> |
||||
|
||||
<TextInput |
||||
style={{ marginTop: 10 }} |
||||
dense={true} |
||||
outlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
mode="outlined" |
||||
label='Sub Lokasi Laporan' |
||||
placeholder='Sub Lokasi Laporan' |
||||
/> |
||||
</View> |
||||
</ScrollView> |
||||
</> |
||||
) |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
flex: 1, |
||||
marginVertical: 10, |
||||
marginHorizontal: 10 |
||||
}, |
||||
row: { |
||||
flexDirection: 'row', |
||||
alignItems: 'center', |
||||
marginBottom: 5, |
||||
marginRight: 15, |
||||
marginLeft: 5 |
||||
}, |
||||
}); |
||||
@ -0,0 +1,288 @@
|
||||
import React, { useRef, useCallback, useState, useMemo } from 'react'; |
||||
import { launchCamera, launchImageLibrary } from 'react-native-image-picker'; |
||||
import { |
||||
BottomSheetModal, |
||||
BottomSheetModalProvider, |
||||
BottomSheetView |
||||
} from '@gorhom/bottom-sheet'; |
||||
import ImageMarker, { Position, TextBackgroundType } from 'react-native-image-marker'; |
||||
import { TextInput, IconButton, Button } from 'react-native-paper'; |
||||
import { StyleSheet, View, ScrollView, PermissionsAndroid, Image } from 'react-native'; |
||||
import { colors } from '../../../utils/color'; |
||||
import { strings } from '../../../utils/i18n'; |
||||
import { requestAccessStoragePermission } from '../../../utils/storage'; |
||||
import { getCoords } from '../../../utils/geolocation'; |
||||
|
||||
export default function MediaScreen() { |
||||
const [images, setImages] = useState([]); |
||||
|
||||
const bottomSheetModal = useRef(null); |
||||
|
||||
const handleSetImageUri = (uri, description) => { |
||||
const newImage = { uri: uri, description: description || "" }; |
||||
setImages(prevImages => [...prevImages, newImage]); |
||||
} |
||||
|
||||
const handleDeleteImage = (index) => { |
||||
const updatedImages = [...images]; |
||||
updatedImages.splice(index, 1); |
||||
setImages(updatedImages); |
||||
}; |
||||
|
||||
const handleOpenSheet = useCallback(() => { |
||||
bottomSheetModal.current?.present(); |
||||
}, []); |
||||
|
||||
const handleTakePicture = async () => { |
||||
try { |
||||
const granted = await PermissionsAndroid.request( |
||||
PermissionsAndroid.PERMISSIONS.CAMERA, |
||||
{ |
||||
title: strings('takePicture.cameraPermissionTitle'), |
||||
message: strings('takePicture.cameraPermissionMessage'), |
||||
buttonNeutral: strings('takePicture.cameraPermissionBtnNeutral'), |
||||
buttonNegative: strings('takePicture.cameraPermissionBtnCancel'), |
||||
buttonPositive: strings('takePicture.cameraPermissionBtnPositive'), |
||||
}, |
||||
); |
||||
if (granted === PermissionsAndroid.RESULTS.GRANTED) { |
||||
handleLaunchCamera() |
||||
} else { |
||||
} |
||||
} catch (err) { |
||||
console.warn(err); |
||||
} |
||||
bottomSheetModal.current?.dismiss(); |
||||
}; |
||||
|
||||
const handleLaunchCamera = () => { |
||||
let options = { |
||||
storageOptions: { |
||||
skipBackup: true, |
||||
path: 'images', |
||||
}, |
||||
cameraType: 'front', |
||||
maxWidth: 768, |
||||
maxHeight: 1024, |
||||
saveToPhotos: false, |
||||
includeBase64: true |
||||
}; |
||||
|
||||
launchCamera(options, (response) => { |
||||
if (response.didCancel) { |
||||
} else if (response.error) { |
||||
} else if (response.customButton) { |
||||
} else { |
||||
if (response.assets && response.assets.length > 0) { |
||||
handleSetImageUri(response.assets[0].uri); |
||||
getCoords(loc => { |
||||
if (loc) { |
||||
let imageObject = { |
||||
"image_uri": response.assets[0].uri, |
||||
"image_blob": response.assets[0].base64, |
||||
"lat": loc.lat, |
||||
"lon": loc.lon |
||||
} |
||||
addOverlay(imageObject) |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
|
||||
const addOverlay = async (imageObject) => { |
||||
try { |
||||
const timestamp = new Date().toLocaleString(); |
||||
const location = { latitude: imageObject.lat, longitude: imageObject.lon }; |
||||
|
||||
const overlayText = `${timestamp}\nLatitude: ${location.latitude}\nLongitude: ${location.longitude}`; |
||||
|
||||
if (imageObject.image_uri) { |
||||
const markedImage = await ImageMarker.markText({ |
||||
backgroundImage: { |
||||
src: { uri: imageObject.image_uri } |
||||
}, |
||||
watermarkTexts: [{ |
||||
text: overlayText, |
||||
positionOptions: { |
||||
position: Position.bottomLeft, |
||||
}, |
||||
style: { |
||||
color: '#ffffff', |
||||
fontSize: 8, |
||||
fontName: 'Arial', |
||||
textBackgroundStyle: { |
||||
padding: 10, |
||||
type: TextBackgroundType.none, |
||||
color: '#00000080' |
||||
} |
||||
}, |
||||
}], |
||||
position: 'bottomLeft', |
||||
color: '#ffffff', |
||||
fontName: 'Arial-BoldMT', |
||||
fontSize: 16, |
||||
scale: 1, |
||||
}); |
||||
await saveToTemporaryFolder(markedImage, imageObject); |
||||
} |
||||
|
||||
} catch (error) { |
||||
console.error('Error adding overlay:', error); |
||||
} |
||||
} |
||||
|
||||
const saveToTemporaryFolder = async (markedImage, imageObject) => { |
||||
try { |
||||
const tempPath = `file://${RNFS.TemporaryDirectoryPath}/presensi/${imageObject.drop_point_id}_${moment().format('YYYYMMDDHHmmss')}.jpg`; |
||||
|
||||
if (!requestAccessStoragePermission()) { |
||||
return; |
||||
} |
||||
await RNFS.copyFile(markedImage, tempPath); |
||||
const imageBase64 = await RNFS.readFile(tempPath, 'base64'); |
||||
storePhoto(imageObject.user_id, imageObject.drop_point_id, tempPath, imageBase64, imageObject.lat, imageObject.lon) |
||||
reloadPhotos(); |
||||
} catch (error) { |
||||
console.error('Error saving image to temporary folder:', error); |
||||
} |
||||
} |
||||
|
||||
const handleLaunchGallery = () => { |
||||
let options = { |
||||
mediaType: 'photo', |
||||
includeBase64: true |
||||
}; |
||||
|
||||
launchImageLibrary(options, (response) => { |
||||
if (response.didCancel) { |
||||
} else if (response.error) { |
||||
} else if (response.customButton) { |
||||
} else { |
||||
handleSetImageUri(response.assets[0].uri); |
||||
} |
||||
}); |
||||
bottomSheetModal.current?.dismiss(); |
||||
} |
||||
|
||||
const renderImages = useMemo(() => images.map((image, index) => ( |
||||
<View key={index} style={styles.imageBlock}> |
||||
<View style={styles.imageContainer}> |
||||
<Image |
||||
source={{ uri: image.uri }} |
||||
style={styles.image} |
||||
resizeMode="contain" |
||||
/> |
||||
<IconButton |
||||
iconColor={colors.beanRed} |
||||
icon="delete" |
||||
style={styles.deleteButton} |
||||
size={30} |
||||
onPress={() => handleDeleteImage(index)} |
||||
/> |
||||
</View> |
||||
<TextInput |
||||
mode='outlined' |
||||
style={styles.descriptionInput} |
||||
outlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
placeholder="Deskripsi gambar" |
||||
label="Deskripsi gambar" |
||||
multiline={true} |
||||
value={image.description} |
||||
onChangeText={(text) => { |
||||
const updatedImages = [...images]; |
||||
updatedImages[index].description = text; |
||||
setImages(updatedImages); |
||||
}} |
||||
/> |
||||
</View> |
||||
)), [images]); |
||||
|
||||
return ( |
||||
<> |
||||
<Button |
||||
icon="plus" |
||||
style={styles.addButton} |
||||
mode="contained-tonal" |
||||
onPress={handleOpenSheet} |
||||
textColor={colors.blue} |
||||
> |
||||
Tambah Gambar |
||||
</Button> |
||||
|
||||
<ScrollView> |
||||
<View style={styles.container}> |
||||
{renderImages} |
||||
</View> |
||||
</ScrollView> |
||||
<BottomSheetModalProvider> |
||||
<BottomSheetModal |
||||
ref={bottomSheetModal} |
||||
index={0} |
||||
snapPoints={['30%']} |
||||
bottomInset={10} |
||||
detached={true} |
||||
style={styles.bottomSheet} |
||||
> |
||||
<BottomSheetView> |
||||
<View style={styles.sheetButtonContainer}> |
||||
<IconButton |
||||
icon="camera" |
||||
size={50} |
||||
onPress={handleTakePicture} |
||||
/> |
||||
<IconButton |
||||
icon="image" |
||||
size={50} |
||||
onPress={handleLaunchGallery} |
||||
/> |
||||
</View> |
||||
</BottomSheetView> |
||||
</BottomSheetModal> |
||||
</BottomSheetModalProvider> |
||||
</> |
||||
) |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
flex: 1, |
||||
marginVertical: 10, |
||||
marginHorizontal: 10, |
||||
}, |
||||
imageBlock: { |
||||
marginBottom: 20, |
||||
flexDirection: 'row', |
||||
}, |
||||
imageContainer: { |
||||
flexDirection: 'column', |
||||
alignItems: 'center', |
||||
marginHorizontal: 5 |
||||
}, |
||||
image: { |
||||
width: 100, |
||||
height: 100, |
||||
borderRadius: 7 |
||||
}, |
||||
descriptionInput: { |
||||
flex: 1, |
||||
marginRight: 10, |
||||
}, |
||||
addButton: { |
||||
marginHorizontal: 8, |
||||
marginVertical: 10, |
||||
borderRadius: 10, |
||||
backgroundColor: colors.semiBlue, |
||||
}, |
||||
bottomSheet: { |
||||
marginHorizontal: 15, |
||||
}, |
||||
sheetButtonContainer: { |
||||
flexDirection: 'row', |
||||
justifyContent: 'space-around', |
||||
padding: 10, |
||||
paddingBottom: 20, |
||||
}, |
||||
}); |
||||
@ -0,0 +1,103 @@
|
||||
import React, { useState } from 'react'; |
||||
import { TouchableRipple, TextInput, Card, Text } from 'react-native-paper'; |
||||
import { View, StyleSheet, ScrollView } from 'react-native'; |
||||
import DateTimePicker from '@react-native-community/datetimepicker'; |
||||
import moment from 'moment'; |
||||
import { colors } from '../../../utils/color'; |
||||
|
||||
export default function ReportScreen() { |
||||
|
||||
return ( |
||||
<> |
||||
<Card style={{ backgroundColor: colors.semiRed, paddingVertical: 15, paddingHorizontal: 15, marginHorizontal: 8, marginVertical: 5, borderRadius: 5 }}> |
||||
<View> |
||||
<Text variant="bodySmall" style={{ color: colors.beanRed, fontWeight: 'bold', fontSize: 16 }}> |
||||
Pelapor dan penerima laporan |
||||
</Text> |
||||
<Text variant="bodySmall" style={{ color: colors.beanRed, fontSize: 12 }}> |
||||
Siapa yang membuat laporan dan siapa yang membuat laporan |
||||
</Text> |
||||
</View> |
||||
</Card> |
||||
<ScrollView> |
||||
<View style={styles.container}> |
||||
<Text variant="bodySmall" style={{ color: colors.black, fontSize: 16, marginBottom: 6 }}> |
||||
Pelapor |
||||
</Text> |
||||
<TextInput |
||||
style={{ marginTop: 10 }} |
||||
dense={true} |
||||
outlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
mode="outlined" |
||||
label=" Nama Pelapor" |
||||
placeholder='Nama' |
||||
|
||||
/> |
||||
|
||||
<TextInput |
||||
style={{ marginTop: 10 }} |
||||
dense={true} |
||||
outlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
mode="outlined" |
||||
label='Posisi/Jabatan' |
||||
placeholder='Posisi/Jabatan' |
||||
|
||||
/> |
||||
|
||||
<TextInput |
||||
style={{ marginTop: 10 }} |
||||
dense={true} |
||||
outlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
mode="outlined" |
||||
label='No Contact' |
||||
placeholder='No Contact' |
||||
/> |
||||
|
||||
<Text variant="bodySmall" style={{ color: colors.black, fontSize: 16, marginBottom: 6, marginTop: 10 }}> |
||||
Penerima Laporan |
||||
</Text> |
||||
|
||||
<TextInput |
||||
dense={true} |
||||
outlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
mode="outlined" |
||||
label='Nama' |
||||
placeholder='Nama' |
||||
/> |
||||
|
||||
<TextInput |
||||
style={{ marginTop: 10 }} |
||||
dense={true} |
||||
outlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
mode="outlined" |
||||
label='Posisi/Jabatan' |
||||
placeholder='Posisi/Jabatan' |
||||
/> |
||||
|
||||
<TextInput |
||||
style={{ marginTop: 10 }} |
||||
dense={true} |
||||
outlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
mode="outlined" |
||||
label='No Contact' |
||||
placeholder='No Contact' |
||||
/> |
||||
</View> |
||||
</ScrollView> |
||||
</> |
||||
) |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
flex: 1, |
||||
marginVertical: 10, |
||||
marginHorizontal: 10 |
||||
}, |
||||
}); |
||||
@ -0,0 +1,168 @@
|
||||
import React, { useState } from 'react'; |
||||
import { TouchableRipple, TextInput, Card, Text } from 'react-native-paper'; |
||||
import { View, StyleSheet } from 'react-native'; |
||||
import DateTimePicker from '@react-native-community/datetimepicker'; |
||||
import moment from 'moment'; |
||||
import { colors } from '../../../utils/color'; |
||||
|
||||
export default function TimeScreen() { |
||||
const [incidentDate, setIncidentDate] = useState(''); |
||||
const [incidentTime, setIncidentTime] = useState(''); |
||||
const [reportDate, setReportDate] = useState(''); |
||||
const [reportTime, setReportTime] = useState(''); |
||||
const [showIncidentDatePicker, setShowIncidentDatePicker] = useState(false); |
||||
const [showIncidentTimePicker, setShowIncidentTimePicker] = useState(false); |
||||
const [showReportDatePicker, setShowReportDatePicker] = useState(false); |
||||
const [showReportTimePicker, setShowReportTimePicker] = useState(false); |
||||
|
||||
const handleIncidentDateChange = (event, selectedDate) => { |
||||
const currentDate = selectedDate; |
||||
setShowIncidentDatePicker(false); |
||||
setIncidentDate(currentDate); |
||||
}; |
||||
|
||||
const handleIncidentTimeChange = (event, selectedDate) => { |
||||
const currentDate = selectedDate; |
||||
setShowIncidentTimePicker(false); |
||||
setIncidentTime(currentDate); |
||||
}; |
||||
|
||||
const handleReportDateChange = (event, selectedDate) => { |
||||
const currentDate = selectedDate; |
||||
setShowReportDatePicker(false); |
||||
setReportDate(currentDate); |
||||
}; |
||||
|
||||
const handleReportTimeChange = (event, selectedDate) => { |
||||
const currentDate = selectedDate; |
||||
setShowReportTimePicker(false); |
||||
setReportTime(currentDate); |
||||
}; |
||||
|
||||
const showIncidentDatePickerFunc = () => { |
||||
setShowIncidentDatePicker(true); |
||||
}; |
||||
|
||||
const showIncidentTimePickerFunc = () => { |
||||
setShowIncidentTimePicker(true); |
||||
}; |
||||
|
||||
const showReportDatePickerFunc = () => { |
||||
setShowReportDatePicker(true); |
||||
}; |
||||
|
||||
const showReportTimePickerFunc = () => { |
||||
setShowReportTimePicker(true); |
||||
}; |
||||
|
||||
return ( |
||||
<> |
||||
|
||||
<Card style={{ backgroundColor: colors.semiRed, paddingVertical: 15, paddingHorizontal: 15, marginHorizontal: 8, marginVertical: 5, borderRadius: 5 }}> |
||||
<View> |
||||
<Text variant="bodySmall" style={{ color: colors.beanRed, fontWeight: 'bold', fontSize: 16 }}> |
||||
Laporan Awal Insiden |
||||
</Text> |
||||
<Text variant="bodySmall" style={{ color: colors.beanRed, fontSize: 12 }}> |
||||
Wajib melaporkan maksimal 1x3 jam setelah kejadian |
||||
</Text> |
||||
</View> |
||||
</Card> |
||||
<View style={[styles.container, { backgroundColor: 'pureWhite' }]}> |
||||
<TouchableRipple onPress={showIncidentDatePickerFunc}> |
||||
<TextInput |
||||
style={{ marginBottom: 15 }} |
||||
dense={true} |
||||
outlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
mode="outlined" |
||||
label=" Tanggal Kejadian" |
||||
value={incidentDate ? moment(incidentDate).format("DD-MM-YYYY") : ''} |
||||
editable={false} |
||||
right={<TextInput.Icon icon="calendar" onPress={showIncidentDatePickerFunc} />} |
||||
/> |
||||
</TouchableRipple> |
||||
<TouchableRipple onPress={showIncidentTimePickerFunc}> |
||||
<TextInput |
||||
style={{ marginBottom: 15 }} |
||||
dense={true} |
||||
outlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
mode="outlined" |
||||
label="Waktu Kejadian" |
||||
value={incidentTime ? moment(incidentTime).format("HH:m") : ''} |
||||
editable={false} |
||||
right={<TextInput.Icon icon="clock-time-eight-outline" onPress={showIncidentTimePickerFunc} />} |
||||
/> |
||||
</TouchableRipple> |
||||
|
||||
<TouchableRipple onPress={showReportDatePickerFunc}> |
||||
<TextInput |
||||
style={{ marginBottom: 15 }} |
||||
dense={true} |
||||
outlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
mode="outlined" |
||||
label="Tanggal Laporan" |
||||
value={reportDate ? moment(reportDate).format("DD-MM-YYYY") : ''} |
||||
editable={false} |
||||
right={<TextInput.Icon icon="calendar" onPress={showReportDatePickerFunc} />} |
||||
/> |
||||
</TouchableRipple> |
||||
<TouchableRipple onPress={showReportTimePickerFunc}> |
||||
<TextInput |
||||
style={{ marginBottom: 15 }} |
||||
dense={true} |
||||
outlineColor={colors.amethystSmoke} |
||||
activeOutlineColor={colors.blue} |
||||
mode="outlined" |
||||
label=" Waktu Laporan" |
||||
value={reportTime ? moment(reportTime).format("HH:m") : ''} |
||||
editable={false} |
||||
right={<TextInput.Icon icon="clock-time-eight-outline" onPress={showReportTimePickerFunc} />} |
||||
/> |
||||
</TouchableRipple> |
||||
</View> |
||||
{showIncidentDatePicker && ( |
||||
<DateTimePicker |
||||
value={incidentDate || new Date()} |
||||
mode="date" |
||||
display="default" |
||||
onChange={handleIncidentDateChange} |
||||
/> |
||||
)} |
||||
{showIncidentTimePicker && ( |
||||
<DateTimePicker |
||||
value={incidentTime || new Date()} |
||||
mode="time" |
||||
display="default" |
||||
onChange={handleIncidentTimeChange} |
||||
/> |
||||
)} |
||||
{showReportDatePicker && ( |
||||
<DateTimePicker |
||||
value={reportDate || new Date()} |
||||
mode="date" |
||||
display="default" |
||||
onChange={handleReportDateChange} |
||||
/> |
||||
)} |
||||
{showReportTimePicker && ( |
||||
<DateTimePicker |
||||
value={reportTime || new Date()} |
||||
mode="time" |
||||
display="default" |
||||
onChange={handleReportTimeChange} |
||||
/> |
||||
)} |
||||
</> |
||||
) |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
flex: 1, |
||||
marginVertical: 10, |
||||
marginHorizontal: 10 |
||||
}, |
||||
}); |
||||
Loading…
Reference in new issue