rushilwiz/wheelshare-frontend
1
0
Fork 0
mirror of https://github.com/myfatemi04/wheelshare-frontend.git synced 2025-04-21 11:20:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

improve event ui again

Browse Source
This commit is contained in:
Michael Fatemi 2021-06-26 21:19:49 -04:00
parent 36b9d47213
commit aa9e7fc5ab
3 changed files with 45 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/index.html
View File

@ -32,6 +32,9 @@
background-color: #e0e0e0;
border-radius: 0.5rem;
}
input:focus {
outline: none !important;
}
</style>
</head>
<body>

112
src/components/NewUI/Event.tsx
View File

@ -3,7 +3,6 @@ import UIButton from './UIButton';
import UIPlacesAutocomplete from './UIPlacesAutocomplete';
import UISecondaryBox from './UISecondaryBox';
import UISecondaryHeader from './UISecondaryHeader';
import UITimeInput from './UITimeInput';
const green = '#60f760';
const lightgrey = '#e0e0e0';
@ -102,11 +101,14 @@ export default function Event({
startTime,
endTime,
}: IEvent) {
const [needRideThere, setNeedRideThere] = useState(false);
const [needRideBack, setNeedRideBack] = useState(false);
const [rideTherePickupPlaceID, setRideTherePickupPlaceID] = useState('');
const [rideBackDropoffPlaceID, setRideBackDropoffPlaceID] = useState('');
const [confirmed, setConfirmed] = useState(false);
const [haveRideThere, setHaveRideThere] = useState(false);
const [haveRideBack, setHaveRideBack] = useState(false);
const [rideTherePickupPlaceID, setRideTherePickupPlaceID] = useState<string>(
null!
);
const [rideBackDropoffPlaceID, setRideBackDropoffPlaceID] = useState<string>(
null!
);
const [interested, setInterested] = useState(false);
return (
@ -126,100 +128,64 @@ export default function Event({
</UIButton>
{interested && (
<>
<UIPlacesAutocomplete
placeholder="Pickup location"
onSelected={(address, placeID) => {
setRideTherePickupPlaceID(placeID);
}}
style={
rideTherePickupPlaceID != null
? { border: '2px solid ' + green }
: {}
}
/>
<UIPlacesAutocomplete
placeholder="Dropoff location"
onSelected={(address, placeID) => {
setRideBackDropoffPlaceID(placeID);
}}
style={
rideBackDropoffPlaceID != null
? { border: '2px solid ' + green }
: {}
}
/>
<div
style={{
display: 'flex',
flexDirection: 'row',
width: '100%',
justifyContent: 'center',
marginTop: '1rem',
}}
>
<UIButton
style={{
backgroundColor: needRideThere ? green : lightgrey,
color: needRideThere ? 'white' : 'black',
backgroundColor: haveRideThere ? green : lightgrey,
color: haveRideThere ? 'white' : 'black',
transition: 'color 0.2s, background-color 0.2s',
marginRight: '0.5em',
}}
onClick={() => {
setNeedRideThere((needRideThere) => !needRideThere);
setHaveRideThere((haveRideThere) => !haveRideThere);
}}
>
I need a ride there
I have a ride there
</UIButton>
<UIButton
style={{
backgroundColor: needRideBack ? green : lightgrey,
color: needRideBack ? 'white' : 'black',
backgroundColor: haveRideBack ? green : lightgrey,
color: haveRideBack ? 'white' : 'black',
transition: 'color 0.2s, background-color 0.2s',
marginLeft: '0.5em',
}}
onClick={() => {
setNeedRideBack((needRideBack) => !needRideBack);
setHaveRideBack((haveRideBack) => !haveRideBack);
}}
>
I need a ride back
I have a ride back
</UIButton>
</div>
{needRideThere && (
<>
<span
style={{
color: '#303030',
textTransform: 'uppercase',
fontWeight: 500,
marginTop: '1em',
}}
>
Ride There
</span>
<UIPlacesAutocomplete
placeholder="Pickup location"
onSelected={(address, placeID) => {
setRideTherePickupPlaceID(placeID);
setConfirmed(false);
}}
/>
<UITimeInput />
</>
)}
{needRideBack && (
<>
<span
style={{
color: '#303030',
textTransform: 'uppercase',
fontWeight: 500,
marginTop: '1em',
}}
>
Ride Back
</span>
<UIPlacesAutocomplete
placeholder="Dropoff location"
onSelected={(address, placeID) => {
setRideBackDropoffPlaceID(placeID);
setConfirmed(false);
}}
/>
<UITimeInput />
</>
)}
{(needRideThere || needRideBack) &&
(rideTherePickupPlaceID || rideBackDropoffPlaceID) && (
<UIButton
style={{
backgroundColor: confirmed ? green : lightgrey,
color: confirmed ? 'white' : 'black',
}}
onClick={() => {
setConfirmed((confirmed) => !confirmed);
}}
>
{confirmed ? 'Confirmed' : 'Confirm'}
</UIButton>
)}
</>
)}
</UISecondaryBox>

3
src/components/NewUI/UIPlacesAutocomplete.tsx
View File

@ -44,10 +44,12 @@ export default function UIPlacesAutocomplete({
onSelected,
placeholder = 'Enter a location',
disabled = false,
style,
}: {
onSelected?: (address: string, placeID: string) => void;
placeholder?: string;
disabled?: boolean;
style?: CSSProperties;
}) {
const [location, setLocation] = useState('');
const suggestionsRef = useRef<readonly Suggestion[]>([]);
@ -89,6 +91,7 @@ export default function UIPlacesAutocomplete({
borderRadius: '0.5em',
border: '0px',
zIndex: 1,
...(style ?? {}),
},
placeholder,
})}