first commit

This commit is contained in:
Romulus21
2021-12-17 15:37:05 +01:00
commit 2d49672d20
43 changed files with 39806 additions and 0 deletions

100
src/routes/Plant.js Normal file
View 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