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 { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import {
|
||||
PageHeader,
|
||||
PageFooter,
|
||||
PageHeader,
|
||||
PageFooter,
|
||||
} from '@/components/generalHelpers.jsx';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { AccidentAndEmergency } from "healthicons-react-native/dist/outline";
|
||||
|
|
@ -20,31 +20,31 @@ export default function Incidents() {
|
|||
const callFeed = useCallFeed();
|
||||
|
||||
const {
|
||||
departments,
|
||||
callIconMap,
|
||||
callDetails,
|
||||
callColorSelector,
|
||||
formatCallTimePast,
|
||||
formatCallDateTime
|
||||
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}`
|
||||
});
|
||||
.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,
|
||||
departmentTypeMap,
|
||||
accountDetails,
|
||||
deptList,
|
||||
setDeptList,
|
||||
selectedDepartment,
|
||||
setSelectedDepartment,
|
||||
updateSelectedDepartment,
|
||||
selectedDepartmentColorPicker,
|
||||
} = departments;
|
||||
|
||||
return (
|
||||
|
|
@ -88,11 +88,11 @@ export default function Incidents() {
|
|||
</View>
|
||||
</PageHeader>
|
||||
<ScrollView>
|
||||
<StatusBar style="dark" />
|
||||
<SafeAreaView />
|
||||
<View style={{ flexDirection: 'column', padding: 20 }}>
|
||||
{sortedAndFilteredCalls?.length ? (
|
||||
sortedAndFilteredCalls?.map((callItem, index) => {
|
||||
<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 {
|
||||
|
|
@ -181,15 +181,15 @@ export default function Incidents() {
|
|||
/>
|
||||
<View style={{ flexDirection: 'column' }}>
|
||||
{LocationName ? (
|
||||
<Text
|
||||
style={{
|
||||
color: 'black',
|
||||
fontWeight: 600,
|
||||
fontSize: 16
|
||||
}}
|
||||
>
|
||||
{`${LocationName}`}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: 'black',
|
||||
fontWeight: 600,
|
||||
fontSize: 16
|
||||
}}
|
||||
>
|
||||
{`${LocationName}`}
|
||||
</Text>
|
||||
) : (
|
||||
<View style={{ flexDirection: 'row' }}>
|
||||
<Text
|
||||
|
|
@ -211,7 +211,7 @@ export default function Incidents() {
|
|||
>
|
||||
{` - ${AddressApartment}`}
|
||||
</Text>
|
||||
) : null }
|
||||
) : null}
|
||||
<Text
|
||||
style={[{
|
||||
color: 'black',
|
||||
|
|
@ -250,9 +250,9 @@ export default function Incidents() {
|
|||
</View>
|
||||
</View>
|
||||
<View style={{ padding: 0 }}>
|
||||
<View>
|
||||
<Ionicons name="chevron-forward-outline" />
|
||||
</View>
|
||||
<View>
|
||||
<Ionicons name="chevron-forward-outline" />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
|
||||
|
|
@ -277,82 +277,82 @@ export default function Incidents() {
|
|||
</TouchableOpacity>
|
||||
)
|
||||
})) : (
|
||||
<Text>There are no Calls</Text>
|
||||
) }
|
||||
<Text>There are no Calls</Text>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
<PageFooter>
|
||||
</ScrollView>
|
||||
<PageFooter>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'column',
|
||||
height: 100,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
paddingTop: 7
|
||||
}}
|
||||
style={{
|
||||
flexDirection: 'column',
|
||||
height: 100,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
paddingTop: 7
|
||||
}}
|
||||
/>
|
||||
</PageFooter>
|
||||
<DepartmentActionSheet
|
||||
</PageFooter>
|
||||
<DepartmentActionSheet
|
||||
ref={actionSheetRef}
|
||||
gestureEnabled
|
||||
containerStyle={{
|
||||
height: "50%",
|
||||
width: "100%",
|
||||
backgroundColor: '#ECEDEE',
|
||||
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>
|
||||
);
|
||||
})}
|
||||
{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>
|
||||
</DepartmentActionSheet>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in a new issue