tuanta/sgw-owner-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cập nhật theme cho cảnh báo, giám sát

Browse Source
This commit is contained in:
MinhNN
2025-12-29 17:05:05 +07:00
parent 871360af49
commit bf261e70e4
6 changed files with 234 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/(tabs)/index.tsx
View File

@@ -10,6 +10,7 @@ import ShipSearchForm, {
import { ThemedText } from "@/components/themed-text";
import { EVENT_SEARCH_THINGS, IOS_PLATFORM, LIGHT_THEME } from "@/constants";
import { queryBanzoneById } from "@/controller/MapController";
import { useAppTheme } from "@/hooks/use-app-theme";
import { usePlatform } from "@/hooks/use-platform";
import { useThemeContext } from "@/hooks/use-theme-context";
import { searchThingEventBus } from "@/services/device_events";
@@ -69,6 +70,7 @@ export default function HomeScreen() {
const [things, setThings] = useState<Model.ThingsResponse | null>(null);
const platform = usePlatform();
const theme = useThemeContext().colorScheme;
const { colors } = useAppTheme();
const scale = useRef(new Animated.Value(0)).current;
const opacity = useRef(new Animated.Value(1)).current;
const [shipSearchFormData, setShipSearchFormData] = useState<
@@ -85,7 +87,7 @@ export default function HomeScreen() {
// Alarm list animation
const screenHeight = Dimensions.get("window").height;
const alarmListHeight = Math.round(screenHeight * 0.3);
const alarmListHeight = Math.round(screenHeight * 0.4);
const alarmTranslateY = useRef(new Animated.Value(alarmListHeight)).current;
const alarmOpacity = useRef(new Animated.Value(0)).current;
const uiAnim = useRef(new Animated.Value(1)).current; // 1 visible, 0 hidden
@@ -693,6 +695,7 @@ export default function HomeScreen() {
fontSize: 20,
textAlign: "center",
fontWeight: "600",
color: colors.text,
}}
>
Danh sách tàu thuyền
@@ -735,7 +738,7 @@ export default function HomeScreen() {
style={{
width: "50%",
height: 1,
backgroundColor: "#E5E7EB",
backgroundColor: colors.separator,
marginVertical: 8,
borderRadius: 1,
}}
@@ -766,22 +769,36 @@ export default function HomeScreen() {
zIndex: 10,
}}
>
<View className="bg-white rounded-t-3xl shadow-md overflow-hidden h-full z-50">
<View
style={{
backgroundColor: colors.surface,
borderTopLeftRadius: 24,
borderTopRightRadius: 24,
overflow: "hidden",
height: "100%",
}}
>
<View className="flex-row items-center justify-between px-4 py-2">
<Text className="text-lg font-semibold">
<Text
style={{
fontSize: 18,
fontWeight: "600",
color: colors.text,
}}
>
Danh sách cảnh báo
</Text>
<TouchableOpacity
onPress={() => closeAlarmList()}
style={{ padding: 6 }}
>
<Ionicons name="close" size={20} color="#374151" />
<Ionicons name="close" size={20} color={colors.icon} />
</TouchableOpacity>
</View>
<View
style={{
flex: 1,
backgroundColor: "#F9FAFB",
backgroundColor: colors.backgroundSecondary,
zIndex: 50,
}}
>

7
app/(tabs)/warning.tsx
View File

@@ -84,7 +84,12 @@ const WarningScreen = () => {
});
const slice = resp.data?.alarms ?? [];
setAlarms((prev) => (append ? [...prev, ...slice] : slice));
// Sort alarms by level descending (higher level first: SOS > Danger > Warning > Info)
const sortedSlice = [...slice].sort(
(a, b) => (b.level ?? 0) - (a.level ?? 0)
);
setAlarms((prev) => (append ? [...prev, ...sortedSlice] : sortedSlice));
setOffset(nextOffset);
setHasMore(nextOffset + PAGE_SIZE < resp.data?.total!);
} catch (error) {

11
components/DraggablePanel.tsx
View File

@@ -1,3 +1,4 @@
import { useAppTheme } from "@/hooks/use-app-theme";
import { Ionicons } from "@expo/vector-icons";
import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
import React, { useEffect, useState } from "react";
@@ -36,6 +37,7 @@ export default function DraggablePanel({
}: DraggablePanelProps) {
const { height: screenHeight } = useWindowDimensions();
const bottomOffset = useBottomTabBarHeight();
const { colors } = useAppTheme();
const minHeight = screenHeight * minHeightPct;
const maxHeight = screenHeight * maxHeightPct;
@@ -141,7 +143,12 @@ export default function DraggablePanel({
return (
<Animated.View style={[styles.panelContainer, animatedStyle]}>
<View style={[styles.panel, { height: maxHeight }]}>
<View
style={[
styles.panel,
{ height: maxHeight, backgroundColor: colors.surface },
]}
>
{/* Header với drag handle và nút toggle */}
<GestureDetector gesture={panGesture}>
<Pressable onPress={togglePanel} style={styles.header}>
@@ -151,7 +158,7 @@ export default function DraggablePanel({
style={styles.toggleButton}
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
>
<Ionicons name={iconName} size={24} color="#666" />
<Ionicons name={iconName} size={24} color={colors.icon} />
</TouchableOpacity>
</Pressable>
</GestureDetector>

69
components/alarm/AlarmCard.tsx
View File

@@ -34,37 +34,51 @@ export const AlarmCard: React.FC<AlarmCardProps> = ({ alarm, onReload }) => {
);
// Determine level and colors based on alarm level
// 0: Thông tin (Xanh lá), 1: Cảnh báo (Vàng), 2: Nguy hiểm (Đỏ), 3: Khẩn cấp SOS (Tím)
const getAlarmConfig = (level?: number) => {
if (level === 3) {
// Danger - Red
switch (level) {
case 3:
// SOS - Khẩn cấp (Purple)
return {
level: 3,
icon: "warning" as const,
bgColor: "#fee2e2",
borderColor: "#DC0E0E",
iconColor: "#dc2626",
icon: "alert" as const,
bgColor: colors.card,
borderColor: "#9333EA", // Purple
iconColor: "#9333EA",
statusBg: "#dcfce7",
statusText: "#166534",
};
} else if (level === 2) {
// Caution - Yellow/Orange
case 2:
// Nguy hiểm - Đỏ
return {
level: 2,
icon: "warning" as const,
bgColor: colors.card,
borderColor: colors.error,
iconColor: colors.error,
statusBg: "#dcfce7",
statusText: "#166534",
};
case 1:
// Cảnh báo - Vàng
return {
level: 1,
icon: "alert-circle" as const,
bgColor: "#fef3c7",
borderColor: "#FF6C0C",
iconColor: "#d97706",
bgColor: colors.card,
borderColor: colors.warning,
iconColor: colors.warning,
statusBg: "#fef08a",
statusText: "#713f12",
};
} else {
// Info - Green
case 0:
default:
// Thông tin - Xanh lá
return {
level: 1,
level: 0,
icon: "information-circle" as const,
bgColor: "#fffefe",
borderColor: "#FF937E",
iconColor: "#FF937E",
bgColor: colors.card,
borderColor: colors.success,
iconColor: colors.success,
statusBg: "#dcfce7",
statusText: "#166534",
};
@@ -217,14 +231,16 @@ export const AlarmCard: React.FC<AlarmCardProps> = ({ alarm, onReload }) => {
style={[
styles.statusBadge,
{
backgroundColor: alarm.confirmed ? "#8FD14F" : "#EEEEEE",
backgroundColor: alarm.confirmed
? "#8FD14F"
: colors.surfaceSecondary,
},
]}
>
<Text
style={[
styles.statusText,
{ color: alarm.confirmed ? "#166534" : "black" },
{ color: alarm.confirmed ? "#166534" : colors.text },
]}
>
{alarm.confirmed ? "Đã xác nhận" : "Chờ xác nhận"}
@@ -262,7 +278,10 @@ export const AlarmCard: React.FC<AlarmCardProps> = ({ alarm, onReload }) => {
Nhập ghi chú xác nhận
</Text>
<TextInput
style={[styles.input, { color: colors.text }]}
style={[
styles.input,
{ color: colors.text, borderColor: colors.border },
]}
placeholder="Nhập ghi chú"
placeholderTextColor={colors.textSecondary}
multiline
@@ -272,14 +291,20 @@ export const AlarmCard: React.FC<AlarmCardProps> = ({ alarm, onReload }) => {
/>
<View style={styles.modalActions}>
<TouchableOpacity
style={[styles.modalButton, styles.cancelButton]}
style={[
styles.modalButton,
styles.cancelButton,
{ backgroundColor: colors.surfaceSecondary },
]}
onPress={() => {
setShowModal(false);
setNote("");
}}
disabled={submitting}
>
<Text style={styles.cancelText}>Hủy</Text>
<Text style={[styles.cancelText, { color: colors.text }]}>
Hủy
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[

117
components/map/AlarmList.tsx
View File

@@ -1,5 +1,6 @@
import { AlarmData } from "@/app/(tabs)";
import { ThemedText } from "@/components/themed-text";
import { useAppTheme } from "@/hooks/use-app-theme";
import { formatTimestamp } from "@/services/time_service";
import { Ionicons } from "@expo/vector-icons";
import { useCallback } from "react";
@@ -14,61 +15,66 @@ interface AlarmCardProps {
}
// ============ Config ============
const ALARM_CONFIG: Record<
AlarmType,
{
icon: keyof typeof Ionicons.glyphMap;
label: string;
bgColor: string;
borderColor: string;
iconBgColor: string;
iconColor: string;
labelColor: string;
}
> = {
const getAlarmConfig = (isDark: boolean) => ({
entered: {
icon: "warning",
icon: "warning" as keyof typeof Ionicons.glyphMap,
label: "Xâm nhập",
bgColor: "bg-red-50",
borderColor: "border-red-200",
iconBgColor: "bg-red-100",
iconColor: "#DC2626",
labelColor: "text-red-600",
bgColor: isDark ? "rgba(220, 38, 38, 0.15)" : "#FEF2F2",
borderColor: isDark ? "rgba(220, 38, 38, 0.3)" : "#FECACA",
iconBgColor: isDark ? "rgba(220, 38, 38, 0.25)" : "#FEE2E2",
iconColor: isDark ? "#F87171" : "#DC2626",
labelColor: isDark ? "#F87171" : "#DC2626",
},
approaching: {
icon: "alert-circle",
icon: "alert-circle" as keyof typeof Ionicons.glyphMap,
label: "Tiếp cận",
bgColor: "bg-amber-50",
borderColor: "border-amber-200",
iconBgColor: "bg-amber-100",
iconColor: "#D97706",
labelColor: "text-amber-600",
bgColor: isDark ? "rgba(217, 119, 6, 0.15)" : "#FFFBEB",
borderColor: isDark ? "rgba(217, 119, 6, 0.3)" : "#FDE68A",
iconBgColor: isDark ? "rgba(217, 119, 6, 0.25)" : "#FEF3C7",
iconColor: isDark ? "#FBBF24" : "#D97706",
labelColor: isDark ? "#FBBF24" : "#D97706",
},
fishing: {
icon: "fish",
icon: "fish" as keyof typeof Ionicons.glyphMap,
label: "Đánh bắt",
bgColor: "bg-orange-50",
borderColor: "border-orange-200",
iconBgColor: "bg-orange-100",
iconColor: "#EA580C",
labelColor: "text-orange-600",
bgColor: isDark ? "rgba(234, 88, 12, 0.15)" : "#FFF7ED",
borderColor: isDark ? "rgba(234, 88, 12, 0.3)" : "#FED7AA",
iconBgColor: isDark ? "rgba(234, 88, 12, 0.25)" : "#FFEDD5",
iconColor: isDark ? "#FB923C" : "#EA580C",
labelColor: isDark ? "#FB923C" : "#EA580C",
},
};
});
// ============ AlarmCard Component ============
const AlarmCard = ({ alarm, onPress }: AlarmCardProps) => {
const config = ALARM_CONFIG[alarm.type];
const { colors, utils } = useAppTheme();
const isDark = utils.isDark;
const alarmConfig = getAlarmConfig(isDark);
const config = alarmConfig[alarm.type];
return (
<TouchableOpacity
onPress={onPress}
activeOpacity={0.7}
className={`rounded-2xl p-4 ${config.bgColor} ${config.borderColor} border shadow-sm`}
style={{
borderRadius: 16,
padding: 16,
backgroundColor: config.bgColor,
borderWidth: 1,
borderColor: config.borderColor,
}}
>
<View className="flex-row items-start gap-3">
{/* Icon Container */}
<View
className={`w-12 h-12 rounded-xl items-center justify-center ${config.iconBgColor}`}
style={{
width: 48,
height: 48,
borderRadius: 12,
alignItems: "center",
justifyContent: "center",
backgroundColor: config.iconBgColor,
}}
>
<Ionicons name={config.icon} size={24} color={config.iconColor} />
</View>
@@ -77,12 +83,31 @@ const AlarmCard = ({ alarm, onPress }: AlarmCardProps) => {
<View className="flex-1">
{/* Header: Ship name + Badge */}
<View className="flex-row items-center justify-between mb-1">
<ThemedText className="text-base font-bold text-gray-800 flex-1 mr-2">
<ThemedText
style={{
fontSize: 16,
fontWeight: "700",
color: colors.text,
flex: 1,
marginRight: 8,
}}
>
{alarm.ship_name || alarm.thing_id}
</ThemedText>
<View className={`px-2 py-1 rounded-full ${config.iconBgColor}`}>
<View
style={{
paddingHorizontal: 8,
paddingVertical: 4,
borderRadius: 9999,
backgroundColor: config.iconBgColor,
}}
>
<ThemedText
className={`text-xs font-semibold ${config.labelColor}`}
style={{
fontSize: 12,
fontWeight: "600",
color: config.labelColor,
}}
>
{config.label}
</ThemedText>
@@ -90,15 +115,27 @@ const AlarmCard = ({ alarm, onPress }: AlarmCardProps) => {
</View>
{/* Zone Info */}
<ThemedText className="text-xs text-gray-600 mb-2" numberOfLines={2}>
<ThemedText
style={{
fontSize: 12,
color: colors.textSecondary,
marginBottom: 8,
}}
numberOfLines={2}
>
{alarm.zone.message || alarm.zone.zone_name}
</ThemedText>
{/* Footer: Zone ID + Time */}
<View className="flex-row items-center justify-between">
<View className="flex-row items-center gap-1">
<Ionicons name="time-outline" size={20} color="#6B7280" />
<ThemedText className="text-xs text-gray-500">
<Ionicons name="time-outline" size={20} color={colors.icon} />
<ThemedText
style={{
fontSize: 12,
color: colors.textSecondary,
}}
>
{formatTimestamp(alarm.zone.gps_time)}
</ThemedText>
</View>

84
components/map/ShipInfo.tsx
View File

@@ -13,28 +13,31 @@ interface ShipInfoProps {
const ShipInfo = ({ thingMetadata }: ShipInfoProps) => {
const { t } = useI18n();
const { colors } = useAppTheme();
// Định nghĩa màu sắc theo trạng thái
const { colors, utils } = useAppTheme();
const isDark = utils.isDark;
// Định nghĩa màu sắc theo trạng thái - hỗ trợ cả light và dark theme
const statusConfig = {
normal: {
dotColor: "bg-green-500",
badgeColor: "bg-green-100",
badgeTextColor: "text-green-700",
dotColor: colors.success,
badgeColor: isDark ? "rgba(52, 199, 89, 0.2)" : "#dcfce7",
badgeTextColor: isDark ? "#30D158" : "#15803d",
badgeText: "Bình thường",
},
warning: {
dotColor: "bg-yellow-500",
badgeColor: "bg-yellow-100",
badgeTextColor: "text-yellow-700",
dotColor: colors.warning,
badgeColor: isDark ? "rgba(255, 102, 0, 0.2)" : "#fef3c7",
badgeTextColor: isDark ? "#ff9500" : "#b45309",
badgeText: "Cảnh báo",
},
danger: {
dotColor: "bg-red-500",
badgeColor: "bg-red-100",
badgeTextColor: "text-red-700",
dotColor: colors.error,
badgeColor: isDark ? "rgba(255, 69, 58, 0.2)" : "#fee2e2",
badgeTextColor: isDark ? "#FF453A" : "#b91c1c",
badgeText: "Nguy hiểm",
},
};
const getThingStatus = () => {
switch (thingMetadata?.state_level) {
case STATUS_NORMAL:
@@ -67,57 +70,82 @@ const ShipInfo = ({ thingMetadata }: ShipInfoProps) => {
<View className="flex-row items-center justify-between mb-3">
<View className="flex-row items-center gap-2">
{/* Status dot */}
<View className={`h-3 w-3 rounded-full ${currentStatus.dotColor}`} />
<View
style={{
height: 12,
width: 12,
borderRadius: 6,
backgroundColor: currentStatus.dotColor,
}}
/>
{/* Tên tàu */}
<Text className="text-lg font-semibold text-gray-900">
<Text
style={{
fontSize: 18,
fontWeight: "600",
color: colors.text,
}}
>
{thingMetadata?.ship_name}
</Text>
</View>
{/* Badge trạng thái */}
<View className={`px-3 py-1 rounded-full ${currentStatus.badgeColor}`}>
<View
style={{
paddingHorizontal: 12,
paddingVertical: 4,
borderRadius: 9999,
backgroundColor: currentStatus.badgeColor,
}}
>
<Text
className={`text-md font-medium ${currentStatus.badgeTextColor}`}
style={{
fontSize: 14,
fontWeight: "500",
color: currentStatus.badgeTextColor,
}}
>
{currentStatus.badgeText}
</Text>
</View>
</View>
{/* Mã tàu */}
{/* <Text className="text-base text-gray-600 mb-2">{shipCode}</Text> */}
{/* Tốc độ và hướng */}
<View className="flex-row items-center justify-between gap-2 mb-3">
<View className="flex-row items-center gap-2 w-2/3">
<Ionicons name="speedometer-outline" size={16} color="#6B7280" />
<Text className="text-md text-gray-600">
<Ionicons name="speedometer-outline" size={16} color={colors.icon} />
<Text style={{ fontSize: 14, color: colors.textSecondary }}>
{kmhToKnot(gpsData.s || 0)} {t("home.speed_units")}
</Text>
</View>
<View className="flex-row items-start gap-2 w-1/3 ">
<Ionicons name="compass-outline" size={16} color="#6B7280" />
<Text className="text-md text-gray-600">{gpsData.h}°</Text>
<Ionicons name="compass-outline" size={16} color={colors.icon} />
<Text style={{ fontSize: 14, color: colors.textSecondary }}>
{gpsData.h}°
</Text>
</View>
</View>
{/* Tọa độ */}
<View className="flex-row items-center justify-between gap-2 mb-2">
<View className="flex-row items-center gap-2 w-2/3">
<Ionicons name="location-outline" size={16} color="#6B7280" />
<Text className="text-md text-gray-600">
<Ionicons name="location-outline" size={16} color={colors.icon} />
<Text style={{ fontSize: 14, color: colors.textSecondary }}>
{convertToDMS(gpsData.lat || 0, true)},
{convertToDMS(gpsData.lon || 0, false)}
</Text>
</View>
<View className=" flex-row items-start gap-2 w-1/3 ">
<Ionicons name="time-outline" size={16} color="#6B7280" />
<Text className="text-md text-gray-600">
<Ionicons name="time-outline" size={16} color={colors.icon} />
<Text style={{ fontSize: 14, color: colors.textSecondary }}>
{formatRelativeTime(gpsData.t)}
</Text>
</View>
</View>
{/* <View className="flex">
<Description title="Trạng thái" description={thingMetadata?.state} />
</View> */}
{/* Trạng thái */}
{thingMetadata?.state !== "" && (
<View className="flex-row items-center gap-2">
<ThemedText style={{ color: colors.textSecondary, fontSize: 15 }}>