thêm giao diện cảnh báo
This commit is contained in:
Tran Anh Tuan
439
components/alarm/AlarmCard.tsx
Normal file
439
components/alarm/AlarmCard.tsx
Normal file
@@ -0,0 +1,439 @@
|
||||
import {
|
||||
queryConfirmAlarm,
|
||||
queryrUnconfirmAlarm,
|
||||
} from "@/controller/AlarmController";
|
||||
import { useThemeContext } from "@/hooks/use-theme-context";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import dayjs from "dayjs";
|
||||
import React, { useMemo, useState } from "react";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
Modal,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
|
||||
interface AlarmCardProps {
|
||||
alarm: Model.Alarm;
|
||||
onReload?: (onReload: boolean) => void;
|
||||
}
|
||||
|
||||
export const AlarmCard: React.FC<AlarmCardProps> = ({ alarm, onReload }) => {
|
||||
const { colors } = useThemeContext();
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [note, setNote] = useState("");
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const canSubmit = useMemo(
|
||||
() => note.trim().length > 0 || alarm.confirmed,
|
||||
[note, alarm.confirmed]
|
||||
);
|
||||
|
||||
// Determine level and colors based on alarm level
|
||||
const getAlarmConfig = (level?: number) => {
|
||||
if (level === 3) {
|
||||
// Danger - Red
|
||||
return {
|
||||
level: 3,
|
||||
icon: "warning" as const,
|
||||
bgColor: "#fee2e2",
|
||||
borderColor: "#DC0E0E",
|
||||
iconColor: "#dc2626",
|
||||
statusBg: "#dcfce7",
|
||||
statusText: "#166534",
|
||||
};
|
||||
} else if (level === 2) {
|
||||
// Caution - Yellow/Orange
|
||||
return {
|
||||
level: 2,
|
||||
icon: "alert-circle" as const,
|
||||
bgColor: "#fef3c7",
|
||||
borderColor: "#FF6C0C",
|
||||
iconColor: "#d97706",
|
||||
statusBg: "#fef08a",
|
||||
statusText: "#713f12",
|
||||
};
|
||||
} else {
|
||||
// Info - Green
|
||||
return {
|
||||
level: 1,
|
||||
icon: "information-circle" as const,
|
||||
bgColor: "#fffefe",
|
||||
borderColor: "#FF937E",
|
||||
iconColor: "#FF937E",
|
||||
statusBg: "#dcfce7",
|
||||
statusText: "#166534",
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const config = getAlarmConfig(alarm.level);
|
||||
|
||||
const formatDate = (timestamp?: number) => {
|
||||
if (!timestamp) return "N/A";
|
||||
return dayjs.unix(timestamp).format("YYYY-MM-DD HH:mm");
|
||||
};
|
||||
|
||||
const ensurePayload = () => {
|
||||
if (!alarm.id || !alarm.thing_id || !alarm.time) {
|
||||
Alert.alert("Thiếu dữ liệu", "Không đủ thông tin để xác nhận cảnh báo");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
const submitConfirm = async (action: "confirm" | "unconfirm") => {
|
||||
if (!ensurePayload()) return;
|
||||
if (action === "confirm" && note.trim().length === 0) {
|
||||
Alert.alert("Thông báo", "Vui lòng nhập ghi chú để xác nhận");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setSubmitting(true);
|
||||
if (action === "confirm") {
|
||||
await queryConfirmAlarm({
|
||||
id: alarm.id!,
|
||||
thing_id: alarm.thing_id!,
|
||||
time: alarm.time!,
|
||||
description: note.trim(),
|
||||
});
|
||||
} else {
|
||||
await queryrUnconfirmAlarm({
|
||||
id: alarm.id!,
|
||||
thing_id: alarm.thing_id!,
|
||||
time: alarm.time!,
|
||||
});
|
||||
}
|
||||
onReload?.(true);
|
||||
} catch (error: any) {
|
||||
console.error("Cannot confirm/unconfirm alarm: ", error);
|
||||
const status = error?.response?.status ?? error?.status;
|
||||
// If server returns 404, ignore silently
|
||||
if (status !== 404) {
|
||||
Alert.alert("Lỗi", "Không thể xử lý yêu cầu. Vui lòng thử lại.");
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
setShowModal(false);
|
||||
setNote("");
|
||||
}
|
||||
};
|
||||
|
||||
const handlePress = (alarm: Model.Alarm) => {
|
||||
if (alarm.confirmed) {
|
||||
Alert.alert(
|
||||
"Thông báo",
|
||||
"Bạn có chắc muốn ngừng xác nhận cảnh báo này?",
|
||||
[
|
||||
{ text: "Hủy", style: "cancel" },
|
||||
{
|
||||
text: "Ngừng xác nhận",
|
||||
style: "destructive",
|
||||
onPress: () => submitConfirm("unconfirm"),
|
||||
},
|
||||
]
|
||||
);
|
||||
} else {
|
||||
setShowModal(true);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
styles.card,
|
||||
{
|
||||
backgroundColor: config.bgColor,
|
||||
borderLeftColor: config.borderColor,
|
||||
borderLeftWidth: 5,
|
||||
boxShadow: "0px 1px 3px rgba(0, 0, 0, 0.2)",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<View style={styles.container}>
|
||||
{/* Left Side - Icon and Content */}
|
||||
<View style={styles.content}>
|
||||
{/* Icon */}
|
||||
<View
|
||||
style={[styles.iconContainer, { backgroundColor: config.bgColor }]}
|
||||
>
|
||||
<Ionicons name={config.icon} size={24} color={config.iconColor} />
|
||||
</View>
|
||||
|
||||
{/* Title and Info */}
|
||||
<View style={styles.textContainer}>
|
||||
{/* Name */}
|
||||
<View style={styles.titleRow}>
|
||||
<Text
|
||||
style={[styles.title, { color: colors.text }]}
|
||||
numberOfLines={2}
|
||||
>
|
||||
{alarm.name || alarm.thing_name || "Unknown"}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Location (thing_name) and Time */}
|
||||
<View style={styles.infoRow}>
|
||||
<View style={styles.infoItem}>
|
||||
<Text
|
||||
style={[styles.infoLabel, { color: colors.textSecondary }]}
|
||||
>
|
||||
Trạm
|
||||
</Text>
|
||||
<Text
|
||||
style={[styles.infoValue, { color: colors.text }]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{alarm.thing_name || "Unknown"}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.infoItem}>
|
||||
<Text
|
||||
style={[styles.infoLabel, { color: colors.textSecondary }]}
|
||||
>
|
||||
Thời gian
|
||||
</Text>
|
||||
<Text
|
||||
style={[styles.infoValue, { color: colors.text }]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{formatDate(alarm.time)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Status Badge */}
|
||||
<TouchableOpacity
|
||||
style={styles.statusContainer}
|
||||
onPress={() => handlePress(alarm)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View
|
||||
style={[
|
||||
styles.statusBadge,
|
||||
{
|
||||
backgroundColor: alarm.confirmed ? "#8FD14F" : "#EEEEEE",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.statusText,
|
||||
{ color: alarm.confirmed ? "#166534" : "black" },
|
||||
]}
|
||||
>
|
||||
{alarm.confirmed ? "Đã xác nhận" : "Chờ xác nhận"}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{alarm.confirmed && (
|
||||
<View style={styles.rightIcon}>
|
||||
<Ionicons
|
||||
name="checkmark-done"
|
||||
size={20}
|
||||
color={alarm.confirmed ? "#78C841" : config.iconColor}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<Modal
|
||||
visible={showModal}
|
||||
transparent
|
||||
animationType="fade"
|
||||
onRequestClose={() => setShowModal(false)}
|
||||
>
|
||||
<View style={styles.modalOverlay}>
|
||||
<View
|
||||
style={[
|
||||
styles.modalContent,
|
||||
{ backgroundColor: colors.background },
|
||||
]}
|
||||
>
|
||||
<Text style={[styles.modalTitle, { color: colors.text }]}>
|
||||
Nhập ghi chú xác nhận
|
||||
</Text>
|
||||
<TextInput
|
||||
style={[styles.input, { color: colors.text }]}
|
||||
placeholder="Nhập ghi chú"
|
||||
placeholderTextColor={colors.textSecondary}
|
||||
multiline
|
||||
value={note}
|
||||
onChangeText={setNote}
|
||||
editable={!submitting}
|
||||
/>
|
||||
<View style={styles.modalActions}>
|
||||
<TouchableOpacity
|
||||
style={[styles.modalButton, styles.cancelButton]}
|
||||
onPress={() => {
|
||||
setShowModal(false);
|
||||
setNote("");
|
||||
}}
|
||||
disabled={submitting}
|
||||
>
|
||||
<Text style={styles.cancelText}>Hủy</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.modalButton,
|
||||
styles.confirmButton,
|
||||
!canSubmit && styles.disabledButton,
|
||||
]}
|
||||
onPress={() => submitConfirm("confirm")}
|
||||
disabled={submitting || !canSubmit}
|
||||
>
|
||||
{submitting ? (
|
||||
<ActivityIndicator color="#fff" size="small" />
|
||||
) : (
|
||||
<Text style={styles.confirmText}>Xác nhận</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
borderRadius: 12,
|
||||
// borderWidth: 1,
|
||||
paddingVertical: 16,
|
||||
paddingHorizontal: 12,
|
||||
marginBottom: 12,
|
||||
},
|
||||
container: {
|
||||
flexDirection: "row",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
flexDirection: "row",
|
||||
alignItems: "flex-start",
|
||||
},
|
||||
iconContainer: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 12,
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "flex-start",
|
||||
// marginRight: 5,
|
||||
},
|
||||
textContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
titleRow: {
|
||||
marginBottom: 8,
|
||||
},
|
||||
code: {
|
||||
fontSize: 12,
|
||||
fontWeight: "600",
|
||||
marginBottom: 4,
|
||||
},
|
||||
title: {
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
marginBottom: 8,
|
||||
},
|
||||
infoRow: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: 12,
|
||||
gap: 16,
|
||||
},
|
||||
infoItem: {
|
||||
flex: 1,
|
||||
},
|
||||
infoLabel: {
|
||||
fontSize: 12,
|
||||
marginBottom: 4,
|
||||
},
|
||||
infoValue: {
|
||||
fontSize: 14,
|
||||
fontWeight: "500",
|
||||
},
|
||||
statusContainer: {
|
||||
marginTop: 8,
|
||||
},
|
||||
statusBadge: {
|
||||
alignSelf: "flex-start",
|
||||
paddingVertical: 6,
|
||||
paddingHorizontal: 12,
|
||||
borderRadius: 20,
|
||||
borderWidth: 0.2,
|
||||
},
|
||||
statusText: {
|
||||
fontSize: 12,
|
||||
fontWeight: "600",
|
||||
},
|
||||
rightIcon: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
marginLeft: 12,
|
||||
},
|
||||
modalOverlay: {
|
||||
flex: 1,
|
||||
backgroundColor: "rgba(0,0,0,0.3)",
|
||||
justifyContent: "center",
|
||||
paddingHorizontal: 16,
|
||||
},
|
||||
modalContent: {
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
gap: 12,
|
||||
},
|
||||
modalTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: "700",
|
||||
},
|
||||
input: {
|
||||
minHeight: 80,
|
||||
borderRadius: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: "#e5e7eb",
|
||||
padding: 12,
|
||||
textAlignVertical: "top",
|
||||
},
|
||||
modalActions: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "flex-end",
|
||||
gap: 12,
|
||||
},
|
||||
modalButton: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 8,
|
||||
},
|
||||
cancelButton: {
|
||||
backgroundColor: "#e5e7eb",
|
||||
},
|
||||
confirmButton: {
|
||||
backgroundColor: "#dc2626",
|
||||
},
|
||||
disabledButton: {
|
||||
opacity: 0.6,
|
||||
},
|
||||
cancelText: {
|
||||
color: "#111827",
|
||||
fontWeight: "600",
|
||||
},
|
||||
confirmText: {
|
||||
color: "#fff",
|
||||
fontWeight: "700",
|
||||
},
|
||||
});
|
||||
|
||||
export default AlarmCard;
|
||||
Reference in New Issue
Block a user