Merge branch '29-TablasDet' into develop

app/src/components/UI/dashboard/checkboxTables/index.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from "react";
+
+interface checkProps {
+    changeSeason:any;
+    changeDegree:any;
+    changePrep:any;
+
+}
+
+
+const CheckboxTables: FC<checkProps> = ({changeSeason,changeDegree,changePrep,...props }) => {
+    return (    
+        <section className="row p-lg-4 p-md-3 p-2">
+            <div className="btn-group col-8" role="group" aria-label="Basic checkbox toggle button group">
+                {/* 
+                {list.map((tittle:any) =>
+                    <input type="checkbox" className="btn-check" id="btncheck1" autoComplete="off"/>
+                    <label className="btn btn-outline-primary" htmlFor="btncheck1">{tittle}</label>
+                ): null} */}
+                <input type="checkbox" className="btn-check" onClick={changeSeason}  id="btncheckSeason" autoComplete="off"/>
+                <label className="btn btn-outline-primary" htmlFor="btncheckSeason">GeneralPerSeason</label>
+
+                <input type="checkbox" className="btn-check" onClick={changeDegree} id="btncheckDegree" autoComplete="off"/>
+                <label className="btn btn-outline-primary" htmlFor="btncheckDegree">DegreeDay</label>
+
+                <input type="checkbox" className="btn-check" onClick={changePrep} id="btncheckPre" autoComplete="off"/>
+                <label className="btn btn-outline-primary" htmlFor="btncheckPre">Precipitation</label>
+
+            </div>
+        </section>     
+  );
+};
+
+export default CheckboxTables;
+

app/src/components/pages/Home.tsx

@@ -1,16 +1,27 @@
-import React, { useContext, FC } from "react";
+import React, { useContext, FC, useState } from "react";
 // import DegreeDay from "../data/DegreeDay";
 // import TemperaturePerSeason from "../data/TemperaturePerSeason";
 import GeneralPerSector from "../data/GeneralPerSector";
+import GeneralPerSeason from "../data/GeneralPerSeason";
+import DegreeDay from "../data/DegreeDay";
+import HeatMap from "../data/HeatMap";
+import Precipitation from "../data/Precipitation";
 // import Precipitation from "../data/Precipitation";
 import { UserStateContext } from "../../context/auth/AuthProvider";
 import DashboardProvider from "../../context/dashboard/Provider";
 import { Redirect } from "react-router-dom";
 import Layout from "../layout";
 import Cockpit from "../UI/dashboard/cockpit";
+import CheckboxTables from "../UI/dashboard/checkboxTables";
 
 const Home: FC = () => {
   const userState = useContext(UserStateContext);
+  const [viewSeasonState, setViewSeasonState] = useState<Boolean>(false);
+  const [viewDegreeState, setViewDegreeState] = useState<Boolean>(false);
+  const [viewPrepState, setViewPrepState] = useState<Boolean>(false);
+  const toggleSeason = () => setViewSeasonState(!viewSeasonState)
+  const toggleDegree = () => setViewDegreeState(!viewDegreeState)
+  const togglePrep = () => setViewPrepState(!viewPrepState)
 
   if (!userState.loggedIn) {
     return <Redirect to="/login" />;
@@ -26,6 +37,31 @@ const Home: FC = () => {
               <GeneralPerSector />
             </div>
           </section>
+
+          <CheckboxTables changeSeason={toggleSeason} changeDegree={toggleDegree} changePrep={togglePrep}/>
+
+          { viewSeasonState ?
+          <section className="row">
+            <div className="col-xl-8">
+              <GeneralPerSeason />
+            </div>
+          </section>
+          : null }
+          { viewDegreeState ?  
+          <section className="row">
+            <div className="col-xl-8">
+              <DegreeDay title="hola" periodString="0/0/0" />
+            </div>
+          </section> 
+          : null }
+          { viewPrepState ?
+          <section className="row">
+            <div className="col-xl-8">
+              <Precipitation title="hola" periodString="0/0/0" />
+            </div>
+          </section>
+          : null }
+
         </DashboardProvider>
       </Layout>
     </>