- 
-
-
- 
- 
- 
-
-
- {item.Name_Ch}
- {item.Name_En}
-
-
- {item.Location}
-
-
- {item.Class}
- {item.Order}
- {item.Family}
-
-
- 保育分級：{item.Conservation}
- {item.Taiwan ? (
- {`(${item.Taiwan})`}
- ) : null}
- 
-
-
-
- {item.Name_Ch}
- {item.Name_En}
-
-
-
-
+
{
- if (uid) {
- favoritiesMember.push(item.Name_Ch);
- firestore.firebaseAddFavoriate(uid, favoritiesMember);
- setAddfavorite(`加${item.Name_Ch}`);
- Toast.success(({ closeToast }) => (
-
![]()
"威脅
- ) : undefined}
+ )}
);
diff --git a/src/Pages/ShowAllAnimals/AllAniamls/ClickBar.js b/src/Pages/ShowAllAnimals/AllAniamls/ClickBar.js
new file mode 100644
index 0000000..2b98d5d
--- /dev/null
+++ b/src/Pages/ShowAllAnimals/AllAniamls/ClickBar.js
@@ -0,0 +1,148 @@
+import React, { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import * as firestore from "../../../Utils/firebase";
+import * as Toast from "../../../Utils/toast";
+
+export default function ClickBar(props) {
+ const [favoritiesMember, setFavoritiesMember] = useState([]);
+ const [visitedMember, setVisitedMember] = useState([]);
+ const { uid, item, popupAnimal } = props;
+
+ const handleAddFavorite = (name) => {
+ if (uid) {
+ let favorities = [...favoritiesMember];
+ favorities.push(name);
+ setFavoritiesMember(favorities);
+ firestore.firebaseAddFavoriate(uid, favorities);
+ Toast.success(({ closeToast }) => (
+
- 收藏成功！可至
-
- 路線規劃頁面
-
- 查看
-
- ));
- } else {
- Toast.alertMes("請先登入會員呦");
- }
- }}
- />
- {favoritiesMember.length
- ? favoritiesMember.map((name) =>
- name === popupAnimal ? (
- {
- e.target.style.backgroundImage =
- "url(/Icons/like-02.svg)";
- let index = favoritiesMember.indexOf(
- item.Name_Ch
- );
- favoritiesMember.splice(index, 1);
- firestore.firebaseAddFavoriate(
- uid,
- favoritiesMember
- );
- setAddfavorite(`${item.Name_Latin}`);
- Toast.remove("已移除造訪點");
- }}
- />
- ) : null
- )
- : null}
-
- 滑鼠移項該停車場,顯示最新停車位資訊 ;
+ }
+ return (
+
+ {status.map((item) =>
+ item.id === parkId ? (
+
+ );
+}
diff --git a/src/Pages/Entrance/Information/Traffic/ParkingStatusPopup.js b/src/Pages/Entrance/Information/Traffic/ParkingStatusPopup.js
new file mode 100644
index 0000000..91f819e
--- /dev/null
+++ b/src/Pages/Entrance/Information/Traffic/ParkingStatusPopup.js
@@ -0,0 +1,81 @@
+import React from "react";
+import styled from "styled-components";
+
+const InfoDiv = styled.div`
+ box-sizing: border-box;
+ padding: 10px 20px;
+ h3 {
+ font-size: 24px;
+ color: #5f5c90;
+ font-weight: 500;
+ }
+ p {
+ font-size: 16px;
+ color: #6b6b6b;
+ font-weight: 400;
+ }
+ .highLight {
+ color: #ea7a60;
+ }
+`;
+
+export default function ParkingStatusPopup(props) {
+ const { parkId, status, parkName, parks, parkStatus } = props;
+
+ return (
+
+ {status.map((item) =>
+ item.id === parkId ? (
+
+ );
+}
diff --git a/src/Pages/Entrance/Information/Traffic/index.js b/src/Pages/Entrance/Information/Traffic/index.js
new file mode 100644
index 0000000..5139472
--- /dev/null
+++ b/src/Pages/Entrance/Information/Traffic/index.js
@@ -0,0 +1,130 @@
+import React, { useState, useEffect } from "react";
+import Parks from "../../../../Utils/tcmsv_park.json";
+import * as api from "../../../../Utils/api";
+import Popup from "reactjs-popup";
+import L from "leaflet";
+import { MapContainer, TileLayer, Marker } from "react-leaflet";
+import ParkingStatus from "./ParkingStatus";
+import ParkingStatusPopup from "./ParkingStatusPopup";
+import { Container } from "./style";
+
+export default function Traffic() {
+ const [parkStatus, setParkStatus] = useState(null);
+ const [parkName, setParkName] = useState(null);
+ const [parkId, setParkId] = useState(null);
+ const [open, setOpen] = useState(false);
+ const position = [24.99773326108165, 121.5834263898432];
+ const parksId = ["115", "046", "101", "202"];
+ const parks = Parks.data.park;
+ let status = [];
+ const isRowBased = window.matchMedia("(max-width: 1020px)").matches;
+
+ useEffect(() => {
+ api.getParksStatus().then((data) => setParkStatus(data.data));
+ }, [parkId]);
+
+ if (!parkStatus) {
+ return null;
+ }
+ const getParkingData = () => {
+ parkStatus.park.forEach((element) => {
+ parksId.forEach((num) => {
+ if (element.id === num) {
+ status.push(element);
+ }
+ });
+ });
+ };
+ getParkingData();
+ return (
+ <>
+
+
+ {
+ setOpen(false);
+ }}
+ overlayStyle={{ background: "rgba(0, 0, 0, 0.8)", zIndex: 1200 }}
+ contentStyle={{
+ position: "relative",
+ margin: "auto",
+ boxSizing: "border-box",
+ background: "#fff",
+ width: "680px",
+ maxWidth: isRowBased ? "85vw" : "95vw",
+ padding: 0,
+ borderRadius: "10px",
+ border: "none",
+ }}
+ >
+
+
+ );
+}
diff --git a/src/Pages/Entrance/Information/Traffic/style.js b/src/Pages/Entrance/Information/Traffic/style.js
new file mode 100644
index 0000000..9e9c1b5
--- /dev/null
+++ b/src/Pages/Entrance/Information/Traffic/style.js
@@ -0,0 +1,124 @@
+import styled from "styled-components";
+
+const Container = styled.div`
+ box-sizing: border-box;
+ display: flex;
+ position: relative;
+ flex-direction: row;
+ width: 100%;
+ padding: 0px 30px 0 0;
+ margin: 20px auto;
+ max-width: 1280px;
+ justify-content: center;
+
+ .map-container {
+ box-sizing: border-box;
+ width: 70%;
+ }
+ .traffic-block {
+ padding-top: 50px;
+ box-sizing: border-box;
+ width: 30%;
+ .header {
+ font-size: 28px;
+ color: #5f73bd;
+ font-weight: 500;
+ }
+ .header-md-orange {
+ padding-left: 30px;
+ margin-top: 60px;
+ margin-bottom: 30px;
+ font-size: 24px;
+ color: #ea7a60;
+ font-weight: 500;
+ }
+ span {
+ position: relative;
+ padding-left: 30px;
+ display: block;
+ font-size: 20px;
+ color: #6b6b6b;
+ font-weight: 400;
+ margin-bottom: 15px;
+ }
+ .text {
+ padding: 30px 20px;
+ font-size: 16px;
+ }
+ }
+ .pd-30 {
+ padding-left: 30px;
+ }
+ @media (max-width: 1024px) {
+ flex-direction: column;
+ width: 100%;
+ padding: 0px 30px;
+ margin: 20px auto;
+ align-items: center;
+ justify-content: center;
+ .map-container {
+ box-sizing: border-box;
+ width: 100%;
+ }
+ .traffic-block {
+ padding-top: 50px;
+ box-sizing: border-box;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ .header {
+ width: 80%;
+ font-size: 24px;
+ color: #5f73bd;
+ font-weight: 500;
+ }
+ .header-md-orange {
+ font-size: 20px;
+ width: 93%;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ }
+ span {
+ font-size: 18px;
+ margin-bottom: 10px;
+ }
+ .text {
+ width: 90%;
+ padding: 30px 20px;
+ font-size: 16px;
+ }
+ }
+ }
+ @media (max-width: 768px) {
+ .traffic-block {
+ padding-top: 30px;
+ .header {
+ width: 80%;
+ font-size: 20px;
+ color: #5f73bd;
+ font-weight: 500;
+ }
+ .header-md-orange {
+ font-size: 16px;
+ width: 93%;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ }
+ span {
+ font-size: 14px;
+ margin-bottom: 10px;
+ }
+ .text {
+ text-align: center;
+ width: 90%;
+ padding: 10px 20px 20px;
+ font-size: 14px;
+ }
+ }
+ }
+ @media (max-width: 576px) {
+ }
+`;
+
+export { Container };
diff --git a/src/Pages/Entrance/Traffic.js b/src/Pages/Entrance/Traffic.js
deleted file mode 100644
index 9d3960f..0000000
--- a/src/Pages/Entrance/Traffic.js
+++ /dev/null
@@ -1,416 +0,0 @@
-import React, { useState, useEffect } from "react";
-import styled from "styled-components";
-import Parks from "../../Utils/tcmsv_park.json";
-import * as api from "../../Utils/api";
-import L from "leaflet";
-import Popup from "reactjs-popup";
-import { MapContainer, TileLayer, useMapEvents, Marker } from "react-leaflet";
-
-const Container = styled.div`
- box-sizing: border-box;
- display: flex;
- position: relative;
- flex-direction: row;
- width: 100%;
- padding: 0px 30px 0 0;
- margin: 20px auto;
- max-width: 1280px;
- justify-content: center;
-
- .map-container {
- box-sizing: border-box;
- width: 70%;
- }
- .traffic-block {
- padding-top: 50px;
- box-sizing: border-box;
- width: 30%;
- .header {
- font-size: 28px;
- color: #5f73bd;
- font-weight: 500;
- }
- .header-md-orange {
- padding-left: 30px;
- margin-top: 60px;
- margin-bottom: 30px;
- font-size: 24px;
- color: #ea7a60;
- font-weight: 500;
- }
- span {
- position: relative;
- padding-left: 30px;
- display: block;
- font-size: 20px;
- color: #6b6b6b;
- font-weight: 400;
- margin-bottom: 15px;
- }
- .text {
- padding: 30px 20px;
- font-size: 16px;
- }
- }
- .pd-30 {
- padding-left: 30px;
- }
- @media (max-width: 1024px) {
- flex-direction: column;
- width: 100%;
- padding: 0px 30px;
- margin: 20px auto;
- align-items: center;
- justify-content: center;
- .map-container {
- box-sizing: border-box;
- width: 100%;
- }
- .traffic-block {
- padding-top: 50px;
- box-sizing: border-box;
- width: 100%;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- .header {
- width: 80%;
- font-size: 24px;
- color: #5f73bd;
- font-weight: 500;
- }
- .header-md-orange {
- font-size: 20px;
- width: 93%;
- margin-top: 20px;
- margin-bottom: 10px;
- }
- span {
- font-size: 18px;
- margin-bottom: 10px;
- }
- .text {
- width: 90%;
- padding: 30px 20px;
- font-size: 16px;
- }
- }
- }
- @media (max-width: 768px) {
- .traffic-block {
- padding-top: 30px;
- .header {
- width: 80%;
- font-size: 20px;
- color: #5f73bd;
- font-weight: 500;
- }
- .header-md-orange {
- font-size: 16px;
- width: 93%;
- margin-top: 20px;
- margin-bottom: 10px;
- }
- span {
- font-size: 14px;
- margin-bottom: 10px;
- }
- .text {
- text-align: center;
- width: 90%;
- padding: 10px 20px 20px;
- font-size: 14px;
- }
- }
- }
- @media (max-width: 576px) {
- }
-`;
-
-const InfoDiv = styled.div`
- box-sizing: border-box;
- padding: 20px 20px;
- max-width: 300px;
- max-height: 700px;
- overflow-y: scroll;
- background-color: #fff;
- opacity: 0.8;
- border-radius: 25px;
- position: absolute;
- top: 20px;
- right: 20px;
- z-index: 500;
- white-space: pre-wrap;
- @media (max-width: 1024px) {
- display: none;
- }
-`;
-
-const InfoDivMd = styled.div`
- box-sizing: border-box;
- padding: 10px 20px;
- h3 {
- font-size: 24px;
- color: #5f5c90;
- font-weight: 500;
- }
- p {
- font-size: 16px;
- color: #6b6b6b;
- font-weight: 400;
- }
- .highLight {
- color: #ea7a60;
- }
-`;
-
-export default function Traffic() {
- const [parkStatus, setParkStatus] = useState(null);
- const [parkName, setParkName] = useState(null);
- const [parkId, setParkId] = useState(null);
- const [open, setOpen] = useState(false);
- const setBounds = [
- [25.003615970747212, 121.5642151547959],
- [24.991279127890376, 121.5948277740565],
- ];
- const position = [24.99773326108165, 121.5834263898432];
- const parksId = ["115", "046", "101", "202"];
- const parks = Parks.data.park;
- let status = [];
- const isRowBased = window.matchMedia("(max-width: 1020px)").matches;
-
- useEffect(() => {
- api.getParksStatus().then((data) => setParkStatus(data.data));
- }, [parkId]);
-
- if (!parkStatus) {
- return null;
- }
-
- parkStatus.park.forEach((element) => {
- parksId.forEach((num) => {
- if (element.id === num) {
- status.push(element);
- }
- });
- });
- function ClickEvent() {
- useMapEvents({
- click: (e) => {
- console.log(e.latlng);
- },
- });
- return null;
- }
-
- function Infomation() {
- if (parkId) {
- return (
-
- {status.map((item) =>
- item.id === parkId ? (
-
- );
- }
- return 滑鼠移項該停車場,顯示最新停車位資訊 ;
- }
-
- function InfomationPopup() {
- if (parkId) {
- return (
-
- {status.map((item) =>
- item.id === parkId ? (
-
- );
- }
- return 滑鼠移項該停車場,顯示最新停車位資訊 ;
- }
-
- return (
- <>
-
-
- {
- setOpen(false);
- }}
- overlayStyle={{ background: "rgba(0, 0, 0, 0.8)", zIndex: 1200 }}
- contentStyle={{
- position: "relative",
- margin: "auto",
- boxSizing: "border-box",
- background: "#fff",
- width: "680px",
- maxWidth: isRowBased ? "85vw" : "95vw",
- padding: 0,
- borderRadius: "10px",
- border: "none",
- }}
- >
-
-
- );
-}
diff --git a/src/Pages/Entrance/index.js b/src/Pages/Entrance/index.js
index 5ffc0b5..2b25b9c 100644
--- a/src/Pages/Entrance/index.js
+++ b/src/Pages/Entrance/index.js
@@ -1,7 +1,7 @@
import React from "react";
import styled from "styled-components";
-import Traffic from "./Traffic";
-import Infomation from "./Information/Index";
+import Traffic from "./Information/Traffic";
+import Imformance from "./Information/Informance/Index.js";
const Container = styled.div`
display: flex;
@@ -16,7 +16,7 @@ const Container = styled.div`
export default function Entrance() {
return (
-
);
diff --git a/src/Pages/Landing/index.js b/src/Pages/Landing/index.js
index c99b094..9bfd969 100644
--- a/src/Pages/Landing/index.js
+++ b/src/Pages/Landing/index.js
@@ -1,22 +1,14 @@
import React from "react";
import styled, { keyframes } from "styled-components";
-import {
- BrowserRouter as Switch,
- Route,
- Link,
- useRouteMatch,
-} from "react-router-dom";
+import { Link } from "react-router-dom";
const float = keyframes`
- 0% {
- transform: translatey(0px);
- }
- 50% {
- transform: translatey(-20px);
- }
- 100% {
- transform: translatey(0px);
- }
+ from {
+ transform: translatey(0px);;
+ }
+ to {
+ transform: translatey(-20px);
+ }
`;
const Container = styled.div`
@@ -55,7 +47,7 @@ const Container = styled.div`
height: 200px;
margin-left: 180px;
align-self: flex-start;
- animation: ${float} 4s ease-in-out infinite;
+ animation: ${float} 3s ease-in-out infinite alternate;
}
.text {
align-self: flex-start;
diff --git a/src/Pages/Map/Animal/AnimalsData.js b/src/Pages/Map/Animal/AnimalsData.js
index c166e1b..fa84bd1 100644
--- a/src/Pages/Map/Animal/AnimalsData.js
+++ b/src/Pages/Map/Animal/AnimalsData.js
@@ -5,7 +5,7 @@ import * as reduxAction from "../../../Redux/Action";
import * as firestore from "../../../Utils/firebase";
import * as Toast from "../../../Utils/toast";
import "react-toastify/dist/ReactToastify.css";
-import Select, { components } from "react-select";
+// import Select, { components } from "react-select";
const ContainerDiv = styled.div`
width: 100%;
@@ -189,20 +189,16 @@ const AnimalContent = styled.div`
`;
let flag = false;
-
-let nowAnimals = [];
+// let nowAnimals = [];
const AnimalsData = (prop) => {
- const [open, setOpen] = useState(false);
+ // const [open, setOpen] = useState(false);
const [animalsData, setAnimalsData] = useState(null);
const [favorities, setFavorities] = useState("none");
const [savedData, setSaveData] = useState("none");
- const [selectPlace, setSelectPlace] = useState("全部動物");
- const [Input, setInput] = useState("今天我想看...");
- const [foucs, setFoucs] = useState(false);
-
+ // const [selectPlace, setSelectPlace] = useState("全部動物");
const [dispalyContainer, setDispalyContainer] = useState("block");
- const disPatch = useDispatch();
+ const dispatch = useDispatch();
const displayStore = useSelector(
(state) => state.AnimalsReducer.displayforAnimalSelect
@@ -216,61 +212,59 @@ const AnimalsData = (prop) => {
let routeData = prop.route;
let uid = prop.uid;
- let showAnimals = [];
- let option = [];
- const { Option } = components;
-
- const handleChange = (value, { action }) => {
- switch (action) {
- case "select-option":
- setSelectPlace(value.value);
- setOpen(true);
- return;
- default:
- return;
- }
- };
-
- const handleInputChange = (inputValue, { action }) => {
- switch (action) {
- case "select-option":
- let index = inputValue.length - 1;
- animalsData.forEach((item) => {
- if (item.Name_Ch === inputValue[index].value) {
- disPatch(
- reduxAction.addAnimal([item.Geo[1], item.Geo[0]], item.CID)
- );
- }
- });
-
- nowAnimals = inputValue;
- return;
- case "remove-value":
- let removedAnimals = nowAnimals.filter(
- (i) => inputValue.findIndex((j) => j.value === i.value) === -1
- );
- nowAnimals = inputValue;
- animalsData.forEach((item) => {
- if (item.Name_Ch === removedAnimals[0].value) {
- disPatch(
- reduxAction.removeAnimal([item.Geo[1], item.Geo[0]], item.CID)
- );
- }
- });
-
- return;
- case "clear":
- window.location.reload();
- return;
- default:
- return;
- }
- };
+ // const { Option } = components;
+
+ // const handleChange = (value, { action }) => {
+ // switch (action) {
+ // case "select-option":
+ // setSelectPlace(value.value);
+ // setOpen(true);
+ // return;
+ // default:
+ // return;
+ // }
+ // };
+
+ // const handleInputChange = (inputValue, { action }) => {
+ // switch (action) {
+ // case "select-option":
+ // let index = inputValue.length - 1;
+ // animalsData.forEach((item) => {
+ // if (item.Name_Ch === inputValue[index].value) {
+ // dispatch(
+ // reduxAction.addAnimal([item.Geo[1], item.Geo[0]], item.CID)
+ // );
+ // }
+ // });
+
+ // nowAnimals = inputValue;
+ // return;
+ // case "remove-value":
+ // let removedAnimals = nowAnimals.filter(
+ // (i) => inputValue.findIndex((j) => j.value === i.value) === -1
+ // );
+ // nowAnimals = inputValue;
+ // animalsData.forEach((item) => {
+ // if (item.Name_Ch === removedAnimals[0].value) {
+ // dispatch(
+ // reduxAction.removeAnimal([item.Geo[1], item.Geo[0]], item.CID)
+ // );
+ // }
+ // });
+
+ // return;
+ // case "clear":
+ // window.location.reload();
+ // return;
+ // default:
+ // return;
+ // }
+ // };
const showMyGeo = (e) => {
if (e.target.style.backgroundColor !== "lightgrey") {
e.target.style.backgroundColor = "lightgrey";
- disPatch(
+ dispatch(
reduxAction.addAnimal(
[Number(e.target.dataset.lat), Number(e.target.dataset.lng)],
Number(e.target.dataset.num)
@@ -278,7 +272,7 @@ const AnimalsData = (prop) => {
);
} else {
e.target.style.backgroundColor = "white";
- disPatch(
+ dispatch(
reduxAction.removeAnimal(
[Number(e.target.dataset.lat), Number(e.target.dataset.lng)],
Number(e.target.dataset.num)
@@ -320,9 +314,9 @@ const AnimalsData = (prop) => {
item.Location === pav[0] ? result.push(...item.Route) : null
)
);
- disPatch(reduxAction.addRecommend(pavilionsSort));
- disPatch(reduxAction.addRoute(result));
- disPatch(reduxAction.gotoNextStep());
+ dispatch(reduxAction.addRecommend(pavilionsSort));
+ dispatch(reduxAction.addRoute(result));
+ dispatch(reduxAction.gotoNextStep());
setDispalyContainer("none");
} else {
Toast.alertMes("請先選擇至少一種想看的動物喔！");
@@ -338,13 +332,13 @@ const AnimalsData = (prop) => {
} else {
setFavorities(false);
}
- }, []);
+ }, [prop.animal, uid]);
useEffect(() => {
if (uid) {
return firestore.firebaseGetSavedData(uid, (data) => setSaveData(data));
}
- }, []);
+ }, [uid]);
useEffect(() => {
if (displayStore) {
@@ -367,70 +361,42 @@ const AnimalsData = (prop) => {
numArray.push(Number(item));
});
- disPatch(reduxAction.removeAllAnimal());
+ dispatch(reduxAction.removeAllAnimal());
geoArray.forEach((item, index) =>
- disPatch(reduxAction.addAnimal(item, numArray[index]))
+ dispatch(reduxAction.addAnimal(item, numArray[index]))
);
flag = true;
}
- }, [savedData]);
+ }, [dispatch, idValue, savedData]);
- useEffect(() => {
- if (flag) {
- submit();
- }
- }, [flag]);
+ if (flag) {
+ submit();
+ }
if (!animalsData || favorities === undefined || favorities === "none") {
return null;
}
- const set = new Set();
- const catalogs = animalsData
- .filter((item) =>
- !set.has(item.Location) ? set.add(item.Location) : false
- )
- .map((item) => item.Location);
-
- catalogs.forEach((item) => {
- let arr5 = [];
- animalsData.forEach((animal) => {
- if (item === animal.Location) {
- arr5.push(animal.Name_Ch);
- }
- });
- option.push({ value: item, label: item, num: arr5.length });
- });
- option.push({ value: "全部動物", label: "全部動物", num: 270 });
-
- if (selectPlace !== "全部動物") {
- let arr = animalsData
- .filter((item) => item.Location.includes(selectPlace))
- .map((item) => item.Name_Ch);
- arr.forEach((item) => showAnimals.push({ value: item, label: item }));
- } else {
- animalsData.forEach((item) =>
- showAnimals.push({ value: item.Name_Ch, label: item.Name_Ch })
- );
- }
-
- const spanOption = (props) => (
-
- );
+ // const option = FilterAnimals.getAllLabel();
+ // const showAnimals = FilterAnimals.filterAnimalsOfPlace(selectPlace);
+
+ // const groupLabel = (props) => (
+ //
+ // );
return (
<>
@@ -468,13 +434,13 @@ const AnimalsData = (prop) => {
) : null}
*/}
- ) : undefined}
- {item.Feature ? (
+ )}
+ {item.Feature && (
![]()
"特徵
- ) : undefined}
- {item.Crisis ? (
+ )}
+ {item.Crisis && (
加入收藏
-
- {
- if (uid) {
- visitedMember.push(item.Name_Ch);
- firestore.firebaseAddVisited(uid, visitedMember);
- setAddvisited(`add-${item.Name_Latin}`);
- Toast.success(({ closeToast }) => (
-
-
- 加入成功！可至
-
- 我的足跡
-
- 查看
-
- ));
- } else {
- Toast.alertMes("請先登入會員呦");
- }
- }}
- />
- {visitedMember.length
- ? visitedMember.map((name) =>
- name === popupAnimal ? (
- {
- e.target.style.backgroundImage =
- "url(/Icons/like-02.svg)";
- let index = visitedMember.indexOf(item.Name_Ch);
- visitedMember.splice(index, 1);
- firestore.firebaseAddVisited(
- uid,
- visitedMember
- );
- setAddvisited(`remo-${item.Name_Latin}`);
- Toast.remove("已抹除足跡");
- }}
- />
- ) : null
- )
- : null}
-
-
-
- ) : null
- )}
- 探索足跡
-
-
-
+
diff --git a/src/Pages/Entrance/Information/Informance.js b/src/Pages/Entrance/Information/Informance/Informance.js
similarity index 98%
rename from src/Pages/Entrance/Information/Informance.js
rename to src/Pages/Entrance/Information/Informance/Informance.js
index 346e1b9..0d8fea6 100644
--- a/src/Pages/Entrance/Information/Informance.js
+++ b/src/Pages/Entrance/Information/Informance/Informance.js
@@ -11,13 +11,13 @@ const Container = styled.div`
width: 100%;
.imgBox {
position: absolute;
- height: 408px;
+ height: 100%;
top: 0;
border-right: 2px solid #fce7e0;
.img {
max-width: 100%;
height: 100%;
- object-fit: cover;
+ object-fit: contain;
object-position: left;
}
}
diff --git a/src/Pages/Entrance/Information/Notice.js b/src/Pages/Entrance/Information/Informance/Notice.js
similarity index 99%
rename from src/Pages/Entrance/Information/Notice.js
rename to src/Pages/Entrance/Information/Informance/Notice.js
index 38a5ed3..bb26090 100644
--- a/src/Pages/Entrance/Information/Notice.js
+++ b/src/Pages/Entrance/Information/Informance/Notice.js
@@ -13,6 +13,7 @@ const Container = styled.div`
justify-content: center;
align-items: center;
overflow: hidden;
+ z-index: 900;
.notice {
width: 100%;
position: relative;
diff --git a/src/Pages/Entrance/Information/Open.js b/src/Pages/Entrance/Information/Informance/Open.js
similarity index 100%
rename from src/Pages/Entrance/Information/Open.js
rename to src/Pages/Entrance/Information/Informance/Open.js
diff --git a/src/Pages/Entrance/Information/RentalService.js b/src/Pages/Entrance/Information/Informance/RentalService.js
similarity index 100%
rename from src/Pages/Entrance/Information/RentalService.js
rename to src/Pages/Entrance/Information/Informance/RentalService.js
diff --git a/src/Pages/Entrance/Information/Traffic.js b/src/Pages/Entrance/Information/Informance/Traffic.js
similarity index 99%
rename from src/Pages/Entrance/Information/Traffic.js
rename to src/Pages/Entrance/Information/Informance/Traffic.js
index 802ba43..781e1ab 100644
--- a/src/Pages/Entrance/Information/Traffic.js
+++ b/src/Pages/Entrance/Information/Informance/Traffic.js
@@ -90,7 +90,6 @@ export default function Traffic() {
請搭乘板南線，在市政府站下車，再轉乘綠 1、棕 18 或棕 21 公車
-
公車
diff --git a/src/Pages/Entrance/Information/Traffic/ParkingStatus.js b/src/Pages/Entrance/Information/Traffic/ParkingStatus.js
new file mode 100644
index 0000000..e2208fe
--- /dev/null
+++ b/src/Pages/Entrance/Information/Traffic/ParkingStatus.js
@@ -0,0 +1,87 @@
+import React from "react";
+import styled from "styled-components";
+
+const InfoDiv = styled.div`
+ box-sizing: border-box;
+ padding: 20px 20px;
+ max-width: 300px;
+ max-height: 700px;
+ overflow-y: scroll;
+ background-color: #fff;
+ opacity: 0.8;
+ border-radius: 25px;
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ z-index: 500;
+ white-space: pre-wrap;
+ .highLight {
+ color: #ea7a60;
+ }
+ @media (max-width: 1024px) {
+ display: none;
+ }
+`;
+
+export default function ParkingStatus(props) {
+ const { parkId, status, parkName, parks, parkStatus } = props;
+ if (!parkId) {
+ return
+
+ 開放時間：{nam.serviceTime} +
+
+ 收費方式：{nam.payex} +
+
+ + ) : null + )} +
+ ) : null
+ )}
+ {parkName}
+
+ {parks.map((nam) =>
+ nam.id === parkId ? (
+ <>
+ 總停車位數：{nam.totalcar}
+
+
+ ) : null
+ )}
+ 剩餘停車位：{item.availablecar}
+
+
+ {parks.map((nam) =>
+ nam.id === parkId ? (
+ <>
+ 總機車停車位數：{nam.totalmotor}
+
+
+ ) : null
+ )}
+ {item.availablemotor === -9 ? (
+
+ 剩餘機車位：目前暫無提供機車停車位資訊
+
+ ) : (
+
+ 剩餘機車位：{item.availablemotor}
+
+ )}
+
+ 開放時間：{nam.serviceTime} +
+
+ 收費方式：{nam.payex} +
+
+ + ) : null + )} +
資料更新時間：{parkStatus.UPDATETIME}
+
+
+ 開放時間：{nam.serviceTime} +
+
+ 收費方式：{nam.payex} +
+
+ + ) : null + )} +
+ ) : null
+ )}
+ {parkName}
+
+ {parks.map((nam) =>
+ nam.id === parkId ? (
+ <>
+ 總停車位數：{nam.totalcar}
+
+
+ ) : null
+ )}
+ 剩餘停車位：{item.availablecar}
+
+
+ {parks.map((nam) =>
+ nam.id === parkId ? (
+ <>
+ 總機車停車位數：{nam.totalmotor}
+
+
+ ) : null
+ )}
+ {item.availablemotor === -9 ? (
+
+ 剩餘機車位：目前暫無提供機車停車位資訊
+
+ ) : (
+
+ 剩餘機車位：{item.availablemotor}
+
+ )}
+
+ 開放時間：{nam.serviceTime} +
+
+ 收費方式：{nam.payex} +
+
+ + ) : null + )} +
資料更新時間：{parkStatus.UPDATETIME}
+
+
+ 停車資訊
+ 周邊停車資訊
+ 河川地停車場
+ 動物園站地下停車場
+ 捷運木柵機廠停車場
+ 木柵站轉乘停車場
+ 點擊地圖中停車場的位置，查看停車位資訊。
+
+
+ {
+ setParkId(item.id);
+ setParkName(item.name);
+ if (isRowBased) {
+ setOpen(true);
+ }
+ },
+ }}
+ key={item.id}
+ position={item.EntrancecoordInfo}
+ icon={
+ new L.Icon({
+ iconUrl: require(`../../../../Icons/park.svg`).default,
+ iconSize: [40, 40],
+ iconAnchor: [20, 20],
+ })
+ }
+ >
+ ))}
+
+
+
-
- 開放時間：{nam.serviceTime} -
-
- 收費方式：{nam.payex} -
-
- - ) : null - )} -
- ) : null
- )}
- {parkName}
-
- {parks.map((nam) =>
- nam.id === parkId ? (
- <>
- 總停車位數：{nam.totalcar}
-
-
- ) : null
- )}
- 剩餘停車位：{item.availablecar}
-
-
- {parks.map((nam) =>
- nam.id === parkId ? (
- <>
- 總機車停車位數：{nam.totalmotor}
-
-
- ) : null
- )}
- {item.availablemotor === -9 ? (
- <>剩餘機車位：目前暫無提供機車停車位資訊
- ) : (
- <>剩餘機車位：{item.availablemotor}
- )}
-
- 開放時間：{nam.serviceTime} -
-
- 收費方式：{nam.payex} -
-
- - ) : null - )} -
資料更新時間：{parkStatus.UPDATETIME}
-
-
- ) : null
- )}
- {parkName}
-
- {parks.map((nam) =>
- nam.id === parkId ? (
- <>
- 總停車位數：
- {nam.totalcar}
-
-
- ) : null
- )}{" "}
- 剩餘停車位：{" "}
- {item.availablecar}
-
-
- {parks.map((nam) =>
- nam.id === parkId ? (
- <>
- 總機車停車位數：
- {nam.totalmotor}
-
-
- ) : null
- )}
- {item.availablemotor === -9 ? (
- <>
- 剩餘機車位：
-
- 目前暫無提供機車停車位資訊
-
-
- ) : (
- <>
- 剩餘機車位：
- {item.availablemotor}
-
- )}
-
- 設有無障礙停車位：{nam.Handicap_First}個
-
- 開放時間：{nam.serviceTime}
-
-
- 收費方式：{nam.payex}
-
-
-
- 資料更新時間：{parkStatus.UPDATETIME} -
-
-
- 停車資訊
- 周邊停車資訊
- 河川地停車場
- 動物園站地下停車場
- 捷運木柵機廠停車場
- 木柵站轉乘停車場
- 點擊地圖中停車場的位置，查看停車位資訊。
-
-
- {
- setParkId(item.id);
- setParkName(item.name);
- if (isRowBased) {
- setOpen(true);
- }
- },
- }}
- key={item.id}
- position={item.EntrancecoordInfo}
- icon={
- new L.Icon({
- iconUrl: require(`../../Icons/park.svg`).default,
- iconSize: [40, 40],
- iconAnchor: [20, 20],
- })
- }
- >
- ))}
-
-
- 用關鍵字來搜尋想造訪的動物吧！
-
+ {/*
-
+
{item.Feature}
{item.Crisis}
+ 收藏成功！可至
+
+ 路線規劃頁面
+
+ 查看
+
+ ));
+ } else {
+ Toast.alertMes("請先登入會員呦");
+ }
+ };
+ const handleRemoveFavorite = (name) => {
+ let index = favoritiesMember.indexOf(name);
+ let favorities = [...favoritiesMember];
+ favorities.splice(index, 1);
+ setFavoritiesMember(favorities);
+ firestore.firebaseAddFavoriate(uid, favorities);
+ Toast.remove("已移除造訪點");
+ };
+ const handleAddVisited = (name) => {
+ if (uid) {
+ let visiteds = [...visitedMember];
+ visiteds.push(name);
+ setVisitedMember(visiteds);
+ firestore.firebaseAddVisited(uid, visiteds);
+ Toast.success(({ closeToast }) => (
+
+ 加入成功！可至
+
+ 我的足跡
+
+ 查看
+
+ ));
+ } else {
+ Toast.alertMes("請先登入會員呦");
+ }
+ };
+ const handleRemoveVisited = (name) => {
+ let index = visitedMember.indexOf(name);
+ let visiteds = [...visitedMember];
+ visiteds.splice(index, 1);
+ setVisitedMember(visiteds);
+ firestore.firebaseAddVisited(uid, visitedMember);
+ Toast.remove("已抹除足跡");
+ };
+
+ useEffect(() => {
+ if (uid) {
+ firestore.firebaseGetMemberData(uid).then((data) => {
+ console.log(data);
+ setFavoritiesMember(data.favorities);
+ setVisitedMember(data.isVisited);
+ });
+ }
+ }, [uid]);
+
+ return (
+
+ {item.Name_Ch}
+ {item.Name_En}
+
+
+
+
{
+ handleAddFavorite(item.Name_Ch);
+ }}
+ />
+ {favoritiesMember
+ ? favoritiesMember.map((name) =>
+ name === popupAnimal ? (
+
{
+ e.target.style.backgroundImage =
+ "url(/Icons/like-02.svg)";
+ handleRemoveFavorite(item.Name_Ch);
+ }}
+ />
+ ) : null
+ )
+ : null}
+
+
加入收藏
+
+ {
+ handleAddVisited(item.Name_Ch);
+ }}
+ />
+ {visitedMember
+ ? visitedMember.map((name) =>
+ name === popupAnimal ? (
+
+
+ {props.showAnimals.map((item) =>
+ item.Name_Ch === popupAnimal ? (
+ <>
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/Pages/All/AllAniamls/Filter.js b/src/Pages/ShowAllAnimals/AllAniamls/Filter.js
similarity index 88%
rename from src/Pages/All/AllAniamls/Filter.js
rename to src/Pages/ShowAllAnimals/AllAniamls/Filter.js
index 4fe796f..0cfd95e 100644
--- a/src/Pages/All/AllAniamls/Filter.js
+++ b/src/Pages/ShowAllAnimals/AllAniamls/Filter.js
@@ -1,8 +1,8 @@
import React, { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import * as action from "../../../Redux/Action";
+import * as FilterAnimals from "../../../Utils/FilterAnimals";
import Select, { components } from "react-select";
-
import styled from "styled-components";
import AnimalsJson from "../../../Utils/animals.json";
@@ -203,36 +203,28 @@ const FilterContainer = styled.div`
}
}
`;
-
export default function Filter() {
- const disPatch = useDispatch();
+ const dispatch = useDispatch();
const [selectPlace, setSelectPlace] = useState("動物園裡");
const [Input, setInput] = useState("請輸入關鍵字...");
- const option = [];
const { Option } = components;
- let showAnimals = [];
-
- const set = new Set();
- const place = AnimalsJson.filter((item) =>
- !set.has(item.Location) ? set.add(item.Location) : false
- ).map((item) => item.Location);
const handleChange = (value) => {
setSelectPlace(value.value);
let recom = AnimalsJson.filter((item) => item.Location === value.value);
if (value.value !== "動物園裡") {
setInput(`也許你想認識：${recom[0].Name_Ch}`);
- disPatch(action.addFilterPlace(value.value));
- disPatch(action.addFilterSearch(""));
+ dispatch(action.addFilterPlace(value.value));
+ dispatch(action.addFilterSearch(""));
} else {
setInput("請輸入關鍵字...");
- disPatch(action.addFilterPlace(""));
- disPatch(action.addFilterSearch(""));
+ dispatch(action.addFilterPlace(""));
+ dispatch(action.addFilterSearch(""));
}
};
const handleInputChange = (value) => {
- disPatch(action.addFilterSearch(value.value));
+ dispatch(action.addFilterSearch(value.value));
setInput(value.value);
};
@@ -245,30 +237,11 @@ export default function Filter() {
};
useEffect(() => {
- disPatch(action.addFilterPlace(""));
- }, []);
+ dispatch(action.addFilterPlace(""));
+ }, [dispatch]);
- place.forEach((item) => {
- let arr5 = [];
- AnimalsJson.forEach((animal) => {
- if (item === animal.Location) {
- arr5.push(animal.Name_Ch);
- }
- });
- option.push({ value: item, label: item, num: arr5.length });
- });
- option.push({ value: "動物園裡", label: "全部動物", num: 270 });
-
- if (selectPlace !== "動物園裡") {
- let arr = AnimalsJson.filter((item) =>
- item.Location.includes(selectPlace)
- ).map((item) => item.Name_Ch);
- arr.forEach((item) => showAnimals.push({ value: item, label: item }));
- } else {
- AnimalsJson.forEach((item) =>
- showAnimals.push({ value: item.Name_Ch, label: item.Name_Ch })
- );
- }
+ const option = FilterAnimals.getAllLabel();
+ const showAnimals = FilterAnimals.filterAnimalsOfPlace(selectPlace);
const spanOption = (props) => (
{
+ e.target.style.backgroundImage =
+ "url(/Icons/like-02.svg)";
+ handleRemoveVisited(item.Name_Ch);
+ }}
+ />
+ ) : null
+ )
+ : null}
+
+
+ );
+}
diff --git a/src/Pages/ShowAllAnimals/AllAniamls/DetailsPopup.js b/src/Pages/ShowAllAnimals/AllAniamls/DetailsPopup.js
new file mode 100644
index 0000000..27b9361
--- /dev/null
+++ b/src/Pages/ShowAllAnimals/AllAniamls/DetailsPopup.js
@@ -0,0 +1,95 @@
+import React from "react";
+import { useSelector, useDispatch } from "react-redux";
+import ClickBar from "./ClickBar";
+import * as action from "../../../Redux/Action";
+import { ToastContainer } from "react-toastify";
+import CarouselDiv from "./Carousel";
+import Popup from "reactjs-popup";
+import { Container } from "./Popup-style";
+import "reactjs-popup/dist/index.css";
+
+export default function DetailsPopup(props) {
+ const { open } = useSelector((state) => state.FilterAnimals);
+ const isRowBased = window.matchMedia("(max-width: 800px)");
+ const uid = props.uid;
+ const popupAnimal = props.popupAnimal;
+ const disPatch = useDispatch();
+ const closeModal = () => disPatch(action.setClose());
+
+ return (
+ 探索足跡
+
+
+
+
+
+
+
+
+
+ {item.Name_Ch}
+ {item.Name_En}
+
+
+ {item.Location}
+
+
+ {item.Class}
+ {item.Order}
+ {item.Family}
+
+
+ 保育分級：{item.Conservation}
+ {item.Taiwan && (
+ {`(${item.Taiwan})`}
+ )}
+
+
+
+