Skip to content

Commit

Permalink
Merge pull request #69 from Lor3wp/dev
Browse files Browse the repository at this point in the history 
Dev
  • Loading branch information
@ramizwd
ramizwd authored Nov 30, 2023
2 parents f3e35d1 + d8157d9 commit fb9bf02
Show file tree
Hide file tree
Showing 8 changed files with 116 additions and 37 deletions.
6 changes: 6 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"dependencies": {
"bootstrap": "^5.3.2",
"bootstrap-icons": "^1.11.1",
"geolib": "^3.3.4",
"i18next": "^23.7.6",
"i18next-browser-languagedetector": "^7.2.0",
"i18next-http-backend": "^2.4.2",
Expand Down Expand Up @@ -48,4 +49,4 @@
"prettier": "3.0.3",
"vite": "^4.4.5"
}
}
}
2 changes: 2 additions & 0 deletions public/locales/en/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,9 @@
"Varauksen tiedot": "Rent details",
"Palaute": "Feedback",

"Jos haluat nähdä, kuinka kaukana asemat ovat sijainnistasi, ota sijaintilupa käyttöön selaimessasi.": "To view how far the stations are from your location, please enable location permission in your browser.",
"Valitse asemat": "Select stations",
"Valitse kaikki asemat": "Select all stations",
"Tuotevalinta & Päivämäärä": "Product & Date Selection",
"Käyttäjän tiedot": "User information",
"Maksaminen": "Payment",
Expand Down
2 changes: 2 additions & 0 deletions public/locales/fi/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,9 @@
"Varauksen tiedot": "Varauksen tiedot",
"Palaute": "Palaute",

"Jos haluat nähdä, kuinka kaukana asemat ovat sijainnistasi, ota sijaintilupa käyttöön selaimessasi.": "Jos haluat nähdä, kuinka kaukana asemat ovat sijainnistasi, ota sijaintilupa käyttöön selaimessasi.",
"Valitse asemat": "Valitse asemat",
"Valitse kaikki asemat": "Valitse kaikki asemat",
"Tuotevalinta & Päivämäärä": "Tuotevalinta & Päivämäärä",
"Käyttäjän tiedot": "Käyttäjän tiedot",
"Maksaminen": "Maksaminen",
Expand Down
2 changes: 2 additions & 0 deletions public/locales/sv/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,9 @@
"Varauksen tiedot": "Hyresuppgifter",
"Palaute": "Återkoppling",

"Jos haluat nähdä, kuinka kaukana asemat ovat sijainnistasi, ota sijaintilupa käyttöön selaimessasi.": "För att se hur långt stationerna är från din plats, vänligen aktivera platsbehörighet i din webbläsare.",
"Valitse asemat": "Välj stationer",
"Valitse kaikki asemat": "Välj alla stationer",
"Tuotevalinta & Päivämäärä": "Val av produkt och datum",
"Käyttäjän tiedot": "Användarinformation",
"Maksaminen": "Betalning",
Expand Down
116 changes: 82 additions & 34 deletions src/components/StationList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,54 @@ import { useNavigate } from 'react-router';
import { ChevronCompactRight } from 'react-bootstrap-icons';
import { useStepper } from '../hooks/useStepper';
import PopUpWarningModal from './PopUpWarningModal';
import { useState } from 'react';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { getDistance } from 'geolib';

const StationList = ({ onStationSelected, handleWarningModal }) => {
const [showWarningModal, setShowWarningModal] = useState(false);
const [allSelected, setAllSelected] = useState(false);
const [userLocation, setUserLocation] = useState({});
const [distance, setDistance] = useState([]);

const { stationsData, setStationsData } = useStepper();
const { t } = useTranslation();

const navigate = useNavigate();

// getting the user location and updating it every 5 seconds
useEffect(() => {
navigator.geolocation.getCurrentPosition(function (position) {
setUserLocation({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
});
});

const intervalId = setInterval(() => {
navigator.geolocation.getCurrentPosition(function (position) {
setUserLocation({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
});
});
}, 5000);

return () => clearInterval(intervalId);
}, []);

// calculating the distance between user and stations and converting it to km
useEffect(() => {
if (userLocation.latitude && userLocation.longitude) {
stationsData.forEach((location) => {
const distance = (getDistance(userLocation, location) / 1000).toFixed(
2,
);
setDistance((prev) => [...prev, distance]);
});
}
}, [userLocation]);

// handle the button click for selecting a station
const handleSubmit = () => {
if (
Expand Down Expand Up @@ -51,9 +87,7 @@ const StationList = ({ onStationSelected, handleWarningModal }) => {

// handling the checkbox changes for a specific station
const handleCheckbox = (index) => {
if (allSelected) {
return;
}
if (allSelected) return;

const updatedStations = [...stationsData];
updatedStations[index].selected = !updatedStations[index].selected;
Expand All @@ -74,6 +108,13 @@ const StationList = ({ onStationSelected, handleWarningModal }) => {
/>

<div className={styles.listContainer}>
{!distance.length && (
<span className={styles.stationListNote}>
{t(
'Jos haluat nähdä, kuinka kaukana asemat ovat sijainnistasi, ota sijaintilupa käyttöön selaimessasi.',
)}
</span>
)}
<ListGroup variant="flush" className={styles.listElement}>
{stationsData.map((station, index) => (
<ListGroup.Item
Expand All @@ -83,36 +124,43 @@ const StationList = ({ onStationSelected, handleWarningModal }) => {
<div className={styles.listitemContainer}>
<p className={styles.stationName}>{station.stationName}</p>
<div className={styles.rowContainer}>
<svg
xmlns="http://www.w3.org/2000/svg"
className="bi bi-geo-alt-fill"
viewBox="0 0 16 16"
style={{
marginRight: '4px',
width: '17px',
height: '24px',
fill: '#AF3F32',
}}
>
<path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" />
</svg>
<p id={styles.kilometers}>10 km</p>
{station.trailer && (
<img
src={Trailer}
alt="trailer icon"
id={styles.trailer}
draggable={false}
/>
)}
{station.cargoBike && (
<img
src={Bike}
alt="cargo bike icon"
id={styles.cargobike}
draggable={false}
/>
{distance[index] && (
<>
<svg
xmlns="http://www.w3.org/2000/svg"
className="bi bi-geo-alt-fill"
viewBox="0 0 16 16"
style={{
marginRight: '4px',
width: '17px',
height: '24px',
fill: '#AF3F32',
}}
>
<path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" />
</svg>

<p id={styles.kilometers}>{distance[index]} km</p>
</>
)}
<div>
{station.trailer && (
<img
src={Trailer}
alt="trailer icon"
id={styles.trailer}
draggable={false}
/>
)}
{station.cargoBike && (
<img
src={Bike}
alt="cargo bike icon"
id={styles.cargobike}
draggable={false}
/>
)}
</div>
<Checkbox
onChange={() => handleCheckbox(index)}
value="station"
Expand All @@ -127,7 +175,7 @@ const StationList = ({ onStationSelected, handleWarningModal }) => {
))}
</ListGroup>
<dev className={styles.allCheckboxContainer}>
<p>Valitse kaikki asemat</p>
<p>{t('Valitse kaikki asemat')}</p>
<Checkbox
onChange={handleSelectAll}
value="all"
Expand Down
14 changes: 13 additions & 1 deletion src/context/StepperContext.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,41 +12,53 @@ export const StepperProvider = ({ children }) => {
cargoBike: true,
trailer: true,
selected: false,
latitude: 60.32061898389687,
longitude: 24.993732557209405,
},
{
stationName: 'Konala',
timeSlots: ['11-13', '11-14', '12-15', '13-16', '14-17', '15-18'],
cargoBike: false,
trailer: true,
selected: false,
latitude: 60.25360884865695,
longitude: 24.836624427068696,
},
{
stationName: 'Kivikko',
timeSlots: ['12-13', '11-14', '12-15', '13-16', '14-17', '15-18'],
cargoBike: true,
trailer: false,
selected: false,
latitude: 60.23686341263375,
longitude: 25.05107185536083,
},
{
stationName: 'Jorvas',
timeSlots: ['13-14', '11-14', '12-15', '13-16', '14-17', '15-18'],
cargoBike: false,
trailer: true,
selected: false,
latitude: 60.13714913277058,
longitude: 24.523249868537707,
},
{
stationName: 'Ämmässuo',
timeSlots: ['14-15', '11-14', '12-15', '13-16', '14-17', '15-18'],
cargoBike: true,
trailer: true,
selected: false,
latitude: 60.24107750488621,
longitude: 24.540993611186675,
},
{
stationName: 'Koivusuo',
stationName: 'Koivukylä',
timeSlots: ['15-16', '11-14', '12-15', '13-16', '14-17', '15-18'],
cargoBike: true,
trailer: false,
selected: false,
latitude: 60.31712294344029,
longitude: 25.061342971463368,
},
]);
const [selectedProduct, setSelectedProduct] = useState('');
Expand Down
8 changes: 7 additions & 1 deletion src/css/StationList.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,20 @@
#trailer {
margin: 0 4px 0 4px;
height: 24px;
margin: 0 4px 0 4px;
width: 33px;
filter: drop-shadow(3px 2px 3px rgb(0 0 0 / 0.2));
}
#stationCheckbox {
margin-left: auto;
}

.stationListNote {
width: 50%;
color: gray;
font-size: 0.8rem;
font-family: sans-serif;
font-style: italic;
}
.allCheckboxContainer {
display: flex;
justify-content: flex-end;
Expand Down

0 comments on commit fb9bf02

Please sign in to comment.