linter
This commit is contained in:
parent
64856b0695
commit
067c3e9df1
1 changed files with 191 additions and 121 deletions
|
|
@ -1,22 +1,30 @@
|
|||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { useCallFeed } from '@/hooks';
|
||||
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 React, { useState, useRef, useEffect } from "react";
|
||||
import styled from "styled-components";
|
||||
import { useCallFeed } from "@/hooks";
|
||||
import { router } from "expo-router";
|
||||
import {
|
||||
PageHeader,
|
||||
PageFooter,
|
||||
} from '@/components/generalHelpers.jsx';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
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';
|
||||
import ActionSheet from "react-native-actions-sheet";
|
||||
|
||||
const DepartmentActionSheet = styled(ActionSheet)``;
|
||||
|
||||
function toBase64Unicode(str) {
|
||||
return btoa(new TextEncoder().encode(str).reduce((data, byte) => data + String.fromCharCode(byte), ''));
|
||||
return btoa(
|
||||
new TextEncoder()
|
||||
.encode(str)
|
||||
.reduce((data, byte) => data + String.fromCharCode(byte), "")
|
||||
);
|
||||
}
|
||||
|
||||
export default function Incidents() {
|
||||
|
|
@ -29,16 +37,26 @@ export default function Incidents() {
|
|||
callDetails,
|
||||
callColorSelector,
|
||||
formatCallTimePast,
|
||||
formatCallDateTime
|
||||
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?.incident?.incID}${i?.response?.serviceName}` === `${item?.incident?.incID}${item?.response?.serviceName}`
|
||||
});
|
||||
})?.map(item => { return {...item, timestamp: item?.incident?.incDate} })
|
||||
|| [];
|
||||
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?.incident?.incID}${i?.response?.serviceName}` ===
|
||||
`${item?.incident?.incID}${item?.response?.serviceName}`
|
||||
);
|
||||
})
|
||||
);
|
||||
})
|
||||
?.map((item) => {
|
||||
return { ...item, timestamp: item?.incident?.incDate };
|
||||
}) || [];
|
||||
|
||||
const {
|
||||
departmentTypeMap,
|
||||
|
|
@ -54,37 +72,43 @@ export default function Incidents() {
|
|||
return (
|
||||
<React.Fragment>
|
||||
<PageHeader
|
||||
centerHeader={<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
|
||||
centerHeader={
|
||||
<View style={{ flex: 1, alignItems: "center" }}>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
color: selectedDepartmentColorPicker(selectedDepartment?.type),
|
||||
fontWeight: 600,
|
||||
fontSize: 14
|
||||
borderRadius: 6,
|
||||
elevation: 3,
|
||||
backgroundColor: "#fff",
|
||||
shadowOffset: { width: 0, height: 0 },
|
||||
shadowColor: "#333",
|
||||
shadowOpacity: 0.8,
|
||||
shadowRadius: 2,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 2,
|
||||
}}
|
||||
onPress={() => {
|
||||
actionSheetRef.current?.show();
|
||||
}}
|
||||
>
|
||||
{selectedDepartment?.deptAbv}
|
||||
</Text>
|
||||
</TouchableOpacity>}
|
||||
<Text
|
||||
style={{
|
||||
color: selectedDepartmentColorPicker(
|
||||
selectedDepartment?.type
|
||||
),
|
||||
fontWeight: 600,
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
{selectedDepartment?.deptAbv}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
<ScrollView>
|
||||
<StatusBar style="dark" />
|
||||
<SafeAreaView />
|
||||
<View style={{ flexDirection: 'column', padding: 20 }}>
|
||||
<View style={{ flexDirection: "column", padding: 20 }}>
|
||||
{sortedAndFilteredCalls?.length ? (
|
||||
sortedAndFilteredCalls?.map((callItem, index) => {
|
||||
const { incident, address, response, timestamp } = callItem;
|
||||
|
|
@ -103,28 +127,27 @@ export default function Incidents() {
|
|||
state,
|
||||
locationName,
|
||||
} = address;
|
||||
const {
|
||||
serviceName
|
||||
} = response;
|
||||
const SelectedIcon = callIconMap[incNature] || AccidentAndEmergency;
|
||||
const { serviceName } = response;
|
||||
const SelectedIcon =
|
||||
callIconMap[incNature] || AccidentAndEmergency;
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={`callDetails - ${timestamp}`}
|
||||
style={{ paddingBottom: 15 }}
|
||||
onPress={() => {
|
||||
router.push({
|
||||
pathname: '/call',
|
||||
pathname: "/call",
|
||||
params: {
|
||||
callDetails: toBase64Unicode(JSON.stringify(callItem))
|
||||
}
|
||||
})
|
||||
callDetails: toBase64Unicode(JSON.stringify(callItem)),
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
borderRadius: 12,
|
||||
elevation: 3,
|
||||
backgroundColor: '#fff',
|
||||
backgroundColor: "#fff",
|
||||
shadowOffset: { width: 0, height: 0 },
|
||||
shadowColor: callColorSelector(
|
||||
incNatureCodeDesc,
|
||||
|
|
@ -136,32 +159,41 @@ export default function Incidents() {
|
|||
padding: 10,
|
||||
}}
|
||||
>
|
||||
<View style={{ flexDirection: 'column' }}>
|
||||
<View key="callDateAndTime"
|
||||
<View style={{ flexDirection: "column" }}>
|
||||
<View
|
||||
key="callDateAndTime"
|
||||
style={{
|
||||
paddingBottom: 6,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between'
|
||||
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' ? (
|
||||
<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'
|
||||
color="red"
|
||||
style={{
|
||||
shadowColor: 'black',
|
||||
shadowColor: "black",
|
||||
shadowOffset: 0,
|
||||
shadowOpacity: 1,
|
||||
shadowRadius: 10
|
||||
shadowRadius: 10,
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<View
|
||||
style={{ flexDirection: "row", alignItems: "center" }}
|
||||
>
|
||||
<SelectedIcon
|
||||
color={callColorSelector(
|
||||
incNatureCodeDesc,
|
||||
|
|
@ -172,45 +204,59 @@ export default function Incidents() {
|
|||
width={56}
|
||||
height={56}
|
||||
/>
|
||||
<View style={{ flex: 1, flexDirection: 'column', alignItems: 'flex-start', paddingHorizontal: 2, maxWidth: '80%' }}>
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
paddingHorizontal: 2,
|
||||
maxWidth: "80%",
|
||||
}}
|
||||
>
|
||||
{locationName ? (
|
||||
<Text
|
||||
style={{
|
||||
color: 'black',
|
||||
color: "black",
|
||||
fontWeight: 600,
|
||||
fontSize: 16
|
||||
fontSize: 16,
|
||||
}}
|
||||
>
|
||||
{`${locationName}`}
|
||||
</Text>
|
||||
) : (
|
||||
<View style={{ flexDirection: 'row' }}>
|
||||
<View style={{ flexDirection: "row" }}>
|
||||
<Text
|
||||
style={[{
|
||||
color: 'black',
|
||||
fontSize: 12,
|
||||
fontWeight: 600
|
||||
}]}
|
||||
style={[
|
||||
{
|
||||
color: "black",
|
||||
fontSize: 12,
|
||||
fontWeight: 600,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{`${streetAddress?.split(',')[0]}`}
|
||||
{`${streetAddress?.split(",")[0]}`}
|
||||
</Text>
|
||||
{addressApartment ? (
|
||||
<Text
|
||||
style={[{
|
||||
color: 'black',
|
||||
fontSize: 12,
|
||||
fontWeight: 600
|
||||
}]}
|
||||
style={[
|
||||
{
|
||||
color: "black",
|
||||
fontSize: 12,
|
||||
fontWeight: 600,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{` - ${addressApartment}`}
|
||||
</Text>
|
||||
) : null}
|
||||
<Text
|
||||
style={[{
|
||||
color: 'black',
|
||||
fontSize: 12,
|
||||
fontWeight: 600
|
||||
}]}
|
||||
style={[
|
||||
{
|
||||
color: "black",
|
||||
fontSize: 12,
|
||||
fontWeight: 600,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{` ${town}, ${state}`}
|
||||
</Text>
|
||||
|
|
@ -218,24 +264,29 @@ export default function Incidents() {
|
|||
)}
|
||||
<Text
|
||||
style={{
|
||||
color: 'black',
|
||||
color: "black",
|
||||
fontWeight: 600,
|
||||
fontSize: 16
|
||||
fontSize: 16,
|
||||
}}
|
||||
>
|
||||
{`${incNature}`}
|
||||
</Text>
|
||||
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: 'black',
|
||||
color: "black",
|
||||
fontSize: 12,
|
||||
textShadowColor: callColorSelector(
|
||||
incNatureCode,
|
||||
incNature,
|
||||
status
|
||||
),
|
||||
textShadowRadius: 1
|
||||
textShadowRadius: 1,
|
||||
}}
|
||||
>
|
||||
{`${incNatureCodeDesc}`}
|
||||
|
|
@ -248,7 +299,13 @@ export default function Incidents() {
|
|||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ paddingTop: 5, flexDirection: 'row', justifyContent: 'space-between' }}>
|
||||
<View
|
||||
style={{
|
||||
paddingTop: 5,
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
|
|
@ -259,7 +316,7 @@ export default function Incidents() {
|
|||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
textAlign: 'right'
|
||||
textAlign: "right",
|
||||
}}
|
||||
>
|
||||
{`Incident #: ${serviceNumber}`}
|
||||
|
|
@ -268,8 +325,9 @@ export default function Incidents() {
|
|||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
)
|
||||
})) : (
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<Text>There are no Calls</Text>
|
||||
)}
|
||||
</View>
|
||||
|
|
@ -277,11 +335,11 @@ export default function Incidents() {
|
|||
<PageFooter>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'column',
|
||||
flexDirection: "column",
|
||||
height: 100,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
paddingTop: 7
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-start",
|
||||
paddingTop: 7,
|
||||
}}
|
||||
/>
|
||||
</PageFooter>
|
||||
|
|
@ -291,10 +349,10 @@ export default function Incidents() {
|
|||
containerStyle={{
|
||||
height: "50%",
|
||||
width: "100%",
|
||||
backgroundColor: '#ECEDEE',
|
||||
backgroundColor: "#ECEDEE",
|
||||
}}
|
||||
>
|
||||
<View style={{ flexDirection: 'column', padding: 20 }}>
|
||||
<View style={{ flexDirection: "column", padding: 20 }}>
|
||||
{deptList?.map((item) => {
|
||||
return (
|
||||
<View style={{ padding: 2 }} key={item?.deptId}>
|
||||
|
|
@ -302,44 +360,56 @@ export default function Incidents() {
|
|||
style={{
|
||||
borderRadius: 6,
|
||||
elevation: 3,
|
||||
backgroundColor: item?.selected ? 'grey' : '#fff',
|
||||
backgroundColor: item?.selected ? "grey" : "#fff",
|
||||
shadowOffset: { width: 1, height: 1 },
|
||||
shadowColor: '#333',
|
||||
shadowColor: "#333",
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 2,
|
||||
marginHorizontal: 20,
|
||||
marginVertical: 6,
|
||||
padding: 10
|
||||
padding: 10,
|
||||
}}
|
||||
onPress={() => {
|
||||
actionSheetRef.current?.hide();
|
||||
return updateSelectedDepartment(
|
||||
selectedDepartment?.deptId,
|
||||
item?.deptId
|
||||
)
|
||||
);
|
||||
}}
|
||||
>
|
||||
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: selectedDepartmentColorPicker(
|
||||
item?.type
|
||||
),
|
||||
color: selectedDepartmentColorPicker(item?.type),
|
||||
fontWeight: 600,
|
||||
fontSize: 16
|
||||
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}
|
||||
{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>
|
||||
<Text>{`${item?.deptAbv} - ${
|
||||
departmentTypeMap[item?.type]
|
||||
}`}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
|
|
@ -347,5 +417,5 @@ export default function Incidents() {
|
|||
</View>
|
||||
</DepartmentActionSheet>
|
||||
</React.Fragment>
|
||||
)
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue