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>