Romain/plantes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finish v0.1"

Browse Source
This commit is contained in:
Romulus21
2022-01-09 19:18:59 +01:00
parent 2d49672d20
commit 7abf0bafa5
9 changed files with 4946 additions and 9067 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/routes/Plant.js
View File

@@ -1,11 +1,13 @@
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 {createPortal, useRef} from "preact/compat"
import { useContext, useEffect, useState } from "preact/hooks"
import {Button, SmallButton} 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";
import { PlantsContext } from "../Contexts"
import {InputField, SelectField} from "../components/Form"
import {getPicture, storePicture} from "../utilities/pictures"
import {EditSVG, PlusSVG} from "../components/SVG";
import {classNames} from "../utilities/classNames";
const Plant = ({id}) => {
@@ -46,21 +48,32 @@ const Plant = ({id}) => {
}
}
const addPicture = e => storePicture(document.getElementById("input-file"), id, setImage)
const addPicture = e => storePicture(e, id)
return <PageLayout>
<div className="flex justify-between">
<div className="flex justify-between items-center">
<h1>{ plant.name }</h1>
<Button onClick={() => removePlant(plant)}>Delete</Button>
<div>
<Button className="bg-red-500" onClick={() => removePlant(plant)}>Delete</Button>
</div>
</div>
<p>{ plant.description }</p>
<div>
<div className="relative">
<img id="picture" ref={picture} src={getPicture(id)} alt=""/>
<img id="output" src="" alt=""/>
<input id="input-file" type="file" name="picture" onChange={addPicture}/>
<SmallButton className="absolute top-2 left-2 cursor-pointer bg-blue-500 hover:bg-blue-700 max-w-[300px]">
<label className="relative">
<EditSVG className="w-4 h-4 block z-10 cursor-pointer" />
<input id="input-file" type="file" name="picture" className="absolute opacity-0 max-w-[300px] w-0 h-0 inline" onChange={addPicture}/>
</label>
</SmallButton>
</div>
<div>
<h2>Actions</h2>
<div className="flex items-center gap-2">
<h2>Actions</h2>
<SmallButton className="bg-blue-500 hover:bg-blue-700 mb-2 mt-5" onClick={() => setAddModal(true)}>
<PlusSVG className="w-4 h-4" />
</SmallButton>
</div>
{plant.actions && plant.actions.map(action => {
let isDone = false
let lastTask = false
@@ -68,15 +81,13 @@ const Plant = ({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">
return <div key={action.action_type} className="flex items-center gap-2 my-2">
<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>evey {action.frequency} days</span>
<span><Button onClick={() => doneTask(action.id)}>Done</Button></span>
<span>last task {lastTask ? lastTask.toFrDate() : 'never'}</span>
<span>every {action.frequency} days</span>
<span className="text-gray-500">last task {lastTask ? lastTask.toFrDate() : 'never'}</span>
</div>
})}
<Button className="bg-red-500" onClick={() => setAddModal(true)}>Add/Edit</Button>
</div>
{createPortal(