thêm giao diện quản lý thuyền
This commit is contained in:
Tran Anh Tuan
@@ -3,8 +3,10 @@ import { Tabs, useSegments } from "expo-router";
|
||||
import { HapticTab } from "@/components/haptic-tab";
|
||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||
import { Colors } from "@/constants/theme";
|
||||
import { queryProfile } from "@/controller/AuthController";
|
||||
import { useI18n } from "@/hooks/use-i18n";
|
||||
import { useColorScheme } from "@/hooks/use-theme-context";
|
||||
import { addUserStorage } from "@/utils/storage";
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
export default function TabLayout() {
|
||||
@@ -29,6 +31,23 @@ export default function TabLayout() {
|
||||
}
|
||||
}, [currentSegment]);
|
||||
|
||||
useEffect(() => {
|
||||
const getUserProfile = async () => {
|
||||
try {
|
||||
const resp = await queryProfile();
|
||||
if (resp.data && resp.status === 200) {
|
||||
await addUserStorage(
|
||||
resp.data.id || "",
|
||||
resp.data.metadata?.user_type || ""
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error when get Profile: ", error);
|
||||
}
|
||||
};
|
||||
getUserProfile();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
|
||||
@@ -1,35 +1,178 @@
|
||||
import { Platform, ScrollView, StyleSheet, Text, View } from "react-native";
|
||||
import DevicesScreen from "@/components/manager/devices";
|
||||
import FleetsScreen from "@/components/manager/fleets";
|
||||
import ShipsScreen from "@/components/manager/ships";
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { ThemedView } from "@/components/themed-view";
|
||||
import { Colors } from "@/config";
|
||||
import { ColorScheme, useTheme } from "@/hooks/use-theme-context";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Animated, StyleSheet, TouchableOpacity, View } from "react-native";
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
|
||||
export default function manager() {
|
||||
const { colors, colorScheme } = useTheme();
|
||||
const styles = useMemo(
|
||||
() => createStyles(colors, colorScheme),
|
||||
[colors, colorScheme]
|
||||
);
|
||||
|
||||
const [selected, setSelected] = useState<"ships" | "devices" | "fleets">(
|
||||
"ships"
|
||||
);
|
||||
const [containerWidth, setContainerWidth] = useState(0);
|
||||
const indicatorTranslate = useRef(new Animated.Value(0)).current;
|
||||
const SEGMENT_COUNT = 3;
|
||||
const indexMap: Record<string, number> = {
|
||||
ships: 0,
|
||||
devices: 1,
|
||||
fleets: 2,
|
||||
};
|
||||
|
||||
const SegmentButton = ({
|
||||
label,
|
||||
active,
|
||||
onPress,
|
||||
}: {
|
||||
label: string;
|
||||
active?: boolean;
|
||||
onPress?: () => void;
|
||||
}) => {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[styles.segmentButton, active && styles.segmentButtonActive]}
|
||||
onPress={onPress}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<ThemedText
|
||||
style={[styles.segmentText, active && styles.segmentTextActive]}
|
||||
>
|
||||
{label}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (containerWidth <= 0) return;
|
||||
const segmentWidth = containerWidth / SEGMENT_COUNT;
|
||||
const toValue = indexMap[selected] * segmentWidth;
|
||||
Animated.spring(indicatorTranslate, {
|
||||
toValue,
|
||||
useNativeDriver: true,
|
||||
friction: 14,
|
||||
tension: 100,
|
||||
}).start();
|
||||
}, [selected, containerWidth, indicatorTranslate]);
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1 }}>
|
||||
<ScrollView contentContainerStyle={styles.scrollContent}>
|
||||
<SafeAreaView style={{ flex: 1 }} edges={["top"]}>
|
||||
<ThemedView style={styles.scrollContent}>
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.titleText}>Quản lý tàu </Text>
|
||||
<ThemedView style={styles.header}>
|
||||
<View
|
||||
style={styles.segmentContainer}
|
||||
onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
|
||||
>
|
||||
{/* sliding indicator */}
|
||||
{containerWidth > 0 && (
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.indicator,
|
||||
{
|
||||
width: Math.max(containerWidth / SEGMENT_COUNT - 8, 0),
|
||||
transform: [{ translateX: indicatorTranslate }],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
|
||||
<SegmentButton
|
||||
label="Tàu"
|
||||
active={selected === "ships"}
|
||||
onPress={() => setSelected("ships")}
|
||||
/>
|
||||
<SegmentButton
|
||||
label="Thiết bị"
|
||||
active={selected === "devices"}
|
||||
onPress={() => setSelected("devices")}
|
||||
/>
|
||||
<SegmentButton
|
||||
label="Đội tàu"
|
||||
active={selected === "fleets"}
|
||||
onPress={() => setSelected("fleets")}
|
||||
/>
|
||||
</View>
|
||||
</ThemedView>
|
||||
|
||||
<View style={styles.contentWrapper}>
|
||||
{selected === "ships" && <ShipsScreen />}
|
||||
{selected === "devices" && <DevicesScreen />}
|
||||
{selected === "fleets" && <FleetsScreen />}
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</ThemedView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
scrollContent: {
|
||||
flexGrow: 1,
|
||||
},
|
||||
container: {
|
||||
alignItems: "center",
|
||||
padding: 15,
|
||||
},
|
||||
titleText: {
|
||||
fontSize: 32,
|
||||
fontWeight: "700",
|
||||
lineHeight: 40,
|
||||
marginBottom: 30,
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
});
|
||||
const createStyles = (colors: typeof Colors.light, scheme: ColorScheme) =>
|
||||
StyleSheet.create({
|
||||
scrollContent: {
|
||||
flexGrow: 1,
|
||||
},
|
||||
container: {
|
||||
alignItems: "center",
|
||||
flex: 1,
|
||||
},
|
||||
|
||||
header: {
|
||||
width: "100%",
|
||||
paddingVertical: 8,
|
||||
paddingHorizontal: 4,
|
||||
},
|
||||
segmentContainer: {
|
||||
flexDirection: "row",
|
||||
backgroundColor: colors.backgroundSecondary,
|
||||
borderRadius: 10,
|
||||
padding: 4,
|
||||
alignSelf: "stretch",
|
||||
},
|
||||
segmentButton: {
|
||||
flex: 1,
|
||||
paddingVertical: 8,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderRadius: 8,
|
||||
},
|
||||
segmentButtonActive: {
|
||||
backgroundColor: scheme === "dark" ? "#435B66" : colors.surface,
|
||||
shadowColor: scheme === "dark" ? "transparent" : "#000",
|
||||
shadowOpacity: scheme === "dark" ? 0 : 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: scheme === "dark" ? 0 : 2,
|
||||
},
|
||||
segmentText: {
|
||||
fontSize: 14,
|
||||
fontWeight: "600",
|
||||
color: colors.textSecondary,
|
||||
},
|
||||
segmentTextActive: {
|
||||
color: colors.text,
|
||||
},
|
||||
indicator: {
|
||||
position: "absolute",
|
||||
left: 4,
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
backgroundColor: scheme === "dark" ? "#435B66" : colors.surface,
|
||||
borderRadius: 8,
|
||||
shadowColor: scheme === "dark" ? "transparent" : "#000",
|
||||
shadowOpacity: scheme === "dark" ? 0 : 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: scheme === "dark" ? 0 : 2,
|
||||
},
|
||||
contentWrapper: {
|
||||
flex: 1,
|
||||
alignSelf: "stretch",
|
||||
width: "100%",
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,83 +0,0 @@
|
||||
// import ButtonCancelTrip from "@/components/ButtonCancelTrip";
|
||||
// import ButtonCreateNewHaulOrTrip from "@/components/ButtonCreateNewHaulOrTrip";
|
||||
// import ButtonEndTrip from "@/components/ButtonEndTrip";
|
||||
// import CrewListTable from "@/components/tripInfo/CrewListTable";
|
||||
// import FishingToolsTable from "@/components/tripInfo/FishingToolsList";
|
||||
// import NetListTable from "@/components/tripInfo/NetListTable";
|
||||
// import TripCostTable from "@/components/tripInfo/TripCostTable";
|
||||
// import { useI18n } from "@/hooks/use-i18n";
|
||||
// import { useThemeContext } from "@/hooks/use-theme-context";
|
||||
// import { Platform, ScrollView, StyleSheet, Text, View } from "react-native";
|
||||
// import { SafeAreaView } from "react-native-safe-area-context";
|
||||
|
||||
// export default function TripInfoScreen() {
|
||||
// const { t } = useI18n();
|
||||
// const { colors } = useThemeContext();
|
||||
// return (
|
||||
// <SafeAreaView style={styles.safeArea} edges={["top", "left", "right"]}>
|
||||
// <View style={styles.header}>
|
||||
// <Text style={[styles.titleText, { color: colors.text }]}>
|
||||
// {t("trip.infoTrip")}
|
||||
// </Text>
|
||||
// <View style={styles.buttonWrapper}>
|
||||
// <ButtonCreateNewHaulOrTrip />
|
||||
// </View>
|
||||
// </View>
|
||||
// <ScrollView contentContainerStyle={styles.scrollContent}>
|
||||
// <View style={styles.container}>
|
||||
// <TripCostTable />
|
||||
// <FishingToolsTable />
|
||||
// <CrewListTable />
|
||||
// <NetListTable />
|
||||
// <View style={styles.buttonRow}>
|
||||
// <ButtonCancelTrip />
|
||||
// <ButtonEndTrip />
|
||||
// </View>
|
||||
// </View>
|
||||
// </ScrollView>
|
||||
// </SafeAreaView>
|
||||
// );
|
||||
// }
|
||||
|
||||
// const styles = StyleSheet.create({
|
||||
// safeArea: {
|
||||
// flex: 1,
|
||||
// paddingBottom: 5,
|
||||
// },
|
||||
// scrollContent: {
|
||||
// flexGrow: 1,
|
||||
// },
|
||||
// header: {
|
||||
// width: "100%",
|
||||
// paddingHorizontal: 15,
|
||||
// paddingTop: 15,
|
||||
// paddingBottom: 10,
|
||||
// alignItems: "center",
|
||||
// },
|
||||
// buttonWrapper: {
|
||||
// width: "100%",
|
||||
// flexDirection: "row",
|
||||
// justifyContent: "flex-end",
|
||||
// },
|
||||
// container: {
|
||||
// alignItems: "center",
|
||||
// paddingHorizontal: 15,
|
||||
// },
|
||||
// buttonRow: {
|
||||
// flexDirection: "row",
|
||||
// gap: 10,
|
||||
// marginTop: 15,
|
||||
// marginBottom: 15,
|
||||
// },
|
||||
// titleText: {
|
||||
// fontSize: 32,
|
||||
// fontWeight: "700",
|
||||
// lineHeight: 40,
|
||||
// paddingBottom: 10,
|
||||
// fontFamily: Platform.select({
|
||||
// ios: "System",
|
||||
// android: "Roboto",
|
||||
// default: "System",
|
||||
// }),
|
||||
// },
|
||||
// });
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Colors } from "@/config";
|
||||
import { queryShipGroups } from "@/controller/DeviceController";
|
||||
import { ColorScheme, useTheme } from "@/hooks/use-theme-context";
|
||||
import { useShipGroups } from "@/state/use-ship-groups";
|
||||
import { useShipTypes } from "@/state/use-ship-types";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
@@ -44,8 +44,8 @@ const ShipSearchForm = (props: ShipSearchFormProps) => {
|
||||
[colors, colorScheme]
|
||||
);
|
||||
const { shipTypes, getShipTypes } = useShipTypes();
|
||||
const [groupShips, setGroupShips] = useState<Model.ShipGroup[]>([]);
|
||||
const [slideAnim] = useState(new Animated.Value(0));
|
||||
const { shipGroups, getShipGroups } = useShipGroups();
|
||||
|
||||
const { control, handleSubmit, reset, watch } = useForm<SearchShipResponse>({
|
||||
defaultValues: {
|
||||
@@ -70,8 +70,10 @@ const ShipSearchForm = (props: ShipSearchFormProps) => {
|
||||
}, [shipTypes]);
|
||||
|
||||
useEffect(() => {
|
||||
getShipGroups();
|
||||
}, []);
|
||||
if (shipGroups === null) {
|
||||
getShipGroups();
|
||||
}
|
||||
}, [props.isOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
if (props.isOpen) {
|
||||
@@ -107,17 +109,6 @@ const ShipSearchForm = (props: ShipSearchFormProps) => {
|
||||
}
|
||||
}, [props.initialValues]);
|
||||
|
||||
const getShipGroups = async () => {
|
||||
try {
|
||||
const response = await queryShipGroups();
|
||||
if (response && response.data) {
|
||||
setGroupShips(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching ship groups:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const alarmListLabel = [
|
||||
{
|
||||
label: "Tiếp cận vùng hạn chế",
|
||||
@@ -366,10 +357,12 @@ const ShipSearchForm = (props: ShipSearchFormProps) => {
|
||||
name="ship_group_id"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Select
|
||||
options={groupShips.map((group) => ({
|
||||
label: group.name || "",
|
||||
value: group.id || "",
|
||||
}))}
|
||||
options={
|
||||
shipGroups?.map((group) => ({
|
||||
label: group.name || "",
|
||||
value: group.id || "",
|
||||
})) || []
|
||||
}
|
||||
placeholder="Chọn đội tàu"
|
||||
mode="multiple"
|
||||
value={value}
|
||||
|
||||
16
components/manager/devices.tsx
Normal file
16
components/manager/devices.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { ThemedView } from "@/components/themed-view";
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
export default function DevicesScreen() {
|
||||
console.log("Gọi API 2");
|
||||
return (
|
||||
<ThemedView style={styles.container}>
|
||||
<ThemedText>Quản lý thiết bị</ThemedText>
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1 },
|
||||
});
|
||||
17
components/manager/fleets.tsx
Normal file
17
components/manager/fleets.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { ThemedView } from "@/components/themed-view";
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
export default function FleetsScreen() {
|
||||
console.log("Gọi API 3");
|
||||
|
||||
return (
|
||||
<ThemedView style={styles.container}>
|
||||
<ThemedText>Quản lý đội tàu</ThemedText>
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1 },
|
||||
});
|
||||
847
components/manager/ship_components/CreateOrUpdateShip.tsx
Normal file
847
components/manager/ship_components/CreateOrUpdateShip.tsx
Normal file
@@ -0,0 +1,847 @@
|
||||
import Select, { SelectOption } from "@/components/Select";
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { Colors } from "@/config";
|
||||
import { ColorScheme, useTheme } from "@/hooks/use-theme-context";
|
||||
import { usePort } from "@/state/use-ports";
|
||||
import { useShipGroups } from "@/state/use-ship-groups";
|
||||
import { useShipTypes } from "@/state/use-ship-types";
|
||||
import { useThings } from "@/state/use-thing";
|
||||
import DateTimePicker from "@react-native-community/datetimepicker";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import {
|
||||
KeyboardAvoidingView,
|
||||
Modal,
|
||||
Platform,
|
||||
Pressable,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
|
||||
interface CreateOrUpdateShipProps {
|
||||
initialValue?: Model.ShipBodyRequest;
|
||||
isOpen?: boolean;
|
||||
type?: "create" | "update";
|
||||
onSubmit?: (data: Model.ShipBodyRequest) => void;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
const CreateOrUpdateShip = (props: CreateOrUpdateShipProps) => {
|
||||
const { colors, colorScheme } = useTheme();
|
||||
const styles = useMemo(
|
||||
() => createStyles(colors, colorScheme),
|
||||
[colors, colorScheme]
|
||||
);
|
||||
|
||||
const { shipTypes, getShipTypes } = useShipTypes();
|
||||
const { ports, getPorts } = usePort();
|
||||
const { shipGroups, getShipGroups } = useShipGroups();
|
||||
const { things, getThings } = useThings();
|
||||
|
||||
// State for date picker
|
||||
const [showDatePicker, setShowDatePicker] = useState(false);
|
||||
|
||||
// Initialize form with react-hook-form
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
setValue,
|
||||
watch,
|
||||
reset,
|
||||
} = useForm<Model.ShipBodyRequest>({
|
||||
defaultValues: props.initialValue || {
|
||||
fishing_license_expiry_date: new Date(),
|
||||
},
|
||||
});
|
||||
|
||||
// Watch the date field for picker display
|
||||
const dateValue = watch("fishing_license_expiry_date");
|
||||
|
||||
// Fetch data when modal opens
|
||||
useEffect(() => {
|
||||
if (props.isOpen) {
|
||||
// Fetch ship types if not loaded
|
||||
if (shipTypes === null || shipTypes.length === 0) {
|
||||
getShipTypes();
|
||||
}
|
||||
|
||||
// Fetch ports if not loaded
|
||||
if (ports === null) {
|
||||
getPorts();
|
||||
}
|
||||
|
||||
// Fetch ship groups if not loaded
|
||||
if (shipGroups === null) {
|
||||
getShipGroups();
|
||||
}
|
||||
|
||||
// Fetch things when modal opens
|
||||
const payloadThings: Model.SearchThingBody = {
|
||||
offset: 0,
|
||||
limit: 200,
|
||||
order: "name",
|
||||
dir: "asc",
|
||||
};
|
||||
getThings(payloadThings);
|
||||
|
||||
// Reset form with initial values if provided
|
||||
if (props.initialValue) {
|
||||
reset(props.initialValue);
|
||||
}
|
||||
}
|
||||
}, [props.isOpen, props.initialValue, reset]);
|
||||
|
||||
// Prepare options for selects
|
||||
const shipTypeOptions = useMemo<SelectOption[]>(() => {
|
||||
return (shipTypes || []).map((type) => ({
|
||||
label: type.name || "",
|
||||
value: type.id || 0,
|
||||
}));
|
||||
}, [shipTypes]);
|
||||
|
||||
const portOptions = useMemo<SelectOption[]>(() => {
|
||||
return (ports?.ports || []).map((port) => ({
|
||||
label: port.name || "",
|
||||
value: port.id || 0,
|
||||
}));
|
||||
}, [ports]);
|
||||
|
||||
const shipGroupOptions = useMemo<SelectOption[]>(() => {
|
||||
return (shipGroups || []).map((group) => ({
|
||||
label: group.name || "",
|
||||
value: group.id || "",
|
||||
}));
|
||||
}, [shipGroups]);
|
||||
|
||||
const thingOptions = useMemo<SelectOption[]>(() => {
|
||||
// Filter things that are not assigned to any ship
|
||||
const unassignedThings = (things || []).filter(
|
||||
(thing) => !thing.metadata?.ship_id
|
||||
);
|
||||
return unassignedThings.map((thing) => ({
|
||||
label: thing.name || "",
|
||||
value: thing.id || "",
|
||||
}));
|
||||
}, [things]);
|
||||
|
||||
// Handle date picker change
|
||||
const handleDateChange = (_: any, selectedDate?: Date) => {
|
||||
if (selectedDate) {
|
||||
setValue("fishing_license_expiry_date", selectedDate);
|
||||
}
|
||||
// On Android, close picker after selection
|
||||
// On iOS, keep it open until user confirms with the button
|
||||
if (Platform.OS === "android") {
|
||||
setShowDatePicker(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Format date for display
|
||||
const formatDateForDisplay = (date: Date | string | undefined) => {
|
||||
if (!date) return "";
|
||||
const d = typeof date === "string" ? new Date(date) : date;
|
||||
return d.toLocaleDateString("vi-VN", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
// Handle form submission
|
||||
const onSubmit = (data: Model.ShipBodyRequest) => {
|
||||
// Ensure numeric fields are numbers
|
||||
const payload: Model.ShipBodyRequest = {
|
||||
...data,
|
||||
ship_type: Number(data.ship_type),
|
||||
home_port: Number(data.home_port),
|
||||
ship_length: Number(data.ship_length),
|
||||
ship_power: Number(data.ship_power),
|
||||
fishing_license_expiry_date: data.fishing_license_expiry_date,
|
||||
};
|
||||
|
||||
props.onSubmit?.(payload);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
animationType="slide"
|
||||
transparent={true}
|
||||
visible={props.isOpen}
|
||||
onRequestClose={props.onClose}
|
||||
>
|
||||
<SafeAreaView style={{ flex: 1 }} edges={["top", "left", "right"]}>
|
||||
<View style={styles.container}>
|
||||
<Pressable style={styles.backdrop} onPress={props.onClose} />
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||||
style={styles.keyboardAvoidingView}
|
||||
>
|
||||
<View style={styles.modalContent}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<View style={styles.dragIndicator} />
|
||||
<ThemedText style={styles.headerTitle}>
|
||||
{props.type === "create" ? "Thêm tàu mới" : "Cập nhật tàu"}
|
||||
</ThemedText>
|
||||
<TouchableOpacity
|
||||
onPress={props.onClose}
|
||||
style={styles.closeButton}
|
||||
>
|
||||
<ThemedText style={styles.closeButtonText}>✕</ThemedText>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Form Content */}
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
showsVerticalScrollIndicator={false}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
>
|
||||
{/* Registration Number - Only show in create mode */}
|
||||
{props.type === "create" && (
|
||||
<View style={styles.fieldGroup}>
|
||||
<ThemedText style={styles.label}>Số đăng ký *</ThemedText>
|
||||
<Controller
|
||||
control={control}
|
||||
name="reg_number"
|
||||
rules={{ required: "Vui lòng nhập số đăng ký" }}
|
||||
render={({ field: { onChange, onBlur, value } }) => (
|
||||
<TextInput
|
||||
style={[
|
||||
styles.input,
|
||||
{
|
||||
borderColor: errors.reg_number
|
||||
? "red"
|
||||
: colors.border,
|
||||
},
|
||||
]}
|
||||
placeholder="Nhập số đăng ký"
|
||||
onBlur={onBlur}
|
||||
onChangeText={(text) => onChange(text.trim())}
|
||||
value={value}
|
||||
placeholderTextColor={colors.textSecondary}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.reg_number && (
|
||||
<ThemedText style={styles.errorText}>
|
||||
{errors.reg_number.message}
|
||||
</ThemedText>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Ship Name */}
|
||||
<View style={styles.fieldGroup}>
|
||||
<ThemedText style={styles.label}>Tên tàu *</ThemedText>
|
||||
<Controller
|
||||
control={control}
|
||||
name="name"
|
||||
rules={{ required: "Vui lòng nhập tên tàu" }}
|
||||
render={({ field: { onChange, onBlur, value } }) => (
|
||||
<TextInput
|
||||
style={[
|
||||
styles.input,
|
||||
{ borderColor: errors.name ? "red" : colors.border },
|
||||
]}
|
||||
placeholder="Nhập tên tàu"
|
||||
onBlur={onBlur}
|
||||
onChangeText={onChange}
|
||||
value={value}
|
||||
placeholderTextColor={colors.textSecondary}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.name && (
|
||||
<ThemedText style={styles.errorText}>
|
||||
{errors.name.message}
|
||||
</ThemedText>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Ship Type */}
|
||||
<View style={styles.fieldGroup}>
|
||||
<ThemedText style={styles.label}>Loại tàu *</ThemedText>
|
||||
<Controller
|
||||
control={control}
|
||||
name="ship_type"
|
||||
rules={{ required: "Vui lòng chọn loại tàu" }}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Select
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
options={shipTypeOptions}
|
||||
placeholder="Chọn loại tàu"
|
||||
style={[
|
||||
styles.selectInput,
|
||||
{
|
||||
borderColor: errors.ship_type
|
||||
? "red"
|
||||
: colors.border,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.ship_type && (
|
||||
<ThemedText style={styles.errorText}>
|
||||
{errors.ship_type.message}
|
||||
</ThemedText>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Home Port */}
|
||||
<View style={styles.fieldGroup}>
|
||||
<ThemedText style={styles.label}>
|
||||
Cảng đăng ký đỗ *
|
||||
</ThemedText>
|
||||
<Controller
|
||||
control={control}
|
||||
name="home_port"
|
||||
rules={{ required: "Vui lòng chọn cảng đăng ký" }}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Select
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
options={portOptions}
|
||||
placeholder="Chọn cảng đăng ký"
|
||||
style={[
|
||||
styles.selectInput,
|
||||
{
|
||||
borderColor: errors.home_port
|
||||
? "red"
|
||||
: colors.border,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.home_port && (
|
||||
<ThemedText style={styles.errorText}>
|
||||
{errors.home_port.message}
|
||||
</ThemedText>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Fishing License Number */}
|
||||
<View style={styles.fieldGroup}>
|
||||
<ThemedText style={styles.label}>Số giấy phép *</ThemedText>
|
||||
<Controller
|
||||
control={control}
|
||||
name="fishing_license_number"
|
||||
rules={{ required: "Vui lòng nhập số giấy phép" }}
|
||||
render={({ field: { onChange, onBlur, value } }) => (
|
||||
<TextInput
|
||||
style={[
|
||||
styles.input,
|
||||
{
|
||||
borderColor: errors.fishing_license_number
|
||||
? "red"
|
||||
: colors.border,
|
||||
},
|
||||
]}
|
||||
placeholder="Nhập số giấy phép"
|
||||
onBlur={onBlur}
|
||||
onChangeText={onChange}
|
||||
value={value}
|
||||
placeholderTextColor={colors.textSecondary}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.fishing_license_number && (
|
||||
<ThemedText style={styles.errorText}>
|
||||
{errors.fishing_license_number.message}
|
||||
</ThemedText>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Fishing License Expiry Date */}
|
||||
<View style={styles.fieldGroup}>
|
||||
<ThemedText style={styles.label}>Ngày hết hạn *</ThemedText>
|
||||
<Controller
|
||||
control={control}
|
||||
name="fishing_license_expiry_date"
|
||||
rules={{
|
||||
required: "Vui lòng chọn ngày hết hạn",
|
||||
validate: (date) => {
|
||||
if (!date) return "Vui lòng chọn ngày hết hạn";
|
||||
const selectedDate = new Date(date);
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
if (selectedDate < today) {
|
||||
return "Ngày hết hạn không thể là ngày trong quá khứ";
|
||||
}
|
||||
return true;
|
||||
},
|
||||
}}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowDatePicker(true)}
|
||||
style={[
|
||||
styles.input,
|
||||
styles.dateInput,
|
||||
{
|
||||
borderColor: errors.fishing_license_expiry_date
|
||||
? "red"
|
||||
: colors.border,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<ThemedText
|
||||
style={{
|
||||
color: value ? colors.text : colors.textSecondary,
|
||||
}}
|
||||
>
|
||||
{formatDateForDisplay(value) || "Chọn ngày hết hạn"}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
/>
|
||||
{errors.fishing_license_expiry_date && (
|
||||
<ThemedText style={styles.errorText}>
|
||||
{errors.fishing_license_expiry_date.message}
|
||||
</ThemedText>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Ship Length */}
|
||||
<View style={styles.fieldGroup}>
|
||||
<ThemedText style={styles.label}>Chiều dài (m) *</ThemedText>
|
||||
<Controller
|
||||
control={control}
|
||||
name="ship_length"
|
||||
rules={{
|
||||
required: "Vui lòng nhập chiều dài",
|
||||
pattern: {
|
||||
value: /^\d*\.?\d+$/,
|
||||
message: "Vui lòng nhập số hợp lệ",
|
||||
},
|
||||
validate: (value) => {
|
||||
const num = Number(value);
|
||||
if (isNaN(num) || num <= 0) {
|
||||
return "Chiều dài phải lớn hơn 0";
|
||||
}
|
||||
return true;
|
||||
},
|
||||
}}
|
||||
render={({ field: { onChange, onBlur, value } }) => (
|
||||
<TextInput
|
||||
style={[
|
||||
styles.input,
|
||||
{
|
||||
borderColor: errors.ship_length
|
||||
? "red"
|
||||
: colors.border,
|
||||
},
|
||||
]}
|
||||
placeholder="Nhập chiều dài tàu"
|
||||
onBlur={onBlur}
|
||||
onChangeText={onChange}
|
||||
value={value?.toString()}
|
||||
keyboardType="numeric"
|
||||
placeholderTextColor={colors.textSecondary}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.ship_length && (
|
||||
<ThemedText style={styles.errorText}>
|
||||
{errors.ship_length.message}
|
||||
</ThemedText>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Ship Power */}
|
||||
<View style={styles.fieldGroup}>
|
||||
<ThemedText style={styles.label}>
|
||||
Công suất (mã lực) *
|
||||
</ThemedText>
|
||||
<Controller
|
||||
control={control}
|
||||
name="ship_power"
|
||||
rules={{
|
||||
required: "Vui lòng nhập công suất",
|
||||
pattern: {
|
||||
value: /^\d*\.?\d+$/,
|
||||
message: "Vui lòng nhập số hợp lệ",
|
||||
},
|
||||
validate: (value) => {
|
||||
const num = Number(value);
|
||||
if (isNaN(num) || num <= 0) {
|
||||
return "Công suất phải lớn hơn 0";
|
||||
}
|
||||
return true;
|
||||
},
|
||||
}}
|
||||
render={({ field: { onChange, onBlur, value } }) => (
|
||||
<TextInput
|
||||
style={[
|
||||
styles.input,
|
||||
{
|
||||
borderColor: errors.ship_power
|
||||
? "red"
|
||||
: colors.border,
|
||||
},
|
||||
]}
|
||||
placeholder="Nhập công suất tàu"
|
||||
onBlur={onBlur}
|
||||
onChangeText={onChange}
|
||||
value={value?.toString()}
|
||||
keyboardType="numeric"
|
||||
placeholderTextColor={colors.textSecondary}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.ship_power && (
|
||||
<ThemedText style={styles.errorText}>
|
||||
{errors.ship_power.message}
|
||||
</ThemedText>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Ship Group - Only show in update mode */}
|
||||
{props.type === "update" && (
|
||||
<View style={styles.fieldGroup}>
|
||||
<ThemedText style={styles.label}>Đội tàu</ThemedText>
|
||||
<Controller
|
||||
control={control}
|
||||
name="ship_group_id"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Select
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
options={shipGroupOptions}
|
||||
placeholder="Chọn đội tàu"
|
||||
style={styles.selectInput}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Device/Thing - Only show in create mode */}
|
||||
{props.type === "create" && (
|
||||
<View style={styles.fieldGroup}>
|
||||
<ThemedText style={styles.label}>
|
||||
Thiết bị kết nối *
|
||||
</ThemedText>
|
||||
<Controller
|
||||
control={control}
|
||||
name="thing_id"
|
||||
rules={{ required: "Vui lòng chọn thiết bị kết nối" }}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Select
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
options={thingOptions}
|
||||
placeholder="Chọn thiết bị kết nối"
|
||||
style={[
|
||||
styles.selectInput,
|
||||
{
|
||||
borderColor: errors.thing_id
|
||||
? "red"
|
||||
: colors.border,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.thing_id && (
|
||||
<ThemedText style={styles.errorText}>
|
||||
{errors.thing_id.message}
|
||||
</ThemedText>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<View style={styles.actionButtons}>
|
||||
<TouchableOpacity
|
||||
style={[styles.resetButton, { borderColor: colors.border }]}
|
||||
onPress={() => {
|
||||
reset(props.initialValue || {});
|
||||
}}
|
||||
>
|
||||
<ThemedText
|
||||
style={[styles.resetButtonText, { color: colors.text }]}
|
||||
>
|
||||
Nhập lại
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.submitButton,
|
||||
{ backgroundColor: colors.primary },
|
||||
]}
|
||||
onPress={handleSubmit(onSubmit)}
|
||||
>
|
||||
<ThemedText style={styles.submitButtonText}>
|
||||
{props.type === "create" ? "Thêm tàu" : "Cập nhật"}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
|
||||
{/* Date Picker Modal - Only show on Android as modal, iOS shows inline */}
|
||||
{Platform.OS === "android" && showDatePicker && (
|
||||
<DateTimePicker
|
||||
value={
|
||||
typeof dateValue === "string"
|
||||
? new Date(dateValue)
|
||||
: dateValue || new Date()
|
||||
}
|
||||
mode="date"
|
||||
display="default"
|
||||
onChange={handleDateChange}
|
||||
minimumDate={new Date()}
|
||||
/>
|
||||
)}
|
||||
{Platform.OS === "ios" && showDatePicker && (
|
||||
<Modal
|
||||
transparent={true}
|
||||
animationType="fade"
|
||||
visible={showDatePicker}
|
||||
onRequestClose={() => setShowDatePicker(false)}
|
||||
>
|
||||
<SafeAreaView style={styles.datePickerModal}>
|
||||
<View style={styles.datePickerContent}>
|
||||
<View style={styles.datePickerHeader}>
|
||||
<ThemedText style={styles.datePickerTitle}>
|
||||
Chọn ngày hết hạn
|
||||
</ThemedText>
|
||||
<TouchableOpacity onPress={() => setShowDatePicker(false)}>
|
||||
<ThemedText style={styles.datePickerClose}>✕</ThemedText>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<DateTimePicker
|
||||
value={
|
||||
typeof dateValue === "string"
|
||||
? new Date(dateValue)
|
||||
: dateValue || new Date()
|
||||
}
|
||||
mode="date"
|
||||
display="spinner"
|
||||
onChange={handleDateChange}
|
||||
themeVariant={colorScheme}
|
||||
textColor={colors.text}
|
||||
minimumDate={new Date()}
|
||||
style={styles.datePickerIOS}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.datePickerButton,
|
||||
{ backgroundColor: colors.primary },
|
||||
]}
|
||||
onPress={() => setShowDatePicker(false)}
|
||||
>
|
||||
<ThemedText style={styles.datePickerButtonText}>
|
||||
Xác nhận
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
</Modal>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
const createStyles = (colors: typeof Colors.light, scheme: ColorScheme) =>
|
||||
StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
position: "relative",
|
||||
},
|
||||
keyboardAvoidingView: {
|
||||
flex: 1,
|
||||
justifyContent: "flex-end",
|
||||
},
|
||||
backdrop: {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: "rgba(0, 0, 0, 0.3)",
|
||||
},
|
||||
modalContent: {
|
||||
height: "90%",
|
||||
backgroundColor: colors.background,
|
||||
borderTopLeftRadius: 24,
|
||||
borderTopRightRadius: 24,
|
||||
shadowColor: "#000",
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: -4,
|
||||
},
|
||||
shadowOpacity: 0.25,
|
||||
shadowRadius: 8,
|
||||
elevation: 10,
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
paddingVertical: 16,
|
||||
paddingHorizontal: 20,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: colors.border,
|
||||
position: "relative",
|
||||
},
|
||||
dragIndicator: {
|
||||
position: "absolute",
|
||||
top: 8,
|
||||
width: 40,
|
||||
height: 4,
|
||||
backgroundColor: colors.border,
|
||||
borderRadius: 2,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: "700",
|
||||
textAlign: "center",
|
||||
color: colors.text,
|
||||
},
|
||||
closeButton: {
|
||||
position: "absolute",
|
||||
right: 16,
|
||||
top: 16,
|
||||
width: 32,
|
||||
height: 32,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderRadius: 16,
|
||||
},
|
||||
closeButtonText: {
|
||||
fontSize: 20,
|
||||
fontWeight: "300",
|
||||
color: colors.text,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
padding: 20,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingBottom: Platform.OS === "ios" ? 120 : 80,
|
||||
},
|
||||
fieldGroup: {
|
||||
marginBottom: 24,
|
||||
},
|
||||
label: {
|
||||
fontSize: 15,
|
||||
fontWeight: "600",
|
||||
marginBottom: 8,
|
||||
color: colors.text,
|
||||
},
|
||||
input: {
|
||||
borderWidth: 1,
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 14,
|
||||
fontSize: 15,
|
||||
backgroundColor: colors.surface,
|
||||
color: colors.text,
|
||||
},
|
||||
selectInput: {
|
||||
borderWidth: 1,
|
||||
borderRadius: 12,
|
||||
backgroundColor: colors.surface,
|
||||
},
|
||||
dateInput: {
|
||||
justifyContent: "center",
|
||||
},
|
||||
errorText: {
|
||||
fontSize: 13,
|
||||
color: "red",
|
||||
marginTop: 4,
|
||||
},
|
||||
actionButtons: {
|
||||
flexDirection: "row",
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 16,
|
||||
gap: 12,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: colors.border,
|
||||
},
|
||||
resetButton: {
|
||||
flex: 1,
|
||||
paddingVertical: 14,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
resetButtonText: {
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
},
|
||||
submitButton: {
|
||||
flex: 1,
|
||||
paddingVertical: 14,
|
||||
borderRadius: 12,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
submitButtonText: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
},
|
||||
// Date Picker Modal Styles
|
||||
datePickerModal: {
|
||||
flex: 1,
|
||||
justifyContent: "flex-end",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
datePickerContent: {
|
||||
backgroundColor: colors.background,
|
||||
borderTopLeftRadius: 24,
|
||||
borderTopRightRadius: 24,
|
||||
paddingBottom: 20,
|
||||
},
|
||||
datePickerHeader: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 16,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: colors.border,
|
||||
},
|
||||
datePickerTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
color: colors.text,
|
||||
},
|
||||
datePickerClose: {
|
||||
fontSize: 20,
|
||||
color: colors.text,
|
||||
},
|
||||
datePickerIOS: {
|
||||
height: 200,
|
||||
marginTop: 20,
|
||||
},
|
||||
datePickerButton: {
|
||||
marginHorizontal: 20,
|
||||
paddingVertical: 14,
|
||||
borderRadius: 12,
|
||||
alignItems: "center",
|
||||
marginTop: 20,
|
||||
},
|
||||
datePickerButtonText: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
},
|
||||
});
|
||||
|
||||
export default CreateOrUpdateShip;
|
||||
523
components/manager/ship_components/ShipCard.tsx
Normal file
523
components/manager/ship_components/ShipCard.tsx
Normal file
@@ -0,0 +1,523 @@
|
||||
import { queryShipsImage } from "@/controller/DeviceController";
|
||||
import { useThemeContext } from "@/hooks/use-theme-context";
|
||||
import { useGroup } from "@/state/use-group";
|
||||
import { usePort } from "@/state/use-ports";
|
||||
import { useShipTypes } from "@/state/use-ship-types";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { fromByteArray } from "base64-js";
|
||||
import { Image } from "expo-image";
|
||||
import { useEffect, useState } from "react";
|
||||
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
|
||||
interface ShipCardProps {
|
||||
ship: Model.Ship;
|
||||
onPress?: () => void;
|
||||
}
|
||||
|
||||
export default function ShipCard({ ship, onPress }: ShipCardProps) {
|
||||
const { colors } = useThemeContext();
|
||||
const { ports, getPorts } = usePort();
|
||||
const { shipTypes, getShipTypes } = useShipTypes();
|
||||
const [shipImage, setShipImage] = useState<string | null>(null);
|
||||
const { groups, getUserGroups, getChildrenOfGroups, childrenOfGroups } =
|
||||
useGroup();
|
||||
useEffect(() => {
|
||||
if (ports === null) {
|
||||
getPorts();
|
||||
}
|
||||
}, [ports, getPorts]);
|
||||
useEffect(() => {
|
||||
if (!shipTypes || shipTypes.length === 0) {
|
||||
getShipTypes();
|
||||
}
|
||||
}, [shipTypes, getShipTypes]);
|
||||
useEffect(() => {
|
||||
if (groups === null) {
|
||||
getUserGroups();
|
||||
}
|
||||
}, [groups, getUserGroups]);
|
||||
useEffect(() => {
|
||||
if (groups && ship.ship_group_id) {
|
||||
const groupId = groups?.groups?.[0]?.id || "";
|
||||
// childrenOfGroups is initialised as null in the store; check for null to fetch once
|
||||
if (groupId && childrenOfGroups == null) {
|
||||
getChildrenOfGroups(groupId);
|
||||
}
|
||||
}
|
||||
}, [groups, childrenOfGroups, getChildrenOfGroups]);
|
||||
// Themed styles
|
||||
useEffect(() => {
|
||||
let mounted = true;
|
||||
const loadShipImage = async () => {
|
||||
try {
|
||||
const resp = await queryShipsImage(ship.id || "");
|
||||
const contentType = resp.headers["content-type"] || "image/jpeg";
|
||||
const uint8 = new Uint8Array(resp.data); // ArrayBuffer -> Uint8Array
|
||||
const base64 = fromByteArray(uint8); // base64-js
|
||||
const uri = `data:${contentType};base64,${base64}`;
|
||||
|
||||
if (!mounted) return;
|
||||
// assign received value to state if present; adapt to actual resp shape as needed
|
||||
setShipImage(uri);
|
||||
} catch (error) {
|
||||
// console.log("Error when get image: ", error);
|
||||
}
|
||||
};
|
||||
loadShipImage();
|
||||
return () => {
|
||||
mounted = false;
|
||||
};
|
||||
}, [ship]);
|
||||
const themedStyles = {
|
||||
card: {
|
||||
backgroundColor: colors.card,
|
||||
shadowColor: colors.text,
|
||||
},
|
||||
title: {
|
||||
color: colors.text,
|
||||
},
|
||||
subtitle: {
|
||||
color: colors.textSecondary,
|
||||
},
|
||||
label: {
|
||||
color: colors.textSecondary,
|
||||
},
|
||||
value: {
|
||||
color: colors.text,
|
||||
},
|
||||
divider: {
|
||||
backgroundColor: colors.separator,
|
||||
},
|
||||
badge: {
|
||||
backgroundColor: colors.primary + "15",
|
||||
borderColor: colors.primary,
|
||||
},
|
||||
badgeText: {
|
||||
color: colors.primary,
|
||||
},
|
||||
infoBox: {
|
||||
backgroundColor: colors.primary + "10",
|
||||
},
|
||||
infoIcon: {
|
||||
color: colors.primary,
|
||||
},
|
||||
};
|
||||
|
||||
// ============ IMAGE VARIANT ============
|
||||
if (shipImage) {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[styles.imageCard, themedStyles.card]}
|
||||
onPress={onPress}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
{/* Image Section */}
|
||||
<View style={styles.imageContainer}>
|
||||
{shipImage ? (
|
||||
<Image
|
||||
source={{ uri: shipImage }}
|
||||
style={styles.shipImage}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
) : (
|
||||
<View
|
||||
style={[
|
||||
styles.imagePlaceholder,
|
||||
{ backgroundColor: colors.backgroundSecondary },
|
||||
]}
|
||||
>
|
||||
<Ionicons name="boat" size={48} color={colors.textSecondary} />
|
||||
</View>
|
||||
)}
|
||||
{/* Ship Type Badge */}
|
||||
{shipTypes && (
|
||||
<View style={styles.typeBadge}>
|
||||
<Ionicons name="boat-outline" size={14} color="#fff" />
|
||||
<Text style={styles.typeBadgeText}>
|
||||
{shipTypes.find((type) => type.id === ship.ship_type)?.name ||
|
||||
"Unknown"}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Info Section */}
|
||||
<View style={styles.imageCardContent}>
|
||||
{/* Title & Registration */}
|
||||
<Text style={[styles.imageCardTitle, themedStyles.title]}>
|
||||
{ship.name || "Unknown Ship"}
|
||||
</Text>
|
||||
<View style={styles.regRow}>
|
||||
<View style={[styles.regBadge, themedStyles.badge]}>
|
||||
<Text style={[styles.regBadgeText, themedStyles.badgeText]}>
|
||||
{ship.reg_number || "-"}
|
||||
</Text>
|
||||
</View>
|
||||
{childrenOfGroups && (
|
||||
<View style={styles.locationRow}>
|
||||
<Ionicons
|
||||
name="location"
|
||||
size={14}
|
||||
color={colors.textSecondary}
|
||||
/>
|
||||
<Text style={[styles.locationText, themedStyles.subtitle]}>
|
||||
{childrenOfGroups.groups?.find(
|
||||
(group) => group?.metadata?.code === ship.province_code
|
||||
)?.name || "-"}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Info Grid */}
|
||||
<View style={styles.imageInfoGrid}>
|
||||
<InfoBox
|
||||
icon="resize"
|
||||
label="Length"
|
||||
value={ship.ship_length ? `${ship.ship_length}m` : "-"}
|
||||
themedStyles={themedStyles}
|
||||
/>
|
||||
<InfoBox
|
||||
icon="flash"
|
||||
label="Engine Power"
|
||||
value={ship.ship_power ? `${ship.ship_power} HP` : "-"}
|
||||
themedStyles={themedStyles}
|
||||
/>
|
||||
<InfoBox
|
||||
icon="document-text"
|
||||
label="License"
|
||||
value={ship.fishing_license_number || "-"}
|
||||
themedStyles={themedStyles}
|
||||
/>
|
||||
<InfoBox
|
||||
icon="navigate"
|
||||
label="Home Port"
|
||||
value={
|
||||
ports?.ports
|
||||
? ports.ports.find((port) => port.id === ship.home_port)
|
||||
?.name || "-"
|
||||
: "-"
|
||||
}
|
||||
themedStyles={themedStyles}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
|
||||
// ============ COMPACT VARIANT ============
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[styles.compactCard, themedStyles.card]}
|
||||
onPress={onPress}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
{/* Header */}
|
||||
<View style={styles.compactHeader}>
|
||||
<View style={[styles.shipIcon, themedStyles.infoBox]}>
|
||||
<Ionicons name="boat" size={24} color={colors.primary} />
|
||||
</View>
|
||||
<View style={styles.compactHeaderText}>
|
||||
<Text style={[styles.compactTitle, themedStyles.title]}>
|
||||
{ship.name || "Unknown Ship"}
|
||||
</Text>
|
||||
<Text style={[styles.compactSubtitle, themedStyles.subtitle]}>
|
||||
{shipTypes.find((type) => type.id === ship.ship_type)?.name ||
|
||||
"Unknown"}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={[styles.regBadge, themedStyles.badge]}>
|
||||
<Text style={[styles.regBadgeText, themedStyles.badgeText]}>
|
||||
{ship.reg_number || "-"}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Info Grid */}
|
||||
<View style={styles.compactInfoGrid}>
|
||||
<CompactInfoBox
|
||||
icon="resize"
|
||||
label="Length"
|
||||
value={ship.ship_length ? `${ship.ship_length}m` : "-"}
|
||||
themedStyles={themedStyles}
|
||||
/>
|
||||
<CompactInfoBox
|
||||
icon="flash"
|
||||
label="Power"
|
||||
value={ship.ship_power ? `${ship.ship_power} HP` : "-"}
|
||||
themedStyles={themedStyles}
|
||||
/>
|
||||
<CompactInfoBox
|
||||
icon="navigate"
|
||||
label="Port"
|
||||
value={
|
||||
ports?.ports
|
||||
? ports.ports.find((port) => port.id === ship.home_port)?.name ||
|
||||
"-"
|
||||
: "-"
|
||||
}
|
||||
themedStyles={themedStyles}
|
||||
/>
|
||||
<CompactInfoBox
|
||||
icon="document-text"
|
||||
label="License"
|
||||
value={ship.fishing_license_number || "-"}
|
||||
themedStyles={themedStyles}
|
||||
/>
|
||||
<CompactInfoBox
|
||||
icon="location"
|
||||
label="Province"
|
||||
value={
|
||||
childrenOfGroups?.groups?.find(
|
||||
(group) => group?.metadata?.code === ship.province_code
|
||||
)?.name || "-"
|
||||
}
|
||||
themedStyles={themedStyles}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Footer - IMO & MMSI */}
|
||||
{(ship.imo_number || ship.mmsi_number) && (
|
||||
<>
|
||||
<View style={[styles.divider, themedStyles.divider]} />
|
||||
<View style={styles.footerInfo}>
|
||||
{ship.imo_number && (
|
||||
<View style={styles.footerRow}>
|
||||
<Text style={[styles.footerLabel, themedStyles.label]}>
|
||||
IMO Number:
|
||||
</Text>
|
||||
<Text style={[styles.footerValue, themedStyles.value]}>
|
||||
{ship.imo_number}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
{ship.mmsi_number && (
|
||||
<View style={styles.footerRow}>
|
||||
<Text style={[styles.footerLabel, themedStyles.label]}>
|
||||
MMSI Number:
|
||||
</Text>
|
||||
<Text style={[styles.footerValue, themedStyles.value]}>
|
||||
{ship.mmsi_number}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
|
||||
// ============ SUB-COMPONENTS ============
|
||||
|
||||
interface InfoBoxProps {
|
||||
icon: keyof typeof Ionicons.glyphMap;
|
||||
label: string;
|
||||
value: string;
|
||||
themedStyles: any;
|
||||
}
|
||||
|
||||
function InfoBox({ icon, label, value, themedStyles }: InfoBoxProps) {
|
||||
return (
|
||||
<View style={styles.infoBox}>
|
||||
<Ionicons name={icon} size={18} color={themedStyles.infoIcon.color} />
|
||||
<Text style={[styles.infoLabel, themedStyles.label]}>{label}</Text>
|
||||
<Text style={[styles.infoValue, themedStyles.value]}>{value}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function CompactInfoBox({ icon, label, value, themedStyles }: InfoBoxProps) {
|
||||
return (
|
||||
<View style={[styles.compactInfoBox, themedStyles.infoBox]}>
|
||||
<Ionicons name={icon} size={16} color={themedStyles.infoIcon.color} />
|
||||
<View style={styles.compactInfoText}>
|
||||
<Text style={[styles.compactInfoLabel, themedStyles.label]}>
|
||||
{label}
|
||||
</Text>
|
||||
<Text style={[styles.compactInfoValue, themedStyles.value]}>
|
||||
{value}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
// ============ STYLES ============
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
// === IMAGE VARIANT ===
|
||||
imageCard: {
|
||||
borderRadius: 16,
|
||||
overflow: "hidden",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 8,
|
||||
elevation: 3,
|
||||
marginVertical: 8,
|
||||
marginHorizontal: 16,
|
||||
boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
|
||||
},
|
||||
imageContainer: {
|
||||
height: 180,
|
||||
position: "relative",
|
||||
},
|
||||
shipImage: {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
},
|
||||
imagePlaceholder: {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
typeBadge: {
|
||||
position: "absolute",
|
||||
top: 12,
|
||||
left: 12,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: "rgba(59, 130, 246, 0.9)",
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 8,
|
||||
gap: 6,
|
||||
},
|
||||
typeBadgeText: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
fontWeight: "600",
|
||||
},
|
||||
imageCardContent: {
|
||||
padding: 16,
|
||||
},
|
||||
imageCardTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: "700",
|
||||
marginBottom: 8,
|
||||
},
|
||||
regRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 12,
|
||||
marginBottom: 16,
|
||||
},
|
||||
regBadge: {
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 6,
|
||||
borderWidth: 1,
|
||||
},
|
||||
regBadgeText: {
|
||||
fontSize: 12,
|
||||
fontWeight: "600",
|
||||
},
|
||||
locationRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 4,
|
||||
},
|
||||
locationText: {
|
||||
fontSize: 13,
|
||||
},
|
||||
imageInfoGrid: {
|
||||
flexDirection: "row",
|
||||
flexWrap: "wrap",
|
||||
gap: 12,
|
||||
},
|
||||
infoBox: {
|
||||
width: "47%",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
paddingVertical: 8,
|
||||
},
|
||||
infoLabel: {
|
||||
fontSize: 12,
|
||||
},
|
||||
infoValue: {
|
||||
fontSize: 14,
|
||||
fontWeight: "600",
|
||||
marginLeft: "auto",
|
||||
},
|
||||
|
||||
// === COMPACT VARIANT ===
|
||||
compactCard: {
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.08,
|
||||
shadowRadius: 8,
|
||||
elevation: 2,
|
||||
marginVertical: 8,
|
||||
marginHorizontal: 16,
|
||||
},
|
||||
compactHeader: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginBottom: 16,
|
||||
},
|
||||
shipIcon: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 12,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
compactHeaderText: {
|
||||
flex: 1,
|
||||
marginLeft: 12,
|
||||
},
|
||||
compactTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: "700",
|
||||
},
|
||||
compactSubtitle: {
|
||||
fontSize: 13,
|
||||
marginTop: 2,
|
||||
},
|
||||
compactInfoGrid: {
|
||||
flexDirection: "row",
|
||||
flexWrap: "wrap",
|
||||
gap: 10,
|
||||
},
|
||||
compactInfoBox: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 10,
|
||||
gap: 8,
|
||||
minWidth: "47%",
|
||||
flexGrow: 1,
|
||||
},
|
||||
compactInfoText: {
|
||||
flex: 1,
|
||||
},
|
||||
compactInfoLabel: {
|
||||
fontSize: 11,
|
||||
},
|
||||
compactInfoValue: {
|
||||
fontSize: 14,
|
||||
fontWeight: "600",
|
||||
},
|
||||
divider: {
|
||||
height: 1,
|
||||
marginVertical: 12,
|
||||
},
|
||||
footerInfo: {
|
||||
gap: 6,
|
||||
},
|
||||
footerRow: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
footerLabel: {
|
||||
fontSize: 13,
|
||||
},
|
||||
footerValue: {
|
||||
fontSize: 13,
|
||||
fontWeight: "500",
|
||||
},
|
||||
});
|
||||
140
components/manager/ships.tsx
Normal file
140
components/manager/ships.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { ThemedView } from "@/components/themed-view";
|
||||
import { queryUpdateShip } from "@/controller/DeviceController";
|
||||
import { useTheme } from "@/hooks/use-theme-context";
|
||||
import { showSuccessToast } from "@/services/toast_service";
|
||||
import { useShip } from "@/state/use-ship";
|
||||
import { useEffect, useState } from "react";
|
||||
import { ScrollView, StyleSheet, TouchableOpacity, View } from "react-native";
|
||||
import CreateOrUpdateShip from "./ship_components/CreateOrUpdateShip";
|
||||
import ShipCard from "./ship_components/ShipCard";
|
||||
|
||||
interface ShipUpdateData {
|
||||
ship_id: string;
|
||||
body: Model.ShipBodyRequest;
|
||||
}
|
||||
|
||||
export default function ShipsScreen() {
|
||||
const { ships, getShip } = useShip();
|
||||
const { colors } = useTheme();
|
||||
const [ship, setShip] = useState<ShipUpdateData | null>(null);
|
||||
const [showUpdateShip, setShowUpdateShip] = useState<boolean>(false);
|
||||
const [isCreateShip, setIsCreateShip] = useState<boolean>(false);
|
||||
useEffect(() => {
|
||||
if (ships === null) {
|
||||
getShip();
|
||||
}
|
||||
}, [ships]);
|
||||
const handleClickShip = async (ship: Model.Ship) => {
|
||||
const shipBodyRequest: Model.ShipBodyRequest = {
|
||||
name: ship.name,
|
||||
reg_number: ship.reg_number,
|
||||
imo_number: ship.imo_number,
|
||||
mmsi_number: ship.mmsi_number,
|
||||
thing_id: ship.thing_id,
|
||||
ship_type: ship.ship_type,
|
||||
owner_id: ship.owner_id,
|
||||
home_port: ship.home_port,
|
||||
ship_length: ship.ship_length,
|
||||
ship_power: ship.ship_power,
|
||||
ship_group_id: ship.ship_group_id,
|
||||
fishing_license_number: ship.fishing_license_number,
|
||||
fishing_license_expiry_date: ship.fishing_license_expiry_date,
|
||||
};
|
||||
setShip({ ship_id: ship.id!, body: shipBodyRequest });
|
||||
setIsCreateShip(false); // Đảm bảo là mode update khi edit
|
||||
setShowUpdateShip(true);
|
||||
};
|
||||
const handleUpdateShip = async (body: Model.ShipBodyRequest) => {
|
||||
try {
|
||||
let resp;
|
||||
if (isCreateShip) {
|
||||
// TODO: Thêm API create ship khi có
|
||||
showSuccessToast("Thêm tàu mới thành công");
|
||||
} else {
|
||||
resp = await queryUpdateShip(ship!.ship_id, body);
|
||||
if (resp.status === 200) {
|
||||
showSuccessToast("Cập nhật thông tin tàu thành công");
|
||||
}
|
||||
}
|
||||
setShowUpdateShip(false);
|
||||
await getShip();
|
||||
} catch (error) {
|
||||
console.error("Error when update/create Ship: ", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateNewShip = () => {
|
||||
setShip(null);
|
||||
setIsCreateShip(true);
|
||||
setShowUpdateShip(true);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<ScrollView>
|
||||
<ThemedView style={styles.container}>
|
||||
{ships?.map((ship) => (
|
||||
<ShipCard
|
||||
key={ship.id}
|
||||
ship={ship}
|
||||
onPress={() => handleClickShip(ship)}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Thêm khoảng trống ở cuối để không bị FAB che */}
|
||||
<View style={styles.bottomPadding} />
|
||||
</ThemedView>
|
||||
</ScrollView>
|
||||
|
||||
{/* Floating Action Button */}
|
||||
<TouchableOpacity
|
||||
style={[styles.fab, { backgroundColor: colors.primary }]}
|
||||
onPress={handleCreateNewShip}
|
||||
>
|
||||
<ThemedText style={styles.fabText}>+</ThemedText>
|
||||
</TouchableOpacity>
|
||||
|
||||
<CreateOrUpdateShip
|
||||
isOpen={showUpdateShip}
|
||||
initialValue={ship?.body || undefined}
|
||||
type={isCreateShip ? "create" : "update"}
|
||||
onClose={() => setShowUpdateShip(false)}
|
||||
onSubmit={handleUpdateShip}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
paddingBottom: 20, // Khoảng trống cho FAB
|
||||
},
|
||||
bottomPadding: {
|
||||
height: 50, // Thêm khoảng trống ở cuối
|
||||
},
|
||||
fab: {
|
||||
position: "absolute",
|
||||
bottom: 30,
|
||||
right: 20,
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 28,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
shadowColor: "#000",
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2,
|
||||
},
|
||||
shadowOpacity: 0.25,
|
||||
shadowRadius: 3.84,
|
||||
elevation: 5,
|
||||
},
|
||||
fabText: {
|
||||
fontSize: 24,
|
||||
fontWeight: "bold",
|
||||
color: "#ffffff",
|
||||
lineHeight: 24,
|
||||
},
|
||||
});
|
||||
@@ -72,7 +72,11 @@ api.interceptors.response.use(
|
||||
statusText ||
|
||||
"Unknown error";
|
||||
|
||||
showErrorToast(`Lỗi ${status}: ${errMsg}`);
|
||||
// Không hiển thị toast cho status 400 (validation errors)
|
||||
if (status !== 400) {
|
||||
showErrorToast(`Lỗi ${status}: ${errMsg}`);
|
||||
}
|
||||
|
||||
if (status === 401) {
|
||||
handle401();
|
||||
}
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
export const TOKEN = "token";
|
||||
export const DOMAIN = "domain";
|
||||
export const UID = "user-id";
|
||||
export const ROLE = "role";
|
||||
export const MAP_TRACKPOINTS_ID = "ship-trackpoints";
|
||||
export const MAP_POLYLINE_BAN = "ban-polyline";
|
||||
export const MAP_POLYGON_BAN = "ban-polygon";
|
||||
@@ -36,6 +38,7 @@ export const STATUS_SOS = 3;
|
||||
|
||||
// API Path Constants
|
||||
export const API_PATH_LOGIN = "/api/tokens";
|
||||
export const API_PATH_GET_PROFILE = "/api/users/profile";
|
||||
export const API_PATH_SEARCH_THINGS = "/api/things/search";
|
||||
export const API_PATH_ENTITIES = "/api/io/entities";
|
||||
export const API_PATH_SHIP_INFO = "/api/sgw/shipinfo";
|
||||
@@ -57,3 +60,6 @@ export const API_GET_SHIP_GROUPS = "/api/sgw/shipsgroup";
|
||||
export const API_GET_LAST_TRIP = "/api/sgw/trips/last";
|
||||
export const API_GET_ALARM = "/api/alarms";
|
||||
export const API_MANAGER_ALARM = "/api/alarms/confirm";
|
||||
export const API_GET_ALL_SHIP = "/api/sgw/ships";
|
||||
export const API_GET_ALL_PORT = "/api/sgw/ports";
|
||||
export const API_GET_PHOTO = "/api/sgw/photo";
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
import { api } from "@/config";
|
||||
import { API_PATH_LOGIN } from "@/constants";
|
||||
import { API_PATH_GET_PROFILE, API_PATH_LOGIN } from "@/constants";
|
||||
|
||||
export async function queryLogin(body: Model.LoginRequestBody) {
|
||||
return api.post<Model.LoginResponse>(API_PATH_LOGIN, body);
|
||||
}
|
||||
|
||||
export async function queryProfile() {
|
||||
return api.get<Model.ProfileResponse>(API_PATH_GET_PROFILE);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import { api } from "@/config";
|
||||
import {
|
||||
API_GET_ALL_SHIP,
|
||||
API_GET_PHOTO,
|
||||
API_GET_SHIP_GROUPS,
|
||||
API_GET_SHIP_TYPES,
|
||||
API_PATH_SEARCH_THINGS,
|
||||
@@ -16,3 +18,22 @@ export async function queryShipTypes() {
|
||||
export async function queryShipGroups() {
|
||||
return await api.get<Model.ShipGroup[]>(API_GET_SHIP_GROUPS);
|
||||
}
|
||||
|
||||
export async function queryAllShips(params: Model.SearchThingBody) {
|
||||
return await api.get<Model.ShipResponse>(API_GET_ALL_SHIP, {
|
||||
params: params,
|
||||
});
|
||||
}
|
||||
|
||||
export async function queryShipsImage(ship_id: string) {
|
||||
return await api.get(`${API_GET_PHOTO}/ship/${ship_id}/main`, {
|
||||
responseType: "arraybuffer",
|
||||
});
|
||||
}
|
||||
|
||||
export async function queryUpdateShip(
|
||||
shipId: string,
|
||||
body: Model.ShipBodyRequest
|
||||
) {
|
||||
return await api.put(`${API_GET_ALL_SHIP}/${shipId}`, body);
|
||||
}
|
||||
|
||||
25
controller/GroupController.ts
Normal file
25
controller/GroupController.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { api } from "@/config";
|
||||
import { UID } from "@/constants";
|
||||
import { getStorageItem } from "@/utils/storage";
|
||||
|
||||
export async function queryUserGroup() {
|
||||
const user_id = await getStorageItem(UID);
|
||||
return api.get<Model.GroupResponse>(`/api/members/${user_id}/groups`);
|
||||
}
|
||||
|
||||
export async function queryChilrentOfGroups(
|
||||
group_id: string,
|
||||
level: number = 5,
|
||||
isTree: boolean = false
|
||||
) {
|
||||
// ensure proper query param values when not provided by caller
|
||||
const lvl = typeof level === "number" ? level : 5;
|
||||
const tree = !!isTree;
|
||||
const params = {
|
||||
level: lvl,
|
||||
tree: tree,
|
||||
};
|
||||
return api.get<Model.GroupResponse>(`/api/groups/${group_id}/children`, {
|
||||
params,
|
||||
});
|
||||
}
|
||||
6
controller/PortController.ts
Normal file
6
controller/PortController.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { api } from "@/config";
|
||||
import { API_GET_ALL_PORT } from "@/constants";
|
||||
|
||||
export async function queryPorts(body?: Model.SearchThingBody) {
|
||||
return api.post<Model.PortResponse>(API_GET_ALL_PORT, body);
|
||||
}
|
||||
@@ -1,5 +1,17 @@
|
||||
import * as AlarmController from "./AlarmController";
|
||||
import * as AuthController from "./AuthController";
|
||||
import * as DeviceController from "./DeviceController";
|
||||
import * as FishController from "./FishController";
|
||||
import * as MapController from "./MapController";
|
||||
import * as PortController from "./PortController";
|
||||
import * as TripController from "./TripController";
|
||||
export { AuthController, DeviceController, MapController, TripController };
|
||||
|
||||
export {
|
||||
AlarmController,
|
||||
AuthController,
|
||||
DeviceController,
|
||||
FishController,
|
||||
MapController,
|
||||
PortController,
|
||||
TripController,
|
||||
};
|
||||
|
||||
122
controller/typings.d.ts
vendored
122
controller/typings.d.ts
vendored
@@ -9,6 +9,20 @@ declare namespace Model {
|
||||
token?: string;
|
||||
}
|
||||
|
||||
interface ProfileResponse {
|
||||
id?: string;
|
||||
email?: string;
|
||||
metadata?: ProfileMetadata;
|
||||
}
|
||||
|
||||
interface ProfileMetadata {
|
||||
frontend_thing_id?: string;
|
||||
frontend_thing_key?: string;
|
||||
full_name?: string;
|
||||
phone_number?: string;
|
||||
user_type?: string;
|
||||
}
|
||||
|
||||
interface GPSResponse {
|
||||
lat: number;
|
||||
lon: number;
|
||||
@@ -336,4 +350,112 @@ declare namespace Model {
|
||||
thing_id: string;
|
||||
time: number;
|
||||
}
|
||||
|
||||
interface ShipBodyRequest {
|
||||
name?: string;
|
||||
reg_number?: string;
|
||||
imo_number?: string;
|
||||
mmsi_number?: string;
|
||||
thing_id?: string;
|
||||
ship_type?: number;
|
||||
owner_id?: string;
|
||||
home_port?: number;
|
||||
ship_length?: number;
|
||||
ship_power?: number;
|
||||
ship_group_id?: string;
|
||||
fishing_license_number?: string;
|
||||
fishing_license_expiry_date?: Date;
|
||||
}
|
||||
interface ShipResponse {
|
||||
ships?: Ship[];
|
||||
}
|
||||
|
||||
interface Ship {
|
||||
id?: string;
|
||||
thing_id?: string;
|
||||
owner_id?: string;
|
||||
name?: string;
|
||||
ship_type?: number;
|
||||
home_port?: number;
|
||||
ship_length?: number;
|
||||
ship_power?: number;
|
||||
reg_number?: string;
|
||||
imo_number?: string;
|
||||
mmsi_number?: string;
|
||||
fishing_license_number?: string;
|
||||
fishing_license_expiry_date?: Date;
|
||||
province_code?: string;
|
||||
ship_group_id?: string;
|
||||
created_at?: Date;
|
||||
updated_at?: Date;
|
||||
}
|
||||
|
||||
interface PortResponse {
|
||||
total?: number;
|
||||
offset?: number;
|
||||
limit?: number;
|
||||
ports?: Port[];
|
||||
}
|
||||
|
||||
interface Port {
|
||||
id?: number;
|
||||
name?: string;
|
||||
type?: Type;
|
||||
classification?: Classification;
|
||||
position_point?: string;
|
||||
has_origin_confirm?: boolean;
|
||||
province_code?: string;
|
||||
updated_at?: Date;
|
||||
is_deleted?: boolean;
|
||||
}
|
||||
|
||||
enum Classification {
|
||||
ChưaXácĐịnh = "Chưa xác định",
|
||||
I = "I",
|
||||
Ii = "II",
|
||||
}
|
||||
|
||||
enum Type {
|
||||
Fishing = "fishing",
|
||||
}
|
||||
|
||||
// Groups
|
||||
interface GroupResponse {
|
||||
total?: number;
|
||||
level?: number;
|
||||
name?: string;
|
||||
groups?: Group[];
|
||||
}
|
||||
|
||||
interface Group {
|
||||
id?: string;
|
||||
name?: string;
|
||||
owner_id?: string;
|
||||
description?: string;
|
||||
metadata?: GroupMetadata;
|
||||
level?: number;
|
||||
path?: string;
|
||||
children?: Child[];
|
||||
created_at?: Date;
|
||||
updated_at?: Date;
|
||||
}
|
||||
|
||||
interface Child {
|
||||
id?: string;
|
||||
name?: string;
|
||||
owner_id?: string;
|
||||
parent_id?: string;
|
||||
description?: string;
|
||||
metadata?: GroupMetadata;
|
||||
level?: number;
|
||||
path?: string;
|
||||
children?: Child[];
|
||||
created_at?: Date;
|
||||
updated_at?: Date;
|
||||
}
|
||||
|
||||
interface GroupMetadata {
|
||||
code?: string;
|
||||
short_name?: string;
|
||||
}
|
||||
}
|
||||
|
||||
9
package-lock.json
generated
9
package-lock.json
generated
@@ -20,6 +20,7 @@
|
||||
"@react-navigation/native": "^7.1.8",
|
||||
"axios": "^1.13.1",
|
||||
"babel-plugin-module-resolver": "^5.0.2",
|
||||
"base64-js": "^1.5.1",
|
||||
"dayjs": "^1.11.19",
|
||||
"eventemitter3": "^5.0.1",
|
||||
"expo": "~54.0.20",
|
||||
@@ -27,7 +28,7 @@
|
||||
"expo-constants": "~18.0.10",
|
||||
"expo-font": "~14.0.9",
|
||||
"expo-haptics": "~15.0.7",
|
||||
"expo-image": "~3.0.10",
|
||||
"expo-image": "~3.0.11",
|
||||
"expo-linking": "~8.0.8",
|
||||
"expo-localization": "~17.0.7",
|
||||
"expo-router": "~6.0.13",
|
||||
@@ -8546,9 +8547,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/expo-image": {
|
||||
"version": "3.0.10",
|
||||
"resolved": "https://registry.npmjs.org/expo-image/-/expo-image-3.0.10.tgz",
|
||||
"integrity": "sha512-i4qNCEf9Ur7vDqdfDdFfWnNCAF2efDTdahuDy9iELPS2nzMKBLeeGA2KxYEPuRylGCS96Rwm+SOZJu6INc2ADQ==",
|
||||
"version": "3.0.11",
|
||||
"resolved": "https://registry.npmjs.org/expo-image/-/expo-image-3.0.11.tgz",
|
||||
"integrity": "sha512-4TudfUCLgYgENv+f48omnU8tjS2S0Pd9EaON5/s1ZUBRwZ7K8acEr4NfvLPSaeXvxW24iLAiyQ7sV7BXQH3RoA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"expo": "*",
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
"@react-navigation/native": "^7.1.8",
|
||||
"axios": "^1.13.1",
|
||||
"babel-plugin-module-resolver": "^5.0.2",
|
||||
"base64-js": "^1.5.1",
|
||||
"dayjs": "^1.11.19",
|
||||
"eventemitter3": "^5.0.1",
|
||||
"expo": "~54.0.20",
|
||||
@@ -30,7 +31,7 @@
|
||||
"expo-constants": "~18.0.10",
|
||||
"expo-font": "~14.0.9",
|
||||
"expo-haptics": "~15.0.7",
|
||||
"expo-image": "~3.0.10",
|
||||
"expo-image": "~3.0.11",
|
||||
"expo-linking": "~8.0.8",
|
||||
"expo-localization": "~17.0.7",
|
||||
"expo-router": "~6.0.13",
|
||||
|
||||
41
state/use-group.ts
Normal file
41
state/use-group.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import {
|
||||
queryChilrentOfGroups,
|
||||
queryUserGroup,
|
||||
} from "@/controller/GroupController";
|
||||
import { create } from "zustand";
|
||||
|
||||
type Groups = {
|
||||
groups: Model.GroupResponse | null;
|
||||
childrenOfGroups?: Model.GroupResponse | null;
|
||||
getChildrenOfGroups: (group_id: string) => Promise<void>;
|
||||
getUserGroups: () => Promise<void>;
|
||||
error: string | null;
|
||||
loading?: boolean;
|
||||
};
|
||||
|
||||
export const useGroup = create<Groups>((set) => ({
|
||||
groups: null,
|
||||
childrenOfGroups: null,
|
||||
getUserGroups: async () => {
|
||||
try {
|
||||
const response = await queryUserGroup();
|
||||
set({ groups: response.data, loading: false });
|
||||
} catch (error) {
|
||||
console.error("Error when fetch Port: ", error);
|
||||
set({ error: "Failed to fetch Port data", loading: false });
|
||||
set({ groups: null });
|
||||
}
|
||||
},
|
||||
getChildrenOfGroups: async (group_id: string) => {
|
||||
try {
|
||||
set({ loading: true });
|
||||
const response = await queryChilrentOfGroups(group_id);
|
||||
set({ childrenOfGroups: response.data, loading: false });
|
||||
} catch (error) {
|
||||
console.error("Error when fetching children of groups: ", error);
|
||||
set({ error: "Failed to fetch children of groups", loading: false });
|
||||
set({ childrenOfGroups: null });
|
||||
}
|
||||
},
|
||||
error: null,
|
||||
}));
|
||||
32
state/use-ports.ts
Normal file
32
state/use-ports.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { queryPorts } from "@/controller/PortController";
|
||||
import { create } from "zustand";
|
||||
|
||||
type Ports = {
|
||||
ports: Model.PortResponse | null;
|
||||
getPorts: () => Promise<void>;
|
||||
error: string | null;
|
||||
loading?: boolean;
|
||||
};
|
||||
|
||||
export const usePort = create<Ports>((set) => ({
|
||||
ports: null,
|
||||
getPorts: async (body?: Model.SearchThingBody) => {
|
||||
try {
|
||||
if (body === undefined) {
|
||||
body = {
|
||||
offset: 0,
|
||||
limit: 50,
|
||||
dir: "asc",
|
||||
order: "id",
|
||||
};
|
||||
}
|
||||
const response = await queryPorts(body);
|
||||
set({ ports: response.data, loading: false });
|
||||
} catch (error) {
|
||||
console.error("Error when fetch Port: ", error);
|
||||
set({ error: "Failed to fetch Port data", loading: false });
|
||||
set({ ports: null });
|
||||
}
|
||||
},
|
||||
error: null,
|
||||
}));
|
||||
24
state/use-ship-groups.ts
Normal file
24
state/use-ship-groups.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import { queryShipGroups } from "@/controller/DeviceController";
|
||||
import { create } from "zustand";
|
||||
|
||||
type ShipGroups = {
|
||||
shipGroups: Model.ShipGroup[] | null;
|
||||
getShipGroups: () => Promise<void>;
|
||||
error: string | null;
|
||||
loading?: boolean;
|
||||
};
|
||||
|
||||
export const useShipGroups = create<ShipGroups>((set) => ({
|
||||
shipGroups: null,
|
||||
getShipGroups: async () => {
|
||||
try {
|
||||
const response = await queryShipGroups();
|
||||
set({ shipGroups: response.data, loading: false });
|
||||
} catch (error) {
|
||||
console.error("Error when fetch Port: ", error);
|
||||
set({ error: "Failed to fetch Port data", loading: false });
|
||||
set({ shipGroups: null });
|
||||
}
|
||||
},
|
||||
error: null,
|
||||
}));
|
||||
24
state/use-ship.tsx
Normal file
24
state/use-ship.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import { queryAllShips } from "@/controller/DeviceController";
|
||||
import { create } from "zustand";
|
||||
|
||||
type Ship = {
|
||||
ships: Model.Ship[] | null;
|
||||
getShip: () => Promise<void>;
|
||||
error: string | null;
|
||||
loading?: boolean;
|
||||
};
|
||||
|
||||
export const useShip = create<Ship>((set) => ({
|
||||
ships: null,
|
||||
getShip: async () => {
|
||||
try {
|
||||
const response = await queryAllShips({});
|
||||
set({ ships: response.data?.ships, loading: false });
|
||||
} catch (error) {
|
||||
console.error("Error when fetch Ship: ", error);
|
||||
set({ error: "Failed to fetch Ship data", loading: false });
|
||||
set({ ships: null });
|
||||
}
|
||||
},
|
||||
error: null,
|
||||
}));
|
||||
@@ -1,3 +1,4 @@
|
||||
import { ROLE, UID } from "@/constants";
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
|
||||
export async function setStorageItem(
|
||||
@@ -28,3 +29,20 @@ export async function removeStorageItem(key: string): Promise<void> {
|
||||
console.error("Error removing storage item:", error);
|
||||
}
|
||||
}
|
||||
|
||||
export async function clearUserStorage() {
|
||||
try {
|
||||
await AsyncStorage.removeItem(UID);
|
||||
await AsyncStorage.removeItem(ROLE);
|
||||
} catch (error) {
|
||||
console.error("Error with clear user Storage: ", error);
|
||||
}
|
||||
}
|
||||
export async function addUserStorage(userId: string, role: string) {
|
||||
try {
|
||||
setStorageItem(UID, userId);
|
||||
setStorageItem(ROLE, role);
|
||||
} catch (error) {
|
||||
console.error("Error with set user Storage: ", error);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user