Feature/notification system #26
1 changed files with 149 additions and 149 deletions
|
|
@ -6,8 +6,8 @@ import { Platform, Linking, View, ScrollView, Text, TouchableOpacity } from 'rea
|
||||||
import { StatusBar } from 'expo-status-bar';
|
import { StatusBar } from 'expo-status-bar';
|
||||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||||
import {
|
import {
|
||||||
PageHeader,
|
PageHeader,
|
||||||
PageFooter,
|
PageFooter,
|
||||||
} from '@/components/generalHelpers.jsx';
|
} from '@/components/generalHelpers.jsx';
|
||||||
import { Ionicons } from '@expo/vector-icons';
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
import { AccidentAndEmergency } from "healthicons-react-native/dist/outline";
|
import { AccidentAndEmergency } from "healthicons-react-native/dist/outline";
|
||||||
|
|
@ -20,31 +20,31 @@ export default function Incidents() {
|
||||||
const callFeed = useCallFeed();
|
const callFeed = useCallFeed();
|
||||||
|
|
||||||
const {
|
const {
|
||||||
departments,
|
departments,
|
||||||
callIconMap,
|
callIconMap,
|
||||||
callDetails,
|
callDetails,
|
||||||
callColorSelector,
|
callColorSelector,
|
||||||
formatCallTimePast,
|
formatCallTimePast,
|
||||||
formatCallDateTime
|
formatCallDateTime
|
||||||
} = callFeed;
|
} = callFeed;
|
||||||
|
|
||||||
const sortedAndFilteredCalls = callDetails
|
const sortedAndFilteredCalls = callDetails
|
||||||
.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp))
|
.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp))
|
||||||
.filter((item, index, self) => {
|
.filter((item, index, self) => {
|
||||||
return index === self.findIndex(i => {
|
return index === self.findIndex(i => {
|
||||||
return `${i?.data?.Incident?.IncID}${i?.data?.Response?.ServiceName}` === `${item?.data?.Incident?.IncID}${item?.data?.Response?.ServiceName}`
|
return `${i?.data?.Incident?.IncID}${i?.data?.Response?.ServiceName}` === `${item?.data?.Incident?.IncID}${item?.data?.Response?.ServiceName}`
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
|
||||||
const {
|
const {
|
||||||
departmentTypeMap,
|
departmentTypeMap,
|
||||||
accountDetails,
|
accountDetails,
|
||||||
deptList,
|
deptList,
|
||||||
setDeptList,
|
setDeptList,
|
||||||
selectedDepartment,
|
selectedDepartment,
|
||||||
setSelectedDepartment,
|
setSelectedDepartment,
|
||||||
updateSelectedDepartment,
|
updateSelectedDepartment,
|
||||||
selectedDepartmentColorPicker,
|
selectedDepartmentColorPicker,
|
||||||
} = departments;
|
} = departments;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -88,11 +88,11 @@ export default function Incidents() {
|
||||||
</View>
|
</View>
|
||||||
</PageHeader>
|
</PageHeader>
|
||||||
<ScrollView>
|
<ScrollView>
|
||||||
<StatusBar style="dark" />
|
<StatusBar style="dark" />
|
||||||
<SafeAreaView />
|
<SafeAreaView />
|
||||||
<View style={{ flexDirection: 'column', padding: 20 }}>
|
<View style={{ flexDirection: 'column', padding: 20 }}>
|
||||||
{sortedAndFilteredCalls?.length ? (
|
{sortedAndFilteredCalls?.length ? (
|
||||||
sortedAndFilteredCalls?.map((callItem, index) => {
|
sortedAndFilteredCalls?.map((callItem, index) => {
|
||||||
const { data: call, timestamp } = callItem;
|
const { data: call, timestamp } = callItem;
|
||||||
const { Incident, Address, Response } = call;
|
const { Incident, Address, Response } = call;
|
||||||
const {
|
const {
|
||||||
|
|
@ -181,15 +181,15 @@ export default function Incidents() {
|
||||||
/>
|
/>
|
||||||
<View style={{ flexDirection: 'column' }}>
|
<View style={{ flexDirection: 'column' }}>
|
||||||
{LocationName ? (
|
{LocationName ? (
|
||||||
<Text
|
<Text
|
||||||
style={{
|
style={{
|
||||||
color: 'black',
|
color: 'black',
|
||||||
fontWeight: 600,
|
fontWeight: 600,
|
||||||
fontSize: 16
|
fontSize: 16
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{`${LocationName}`}
|
{`${LocationName}`}
|
||||||
</Text>
|
</Text>
|
||||||
) : (
|
) : (
|
||||||
<View style={{ flexDirection: 'row' }}>
|
<View style={{ flexDirection: 'row' }}>
|
||||||
<Text
|
<Text
|
||||||
|
|
@ -211,7 +211,7 @@ export default function Incidents() {
|
||||||
>
|
>
|
||||||
{` - ${AddressApartment}`}
|
{` - ${AddressApartment}`}
|
||||||
</Text>
|
</Text>
|
||||||
) : null }
|
) : null}
|
||||||
<Text
|
<Text
|
||||||
style={[{
|
style={[{
|
||||||
color: 'black',
|
color: 'black',
|
||||||
|
|
@ -250,9 +250,9 @@ export default function Incidents() {
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
<View style={{ padding: 0 }}>
|
<View style={{ padding: 0 }}>
|
||||||
<View>
|
<View>
|
||||||
<Ionicons name="chevron-forward-outline" />
|
<Ionicons name="chevron-forward-outline" />
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
|
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
|
||||||
|
|
@ -277,82 +277,82 @@ export default function Incidents() {
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
)
|
)
|
||||||
})) : (
|
})) : (
|
||||||
<Text>There are no Calls</Text>
|
<Text>There are no Calls</Text>
|
||||||
) }
|
)}
|
||||||
</View>
|
</View>
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
<PageFooter>
|
<PageFooter>
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
height: 100,
|
height: 100,
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'flex-start',
|
justifyContent: 'flex-start',
|
||||||
paddingTop: 7
|
paddingTop: 7
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</PageFooter>
|
</PageFooter>
|
||||||
<DepartmentActionSheet
|
<DepartmentActionSheet
|
||||||
ref={actionSheetRef}
|
ref={actionSheetRef}
|
||||||
gestureEnabled
|
gestureEnabled
|
||||||
containerStyle={{
|
containerStyle={{
|
||||||
height: "50%",
|
height: "50%",
|
||||||
width: "100%",
|
width: "100%",
|
||||||
backgroundColor: '#ECEDEE',
|
backgroundColor: '#ECEDEE',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<View style={{ flexDirection: 'column', padding: 20 }}>
|
<View style={{ flexDirection: 'column', padding: 20 }}>
|
||||||
{deptList?.map((item) => {
|
{deptList?.map((item) => {
|
||||||
return (
|
return (
|
||||||
<View style={{ padding: 2 }} key={item?.deptId}>
|
<View style={{ padding: 2 }} key={item?.deptId}>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={{
|
style={{
|
||||||
borderRadius: 6,
|
borderRadius: 6,
|
||||||
elevation: 3,
|
elevation: 3,
|
||||||
backgroundColor: item?.selected ? 'grey' : '#fff',
|
backgroundColor: item?.selected ? 'grey' : '#fff',
|
||||||
shadowOffset: { width: 1, height: 1 },
|
shadowOffset: { width: 1, height: 1 },
|
||||||
shadowColor: '#333',
|
shadowColor: '#333',
|
||||||
shadowOpacity: 0.3,
|
shadowOpacity: 0.3,
|
||||||
shadowRadius: 2,
|
shadowRadius: 2,
|
||||||
marginHorizontal: 20,
|
marginHorizontal: 20,
|
||||||
marginVertical: 6,
|
marginVertical: 6,
|
||||||
padding: 10
|
padding: 10
|
||||||
}}
|
}}
|
||||||
onPress={() => {
|
onPress={() => {
|
||||||
actionSheetRef.current?.hide();
|
actionSheetRef.current?.hide();
|
||||||
return updateSelectedDepartment(
|
return updateSelectedDepartment(
|
||||||
selectedDepartment?.deptId,
|
selectedDepartment?.deptId,
|
||||||
item?.deptId
|
item?.deptId
|
||||||
)
|
)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
|
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
|
||||||
<Text
|
<Text
|
||||||
style={{
|
style={{
|
||||||
color: selectedDepartmentColorPicker(
|
color: selectedDepartmentColorPicker(
|
||||||
item?.type
|
item?.type
|
||||||
),
|
),
|
||||||
fontWeight: 600,
|
fontWeight: 600,
|
||||||
fontSize: 16
|
fontSize: 16
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{item?.dept}
|
{item?.dept}
|
||||||
</Text>
|
</Text>
|
||||||
{item?.primary ? <Ionicons name="star" size={16} color="yellow" style={{
|
{item?.primary ? <Ionicons name="star" size={16} color="yellow" style={{
|
||||||
paddingLeft: 20,
|
paddingLeft: 20,
|
||||||
shadowColor: '#333',
|
shadowColor: '#333',
|
||||||
shadowOffset: 1,
|
shadowOffset: 1,
|
||||||
shadowOpacity: 1,
|
shadowOpacity: 1,
|
||||||
shadowRadius: 6
|
shadowRadius: 6
|
||||||
}} /> : null}
|
}} /> : null}
|
||||||
</View>
|
</View>
|
||||||
<Text>{`${item?.deptAbv} - ${departmentTypeMap[item?.type]}`}</Text>
|
<Text>{`${item?.deptAbv} - ${departmentTypeMap[item?.type]}`}</Text>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</View>
|
</View>
|
||||||
</DepartmentActionSheet>
|
</DepartmentActionSheet>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue