From 5bdd57cba56c4808c0d8ce16590ce1b72e4f18d7 Mon Sep 17 00:00:00 2001 From: Rajay Preddie Date: Wed, 26 Jan 2022 23:26:24 -0600 Subject: [PATCH 1/5] Animal-cleaned up header toolbar, added --- package-lock.json | 17 ++ package.json | 1 + src/pages/AnimalDashboard.css | 14 ++ src/pages/AnimalDashboard.tsx | 377 ++++++++++++++++++---------------- 4 files changed, 234 insertions(+), 175 deletions(-) diff --git a/package-lock.json b/package-lock.json index 971a0b1..520fafe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -63,6 +63,7 @@ "react-dom": "^17.0.2", "react-leaflet": ">=3.1.0 <3.2.0 || ^3.2.1", "react-leaflet-drift-marker": "^3.0.0", + "react-moment": "^1.1.1", "react-native": "^0.64.1", "react-native-openalpr": "^2.2.0", "react-router": "^5.2.0", @@ -21588,6 +21589,16 @@ "react-leaflet": "3.x" } }, + "node_modules/react-moment": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-1.1.1.tgz", + "integrity": "sha512-WjwvxBSnmLMRcU33do0KixDB+9vP3e84eCse+rd+HNklAMNWyRgZTDEQlay/qK6lcXFPRuEIASJTpEt6pyK7Ww==", + "peerDependencies": { + "moment": "^2.29.0", + "prop-types": "^15.7.0", + "react": "^16.0 || ^17.0.0" + } + }, "node_modules/react-native": { "version": "0.64.2", "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.64.2.tgz", @@ -44406,6 +44417,12 @@ "leaflet-drift-marker": "^2.0.0" } }, + "react-moment": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-1.1.1.tgz", + "integrity": "sha512-WjwvxBSnmLMRcU33do0KixDB+9vP3e84eCse+rd+HNklAMNWyRgZTDEQlay/qK6lcXFPRuEIASJTpEt6pyK7Ww==", + "requires": {} + }, "react-native": { "version": "0.64.2", "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.64.2.tgz", diff --git a/package.json b/package.json index 2f68607..a91d75f 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "react-dom": "^17.0.2", "react-leaflet": ">=3.1.0 <3.2.0 || ^3.2.1", "react-leaflet-drift-marker": "^3.0.0", + "react-moment": "^1.1.1", "react-native": "^0.64.1", "react-native-openalpr": "^2.2.0", "react-router": "^5.2.0", diff --git a/src/pages/AnimalDashboard.css b/src/pages/AnimalDashboard.css index 5fdc101..d6786d4 100644 --- a/src/pages/AnimalDashboard.css +++ b/src/pages/AnimalDashboard.css @@ -13,13 +13,24 @@ border: 0 !important; box-shadow: none!important; width: 800px; + text-transform: none; } .calendarIcon { color: black; font-size: 64px; } + + .mapIcon { + color: #D8AB4C; + font-size: 15px; + position: absolute; + } + .animalCard { + color: #FFE162; + + } ion-toolbar.ion-padding { --background: white; height: 50px; @@ -44,6 +55,9 @@ .reportLostPet { position: relative; width: 300px; + font-size: 20px; + text-transform: none; + color:crimson } .bottomItems { diff --git a/src/pages/AnimalDashboard.tsx b/src/pages/AnimalDashboard.tsx index 8f0c25b..ff9f983 100644 --- a/src/pages/AnimalDashboard.tsx +++ b/src/pages/AnimalDashboard.tsx @@ -26,32 +26,33 @@ import { IonInfiniteScrollContent, useIonViewWillEnter } from "@ionic/react"; -import React, {useState} from "react"; +import React, { useState } from "react"; import "./AnimalDashboard.css"; import TopMenu from './../components/TopMenu'; +import moment from "moment"; /* GraphQL for API Calls */ -import {gql, NetworkStatus, useQuery} from "@apollo/client"; +import { gql, NetworkStatus, useQuery } from "@apollo/client"; // icons -import {cloudUploadOutline, calendar} from "ionicons/icons"; -import {MapContainer, Marker, Popup, TileLayer} from "react-leaflet"; +import { cloudUploadOutline, calendar, paw, locate, map, navigate } from "ionicons/icons"; +import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet"; -const AnimalDashboard : React.FC = () => { +const AnimalDashboard: React.FC = () => { const [selectedStartDate, - setSelectedStartDate] = useState < string > ("2021-06-01T13:47:20.789"); + setSelectedStartDate] = useState("2021-06-01T13:47:20.789"); const [selectedEndDate, - setSelectedEndDate] = useState < string > ("2021-06-01T13:47:20.789"); + setSelectedEndDate] = useState("2021-06-01T13:47:20.789"); // for USER input on dropdown menus const [pastTime, - setPastTime] = useState < string > (""); + setPastTime] = useState(""); // for the date and time selection const [advancedDate, - setAdvancedDate] = useState < boolean > (false); + setAdvancedDate] = useState(false); const [type, - setType] = useState < string > (""); + setType] = useState(""); const [present] = useIonPicker(); const [value, @@ -155,7 +156,7 @@ const AnimalDashboard : React.FC = () => { console.log(quickTimePicker); } - const ANIMAL_POST_QUERY = gql ` + const ANIMAL_POST_QUERY = gql` query Animals { animals { _id @@ -174,39 +175,39 @@ const AnimalDashboard : React.FC = () => { } `; - const {loading, data, error, refetch, networkStatus} = useQuery(ANIMAL_POST_QUERY, { + const { loading, data, error, refetch, networkStatus } = useQuery(ANIMAL_POST_QUERY, { fetchPolicy: "no-cache", notifyOnNetworkStatusChange: true }); - if (networkStatus == NetworkStatus.refetch) + if (networkStatus == NetworkStatus.refetch) console.log("refetching!"); - if (loading) + if (loading) console.log("loading"); - if (error) + if (error) console.log("error: " + error.networkError); - + // for the map const [animalLat, - setAnimalLat] = useState < number > (0); + setAnimalLat] = useState(0); const [animalLon, - setAnimalLon] = useState < number > (0); + setAnimalLon] = useState(0); - const animalOnMap = (latitude : number, longitude : number) => { + const animalOnMap = (latitude: number, longitude: number) => { setAnimalLat(latitude); setAnimalLon(longitude); console.log(animalLat, ", ", animalLon); }; - + const [openMap, setOpenMap] = useState(false); // for number of animals being shown const [numCard, - setNumCard] = useState (data - ?.animals + setNumCard] = useState(data + ?.animals ?.length); // for getting live geolocation interface LocationError { - showError : boolean; + showError: boolean; message?: string; } @@ -217,25 +218,32 @@ const AnimalDashboard : React.FC = () => { // type User = typeof initUser; // const initUser = {name: 'Jon'} //... - // const [user, setUser] = useState(initUser); + // const [user, setUser] = useState(initUser); + + + // TODO: implement the search functin + // TODO: get the date picker to function + // TODO: screen size fitting using css and adjust colors a bit + // TODO: dark mode + // TODO: create data structure to store the animal card information + // TODO: clean up the code + // TODO: apply changes to the other web pages - // TODO: implement the search functin - // TODO: get the date picker to function - // TODO: screen size fitting using css and adjust colors a bit - // TODO: dark mode - // TODO: create data structure to store the animal card information - // TODO: clean up the code - // TODO: apply changes to the other web pages - + + // cardData and isInifiniteDisabled pertain to the infinite scroll + // a dictionary needs to be setup for storing the animal data attributes to push onto the data set + const [animalSearch, setAnimalSearch] = useState(''); + + const formatSearch = (input: string) => { + setAnimalSearch(input.toLowerCase()) + } + - // cardData and isInifiniteDisabled pertain to the infinite scroll - // a dictionary needs to be setup for storing the animal data attributes to push onto the data set - const [cardData, - setData] = useState < string[] > ([]); + setData] = useState([]); const [isInfiniteDisabled, setInfiniteDisabled] = useState(false); @@ -252,7 +260,7 @@ const AnimalDashboard : React.FC = () => { ...newData ]); } - const loadData = (animal : any) => { + const loadData = (animal: any) => { setTimeout(() => { pushData(); console.log('Loaded data'); @@ -269,8 +277,8 @@ const AnimalDashboard : React.FC = () => { return ( - - + + {/* generalized date string formats! */} {/* { @@ -303,105 +311,93 @@ const AnimalDashboard : React.FC = () => { {/* */} {/* Animal Dashboard */} - {animalLat != 0 && animalLon != 0 && ( - - - - Animal Location - - - )} - + -
- - - - - - - - - -
Report Lost Pet
- - - present([ - { - - name: 'number', - options: [ +
+ + + + + + + + + + + + Report Lost Pet + + + + + + present([ { - text: 'One', - value: 1 - }, { - text: 'Two', - value: 2, + + name: 'number', + options: [ + { + text: 'One', + value: 1 + }, { + text: 'Two', + value: 2, + }, { + text: 'Three', + value: 3 + }, + { + text: 'Four', + value: 4 + } + ] }, { - text: 'Three', - value: 3 - }, - { - text: 'Four', - value: 4 + name: 'time', + options: [ + { + text: 'Day(s)', + value: 'day' + }, { + text: 'Week(s)', + value: 'week' + }, { + text: 'Month(s)', + value: 'month' + }, + { + text: 'Year(s)', + value: 'year' + + } + + ] } - ] - }, { - name: 'time', - options: [ - { - text: 'Day(s)', - value: 'day' - }, { - text: 'Week(s)', - value: 'week' - }, { - text: 'Month(s)', - value: 'month' - }, + ], [ { - text: 'Year(s)', - value: 'year' - + text: 'Confirm', + handler: (selected) => { + setValue(`${selected.number.value}, ${selected.time.value}`) + } } - - ] - } - ], [ - { - text: 'Confirm', - handler: (selected) => { - setValue(`${selected.number.value}, ${selected.time.value}`) - } - } - ])}> - - - - - - - {/* {advancedDate && ( + ])}> + + + + + + + {/* {advancedDate && (
@@ -443,59 +439,90 @@ const AnimalDashboard : React.FC = () => {
)} */} - + - +
- - + + - One item + {!loading && data - ?.animals + ?.animals ?.slice(0, numCard) - .reverse() - .map((animal : any) => ( -
- - {type.length === 0 && ( - - animalOnMap(animal.location.lat, animal.location.lon)}> - {animal.files !== undefined && animal.files.length !== 0 && ( - // eslint-disable-next-line jsx-a11y/alt-text - ( + +
+ + {type.length === 0 && ( + + + {animal.files !== undefined && animal.files.length !== 0 && ( + // eslint-disable-next-line jsx-a11y/alt-text + - )} - - Animal Information -
Type: {animal.type}
-
Breed: {animal.breed}
-
Color: {animal.color}
-
Location: {animal.neighborhood}
-
- Date:{" "} {new Date(animal.createdAt) - .toString() - .substr(0, new Date(animal.createdAt).toString().indexOf("GMT")) + "(CDT)"}{" "} -
- - - - )} -
- ))} + src={"https://nsf-scc1.isis.vanderbilt.edu/file/animal/" + animal._id + "/" + animal.files[0] + } > + )} + + +
Animal: {animal.color} {" "} {animal.breed}`
+ +
Location: {animal.neighborhood} + { + setOpenMap(true); + animalOnMap(animal.location.lat, animal.location.lon)}} + + > + + + {animalLat !== 0 && animalLon !== 0 && ( + + + + Animal Location: + + + )} + + + +
+ +
+ Time Reported:{" "} {moment(new Date(animal.createdAt) + .toString() + .substr(0, new Date(animal.createdAt).toString().indexOf("GMT"))).format("ddd MMM YYYY h:mm:ss a") + " (CDT)"}{" "} +
+ + + + )} +
+ ))} - + { ); - - + + }; export default AnimalDashboard From a5a0e84a3d72bcf83ad3096f6f4226bbd1ee58a0 Mon Sep 17 00:00:00 2001 From: Kevin Jin Date: Thu, 27 Jan 2022 12:27:16 -0600 Subject: [PATCH 2/5] Updated card and map styling --- src/pages/AnimalDashboard.css | 31 +++++++++++++++++- src/pages/AnimalDashboard.tsx | 62 ++++++++++++++++++----------------- src/theme/variables.css | 13 +++++++- 3 files changed, 74 insertions(+), 32 deletions(-) diff --git a/src/pages/AnimalDashboard.css b/src/pages/AnimalDashboard.css index d6786d4..712ae48 100644 --- a/src/pages/AnimalDashboard.css +++ b/src/pages/AnimalDashboard.css @@ -74,4 +74,33 @@ display: flex !important; align-items: center !important; flex-flow: column; - } \ No newline at end of file + } + + .mapButton { + position: absolute; + top: 8px; + right: 10px; + margin-bottom: 10px; + width: max-content center; + justify-content: flex-end; + display: flex !important; + align-items: center !important; + flex-flow: column; + } +/* + .mapButtonCircle { + background-color: #D8AB4C; + border-radius: 50%; + } */ + + /* .mapContainer { + position: absolute; + top: 0px; + width: 400px; + height: 100%; + z-index: -1; + } */ + + /* .contact-popover .popover-content{ width: 700px; } */ + + \ No newline at end of file diff --git a/src/pages/AnimalDashboard.tsx b/src/pages/AnimalDashboard.tsx index ff9f983..8a5ed42 100644 --- a/src/pages/AnimalDashboard.tsx +++ b/src/pages/AnimalDashboard.tsx @@ -35,8 +35,9 @@ import moment from "moment"; import { gql, NetworkStatus, useQuery } from "@apollo/client"; // icons -import { cloudUploadOutline, calendar, paw, locate, map, navigate } from "ionicons/icons"; +import { cloudUploadOutline, calendar, paw, locate, map, navigateCircleOutline } from "ionicons/icons"; import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet"; +import { getByDisplayValue } from "@testing-library/react"; const AnimalDashboard: React.FC = () => { const [selectedStartDate, @@ -475,53 +476,54 @@ const AnimalDashboard: React.FC = () => { )} -
Animal: {animal.color} {" "} {animal.breed}`
+
Animal: {animal.color} {" "} {animal.breed}`
-
Location: {animal.neighborhood} - { +
Location: {animal.neighborhood} + { setOpenMap(true); animalOnMap(animal.location.lat, animal.location.lon)}} - > - - - {animalLat !== 0 && animalLon !== 0 && ( - - - - Animal Location: - - - )} - - + >
- Time Reported:{" "} {moment(new Date(animal.createdAt) + Time Reported:{" "} {moment(new Date(animal.createdAt) .toString() .substr(0, new Date(animal.createdAt).toString().indexOf("GMT"))).format("ddd MMM YYYY h:mm:ss a") + " (CDT)"}{" "} +
)} + ))} - + + setOpenMap(false)} > +{/*
+Hello +
*/} + {animalLat !== 0 && animalLon !== 0 && ( + + + + Animal Location: + + + )} + + Date: Thu, 27 Jan 2022 19:31:01 -0600 Subject: [PATCH 3/5] Delete -1 --- -1 | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 -1 diff --git a/-1 b/-1 deleted file mode 100644 index e69de29..0000000 From 93550e136da0702c44642d920ec4bcb81f785c88 Mon Sep 17 00:00:00 2001 From: Kevin Jin <62975903+kevjin02@users.noreply.github.com> Date: Thu, 27 Jan 2022 19:31:09 -0600 Subject: [PATCH 4/5] Delete { --- { | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 { diff --git a/{ b/{ deleted file mode 100644 index e69de29..0000000 From 9c9fcabe66151ba27d915b2ce56a74802a2ae1d1 Mon Sep 17 00:00:00 2001 From: Kevin Jin Date: Fri, 28 Jan 2022 11:03:55 -0600 Subject: [PATCH 5/5] Improved search bar and added search function --- src/pages/AnimalDashboard.css | 13 +++++++----- src/pages/AnimalDashboard.tsx | 38 ++++++++++++++++++++++------------- 2 files changed, 32 insertions(+), 19 deletions(-) diff --git a/src/pages/AnimalDashboard.css b/src/pages/AnimalDashboard.css index 712ae48..99b69ff 100644 --- a/src/pages/AnimalDashboard.css +++ b/src/pages/AnimalDashboard.css @@ -10,9 +10,14 @@ } .searchbar-input { - border: 0 !important; + /* border: 0 !important; */ box-shadow: none!important; - width: 800px; + width: 40vw; + max-width: 800px; + min-width: 300px; + text-align: left; + height: 100%; + text-transform: none; } @@ -33,9 +38,7 @@ } ion-toolbar.ion-padding { --background: white; - height: 50px; - box-shadow: none !important; - margin-bottom: 20px + padding-bottom: 0px !important; } /* plate selection stuff */ diff --git a/src/pages/AnimalDashboard.tsx b/src/pages/AnimalDashboard.tsx index 8a5ed42..209db9a 100644 --- a/src/pages/AnimalDashboard.tsx +++ b/src/pages/AnimalDashboard.tsx @@ -26,7 +26,7 @@ import { IonInfiniteScrollContent, useIonViewWillEnter } from "@ionic/react"; -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import "./AnimalDashboard.css"; import TopMenu from './../components/TopMenu'; import moment from "moment"; @@ -176,11 +176,20 @@ const AnimalDashboard: React.FC = () => { } `; + const { loading, data, error, refetch, networkStatus } = useQuery(ANIMAL_POST_QUERY, { fetchPolicy: "no-cache", notifyOnNetworkStatusChange: true }); + const [search, setSearch] = useState(data); + + useEffect(() => { + if(!error && !loading) { + setSearch(data); + } +}, [data, error, loading]); + if (networkStatus == NetworkStatus.refetch) console.log("refetching!"); if (loading) @@ -212,6 +221,15 @@ const AnimalDashboard: React.FC = () => { message?: string; } + const onSearchChange= (e: any) => { + const value = e.target.value.toLowerCase(); + var temp = data.animals; + var result = temp.filter(function(animal: { breed: string; type: string; color: string; }) { + return animal.breed.toLowerCase().includes(value) || animal.type.toLowerCase().includes(value) || animal.color.toLowerCase().includes(value); + }) + setSearch({animals: result}); + }; + //TODO: Animal Dashboard Title needs to be centered //TODO: prepare collection of data for infinite scroll // can create a dictionary for the animal data @@ -235,11 +253,6 @@ const AnimalDashboard: React.FC = () => { // cardData and isInifiniteDisabled pertain to the infinite scroll // a dictionary needs to be setup for storing the animal data attributes to push onto the data set - const [animalSearch, setAnimalSearch] = useState(''); - - const formatSearch = (input: string) => { - setAnimalSearch(input.toLowerCase()) - } @@ -313,22 +326,20 @@ const AnimalDashboard: React.FC = () => { {/* Animal Dashboard */} - -
+ - + onIonChange={onSearchChange} + > - { -
- {!loading && data + {!loading && search ?.animals ?.slice(0, numCard) .reverse()