Stuff

public/index.html

@@ -9,7 +9,6 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/App.css

@@ -62,28 +62,28 @@
 }
 
 .Modaldiv{
-  width:30%;
   margin-top: 50px;
   margin-left: 300px;
   align-content:auto;
   color: white;
+  width: 20%;
 }
 
 .modal-wrapper{
-  width: 50%;
-  display:grid;
+  background: lightgray;
+  width: 70%;
+  display: grid;
   grid-column-gap: 12px;
   grid-row-gap: 12px;
   grid-template-columns: 1fr 1fr 1fr;
-
 }
 
 .nav-link{
-  font-size: 35px;
-  align-content: center;
+  font-size: 30px;
+
 }
 
 .navbar-brand{
-  font-size: 45px;
-
-}
+  padding: 3px;
+  font-size: 40px;
+}

src/Components/ModalGrid.js

@@ -10,6 +10,8 @@ import Modalbox8 from './Modalbox8';
 import Modalbox9 from './Modalbox9';
 import Modalbox10 from './Modalbox10';
 import Modalbox11 from './Modalbox11';
+import Modalbox12 from './Modalbox12';
+
 
 const ModalGrid = () => {
     return (
@@ -25,6 +27,7 @@ const ModalGrid = () => {
             <Modalbox11 />
             <Modalbox7 />
             <Modalbox8 />
+            <Modalbox12 />
         </div>
     );
 };

src/Components/ModalList.js

@@ -51,7 +51,7 @@ const ModalList = () => {
                 </div>)
                 }
             </div>
-        </div>
+        </div> 
     );
 };
 

src/Components/Modalbox1.js

@@ -25,6 +25,7 @@ const Modalbox1 = () => {
             >
                 <div className="Modaldiv">
                     <img alt="Broken" src='../Photos/kolvaus1.jpeg' width="600"></img>
+                    <p style={{background:'black', color:'gray', width:600}}>Johtojen pidennystä</p>
                 </div>
             </Modal>
         </div>

src/Components/Modalbox10.js

@@ -25,6 +25,7 @@ const Modalbox10 = props => {
             >
                 <div className="Modaldiv">
                     <img alt="Broken" src='../Photos/kolvaus3.jpg' height="500"></img>
+                    <p style={{background:'black', color:'gray', width:442}}>Viellä lisää kolvausta</p>
                 </div>
             </Modal>
         </div>

src/Components/Modalbox11.js

@@ -25,6 +25,7 @@ const Modalbox11 = props => {
             >
                 <div className="Modaldiv">
                     <img alt="Broken" src='../Photos/kolvaus4.jpg' height="500"></img>
+                    <p style={{background:'black', color:'gray', width:889}}>Viellä vähän kolvausta</p>
                 </div>
             </Modal>
         </div>

src/Components/Modalbox12.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import Modal from '@material-ui/core/Modal';
+import '../App.css';
+
+const Modalbox12 = 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/valkosipulivk3.jpg' width="250"></img>
+            </button>
+            <Modal
+                open={open}
+                onClose={handleClose}
+            >
+                <div className="Modaldiv">
+                    <img alt="Broken" src='../Photos/valkosipulivk3.jpg' height="500"></img>
+                    <p style={{background:'black', color:'gray', width:376}}>Valkosipulin kasvu viikko 3</p>
+                </div>
+            </Modal>
+        </div>
+    );
+};
+
+
+export default Modalbox12;

src/Components/Modalbox2.js

@@ -25,6 +25,7 @@ const Modalbox2 = () => {
             >
                 <div className="Modaldiv">
                     <img alt="Broken" src='../Photos/kokous1.jpeg' width="600"></img>
+                    <p style={{background:'black', color:'gray', width:600}}>Ensimmäinen kokous</p>
                 </div>
             </Modal>
         </div>

src/Components/Modalbox3.js

@@ -25,6 +25,7 @@ const Modalbox3 = () => {
             >
                 <div className="Modaldiv">
                     <img alt="Broken" src='../Photos/konstaRpi.jpeg' width="600"></img>
+                    <p style={{background:'black', color:'gray', width:600}}>Konsta hommissa</p>
                 </div>
             </Modal>
         </div>

src/Components/Modalbox4.js

@@ -25,6 +25,7 @@ const Modalbox4 = () => {
             >
                 <div className="Modaldiv">
                     <img alt="Broken" src='../Photos/rpiMoist.jpeg' width="600"></img>
+                    <p style={{background:'black', color:'gray', width:600}}>Kosteusensori toiminnassa</p>
                 </div>
             </Modal>
         </div>

src/Components/Modalbox5.js

@@ -25,6 +25,7 @@ const Modalbox5 = () => {
             >
                 <div className="Modaldiv">
                     <img alt="Broken" src='../Photos/rpiPek.jpeg' width="600"></img>
+                    <p style={{background:'black', color:'gray', width:600}}>Pumput testissä</p>
                 </div>
             </Modal>
         </div>

src/Components/Modalbox6.js

@@ -25,6 +25,7 @@ const Modalbox6 = props => {
             >
                 <div className="Modaldiv">
                     <img alt="Broken" src='../Photos/rpiTemp.jpeg' width="600"></img>
+                    <p style={{background:'black', color:'gray', width:600}}>Pumput toiminnassa kosteusensorin kosteuden mukaan</p>
                 </div>
             </Modal>
         </div>

src/Components/Modalbox7.js

@@ -25,6 +25,7 @@ const Modalbox7 = props => {
             >
                 <div className="Modaldiv">
                     <img alt="Broken" src='../Photos/valkosipulivk1.jpeg' height="500"></img>
+                    <p style={{background:'black', color:'gray', width:400}}>Valkosipulin kasvu viikko 1</p>
                 </div>
             </Modal>
         </div>

src/Components/Modalbox8.js

@@ -25,6 +25,7 @@ const Modalbox8 = props => {
             >
                 <div className="Modaldiv">
                     <img alt="Broken" src='../Photos/valkosipulivk2.jpg' height="500"></img>
+                    <p style={{background:'black', color:'gray', width:360}}>Valkosipulin kasvu viikko 2</p>
                 </div>
             </Modal>
         </div>

src/Components/Modalbox9.js

@@ -25,6 +25,7 @@ const Modalbox9 = props => {
             >
                 <div className="Modaldiv">
                     <img alt="Broken" src='../Photos/kolvaus2.jpg' height="500"></img>
+                    <p style={{background:'black', color:'gray', width:344}}>Lisää kolvailua</p>
                 </div>
             </Modal>
         </div>

src/Components/Navigator.js

@@ -17,7 +17,7 @@ const Navigator = () => {
                         <Link className="nav-link" to="/">Home</Link>
                     </li>
                     <li className="nav-item">
-                        <Link className="nav-link" to="/system">System information</Link>
+                        <Link className="nav-link" to="/system">System Information</Link>
                     </li>
                     <li className="nav-item">
                         <Link className="nav-link" to="/plants">My Plants</Link>

src/Components/Plants.js

@@ -5,7 +5,7 @@ const Plants = () => {
 
     // TODO Figure out layout and what information to pull form json
     // Maby add pictures etc.
-
+    // plantinfo.json is a temporary file
 
     const [plant, setPlant] = useState([]);
 
@@ -24,7 +24,6 @@ const Plants = () => {
 
     return (
         <div>
-            
             <div className="wrapper">
             <h2 style={{padding:10}}>Plant Information</h2>
             <div className="plants">

src/Components/Sysinfo.js

@@ -4,12 +4,21 @@ const Sysinfo = () => {
 
     // TODO Pull system info etc.
 
+    //const [sysinfo, setSysinfo] = useState([]);
+    
+    // const jsonFetch = () => {
+    //    fetch('../sysinfo.json')
+    //    .then((res) => res.json())
+    //    .then(data => setSysinfo(data))
+    //    .catch(err => console.error(err))
+    //}
+
     return (
         <div>
             <div className="wrapper">
             <h2 style={{padding:10}}>System Information</h2>
             <div className="sys1">
-                <h5>Systeminfo</h5>
+                <h5>System Information</h5>
                 <h6>Temperature: Pull system temp</h6>
                 <h6>Kernel: Pull kernel info</h6>
             </div>