Not much but its something

public/plantinfo.json

@@ -2,7 +2,7 @@
     "id":             "Valkosipuli",
     "type":           "Sipuli",
     "description":    "Sipulilajike joka maistuu hyvältä",
-    "imagefile":      "../Photos/valkosipuli1.jpeg",
+    "imagefile":      "../Photos/valkosipulivk1.jpeg",
     "logfile_output": "/path/to/plant/log/file.log",
     "istutuspv":      "10.10.2019",
 

src/App.css

@@ -13,22 +13,34 @@
   font-size: 40px;
 }
 
-.plants{
-  display:grid;
-  grid-template-columns: 1fr;
-  grid-column-gap: 15px;
-  grid-row-gap: 10px;
+.plants {
+  width: 60%;
+  display: grid;
+  grid-column-gap: 12px;
+  grid-row-gap: 12px;
+  grid-template-columns: 1fr 1fr;
 }
 
-.plant {
+.plant1 {
+  background: rgb(240, 240, 240);
+  text-align: center;
+  border: rgb(0, 0, 0) solid 1px;
+  font-size: 25px;
+}
+
+.plant1 h6{
+  font-size: 25px;
+}
+
+.plant2 {
+  margin-left:10px;
   background: rgb(240, 240, 240);
-  width: 40%;
   text-align: center;
   border: rgb(0, 0, 0) solid 1px;
   font-size: 25px;
 }
 
-.plant h6{
+.plant2 h6{
   font-size: 25px;
 }
 
@@ -49,32 +61,12 @@
   font-size: 35px;
 }
 
-.App-logo {
-  height: 40vmin;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #09d3ac;
-}
-
 .Modaldiv{
   width:30%;
-  margin-top: 100px;
+  margin-top: 50px;
   margin-left: 300px;
   align-content:auto;
   color: white;
-
 }
 
 .modal-wrapper{
@@ -82,16 +74,16 @@
   display:grid;
   grid-column-gap: 12px;
   grid-row-gap: 12px;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
 
 }
 
 .nav-link{
-  font-size: 30px;
+  font-size: 35px;
   align-content: center;
 }
 
 .navbar-brand{
-  font-size: 35px;
+  font-size: 45px;
 
 }

src/Components/Home.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import ModalList from './ModalList';
-//import ModalGrid from './ModalGrid';
-
+//import ModalList from './ModalList';
+import ModalGrid from './ModalGrid';
 
 // TODO fix modallist to display right item
 
@@ -10,7 +9,7 @@ const Home = () => {
         <div>
             <div className="wrapper">
                 <h1 style={{padding:10, fontSize:45}}>Welcome to TinyForest</h1>
-                <ModalList />
+                <ModalGrid />
             </div>
         </div>
     );

src/Components/ModalGrid.js

@@ -5,17 +5,26 @@ import Modalbox3 from './Modalbox3';
 import Modalbox4 from './Modalbox4';
 import Modalbox5 from './Modalbox5';
 import Modalbox6 from './Modalbox6';
-
+import Modalbox7 from './Modalbox7';
+import Modalbox8 from './Modalbox8';
+import Modalbox9 from './Modalbox9';
+import Modalbox10 from './Modalbox10';
+import Modalbox11 from './Modalbox11';
 
 const ModalGrid = () => {
     return (
         <div className="modal-wrapper">
-            <Modalbox1/>
-            <Modalbox2/>
-            <Modalbox3/>
-            <Modalbox4/>
-            <Modalbox5/>
-            <Modalbox6/>
+            <Modalbox1 />
+            <Modalbox2 />
+            <Modalbox3 />
+            <Modalbox4 />
+            <Modalbox5 />
+            <Modalbox6 />
+            <Modalbox9 />
+            <Modalbox10 />
+            <Modalbox11 />
+            <Modalbox7 />
+            <Modalbox8 />
         </div>
     );
 };

src/Components/ModalList.js

@@ -9,12 +9,17 @@ const ModalList = () => {
     const [open, setOpen] = React.useState(false);
 
     const imageList = [
-        { id: "0", url: "../Photos/kolvaus1.jpeg", desc: "Kolvaus kuva" },
+        { id: "0", url: "../Photos/kokous1.jpeg", desc: "Kolvaus kuva" },
         { id: "1", url: "../Photos/rpiMoist.jpeg", desc: "rpi Vesianturi" },
         { id: "2", url: "../Photos/rpiPek.jpeg", desc: "Pekan testit" },
         { id: "3", url: "../Photos/rpiTemp.jpeg", desc: "rpi Lämpöanturi" },
         { id: "4", url: "../Photos/konstaRpi.jpeg", desc: "Konstan testit" },
-        { id: "5", url: "../Photos/kokous1.jpeg", desc: "Kokous kuva" }
+        { id: "5", url: "../Photos/kolvaus1.jpeg", desc: "Kokous kuva 1" },
+        { id: "6", url: "../Photos/kolvaus2.jpg", desc: "Kolvaus kuva 2" },
+        { id: "7", url: "../Photos/kolvaus3.jpg", desc: "Kolvaus kuva 3" },
+        { id: "8", url: "../Photos/kolvaus4.jpg", desc: "Kolvaus kuva 4" },
+        { id: "9", url: "../Photos/valkosipulivk1.jpeg", desc: "Valkosipuli viikko 1" },
+        { id: "10", url: "../Photos/valkosipulivk2.jpg", desc: "Valkosipuli viikko 2" }
     ]
 
     const handleOpen = (e) => {
@@ -39,7 +44,7 @@ const ModalList = () => {
                         onClose={handleClose}
                     >
                         <div  className="Modaldiv">
-                            <img id={index} alt="Broken" src={item.url} width="600" ></img>
+                            <img id={index} alt="Broken" src={item.url} width="400" ></img>
                             <Typography variant="body1">{item.desc}</Typography>
                         </div>
                     </Modal>

src/Components/Modalbox10.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Modal from '@material-ui/core/Modal';
+import '../App.css';
+
+const Modalbox10 = props => {
+
+    const [open, setOpen] = React.useState(false);
+
+    const handleOpen = () => {
+        setOpen(true);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    return (
+        <div>
+            <button type="button" onClick={handleOpen}>
+                <img alt="Broken" src='../Photos/kolvaus3.jpg' width="250"></img>
+            </button>
+            <Modal
+                open={open}
+                onClose={handleClose}
+            >
+                <div className="Modaldiv">
+                    <img alt="Broken" src='../Photos/kolvaus3.jpg' height="500"></img>
+                </div>
+            </Modal>
+        </div>
+    );
+};
+
+
+export default Modalbox10;

src/Components/Modalbox11.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Modal from '@material-ui/core/Modal';
+import '../App.css';
+
+const Modalbox11 = props => {
+
+    const [open, setOpen] = React.useState(false);
+
+    const handleOpen = () => {
+        setOpen(true);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    return (
+        <div>
+            <button type="button" onClick={handleOpen}>
+                <img alt="Broken" src='../Photos/kolvaus4.jpg' width="250"></img>
+            </button>
+            <Modal
+                open={open}
+                onClose={handleClose}
+            >
+                <div className="Modaldiv">
+                    <img alt="Broken" src='../Photos/kolvaus4.jpg' height="500"></img>
+                </div>
+            </Modal>
+        </div>
+    );
+};
+
+
+export default Modalbox11;

src/Components/Modalbox7.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Modal from '@material-ui/core/Modal';
+import '../App.css';
+
+const Modalbox7 = props => {
+
+    const [open, setOpen] = React.useState(false);
+
+    const handleOpen = () => {
+        setOpen(true);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    return (
+        <div>
+            <button type="button" onClick={handleOpen}>
+                <img alt="Broken" src='../Photos/valkosipulivk1.jpeg' width="250"></img>
+            </button>
+            <Modal
+                open={open}
+                onClose={handleClose}
+            >
+                <div className="Modaldiv">
+                    <img alt="Broken" src='../Photos/valkosipulivk1.jpeg' height="500"></img>
+                </div>
+            </Modal>
+        </div>
+    );
+};
+
+
+export default Modalbox7;

src/Components/Modalbox8.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Modal from '@material-ui/core/Modal';
+import '../App.css';
+
+const Modalbox8 = props => {
+
+    const [open, setOpen] = React.useState(false);
+
+    const handleOpen = () => {
+        setOpen(true);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    return (
+        <div>
+            <button type="button" onClick={handleOpen}>
+                <img alt="Broken" src='../Photos/valkosipulivk2.jpg' height="300" width="250"></img>
+            </button>
+            <Modal
+                open={open}
+                onClose={handleClose}
+            >
+                <div className="Modaldiv">
+                    <img alt="Broken" src='../Photos/valkosipulivk2.jpg' height="500"></img>
+                </div>
+            </Modal>
+        </div>
+    );
+};
+
+
+export default Modalbox8;

src/Components/Modalbox9.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Modal from '@material-ui/core/Modal';
+import '../App.css';
+
+const Modalbox9 = props => {
+
+    const [open, setOpen] = React.useState(false);
+
+    const handleOpen = () => {
+        setOpen(true);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    return (
+        <div>
+            <button type="button" onClick={handleOpen}>
+                <img alt="Broken" src='../Photos/kolvaus2.jpg' width="250"></img>
+            </button>
+            <Modal
+                open={open}
+                onClose={handleClose}
+            >
+                <div className="Modaldiv">
+                    <img alt="Broken" src='../Photos/kolvaus2.jpg' height="500"></img>
+                </div>
+            </Modal>
+        </div>
+    );
+};
+
+
+export default Modalbox9;

src/Components/Plants.js

@@ -20,7 +20,7 @@ const Plants = () => {
         .catch(err => console.error(err))
     }
 
-    console.log(plant.imagefile)
+    //console.log(plant.imagefile)
 
     return (
         <div>
@@ -29,13 +29,18 @@ const Plants = () => {
             <h2 style={{padding:10}}>Plant Information</h2>
             <div className="plants">
     
-                <div className="plant">
+                <div className="plant1">
                     <h6>Nimi: {plant.id}</h6>
                     <h6>Tyyppi: {plant.type}</h6>
-                    <h6>Istutus päivä: {plant.istutuspv}</h6>
+                    <h6>Istutuspäivä: {plant.istutuspv}</h6>
                 <img alt="Broken" src={plant.imagefile} width="200" ></img>
+                </div>
 
-                
+                <div className="plant2">
+                    <h6>Nimi: Kasvi2</h6>
+                    <h6>Tyyppi: Kasvi2Tyyppi</h6>
+                    <h6>Istutuspäivä: Istutuspv2</h6>
+                <img alt="Broken" src={plant.imagefile2} width="200" ></img>
                 </div>
             </div>
             </div>