From 4e0fa8d0e5f07299308e4173b268d2a8609f9865 Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.pro>
Date: Tue, 18 Jan 2022 15:03:31 +0100
Subject: [PATCH] add location

---
 size-plugin.json         |  2 +-
 src/components/Form.js   |  3 ++-
 src/components/Modals.js |  2 --
 src/components/Plants.js | 49 ++++++++++++++++++++++++++++++++++++++--
 src/components/Tasks.js  | 16 ++++++++++---
 src/routes/Plant.js      | 23 +++++++++++++++----
 6 files changed, 81 insertions(+), 14 deletions(-)

diff --git a/size-plugin.json b/size-plugin.json
index e517617..7652a92 100644
--- a/size-plugin.json
+++ b/size-plugin.json
@@ -1 +1 @@
-[{"timestamp":1642348996263,"files":[{"filename":"ssr-build/ssr-bundle.f564d.css","previous":5645,"size":0,"diff":-5645},{"filename":"ssr-build/ssr-bundle.js","previous":12645,"size":0,"diff":-12645},{"filename":"bundle.e3489.css","previous":0,"size":2808,"diff":2808},{"filename":"bundle.*****.esm.js","previous":0,"size":10272,"diff":10272},{"filename":"polyfills.*****.esm.js","previous":0,"size":2191,"diff":2191},{"filename":"route-Home.chunk.*****.esm.js","previous":0,"size":5325,"diff":5325},{"filename":"route-Plant.chunk.*****.esm.js","previous":0,"size":6411,"diff":6411},{"filename":"route-Profile.chunk.*****.esm.js","previous":0,"size":922,"diff":922},{"filename":"sw-esm.js","previous":0,"size":10767,"diff":10767},{"filename":"sw.js","previous":0,"size":10760,"diff":10760},{"filename":"bundle.e98ad.js","previous":0,"size":10911,"diff":10911},{"filename":"polyfills.03377.js","previous":0,"size":2291,"diff":2291},{"filename":"route-Home.chunk.58d66.js","previous":0,"size":5871,"diff":5871},{"filename":"route-Plant.chunk.b4421.js","previous":0,"size":7001,"diff":7001},{"filename":"route-Profile.chunk.5b010.js","previous":0,"size":1393,"diff":1393},{"filename":"index.html","previous":0,"size":1751,"diff":1751},{"filename":"200.html","previous":0,"size":908,"diff":908}]}]
+[{"timestamp":1642349922889,"files":[{"filename":"bundle.e3489.css","previous":2808,"size":0,"diff":-2808},{"filename":"bundle.*****.esm.js","previous":10272,"size":10269,"diff":-3},{"filename":"polyfills.*****.esm.js","previous":2191,"size":2191,"diff":0},{"filename":"route-Home.chunk.*****.esm.js","previous":5325,"size":5318,"diff":-7},{"filename":"route-Plant.chunk.*****.esm.js","previous":6411,"size":6423,"diff":12},{"filename":"route-Profile.chunk.*****.esm.js","previous":922,"size":922,"diff":0},{"filename":"sw-esm.js","previous":10767,"size":10764,"diff":-3},{"filename":"sw.js","previous":10760,"size":10774,"diff":14},{"filename":"bundle.e98ad.js","previous":10911,"size":0,"diff":-10911},{"filename":"polyfills.03377.js","previous":2291,"size":0,"diff":-2291},{"filename":"route-Home.chunk.58d66.js","previous":5871,"size":0,"diff":-5871},{"filename":"route-Plant.chunk.b4421.js","previous":7001,"size":0,"diff":-7001},{"filename":"route-Profile.chunk.5b010.js","previous":1393,"size":0,"diff":-1393},{"filename":"index.html","previous":1751,"size":1750,"diff":-1},{"filename":"200.html","previous":908,"size":907,"diff":-1},{"filename":"bundle.6e91b.css","previous":0,"size":2808,"diff":2808},{"filename":"route-Home~route-Plant.chunk.f4501.js","previous":0,"size":5268,"diff":5268},{"filename":"bundle.bf6f7.js","previous":0,"size":10941,"diff":10941},{"filename":"polyfills.0ba84.js","previous":0,"size":2290,"diff":2290},{"filename":"route-Home.chunk.04c91.js","previous":0,"size":1432,"diff":1432},{"filename":"route-Plant.chunk.445a5.js","previous":0,"size":3029,"diff":3029},{"filename":"route-Profile.chunk.3423a.js","previous":0,"size":1394,"diff":1394}]},{"timestamp":1642348996263,"files":[{"filename":"ssr-build/ssr-bundle.f564d.css","previous":5645,"size":0,"diff":-5645},{"filename":"ssr-build/ssr-bundle.js","previous":12645,"size":0,"diff":-12645},{"filename":"bundle.e3489.css","previous":0,"size":2808,"diff":2808},{"filename":"bundle.*****.esm.js","previous":0,"size":10272,"diff":10272},{"filename":"polyfills.*****.esm.js","previous":0,"size":2191,"diff":2191},{"filename":"route-Home.chunk.*****.esm.js","previous":0,"size":5325,"diff":5325},{"filename":"route-Plant.chunk.*****.esm.js","previous":0,"size":6411,"diff":6411},{"filename":"route-Profile.chunk.*****.esm.js","previous":0,"size":922,"diff":922},{"filename":"sw-esm.js","previous":0,"size":10767,"diff":10767},{"filename":"sw.js","previous":0,"size":10760,"diff":10760},{"filename":"bundle.e98ad.js","previous":0,"size":10911,"diff":10911},{"filename":"polyfills.03377.js","previous":0,"size":2291,"diff":2291},{"filename":"route-Home.chunk.58d66.js","previous":0,"size":5871,"diff":5871},{"filename":"route-Plant.chunk.b4421.js","previous":0,"size":7001,"diff":7001},{"filename":"route-Profile.chunk.5b010.js","previous":0,"size":1393,"diff":1393},{"filename":"index.html","previous":0,"size":1751,"diff":1751},{"filename":"200.html","previous":0,"size":908,"diff":908}]}]
diff --git a/src/components/Form.js b/src/components/Form.js
index d8502c4..a80e357 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -1,6 +1,6 @@
 import {classNames} from "../utilities/classNames";
 
-export const InputField = ({children, name, value = "", type = "text", ...props}) => {
+export const InputField = ({children, name, value = "", type = "text", textSupport = "", ...props}) => {
 
     const id = props.id ?? name
     const classStyle = props.className ?? ''
@@ -19,6 +19,7 @@ export const InputField = ({children, name, value = "", type = "text", ...props}
                value={value}
                className="focus:ring-indigo-500 focus:border-indigo-500 block w-full px-2 py-1 mt-1 sm:text-sm border border-gray-300 rounded-md dark:bg-gray-500"
                {...props}/>
+        <span className="text-gray-500 text-sm">{textSupport}</span>
     </fieldset>
 }
 
diff --git a/src/components/Modals.js b/src/components/Modals.js
index 1f1fd76..b352c85 100644
--- a/src/components/Modals.js
+++ b/src/components/Modals.js
@@ -26,8 +26,6 @@ export const ModalTitle = ({children, ...props}) => {
     return <div className="bg-green-700 text-white text-2xl font-bold text-center -mx-2 -mt-2 p-2 rounded-tl rounded-tr" {...props}>{children}</div>
 }
 
-export const isCloseModal = e => e.target.classList.contains("overlay") || e.target.classList.contains("close-button")
-
 export const closeModal = (e, setter) => {
     if (e.target.classList.contains("overlay") || e.target.classList.contains("close-button")) {
         setter(false)
diff --git a/src/components/Plants.js b/src/components/Plants.js
index a5b2f1e..cd05af4 100644
--- a/src/components/Plants.js
+++ b/src/components/Plants.js
@@ -25,8 +25,53 @@ export const PlantForm = ({children, plant, ...props}) => {
 
     return <form onSubmit={e => props.onChange(e, plantForm)}>
 
-        <InputField name="name" className="mb-2 mt-5" value={plantForm.name} onChange={(e) => setPlantForm({ ...plantForm, name: e.target.value }) }>Name</InputField>
-        <TextAreaField name="description" className="mb-5" value={plantForm.description}  onChange={(e) => setPlantForm({ ...plantForm, description: e.target.value })}>Description</TextAreaField>
+        <InputField name="name"
+                    className="mb-2 mt-5"
+                    value={plantForm.name}
+                    onChange={(e) => setPlantForm({ ...plantForm, name: e.target.value }) }>
+            Name
+        </InputField>
+        <TextAreaField name="description"
+                       className="mb-5"
+                       value={plantForm.description}
+                       onChange={(e) => setPlantForm({ ...plantForm, description: e.target.value })}>
+            Description
+        </TextAreaField>
+
+        <fieldset className="mb-5 flex gap-2 max-w-[300px] mx-auto">
+            <div className="flex-1">
+                <input id="indoor"
+                       name="indoor"
+                       type="radio"
+                       checked={plantForm.indoor === true}
+                       onChange={() => setPlantForm({ ...plantForm, indoor: true })}
+                       className="sr-only peer"
+                />
+                <label htmlFor="indoor" className="w-full block peer-checked:bg-blue-700 bg-blue-500 hover:bg-blue-700 px-2 py-1 text-center rounded border dark:border-white">
+                    Indoor
+                </label>
+            </div>
+
+            <div className="flex-1">
+                <input id="outdoor"
+                       name="outdoor"
+                       type="radio"
+                       checked={plantForm.indoor === false}
+                       onChange={() => setPlantForm({ ...plantForm, indoor: false })}
+                       className="sr-only peer"
+                />
+                <label htmlFor="outdoor" className="w-full block peer-checked:bg-blue-700 bg-blue-500 hover:bg-blue-700 px-2 py-1 text-center rounded border dark:border-white">
+                    Outdoor
+                </label>
+            </div>
+        </fieldset>
+
+        <InputField name="spot"
+                    className="mt-5"
+                    value={plantForm.spot}
+                    onChange={(e) => setPlantForm({ ...plantForm, spot: e.target.value }) }>
+            Spot
+        </InputField>
 
         <Button type="submit" className="block w-full mt-5 mb-2 bg-green-800 hover:bg-green-900 text-white mx-auto px-2 py-1 shadow">
             { children }
diff --git a/src/components/Tasks.js b/src/components/Tasks.js
index 79762ba..210ad1c 100644
--- a/src/components/Tasks.js
+++ b/src/components/Tasks.js
@@ -1,4 +1,5 @@
 import {Button} from "./Button"
+import { Link } from "preact-router/match"
 import {useContext} from "preact/hooks"
 import {PlantsContext} from "../Contexts"
 
@@ -7,9 +8,13 @@ export const Tasks = () => {
     const { plants, doneTask, history } = useContext(PlantsContext)
 
     const taskIsRequired = (action) => {
+        if (Number(action.frequency) ===  0) {
+            return false
+        }
+
         if (history()[action.id]) {
             let lastTask = new Date(history()[action.id])
-            return lastTask.addDays(Number(action.frequency)) < (new Date())
+            return lastTask.addDays(Number(action.frequency)).toSQLDate() < (new Date()).toSQLDate()
         }
         return true
     }
@@ -19,8 +24,13 @@ export const Tasks = () => {
         <div>
             {plants.map(plant => plant.actions.filter(action => taskIsRequired(action)).map(action => <div className="flex items-center gap-2 my-2">
                 <span><Button className="bg-blue-500 hover:bg-blue-700" onClick={() => doneTask(action.id)}>Done</Button></span>
-                <span className="capitalize"><b>{plant.name}</b> {action.action_type}</span>
-                <span> every {action.frequency} days</span>
+                <span className="capitalize">
+                    <Link href={`/plant/${plant.id}`} class="font-bold mr-2">{plant.name}</Link>
+                    {action.action_type}
+                </span>
+                {Number(action.frequency) === 0
+                    ? <span>when you want</span>
+                    : <span> every {action.frequency} days</span>}
             </div>))}
         </div>
     </div>
diff --git a/src/routes/Plant.js b/src/routes/Plant.js
index eace18e..ea7aa23 100644
--- a/src/routes/Plant.js
+++ b/src/routes/Plant.js
@@ -26,6 +26,7 @@ const Plant = ({id}) => {
 
     useEffect(() => {
         const plantFind = plants.find(plant => plant.id === Number(id))
+        console.log(plantFind, plantFind['indoor'])
         setPlant(plantFind)
     }, [])
 
@@ -76,7 +77,9 @@ const Plant = ({id}) => {
                 </SmallButton>
             </div>
             <div className="flex-1">
-                <p>{ plant.description }</p>
+                {plant.description && <p>{ plant.description }</p>}
+                {/*{plant.hasAttribute('indoor') && <p>{ plant.indoor ? 'Indoor' : 'Outdoor' }</p>}*/}
+                {plant.spot && <p>Spot: <span className="font-bold">{ plant.spot }</span></p>}
             </div>
         </div>
         <div>
@@ -97,8 +100,10 @@ const Plant = ({id}) => {
                     <span>
                         <Button className={classNames(isDone ? "bg-green-500 hover:bg-green-700" : "bg-blue-500 hover:bg-blue-700")} onClick={() => doneTask(action.id)}>Done</Button>
                     </span>
-                    <span className="capitalize">{action.action_type}</span>
-                    <span>every {action.frequency} days</span>
+                    <span className="capitalize font-bold">{action.action_type}</span>
+                    {Number(action.frequency) === 0
+                        ? <span>when you want</span>
+                        : <span> every {action.frequency} days</span>}
                     <span className="text-gray-500">last task {lastTask ? lastTask.toFrDate() : 'never'}</span>
                 </div>
             })}
@@ -110,7 +115,15 @@ const Plant = ({id}) => {
           <form onSubmit={handleSubmit}>
 
             <SelectField name="action_type" className="mb-2 mt-5" value={actionForm.action_type} options={action_types} onChange={(e) => setActionForm({ ...actionForm, action_type: e.target.value })}>Name</SelectField>
-            <InputField name="frequency" className="mb-5" value={actionForm.frequency} onChange={(e) => setActionForm({ ...actionForm, frequency: e.target.value })}>Frequency</InputField>
+            <InputField name="frequency"
+                        className="mb-5"
+                        type="number"
+                        textSupport="A number of days between 2 actions. You can use 0 to set no notification."
+                        value={actionForm.frequency}
+                        onChange={(e) => setActionForm({ ...actionForm, frequency: e.target.value })}>
+                Frequency
+            </InputField>
+
 
               <Button type="submit" className="block w-full mt-5 mb-2 bg-green-800 hover:bg-green-900 text-white mx-auto px-2 py-1 shadow">
                   Add
@@ -125,7 +138,7 @@ const Plant = ({id}) => {
                 <ModalTitle>
                     Edit Plant
                 </ModalTitle>
-                <PlantForm plant={plant} onChange={handleEditSubmit}>Add</PlantForm>
+                <PlantForm plant={plant} onChange={handleEditSubmit}>Edit</PlantForm>
             </Modal>,
             app
         )}