add location

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>
 }
 

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)

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 }

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>

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
         )}