first commit
This commit is contained in:
100
src/routes/Plant.js
Normal file
100
src/routes/Plant.js
Normal file
@@ -0,0 +1,100 @@
|
||||
import {createPortal, useRef} from "preact/compat";
|
||||
import { useContext, useEffect, useState } from "preact/hooks";
|
||||
import { Button } from "../components/Button";
|
||||
import {Modal, ModalTitle} from "../components/Modals";
|
||||
import { PageLayout } from "../components/PageLayout"
|
||||
import { PlantsContext } from "../Contexts";
|
||||
import {InputField, SelectField} from "../components/Form";
|
||||
import {getPicture, storePicture} from "../utilities/pictures";
|
||||
|
||||
const Plant = ({id}) => {
|
||||
|
||||
const [addModal, setAddModal] = useState(false)
|
||||
const {plants, removePlant, addAction, doneTask, history} = useContext(PlantsContext)
|
||||
const [plant, setPlant] = useState({})
|
||||
const [actionForm, setActionForm] = useState({})
|
||||
const [image, setImage] = useState(localStorage.getItem("image" + id) ?? '')
|
||||
const pictureName = 'picture-' + id
|
||||
const picture = useRef(null)
|
||||
|
||||
const action_types = ['watering', 'spraying', 'bathing']
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const plantFind = plants.find(plant => plant.id === Number(id))
|
||||
setPlant(plantFind)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
setImage(localStorage.getItem(pictureName))
|
||||
}, [picture])
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
if (!actionForm.action_type) {
|
||||
actionForm.action_type = action_types[0]
|
||||
}
|
||||
console.log("my event", e, actionForm)
|
||||
addAction(plant, actionForm)
|
||||
setAddModal(false)
|
||||
}
|
||||
|
||||
const handleCloseAddModal = (e) => {
|
||||
if (e.target.classList.contains("overlay") || e.target.classList.contains("close-button")) {
|
||||
setAddModal(false)
|
||||
}
|
||||
}
|
||||
|
||||
const addPicture = e => storePicture(document.getElementById("input-file"), id, setImage)
|
||||
|
||||
return <PageLayout>
|
||||
<div className="flex justify-between">
|
||||
<h1>{ plant.name }</h1>
|
||||
<Button onClick={() => removePlant(plant)}>Delete</Button>
|
||||
</div>
|
||||
<p>{ plant.description }</p>
|
||||
<div>
|
||||
<img id="picture" ref={picture} src={getPicture(id)} alt=""/>
|
||||
<img id="output" src="" alt=""/>
|
||||
<input id="input-file" type="file" name="picture" onChange={addPicture}/>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Actions</h2>
|
||||
{plant.actions && plant.actions.map(action => {
|
||||
let isDone = false
|
||||
let lastTask = false
|
||||
if (history()[action.id]) {
|
||||
lastTask = new Date(history()[action.id])
|
||||
isDone = lastTask.addDays(Number(action.frequency)) < (new Date())
|
||||
}
|
||||
console.log(lastTask, isDone)
|
||||
return <div key={action.action_type} className="flex items-center gap-2">
|
||||
<span className="capitalize">{action.action_type}</span>
|
||||
<span>evey {action.frequency} days</span>
|
||||
<span><Button onClick={() => doneTask(action.id)}>Done</Button></span>
|
||||
<span>last task {lastTask ? lastTask.toFrDate() : 'never'}</span>
|
||||
</div>
|
||||
})}
|
||||
<Button className="bg-red-500" onClick={() => setAddModal(true)}>Add/Edit</Button>
|
||||
</div>
|
||||
|
||||
{createPortal(
|
||||
<Modal isOpen={addModal} onChange={handleCloseAddModal}>
|
||||
<ModalTitle>Add Action</ModalTitle>
|
||||
<form onSubmit={handleSubmit}>
|
||||
|
||||
<SelectField name="action_type" className="mb-2 mt-5" options={action_types} onChange={(e) => setActionForm({ ...actionForm, action_type: e.target.value })}>Name</SelectField>
|
||||
<InputField name="frequency" className="mb-5" 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
|
||||
</Button>
|
||||
</form>
|
||||
</Modal>,
|
||||
app
|
||||
)}
|
||||
</PageLayout>
|
||||
}
|
||||
|
||||
export default Plant
|
||||
Reference in New Issue
Block a user