mirror of
https://github.com/BZmHackTeam/BezpiecznaZywnosc
synced 2024-12-22 14:46:58 +01:00
Basic functionalities
This commit is contained in:
Jakub Cywka
parent
a5618d0301
commit
37146702fb
11 changed files with 130 additions and 48 deletions
|
|
@ -2,7 +2,7 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>Ionic App</title>
|
<title>BezpiecznaZywnosc</title>
|
||||||
|
|
||||||
<base href="/" />
|
<base href="/" />
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
#container {
|
|
||||||
text-align: center;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
#container strong {
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 26px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#container p {
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 22px;
|
|
||||||
color: #8c8c8c;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#container a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
import './ExploreContainer.css';
|
|
||||||
|
|
||||||
interface ContainerProps { }
|
|
||||||
|
|
||||||
const ExploreContainer: React.FC<ContainerProps> = () => {
|
|
||||||
return (
|
|
||||||
<div id="container">
|
|
||||||
<strong>Ready to create an app?</strong>
|
|
||||||
<p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ExploreContainer;
|
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
.search {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding-right: 12px;
|
||||||
|
}
|
||||||
15
src/Nyanlabs.SFood.UI/sfood/src/components/Search/Search.tsx
Normal file
15
src/Nyanlabs.SFood.UI/sfood/src/components/Search/Search.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
import SearchFilter from "./SearchFilter/SearchFilter";
|
||||||
|
import Searchbar from "./Searchbar/Searchbar";
|
||||||
|
|
||||||
|
import styles from "./Search.module.css";
|
||||||
|
|
||||||
|
const Search: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<div className={`${styles.search}`}>
|
||||||
|
<Searchbar />
|
||||||
|
<SearchFilter />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Search;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
.searchfilter {
|
||||||
|
width: 64px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-button.searchfilter {
|
||||||
|
--padding-start: 0px !important;
|
||||||
|
--padding-end: 0px !important;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { IonButton, IonIcon } from "@ionic/react";
|
||||||
|
|
||||||
|
import { ellipsisVerticalOutline } from "ionicons/icons";
|
||||||
|
|
||||||
|
import styles from "./SearchFilter.module.css";
|
||||||
|
|
||||||
|
const SearchFilter: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<IonButton className={styles.searchfilter} size="small" shape="round">
|
||||||
|
<IonIcon icon={ellipsisVerticalOutline} />
|
||||||
|
</IonButton>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SearchFilter;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { IonSearchbar } from "@ionic/react";
|
||||||
|
|
||||||
|
export const Searchbar: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<IonSearchbar placeholder="Wpisz słowo kluczowe" />
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Searchbar;
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
import { IonItem, IonLabel, IonList } from "@ionic/react";
|
||||||
|
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
const WarningsList: React.FC = () => {
|
||||||
|
const [dataset, setDataset] = useState<any[]>([]);
|
||||||
|
const [warningsIds, setWarningsIds] = useState<string[]>([]);
|
||||||
|
const [warningsContent, setWarningsContent] = useState<any[]>([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function getDataset() {
|
||||||
|
const response = await fetch("https://api.dane.gov.pl/1.4/datasets/855/resources?page=1&per_page=20&sort=-data_date&include=institution");
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
setDataset(data.data);
|
||||||
|
console.log(data.data);
|
||||||
|
};
|
||||||
|
|
||||||
|
getDataset();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (dataset !== null && dataset !== undefined) {
|
||||||
|
const datasetLength = (dataset as any).length;
|
||||||
|
|
||||||
|
for (let i = 0; i < datasetLength; i++) {
|
||||||
|
setWarningsIds(previousWarningsIds => [...previousWarningsIds, (dataset as any)[i].id]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [dataset]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (warningsIds.length === 20) {
|
||||||
|
async function getWarningsContent(id: string) {
|
||||||
|
const response = await fetch(`https://api.dane.gov.pl/1.4/resources/${id}/data?page=1&per_page=20`);
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
setWarningsContent(previousWarningsContent => [...previousWarningsContent, data.data[0].attributes]);
|
||||||
|
};
|
||||||
|
|
||||||
|
for (let i = 0; i < warningsIds.length; i++) {
|
||||||
|
getWarningsContent(warningsIds[i]);
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log("First content request");
|
||||||
|
}
|
||||||
|
}, [warningsIds]);
|
||||||
|
|
||||||
|
return warningsContent.length > 0 ? (
|
||||||
|
<>
|
||||||
|
<IonList lines="full">
|
||||||
|
{warningsContent.map((warningContent, key) => (
|
||||||
|
<IonItem key={key}>
|
||||||
|
<IonLabel>
|
||||||
|
{warningContent.col7.val}
|
||||||
|
</IonLabel>
|
||||||
|
</IonItem>
|
||||||
|
))}
|
||||||
|
</IonList>
|
||||||
|
</>
|
||||||
|
) : <></>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WarningsList;
|
||||||
|
|
@ -4,8 +4,4 @@ import App from './App';
|
||||||
|
|
||||||
const container = document.getElementById('root');
|
const container = document.getElementById('root');
|
||||||
const root = createRoot(container!);
|
const root = createRoot(container!);
|
||||||
root.render(
|
root.render(<App />);
|
||||||
<React.StrictMode>
|
|
||||||
<App />
|
|
||||||
</React.StrictMode>
|
|
||||||
);
|
|
||||||
|
|
@ -1,5 +1,8 @@
|
||||||
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
|
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
|
||||||
import ExploreContainer from '../components/ExploreContainer';
|
|
||||||
|
import WarningsList from '../components/WarningsList/WarningsList';
|
||||||
|
import Search from '../components/Search/Search';
|
||||||
|
|
||||||
import './Home.css';
|
import './Home.css';
|
||||||
|
|
||||||
const Home: React.FC = () => {
|
const Home: React.FC = () => {
|
||||||
|
|
@ -7,16 +10,17 @@ const Home: React.FC = () => {
|
||||||
<IonPage>
|
<IonPage>
|
||||||
<IonHeader>
|
<IonHeader>
|
||||||
<IonToolbar>
|
<IonToolbar>
|
||||||
<IonTitle>Blank</IonTitle>
|
<IonTitle>Bezpieczna żywnosc</IonTitle>
|
||||||
</IonToolbar>
|
</IonToolbar>
|
||||||
</IonHeader>
|
</IonHeader>
|
||||||
<IonContent fullscreen>
|
<IonContent fullscreen>
|
||||||
<IonHeader collapse="condense">
|
<IonHeader collapse="condense">
|
||||||
<IonToolbar>
|
<IonToolbar>
|
||||||
<IonTitle size="large">Blank</IonTitle>
|
<IonTitle size="large">Bezpieczna żywnosc</IonTitle>
|
||||||
</IonToolbar>
|
</IonToolbar>
|
||||||
</IonHeader>
|
</IonHeader>
|
||||||
<ExploreContainer />
|
<Search />
|
||||||
|
<WarningsList />
|
||||||
</IonContent>
|
</IonContent>
|
||||||
</IonPage>
|
</IonPage>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue