Doble/Tones
1
0
Fork 0
Code Issues 5 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Feature/notification system #26

Open
mattdimegs wants to merge 34 commits from feature/notification-system into main
pull from: feature/notification-system
merge into: Doble:main
Conversation 0 Commits 34 Files changed 113 +149 -149
1 changed files with 149 additions and 149 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 34e0325f37 - Show all commits

298
app/incidents.jsx
View file

@ -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,41 +20,41 @@ 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 (
<React.Fragment> <React.Fragment>
<PageHeader> <PageHeader>
<View <View
style={{ style={{
flexDirection: 'column', flexDirection: 'column',
height: 80, height: 80,
alignItems: 'center', alignItems: 'center',
justifyContent: 'flex-end', justifyContent: 'flex-end',
paddingBottom: 7 paddingBottom: 7
}} }}
@ -75,10 +75,10 @@ export default function Incidents() {
actionSheetRef.current?.show(); actionSheetRef.current?.show();
}} }}
> >
<Text <Text
style={{ style={{
color: selectedDepartmentColorPicker(selectedDepartment?.type), color: selectedDepartmentColorPicker(selectedDepartment?.type),
fontWeight: 600, fontWeight: 600,
fontSize: 14 fontSize: 14
}} }}
> >
@ -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 {
@ -115,8 +115,8 @@ export default function Incidents() {
} = Response; } = Response;
const SelectedIcon = callIconMap[IncNature] || AccidentAndEmergency; const SelectedIcon = callIconMap[IncNature] || AccidentAndEmergency;
return ( return (
<TouchableOpacity <TouchableOpacity
key={`callDetails - ${timestamp}`} key={`callDetails - ${timestamp}`}
style={{ padding: 2 }} style={{ padding: 2 }}
onPress={() => { onPress={() => {
router.push({ router.push({
@ -127,14 +127,14 @@ export default function Incidents() {
}) })
}} }}
> >
<View <View
style={{ style={{
borderRadius: 12, borderRadius: 12,
elevation: 3, elevation: 3,
backgroundColor: '#fff', backgroundColor: '#fff',
shadowOffset: { width: 0, height: 0 }, shadowOffset: { width: 0, height: 0 },
shadowColor: callColorSelector( shadowColor: callColorSelector(
IncNatureCode, IncNatureCode,
IncNature, IncNature,
Status Status
), ),
@ -145,10 +145,10 @@ export default function Incidents() {
> >
<View style={{ flexDirection: 'column' }}> <View style={{ flexDirection: 'column' }}>
<View key="callDateAndTime" <View key="callDateAndTime"
style={{ style={{
paddingBottom: 6, paddingBottom: 6,
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between' justifyContent: 'space-between'
}} }}
> >
<Text style={{ fontSize: 12 }}>{formatCallDateTime(IncDate)}</Text> <Text style={{ fontSize: 12 }}>{formatCallDateTime(IncDate)}</Text>
@ -159,9 +159,9 @@ export default function Incidents() {
name="lock-closed-outline" name="lock-closed-outline"
color='red' color='red'
style={{ style={{
shadowColor: 'black', shadowColor: 'black',
shadowOffset: 0, shadowOffset: 0,
shadowOpacity: 1, shadowOpacity: 1,
shadowRadius: 10 shadowRadius: 10
}} }}
/> />
@ -169,53 +169,53 @@ export default function Incidents() {
</View> </View>
</View> </View>
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}> <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
<SelectedIcon <SelectedIcon
color={callColorSelector( color={callColorSelector(
IncNatureCode, IncNatureCode,
IncNature, IncNature,
Status Status
)} )}
opacity={0.3} opacity={0.3}
width={56} width={56}
height={56} height={56}
/> />
<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
style={[{ style={[{
color: 'black', color: 'black',
fontSize: 12, fontSize: 12,
fontWeight: 600 fontWeight: 600
}]} }]}
> >
{`${StreetAddress}`} {`${StreetAddress}`}
</Text> </Text>
{AddressApartment ? ( {AddressApartment ? (
<Text <Text
style={[{ style={[{
color: 'black', color: 'black',
fontSize: 12, fontSize: 12,
fontWeight: 600 fontWeight: 600
}]} }]}
> >
{` - ${AddressApartment}`} {` - ${AddressApartment}`}
</Text> </Text>
) : null } ) : null}
<Text <Text
style={[{ style={[{
color: 'black', color: 'black',
fontSize: 12, fontSize: 12,
fontWeight: 600 fontWeight: 600
}]} }]}
> >
@ -223,26 +223,26 @@ export default function Incidents() {
</Text> </Text>
</View> </View>
)} )}
<Text <Text
style={{ style={{
color: 'black', color: 'black',
fontWeight: 600, fontWeight: 600,
fontSize: 16 fontSize: 16
}} }}
> >
{`${IncNature}`} {`${IncNature}`}
</Text> </Text>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text <Text
style={{ style={{
color: 'black', color: 'black',
fontSize: 12, fontSize: 12,
textShadowColor: callColorSelector( textShadowColor: callColorSelector(
IncNatureCode, IncNatureCode,
IncNature, IncNature,
Status Status
), ),
textShadowRadius: 1 textShadowRadius: 1
}} }}
> >
{`${IncNatureCodeDesc}`} {`${IncNatureCodeDesc}`}
@ -250,14 +250,14 @@ 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' }}>
<Text <Text
style={{ style={{
fontSize: 12, fontSize: 12,
}} }}
> >
@ -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>
) )
} }