366 lines
No EOL
19 KiB
JavaScript
366 lines
No EOL
19 KiB
JavaScript
import React, { useState, useRef, useEffect } from 'react';
|
|
import styled from 'styled-components';
|
|
import { useCallFeed } from '../hooks/useCallFeed';
|
|
import { router } from 'expo-router';
|
|
import { Platform, Linking, View, ScrollView, Text, TouchableOpacity } from 'react-native';
|
|
import { StatusBar } from 'expo-status-bar';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import {
|
|
PageHeader,
|
|
PageFooter,
|
|
} from '../components/generalHelpers.jsx';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { AccidentAndEmergency } from "healthicons-react-native/dist/outline";
|
|
import ActionSheet from 'react-native-actions-sheet';
|
|
|
|
const DepartmentActionSheet = styled(ActionSheet)``;
|
|
|
|
export default function Incidents() {
|
|
const actionSheetRef = useRef(null);
|
|
const callFeed = useCallFeed();
|
|
|
|
const {
|
|
departments,
|
|
callIconMap,
|
|
callDetails,
|
|
callColorSelector,
|
|
formatCallTimePast,
|
|
formatCallDateTime
|
|
} = callFeed;
|
|
|
|
const sortedAndFilteredCalls = callDetails
|
|
.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp))
|
|
.filter((item, index, self) => {
|
|
return index === self.findIndex(i => {
|
|
return `${i?.data?.Incident?.IncID}${i?.data?.Response?.ServiceName}` === `${item?.data?.Incident?.IncID}${item?.data?.Response?.ServiceName}`
|
|
});
|
|
});
|
|
|
|
const {
|
|
departmentTypeMap,
|
|
accountDetails,
|
|
deptList,
|
|
setDeptList,
|
|
selectedDepartment,
|
|
setSelectedDepartment,
|
|
updateSelectedDepartment,
|
|
selectedDepartmentColorPicker,
|
|
} = departments;
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<PageHeader>
|
|
<View
|
|
style={{
|
|
flexDirection: 'column',
|
|
height: 80,
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-end',
|
|
paddingBottom: 7
|
|
}}
|
|
>
|
|
<TouchableOpacity
|
|
style={{
|
|
borderRadius: 6,
|
|
elevation: 3,
|
|
backgroundColor: '#fff',
|
|
shadowOffset: { width: 0, height: 0 },
|
|
shadowColor: '#333',
|
|
shadowOpacity: .8,
|
|
shadowRadius: 2,
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 2,
|
|
}}
|
|
onPress={() => {
|
|
actionSheetRef.current?.show();
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
color: selectedDepartmentColorPicker(selectedDepartment?.type),
|
|
fontWeight: 600,
|
|
fontSize: 14
|
|
}}
|
|
>
|
|
{selectedDepartment?.deptAbv}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</PageHeader>
|
|
<ScrollView>
|
|
<StatusBar style="dark" />
|
|
<SafeAreaView />
|
|
<View style={{ flexDirection: 'column', padding: 20 }}>
|
|
{sortedAndFilteredCalls?.length ? (
|
|
sortedAndFilteredCalls?.map((callItem, index) => {
|
|
const { data: call, timestamp } = callItem;
|
|
const { Incident, Address, Response } = call;
|
|
const {
|
|
ServiceNumber,
|
|
IncDate,
|
|
IncNature,
|
|
IncNatureCode,
|
|
IncNatureCodeDesc,
|
|
Status,
|
|
} = Incident;
|
|
const {
|
|
StreetAddress,
|
|
AddressApartment,
|
|
Town,
|
|
State,
|
|
LocationName,
|
|
} = Address;
|
|
const {
|
|
ServiceName
|
|
} = Response;
|
|
const SelectedIcon = callIconMap[IncNature] || AccidentAndEmergency;
|
|
return (
|
|
<TouchableOpacity
|
|
key={`callDetails - ${timestamp}`}
|
|
style={{ padding: 2 }}
|
|
onPress={() => {
|
|
router.push({
|
|
pathname: '/call',
|
|
params: {
|
|
callDetails: btoa(JSON.stringify(call))
|
|
}
|
|
})
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
borderRadius: 12,
|
|
elevation: 3,
|
|
backgroundColor: '#fff',
|
|
shadowOffset: { width: 0, height: 0 },
|
|
shadowColor: callColorSelector(
|
|
IncNatureCode,
|
|
IncNature,
|
|
Status
|
|
),
|
|
shadowOpacity: 1,
|
|
shadowRadius: 5,
|
|
padding: 10,
|
|
}}
|
|
>
|
|
<View style={{ flexDirection: 'column' }}>
|
|
<View key="callDateAndTime"
|
|
style={{
|
|
paddingBottom: 6,
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between'
|
|
}}
|
|
>
|
|
<Text style={{ fontSize: 12 }}>{formatCallDateTime(IncDate)}</Text>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
<Text style={{ fontSize: 12 }}>{formatCallTimePast(IncDate)}</Text>
|
|
{Status === 'CLOSED' ? (
|
|
<Ionicons
|
|
name="lock-closed-outline"
|
|
color='red'
|
|
style={{
|
|
shadowColor: 'black',
|
|
shadowOffset: 0,
|
|
shadowOpacity: 1,
|
|
shadowRadius: 10
|
|
}}
|
|
/>
|
|
) : null}
|
|
</View>
|
|
</View>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<SelectedIcon
|
|
color={callColorSelector(
|
|
IncNatureCode,
|
|
IncNature,
|
|
Status
|
|
)}
|
|
opacity={0.3}
|
|
width={56}
|
|
height={56}
|
|
/>
|
|
<View style={{ flexDirection: 'column' }}>
|
|
{LocationName ? (
|
|
<Text
|
|
style={{
|
|
color: 'black',
|
|
fontWeight: 600,
|
|
fontSize: 16
|
|
}}
|
|
>
|
|
{`${LocationName}`}
|
|
</Text>
|
|
) : (
|
|
<View style={{ flexDirection: 'row' }}>
|
|
<Text
|
|
style={[{
|
|
color: 'black',
|
|
fontSize: 12,
|
|
fontWeight: 600
|
|
}]}
|
|
>
|
|
{`${StreetAddress}`}
|
|
</Text>
|
|
{AddressApartment ? (
|
|
<Text
|
|
style={[{
|
|
color: 'black',
|
|
fontSize: 12,
|
|
fontWeight: 600
|
|
}]}
|
|
>
|
|
{` - ${AddressApartment}`}
|
|
</Text>
|
|
) : null }
|
|
<Text
|
|
style={[{
|
|
color: 'black',
|
|
fontSize: 12,
|
|
fontWeight: 600
|
|
}]}
|
|
>
|
|
{` ${Town}, ${State}`}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
<Text
|
|
style={{
|
|
color: 'black',
|
|
fontWeight: 600,
|
|
fontSize: 16
|
|
}}
|
|
>
|
|
{`${IncNature}`}
|
|
</Text>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
|
|
<Text
|
|
style={{
|
|
color: 'black',
|
|
fontSize: 12,
|
|
textShadowColor: callColorSelector(
|
|
IncNatureCode,
|
|
IncNature,
|
|
Status
|
|
),
|
|
textShadowRadius: 1
|
|
}}
|
|
>
|
|
{`${IncNatureCodeDesc}`}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{ padding: 0 }}>
|
|
<View>
|
|
<Ionicons name="chevron-forward-outline" />
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
|
|
<Text
|
|
style={{
|
|
fontSize: 12,
|
|
}}
|
|
>
|
|
Service: {ServiceName}
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontSize: 12,
|
|
textAlign: 'right'
|
|
}}
|
|
>
|
|
{`Incident #: ${ServiceNumber}`}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
)
|
|
})) : (
|
|
<View style={{
|
|
marginTop: '50%',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-end',
|
|
}}>
|
|
<Ionicons name="warning-outline" size={100} color='orange' />
|
|
<Text style={{ fontSize: 25 }}>There are no Incidents</Text>
|
|
</View>
|
|
) }
|
|
</View>
|
|
</ScrollView>
|
|
<PageFooter>
|
|
<View
|
|
style={{
|
|
flexDirection: 'column',
|
|
height: 100,
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-start',
|
|
paddingTop: 7
|
|
}}
|
|
/>
|
|
</PageFooter>
|
|
<DepartmentActionSheet
|
|
ref={actionSheetRef}
|
|
gestureEnabled
|
|
containerStyle={{
|
|
height: "50%",
|
|
width: "100%",
|
|
backgroundColor: '#ECEDEE',
|
|
}}
|
|
>
|
|
<View style={{ flexDirection: 'column', padding: 20 }}>
|
|
{deptList?.map((item) => {
|
|
return (
|
|
<View style={{ padding: 2 }} key={item?.deptId}>
|
|
<TouchableOpacity
|
|
style={{
|
|
borderRadius: 6,
|
|
elevation: 3,
|
|
backgroundColor: item?.selected ? 'grey' : '#fff',
|
|
shadowOffset: { width: 1, height: 1 },
|
|
shadowColor: '#333',
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 2,
|
|
marginHorizontal: 20,
|
|
marginVertical: 6,
|
|
padding: 10
|
|
}}
|
|
onPress={() => {
|
|
actionSheetRef.current?.hide();
|
|
return updateSelectedDepartment(
|
|
selectedDepartment?.deptId,
|
|
item?.deptId
|
|
)
|
|
}}
|
|
>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
|
|
<Text
|
|
style={{
|
|
color: selectedDepartmentColorPicker(
|
|
item?.type
|
|
),
|
|
fontWeight: 600,
|
|
fontSize: 16
|
|
}}
|
|
>
|
|
{item?.dept}
|
|
</Text>
|
|
{item?.primary ? <Ionicons name="star" size={16} color="yellow" style={{
|
|
paddingLeft: 20,
|
|
shadowColor: '#333',
|
|
shadowOffset: 1,
|
|
shadowOpacity: 1,
|
|
shadowRadius: 6
|
|
}} /> : null}
|
|
</View>
|
|
<Text>{`${item?.deptAbv} - ${departmentTypeMap[item?.type]}`}</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
})}
|
|
</View>
|
|
</DepartmentActionSheet>
|
|
</React.Fragment>
|
|
)
|
|
} |