339 lines
8.7 KiB
JavaScript
339 lines
8.7 KiB
JavaScript
import React, { useState } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
ScrollView,
|
|
Linking,
|
|
} from "react-native";
|
|
import { Ionicons } from "@expo/vector-icons"; // Import Expo icons
|
|
import { useNavigation } from "@react-navigation/native";
|
|
|
|
const tpsData = [
|
|
{
|
|
nama: "TPS SENGKUT",
|
|
kecamatan: "BERBEK",
|
|
alamat: "Desa Werungotok, Kec. Nganjuk",
|
|
jenis: "Depo Kecil",
|
|
luas: "1,5 x 1,5",
|
|
volume: "3.375 m3",
|
|
latitude: -7.6141,
|
|
longitude: 111.5177,
|
|
},
|
|
{
|
|
nama: "TPS NGRONGGOT",
|
|
kecamatan: "BERBEK",
|
|
alamat: "Desa Werungotok, Kec. Nganjuk",
|
|
jenis: "Depo Kecil",
|
|
luas: "1,5 x 1,5",
|
|
volume: "3.375 m3",
|
|
},
|
|
|
|
{
|
|
nama: "TPS 3R MASTRIP",
|
|
kecamatan: "NGANJUK",
|
|
alamat: "Desa Mangundikaran, Kec. Nganjuk",
|
|
jenis: "TPS 3R",
|
|
luas: "2 x 2",
|
|
volume: "5 m3",
|
|
latitude: -6.6,
|
|
longitude: 106.8,
|
|
},
|
|
{
|
|
nama: "TPS 3R KARTOHARJO",
|
|
kecamatan: "NGANJUK",
|
|
alamat: "Desa Kartoharjo, Kec. Nganjuk",
|
|
jenis: "TPS 3R",
|
|
luas: "2 x 2",
|
|
volume: "5 m3",
|
|
latitude: -7.25,
|
|
longitude: 112.75,
|
|
},
|
|
{
|
|
nama: "TPS 3R KSM GANUNGKIDUL",
|
|
kecamatan: "NGANJUK",
|
|
alamat: "Desa Ganungkidul, Kec. Nganjuk",
|
|
jenis: "TPS 3R KSM",
|
|
luas: "3 x 3",
|
|
volume: "7.5 m3",
|
|
latitude: -6.175,
|
|
longitude: 106.8272,
|
|
},
|
|
{
|
|
nama: "TPS 3R KSM PAYAMAN",
|
|
kecamatan: "NGANJUK",
|
|
alamat: "Desa Payaman, Kec. Nganjuk",
|
|
jenis: "TPS 3R KSM",
|
|
luas: "3 x 3",
|
|
volume: "7.5 m3",
|
|
latitude: -6.175,
|
|
longitude: 106.8272,
|
|
},
|
|
{
|
|
nama: "TPS 3R KSM JATIREJO",
|
|
kecamatan: "NGANJUK",
|
|
alamat: "Desa Jatirejo, Kec. Nganjuk",
|
|
jenis: "TPS 3R KSM",
|
|
luas: "3 x 3",
|
|
volume: "7.5 m3",
|
|
latitude: -6.175,
|
|
longitude: 106.8272,
|
|
},
|
|
];
|
|
|
|
const DaftarTPS = () => {
|
|
const navigation = useNavigation();
|
|
const [search, setSearch] = useState("");
|
|
const [activeCategory, setActiveCategory] = useState("TPS");
|
|
|
|
const filteredTPS = tpsData.filter(
|
|
(tps) =>
|
|
tps.nama.toLowerCase().includes(search.toLowerCase()) &&
|
|
(activeCategory === "TPS" || tps.jenis === activeCategory)
|
|
);
|
|
|
|
const openInMaps = (latitude, longitude) => {
|
|
const url = `https://www.google.com/maps/search/?api=1&query=${latitude},${longitude}`;
|
|
Linking.openURL(url);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.header}>
|
|
<TouchableOpacity
|
|
style={styles.backButton}
|
|
onPress={() => navigation.navigate("Home")}
|
|
>
|
|
<Ionicons name="arrow-back" size={28} color="#000" />
|
|
</TouchableOpacity>
|
|
<Text style={styles.title}>DAFTAR TPS DI NGANJUK</Text>
|
|
</View>
|
|
|
|
{/* Button for categories */}
|
|
<View style={styles.categoryButtonsContainer}>
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.categoryButton,
|
|
activeCategory === "TPS" && styles.activeButton,
|
|
]}
|
|
onPress={() => setActiveCategory("TPS")}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.buttonText,
|
|
activeCategory === "TPS" && styles.activeButtonText,
|
|
]}
|
|
>
|
|
TPS
|
|
</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.categoryButton,
|
|
activeCategory === "TPS 3R" && styles.activeButton,
|
|
]}
|
|
onPress={() => setActiveCategory("TPS 3R")}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.buttonText,
|
|
activeCategory === "TPS 3R" && styles.activeButtonText,
|
|
]}
|
|
>
|
|
TPS 3R
|
|
</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.categoryButton,
|
|
activeCategory === "TPS 3R KSM" && styles.activeButton,
|
|
]}
|
|
onPress={() => setActiveCategory("TPS 3R KSM")}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.buttonText,
|
|
activeCategory === "TPS 3R KSM" && styles.activeButtonText,
|
|
]}
|
|
>
|
|
TPS 3R KSM
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<View style={styles.searchContainer}>
|
|
<TextInput
|
|
placeholder="Cari Lokasi"
|
|
style={styles.input}
|
|
value={search}
|
|
onChangeText={setSearch}
|
|
/>
|
|
<TouchableOpacity style={styles.searchButton}>
|
|
<Ionicons name="search" size={20} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<ScrollView>
|
|
{filteredTPS.map((tps, index) => (
|
|
<View key={index} style={styles.card}>
|
|
<View style={styles.cardHeader}>
|
|
<View style={{ flex: 1 }}>
|
|
<Text style={styles.label}>LUAS TPS</Text>
|
|
<Text style={styles.value}>{tps.luas}</Text>
|
|
</View>
|
|
<View style={{ flex: 2 }}>
|
|
<Text style={styles.tpsName}>{tps.nama}</Text>
|
|
<Text style={styles.kecamatan}>KECAMATAN {tps.kecamatan}</Text>
|
|
</View>
|
|
<View style={{ flex: 1, alignItems: "flex-end" }}>
|
|
<Text style={styles.labelSmall}>VOLUME MAKSIMAL</Text>
|
|
<Text style={styles.volume}>{tps.volume}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.cardContent}>
|
|
<View style={styles.infoRow}>
|
|
<Ionicons name="location-outline" size={16} />
|
|
<Text style={styles.infoText}>Alamat</Text>
|
|
<TouchableOpacity
|
|
style={styles.lokasiButton}
|
|
onPress={() => openInMaps(tps.latitude, tps.longitude)}
|
|
>
|
|
<Text style={{ fontWeight: "bold" }}>LOKASI</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<Text style={styles.subInfo}>{tps.alamat}</Text>
|
|
|
|
<View style={[styles.infoRow, { marginTop: 8 }]}>
|
|
<Ionicons name="trash-outline" size={16} />
|
|
<Text style={styles.infoText}>Jenis</Text>
|
|
</View>
|
|
<Text style={styles.subInfo}>{tps.jenis}</Text>
|
|
</View>
|
|
</View>
|
|
))}
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: "#fff",
|
|
padding: 16,
|
|
marginBottom: 0,
|
|
marginTop: -40,
|
|
},
|
|
header: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
marginBottom: 10,
|
|
marginTop: 70,
|
|
},
|
|
backButton: { marginBottom: 10 },
|
|
title: {
|
|
fontSize: 22,
|
|
fontWeight: "bold",
|
|
color: "#000",
|
|
textAlign: "left",
|
|
marginBottom: 12,
|
|
marginLeft: 20,
|
|
marginRight: 230,
|
|
},
|
|
categoryButtonsContainer: {
|
|
flexDirection: "row",
|
|
marginBottom: 15,
|
|
},
|
|
categoryButton: {
|
|
flex: 1,
|
|
paddingVertical: 10,
|
|
marginRight: 8,
|
|
borderRadius: 15,
|
|
backgroundColor: "white",
|
|
borderWidth: 1,
|
|
borderColor: "#2D572C",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
activeButton: {
|
|
backgroundColor: "#2D572C",
|
|
},
|
|
buttonText: {
|
|
color: "#2D572C",
|
|
fontWeight: "bold",
|
|
},
|
|
activeButtonText: {
|
|
color: "white", // Change text color to white when the button is active
|
|
},
|
|
searchContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginBottom: 10,
|
|
},
|
|
input: {
|
|
flex: 1,
|
|
borderWidth: 1,
|
|
borderColor: "#999",
|
|
borderRadius: 10,
|
|
padding: 10,
|
|
marginBottom: 10,
|
|
},
|
|
searchButton: {
|
|
backgroundColor: "#E0E0E0",
|
|
padding: 10,
|
|
marginLeft: 8,
|
|
borderRadius: 8,
|
|
},
|
|
card: {
|
|
borderRadius: 12,
|
|
marginBottom: 20,
|
|
borderColor: "#000",
|
|
borderWidth: 1,
|
|
overflow: "hidden",
|
|
shadowColor: "#000",
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 5,
|
|
backgroundColor: "#fff",
|
|
elevation: 3,
|
|
},
|
|
cardHeader: {
|
|
backgroundColor: "#2D572C",
|
|
padding: 10,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
},
|
|
label: { color: "white", fontSize: 11 },
|
|
value: { color: "white", fontWeight: "bold" },
|
|
tpsName: {
|
|
color: "white",
|
|
fontSize: 16,
|
|
fontWeight: "bold",
|
|
justifyContent: "center",
|
|
marginLeft: 40,
|
|
},
|
|
kecamatan: { color: "white", fontSize: 12, marginLeft: 40 },
|
|
labelSmall: { fontSize: 10, color: "white", textAlign: "right" },
|
|
volume: { fontSize: 14, color: "white", fontWeight: "bold" },
|
|
cardContent: { padding: 12 },
|
|
infoRow: { flexDirection: "row", alignItems: "center", gap: 4 },
|
|
infoText: { fontWeight: "bold", marginLeft: 8 },
|
|
subInfo: { marginLeft: 30, fontSize: 13 },
|
|
lokasiButton: {
|
|
backgroundColor: "#F0F0F0",
|
|
paddingVertical: 8,
|
|
paddingHorizontal: 14,
|
|
borderRadius: 8,
|
|
shadowColor: "#000",
|
|
shadowOpacity: 0.1,
|
|
elevation: 2,
|
|
marginLeft: 220,
|
|
borderWidth: 1,
|
|
},
|
|
});
|
|
|
|
export default DaftarTPS;
|