-
-
- {children}
+ return (
+ <>
+ {isOpen && (
+
- }
+ )}
+ )
}
-export const ModalTitle = ({children, ...props}) => {
- return
+
-
+
+
- {!customClose &&{children}
+ {!customClose && (
+
+
+
+ )}
-
-
}
{children}
+export const ModalTitle = ({ children, ...props }) => {
+ return (
+
+ {children}
+
+ )
}
export const closeModal = (e, setter) => {
- if (e.target.classList.contains("overlay") || e.target.classList.contains("close-button")) {
+ if (
+ e.target.classList.contains('overlay') ||
+ e.target.classList.contains('close-button')
+ ) {
setter(false)
}
-}
\ No newline at end of file
+}
diff --git a/src/components/PageLayout.js b/src/components/PageLayout.js
index 891f73b..3a651b1 100644
--- a/src/components/PageLayout.js
+++ b/src/components/PageLayout.js
@@ -1,9 +1,3 @@
-import { classNames } from "../utilities/classNames";
-
-
-export const PageLayout = ({children, ...props}) => {
-
- return
- {children}
-
-}
\ No newline at end of file
+export const PageLayout = ({ children, ...props }) => {
+ return {children}
+}
diff --git a/src/components/Plants.js b/src/components/Plants.js
index c7e19e8..c199189 100644
--- a/src/components/Plants.js
+++ b/src/components/Plants.js
@@ -1,81 +1,108 @@
-import { Link } from "preact-router/match"
-import {getPicture} from "../utilities/pictures"
-import {InputField, TextAreaField} from "./Form"
-import {Button} from "./Button"
-import {useState} from "preact/hooks"
-import {Text} from "./Translation"
+import { Link } from "preact-router/match";
+import { getPicture } from "../utilities/pictures";
+import { InputField, TextAreaField } from "./Form";
+import { Button } from "./Button";
+import { useState } from "preact/hooks";
+import { Text } from "./Translation";
export const PlantThumb = ({ plant, children }) => {
-
- return
-
- })
-
+ return (
+
+
- {children}
-
-
- {plant.actions.length}
-
-
+
+
-}
+ );
+};
-export const PlantForm = ({children, plant, ...props}) => {
+export const PlantForm = ({ children, plant, ...props }) => {
+ const [plantForm, setPlantForm] = useState(plant);
- const [plantForm, setPlantForm] = useState(plant)
+ return (
+
-}
\ No newline at end of file
+ );
+};
diff --git a/src/components/SVG.js b/src/components/SVG.js
index 7bc75b1..901769e 100644
--- a/src/components/SVG.js
+++ b/src/components/SVG.js
@@ -1,29 +1,40 @@
-
-const SVGSkeleton = ({paths, viewBox = "0 0 512 512", ...props}) => {
- return
+const SVGSkeleton = ({ paths, viewBox = '0 0 512 512', ...props }) => {
+ return (
+
+ )
}
-export const PlusSVG = (props) => SVGSkeleton({
- viewBox: "0 0 448 512",
- paths:
+ {children}
+
+
+ {plant.actions.length}
+
+
-
-
-
- { children }
-
-
-}
\ No newline at end of file
+ return (
+
+ {children}
+
+ )
+}
diff --git a/src/hooks/LocalStorageHook.js b/src/hooks/LocalStorageHook.js
index 38d546e..1470947 100644
--- a/src/hooks/LocalStorageHook.js
+++ b/src/hooks/LocalStorageHook.js
@@ -1,4 +1,4 @@
-import { useState } from "preact/hooks"
+import { useState } from 'preact/hooks'
export const useLocalStorage = (key, initialValue) => {
const [storedValue, setStoredValue] = useState(() => {
diff --git a/src/hooks/PlantsHook.js b/src/hooks/PlantsHook.js
index 5916e45..0a0e661 100644
--- a/src/hooks/PlantsHook.js
+++ b/src/hooks/PlantsHook.js
@@ -1,46 +1,57 @@
-import { useEffect, useState } from "preact/hooks"
-import {route} from "preact-router";
-import {actionId} from "../utilities/actions";
+import { useEffect, useState } from 'preact/hooks'
+import { route } from 'preact-router'
+import { actionId } from '../utilities/actions'
const usePlants = (data, setData) => {
const [plants, setPlants] = useState([])
- useEffect(() =>{
+ useEffect(() => {
setPlants(data.plants ?? [])
}, [])
const addPlant = (plantForm) => {
let plant = plantForm
- let maxId = Math.max.apply(Math, plants.map(function(elem) { return elem.id; }))
+ let maxId = Math.max.apply(
+ Math,
+ plants.map(function (elem) {
+ return elem.id
+ })
+ )
plant.id = maxId === -Infinity ? 1 : maxId + 1
plant.actions = []
setPlants([...plants, plant])
- setData({...data, plants: [...plants, plant]})
+ setData({ ...data, plants: [...plants, plant] })
}
const editPlant = (plant) => {
- let plantIndex = plants.findIndex(item => item.id === plant.id)
+ let plantIndex = plants.findIndex((item) => item.id === plant.id)
plants[plantIndex] = plant
savePlants(plants)
}
const removePlant = (plant) => {
- plants.splice(plants.findIndex(item => item.id === plant.id), 1)
+ plants.splice(
+ plants.findIndex((item) => item.id === plant.id),
+ 1
+ )
savePlants(plants)
route('/', true)
}
const addAction = (plant, action) => {
action.id = action.action_type + '-' + plant.id
- let actionIndex = plant.actions.findIndex(item => item.action_type === action.action_type)
- actionIndex >= 0 ? plant.actions[actionIndex] = action
+ let actionIndex = plant.actions.findIndex(
+ (item) => item.action_type === action.action_type
+ )
+ actionIndex >= 0
+ ? (plant.actions[actionIndex] = action)
: plant.actions.push(action)
editPlant(plant)
}
const savePlants = (plants) => {
setPlants(plants)
- setData({...data, plants: plants})
+ setData({ ...data, plants: plants })
}
const doneTask = (action) => {
@@ -51,10 +62,10 @@ const usePlants = (data, setData) => {
archived.push({
plantId: Number(action.split('-')[1]),
action: actionId(action.split('-')[0]),
- time: (new Date()).toSQLDate()
+ time: new Date().toSQLDate(),
})
- setData({...data, history: history, archived: archived})
+ setData({ ...data, history: history, archived: archived })
}
const history = () => data.history ?? {}
@@ -64,7 +75,16 @@ const usePlants = (data, setData) => {
return archived.where('plantId', plantId)
}
- return {plants, addPlant, editPlant, removePlant, addAction, doneTask, history, archivedEntries}
+ return {
+ plants,
+ addPlant,
+ editPlant,
+ removePlant,
+ addAction,
+ doneTask,
+ history,
+ archivedEntries,
+ }
}
-export default usePlants
\ No newline at end of file
+export default usePlants
diff --git a/src/hooks/UserHook.js b/src/hooks/UserHook.js
index 71ef54b..85d1d6a 100644
--- a/src/hooks/UserHook.js
+++ b/src/hooks/UserHook.js
@@ -1,16 +1,16 @@
-import { useEffect, useState } from "preact/hooks"
-
+import { useEffect, useState } from 'preact/hooks'
const useUser = (data, setData) => {
- const [user, setUser] = useState(data.user ?? {name: "me", dark_mode: false})
+ const [user, setUser] = useState(
+ data.user ?? { name: 'me', dark_mode: false }
+ )
- useEffect(() =>{
- setData({...data, user: user})
+ useEffect(() => {
+ setData({ ...data, user: user })
document.querySelector('html').classList.toggle('dark', user.dark_mode)
}, [user])
-
return [user, setUser]
}
-export default useUser
\ No newline at end of file
+export default useUser
diff --git a/src/index.js b/src/index.js
index 2702f7d..1e5fcab 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,23 +1,25 @@
-import App from './components/App';
-import './style';
+import App from './components/App'
+import './style'
-Number.prototype.pad = function(n) {
+Number.prototype.pad = function (n) {
return (new Array(n).join('0') + this).slice(-n)
}
Date.prototype.addDays = function (days) {
- let date = new Date(this.valueOf());
- date.setDate(date.getDate() + days);
- return date;
+ let date = new Date(this.valueOf())
+ date.setDate(date.getDate() + days)
+ return date
}
-Date.prototype.toFrDate = function() {
- let month = ((this.getMonth() + 1 < 10) ? '0' : '') + (this.getMonth() + 1)
+Date.prototype.toFrDate = function () {
+ let month = (this.getMonth() + 1 < 10 ? '0' : '') + (this.getMonth() + 1)
return `${this.getDate()}/${month}/${this.getFullYear()}`
}
-Date.prototype.toSQLDate = function() {
- return `${this.getFullYear()}-${Number(this.getMonth() + 1).pad(2)}-${Number(this.getDate()).pad(2)}`
+Date.prototype.toSQLDate = function () {
+ return `${this.getFullYear()}-${Number(this.getMonth() + 1).pad(
+ 2
+ )}-${Number(this.getDate()).pad(2)}`
}
/**
@@ -26,8 +28,8 @@ Date.prototype.toSQLDate = function() {
* @param {string} search to filter by
* @returns {*[]}
*/
-Array.prototype.where = function(field, search) {
- return this.filter(item => item[field] === search)
+Array.prototype.where = function (field, search) {
+ return this.filter((item) => item[field] === search)
}
/**
@@ -42,4 +44,4 @@ Array.prototype.sortObjectsBy = function (field, desc = false) {
: this.sort((a, b) => a[field] > b[field])
}
-export default App;
+export default App
diff --git a/src/lang/en.js b/src/lang/en.js
deleted file mode 100644
index dfa9956..0000000
--- a/src/lang/en.js
+++ /dev/null
@@ -1,10 +0,0 @@
-
-export const en = {
- "Add": "+",
- "Add Plant": "Add Plant",
- "Done": "Done",
- "Tasks": "Tasks",
- "watering": "watering",
- "when you want": "when you want",
- "since {{count}} day": {one: "since {{count}} day", many: "since {{count}} days"}
-}
\ No newline at end of file
diff --git a/src/lang/en.json b/src/lang/en.json
new file mode 100644
index 0000000..a871937
--- /dev/null
+++ b/src/lang/en.json
@@ -0,0 +1,12 @@
+{
+ "Add": "+",
+ "Add Plant": "Add Plant",
+ "Done": "Done",
+ "Tasks": "Tasks",
+ "watering": "watering",
+ "when you want": "when you want",
+ "since {{count}} day": {
+ "one": "since {{count}} day",
+ "many": "since {{count}} days"
+ }
+}
\ No newline at end of file
diff --git a/src/lang/fr.js b/src/lang/fr.js
deleted file mode 100644
index 5ea3e93..0000000
--- a/src/lang/fr.js
+++ /dev/null
@@ -1,39 +0,0 @@
-
-export const fr = {
- "Add": "Ajouter",
- "Add Action": "Ajouter une action",
- "Add Plant": "Ajouter une plante",
- "A number of days between 2 actions. You can use 0 to set no notification.": "Un nombre de jours entre deux actions. Vous pouvez utilisé le 0 pour ne pas avoir de notification.",
- "bathing": "baigner",
- "Close": "Fermer",
- "Confirm delete plant": "Confirmer la suppression de la plante",
- "Description": "Description",
- "Dark Mode": "Mode sombre",
- "Delete": "Supprimer",
- "Delete Plant ?": "Supprimer la plante ?",
- "Done": "Fait",
- "Download": "Télécharger",
- "Download config": "Télécharger votre vos données",
- "Edit": "Editer",
- "Edit Plant": "Editer la plante",
- "every {{count}} days": {one: "tous les jours", many: "tous les {{count}} jours"},
- "Frequency": "Fréquence",
- "Indoor": "Intérieur",
- "last task": "dernière fois",
- "Me": "Moi",
- "Name": "Nom",
- "never": "jamais",
- "Outdoor": "Extérieur",
- "Plantes": "Plantes",
- "Plants": "Plantes",
- "{{count}} Plants": "{{count}} Plantes",
- "Profile": "Profile",
- "Spot": "Emplacement",
- "Spot:": "Emplacement : ",
- "spraying": "asperger",
- "Style": "Style",
- "Tasks": "Tâches",
- "watering": "arrossage",
- "when you want": "quand je veux",
- "since {{count}} days": {one: "depuis {{count}} jour", many: "depuis {{count}} jours"}
-}
\ No newline at end of file
diff --git a/src/lang/fr.json b/src/lang/fr.json
new file mode 100644
index 0000000..e084bc0
--- /dev/null
+++ b/src/lang/fr.json
@@ -0,0 +1,45 @@
+{
+ "Add": "Ajouter",
+ "Add Action": "Ajouter une action",
+ "Add Plant": "Ajouter une plante",
+ "A number of days between 2 actions. You can use 0 to set no notification.":
+ "Un nombre de jours entre deux actions. Vous pouvez utilisé le 0 pour ne pas avoir de notification.",
+ "bathing": "baigner",
+ "Close": "Fermer",
+ "Confirm delete plant": "Confirmer la suppression de la plante",
+ "Description": "Description",
+ "Dark Mode": "Mode sombre",
+ "Delete": "Supprimer",
+ "Delete Plant ?": "Supprimer la plante ?",
+ "Done": "Fait",
+ "Download": "Télécharger",
+ "Download config": "Télécharger votre vos données",
+ "Edit": "Editer",
+ "Edit Plant": "Editer la plante",
+ "every {{count}} days": {
+ "one": "tous les jours",
+ "many": "tous les {{count}} jours"
+ },
+ "Frequency": "Fréquence",
+ "Indoor": "Intérieur",
+ "last task": "dernière fois",
+ "Me": "Moi",
+ "Name": "Nom",
+ "never": "jamais",
+ "Outdoor": "Extérieur",
+ "Plantes": "Plantes",
+ "Plants": "Plantes",
+ "{{count}} Plants": "{{count}} Plantes",
+ "Profile": "Profile",
+ "Spot": "Emplacement",
+ "Spot:": "Emplacement : ",
+ "spraying": "asperger",
+ "Style": "Style",
+ "Tasks": "Tâches",
+ "watering": "arrosage",
+ "when you want": "quand je veux",
+ "since {{count}} days": {
+ "one": "depuis {{count}} jour",
+ "many": "depuis {{count}} jours"
+ }
+}
\ No newline at end of file
diff --git a/src/routes/Home.js b/src/routes/Home.js
index a7d9534..40b14ff 100644
--- a/src/routes/Home.js
+++ b/src/routes/Home.js
@@ -1,52 +1,59 @@
-import { createPortal } from "preact/compat"
-import { useContext, useState } from "preact/hooks"
-import {closeModal, Modal, ModalTitle} from "../components/Modals"
-import { PageLayout } from "../components/PageLayout"
-import {PlantForm, PlantThumb} from "../components/Plants"
-import { PlantsContext } from "../Contexts"
-import {Tasks} from "../components/Tasks"
-import {Text} from "../components/Translation";
+import { createPortal } from 'preact/compat'
+import { useContext, useState } from 'preact/hooks'
+import { closeModal, Modal, ModalTitle } from '../components/Modals'
+import { PageLayout } from '../components/PageLayout'
+import { PlantForm, PlantThumb } from '../components/Plants'
+import { PlantsContext } from '../Contexts'
+import { Tasks } from '../components/Tasks'
+import { Text } from '../components/Translation'
export const Home = () => {
- const [addModal, setAddModal] = useState(false)
- const { plants, addPlant } = useContext(PlantsContext)
+ const [addModal, setAddModal] = useState(false)
+ const { plants, addPlant } = useContext(PlantsContext)
- const handleSubmit = (e, plantForm) => {
- e.preventDefault()
- e.stopPropagation()
- addPlant(plantForm)
- setAddModal(false)
- }
+ const handleSubmit = (e, plantForm) => {
+ e.preventDefault()
+ e.stopPropagation()
+ addPlant(plantForm)
+ setAddModal(false)
+ }
- return (
-
+ return (
+
+
+
+
- closeModal(e, setAddModal)}>
-
-
- ,
- document.getElementById('app')
- )}
-
- )
+ {typeof window !== 'undefined' &&
+ createPortal(
+ closeModal(e, setAddModal)}>
+
+
+
+
+ ,
+ document.getElementById('app')
+ )}
+
+ )
}
export default Home
diff --git a/src/routes/Plant.js b/src/routes/Plant.js
index 7ca93e6..176063b 100644
--- a/src/routes/Plant.js
+++ b/src/routes/Plant.js
@@ -1,32 +1,38 @@
-import {createPortal, useRef} from "preact/compat"
-import { useContext, useEffect, useState } from "preact/hooks"
-import {Button, SmallButton} from "../components/Button"
-import {closeModal, 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 {EditSVG, PlusSVG, TriangleSVG} from "../components/SVG"
-import {classNames} from "../utilities/classNames"
-import {PlantForm} from "../components/Plants"
-import {ACTION_TYPES, actionId} from "../utilities/actions"
-import {Text} from "../components/Translation"
-
-const Plant = ({id}) => {
+import { createPortal, useRef } from 'preact/compat'
+import { useContext, useEffect, useState } from 'preact/hooks'
+import { Button, SmallButton } from '../components/Button'
+import { closeModal, 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 { EditSVG, PlusSVG, TriangleSVG } from '../components/SVG'
+import { PlantForm } from '../components/Plants'
+import { ACTION_TYPES, actionId } from '../utilities/actions'
+import { Text } from '../components/Translation'
+const Plant = ({ id }) => {
const [addModal, setAddModal] = useState(false)
const [editModal, setEditModal] = useState(false)
const [deleteModal, setDeleteModal] = useState(false)
- const {plants, editPlant, removePlant, addAction, doneTask, history, archivedEntries} = useContext(PlantsContext)
+ const {
+ plants,
+ editPlant,
+ removePlant,
+ addAction,
+ doneTask,
+ history,
+ archivedEntries,
+ } = useContext(PlantsContext)
const [plant, setPlant] = useState({})
const archived = archivedEntries(Number(id))
const [actionForm, setActionForm] = useState({})
- const [image, setImage] = useState(localStorage.getItem("image" + id) ?? '')
+ const [image, setImage] = useState(localStorage.getItem('image' + id) ?? '')
const pictureName = 'picture-' + id
const picture = useRef(null)
useEffect(() => {
- const plantFind = plants.find(plant => plant.id === Number(id))
+ const plantFind = plants.find((plant) => plant.id === Number(id))
setPlant(plantFind)
}, [])
@@ -42,144 +48,254 @@ const Plant = ({id}) => {
}
addAction(plant, actionForm)
setAddModal(false)
- }
+ }
- const handleEditSubmit = (e, plantForm) => {
- e.preventDefault()
- e.stopPropagation()
- editPlant(plantForm)
- setEditModal(false)
- setPlant(plantForm)
- }
+ const handleEditSubmit = (e, plantForm) => {
+ e.preventDefault()
+ e.stopPropagation()
+ editPlant(plantForm)
+ setEditModal(false)
+ setPlant(plantForm)
+ }
const handleDeletePlant = () => removePlant(plant)
const handleOpenEditModal = () => setEditModal(true)
- const addPicture = e => storePicture(e, id)
+ const addPicture = (e) => storePicture(e, id)
- return
-
-
-
- {plants.map(plant => plant.actions.filter(action => taskIsRequired(action)).map(action =>
-}
\ No newline at end of file
+ )
+}
diff --git a/src/components/Translation.js b/src/components/Translation.js
index 2783911..929cf0a 100644
--- a/src/components/Translation.js
+++ b/src/components/Translation.js
@@ -1,12 +1,11 @@
-import {en} from "../lang/en"
-import {fr} from "../lang/fr"
-import {useContext, useEffect, useState} from "preact/hooks"
-import {createContext} from "preact"
+import en from '../lang/en.json'
+import fr from '../lang/fr.json'
+import { useContext, useEffect, useState } from 'preact/hooks'
+import { createContext } from 'preact'
export const TranslateContext = createContext(null)
-export const Text = ({text, count = null}) => {
-
+export const Text = ({ text, count = null }) => {
const lang = useContext(TranslateContext)
const [translate, setTranslate] = useState()
@@ -27,23 +26,23 @@ export const Text = ({text, count = null}) => {
setTranslate(text)
}, [])
- return <>{ translate }
+ return <>{translate}
}
-export const TranslateProvider = ({children}) => {
-
+export const TranslateProvider = ({ children }) => {
let translate = null
- if (typeof navigator !== "undefined") {
+ if (typeof navigator !== 'undefined') {
const userLang = navigator.language || navigator.userLanguage
- if (userLang === "en") {
+ if (userLang === 'en') {
translate = en
- } else if (userLang === "fr") {
+ } else if (userLang === 'fr') {
translate = fr
}
}
- return
-
-
-
-
- {plant.name}
-
))}
+ return (
+
+
+
+
-
+
+
+ {plants.map((plant) =>
+ plant.actions
+ .filter((action) => taskIsRequired(action))
+ .map((action) => (
+
+
+
+
+
+
+ {plant.name}
+
+
+ ))
+ )}
+
+
+
+ {plants.map((plant) => (
+ {plant.name}
+ ))}
+
+
+
- setAddModal(true)}
+ className="flex h-16 w-16 cursor-pointer items-center justify-center rounded-full bg-primary text-white shadow hover:bg-primary-dark">
+
+
- {plants.map((plant) => (
- {plant.name}
- ))}
-
-
-
-
- {typeof window !== "undefined" && createPortal(
- setAddModal(true)}
- className="rounded-full shadow w-16 h-16 flex items-center justify-center cursor-pointer bg-primary hover:bg-primary-dark text-white">
-
-
-
- { plant.name }
-
-
-
-
-
-
-
- })
-
-
-
-
-
- {plant.description &&
- { plant.description }
} - {plant.hasOwnProperty('indoor') &&
- closeModal(e, setAddModal)}>
- ,
- app
- )}
-
- {createPortal(
- closeModal(e, setEditModal)}>
-
-
- ,
- app
- )}
-
- {createPortal(
- closeModal(e, setDeleteModal)}>
-
-
-
- ,
- app
- )}
-
+ {createPortal(
+ closeModal(e, setDeleteModal)}>
+
+
+
+ ,
+ app
+ )}
+
+ )
}
export default Plant
-const ArchivedAction = ({archived = []}) => {
+const ArchivedAction = ({ archived = [] }) => {
console.log(archived)
const [isOpen, setIsOpen] = useState(false)
- return <>
- {archived.length > 0 && setIsOpen(!isOpen)}>
- { archived.length }
-
-
-
+ )
+}
diff --git a/src/routes/Style.js b/src/routes/Style.js
index 595029f..cc3fa51 100644
--- a/src/routes/Style.js
+++ b/src/routes/Style.js
@@ -1,79 +1,86 @@
-import {PageLayout} from "../components/PageLayout";
-import {Button} from "../components/Button";
+import { PageLayout } from '../components/PageLayout'
+import { Button } from '../components/Button'
export default function Style() {
+ return (
+
+
-
-
- setAddModal(true)}>
-
-
- {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)).toSQLDate() >= (new Date()).toSQLDate()
- }
- return
-
-
-
-
+
+
+
+ {plant.name}
+
+
+
- })}
-
+
+
+
+
+
+
+
+
+ {plant.description &&
+ {plant.description}
} + {plant.hasOwnProperty('indoor') && ( + +
+
+
- {createPortal(
-
+
+
+ setAddModal(true)}>
+
+
+ {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))
+ .toSQLDate() >= new Date().toSQLDate()
+ }
+ return (
+
+
+
+
+
+
+
+
+ )
+ })}
+ -
- {archived.sortObjectsBy('time', true).map(archive =>
- {(new Date(archive.time)).toFrDate()} )} -
-
+ {archived
+ .sortObjectsBy('time', true)
+ .map((archive) => (
+
- {new Date(archive.time).toFrDate()} + ))} +
-
-
-
-
+
+ Style
- returnStyle
- -
-
-
-
-
- H1 Head
-H2 Headline
-H3 Headline
-H4 Headline
-H5 Headline
-H6 Headline
-Text paragraph
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Primary light
-
-
- Primary
-
-
- Primary dark
-
-
- Primary darkest
+
-
+
H1 Head
+H2 Headline
+H3 Headline
+H4 Headline
+H5 Headline
+H6 Headline
+Text paragraph
- Background Primary
+
+
-
-}
\ No newline at end of file
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/utilities/actions.js b/src/utilities/actions.js
index 150c418..f2194ff 100644
--- a/src/utilities/actions.js
+++ b/src/utilities/actions.js
@@ -1,6 +1,5 @@
-
export const ACTION_TYPES = ['watering', 'spraying', 'bathing']
export const actionId = (action) => {
- return ACTION_TYPES.findIndex(item => item === action)
-}
\ No newline at end of file
+ return ACTION_TYPES.findIndex((item) => item === action)
+}
diff --git a/src/utilities/classNames.js b/src/utilities/classNames.js
deleted file mode 100644
index 75d8dfe..0000000
--- a/src/utilities/classNames.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export function classNames() {
- // console.log(Object.values(arguments), Object.values(arguments).join(' '));
- return Object.values(arguments).join(' ')
-}
diff --git a/src/utilities/pictures.js b/src/utilities/pictures.js
index fb60f5b..4d8aa03 100644
--- a/src/utilities/pictures.js
+++ b/src/utilities/pictures.js
@@ -1,68 +1,66 @@
-
-const pictureName = id => {
+const pictureName = (id) => {
return 'picture-' + id
}
-export const getPicture = id => {
- return localStorage.getItem('picture-' + id ?? '') ?? ""
+export const getPicture = (id) => {
+ return localStorage.getItem(pictureName(id) ?? '') ?? ''
}
export const storePicture = (e, id) => {
- const files = e.target.files;
- let file = files[0];
+ const files = e.target.files
+ let file = files[0]
if (file) {
- const reader = new FileReader();
- reader.onload = function(e) {
- document.getElementById("picture").src = e.target.result;
- };
- reader.readAsDataURL(file);
+ const reader = new FileReader()
+ reader.onload = function (e) {
+ document.getElementById('picture').src = e.target.result
+ }
+ reader.readAsDataURL(file)
}
- const filesToUploads = document.getElementById("input-file").files;
- file = filesToUploads[0];
+ const filesToUploads = document.getElementById('input-file').files
+ file = filesToUploads[0]
if (file) {
const reader = new FileReader()
let dataPicture
reader.onload = function (e) {
- let img = document.createElement("img");
- img.src = e.target.result;
+ let img = document.createElement('img')
+ img.src = e.target.result
- let canvas = document.createElement("canvas");
- var ctx = canvas.getContext("2d");
- ctx.drawImage(img, 0, 0);
+ let canvas = document.createElement('canvas')
+ var ctx = canvas.getContext('2d')
+ ctx.drawImage(img, 0, 0)
- const MAX_WIDTH = 300;
- const MAX_HEIGHT = 300;
- let width = img.width;
- let height = img.height;
+ const MAX_WIDTH = 300
+ const MAX_HEIGHT = 300
+ let width = img.width
+ let height = img.height
if (width > height) {
if (width > MAX_WIDTH) {
- height *= MAX_WIDTH / width;
- width = MAX_WIDTH;
+ height *= MAX_WIDTH / width
+ width = MAX_WIDTH
}
} else {
if (height > MAX_HEIGHT) {
- width *= MAX_HEIGHT / height;
- height = MAX_HEIGHT;
+ width *= MAX_HEIGHT / height
+ height = MAX_HEIGHT
}
}
- canvas.width = width;
- canvas.height = height;
- var ctx = canvas.getContext("2d");
- ctx.drawImage(img, 0, 0, width, height);
+ canvas.width = width
+ canvas.height = height
+ var ctx = canvas.getContext('2d')
+ ctx.drawImage(img, 0, 0, width, height)
- dataPicture = canvas.toDataURL(file.type);
- document.getElementById("picture").src = dataPicture;
+ dataPicture = canvas.toDataURL(file.type)
+ document.getElementById('picture').src = dataPicture
setTimeout(() => {
localStorage.setItem(pictureName(id), dataPicture)
}, 500)
-
- };
- reader.readAsDataURL(file);
+ }
+ reader.readAsDataURL(file)
}
-}
\ No newline at end of file
+}
+
+
+ Primary light
+
+ Primary
+
+ Primary dark
+
+
+ Primary darkest
+
+ Background Primary
+