From b7ee1c0f26e4fa4a7f6f623583461f5a9278fae3 Mon Sep 17 00:00:00 2001 From: Mo Tarbin Date: Sun, 28 Jul 2024 22:55:14 -0400 Subject: Update landing Get start section --- src/views/Landing/FeaturesSection.jsx | 12 --- src/views/Landing/Footer.jsx | 26 +++--- src/views/Landing/GettingStarted.jsx | 162 ++++++++++++++++++++++++++++++++++ src/views/Landing/HomeHero.jsx | 13 +-- src/views/Landing/Landing.jsx | 3 + src/views/components/NavBar.jsx | 11 --- 6 files changed, 177 insertions(+), 50 deletions(-) create mode 100644 src/views/Landing/GettingStarted.jsx (limited to 'src/views') diff --git a/src/views/Landing/FeaturesSection.jsx b/src/views/Landing/FeaturesSection.jsx index 32dcbc8..dbabd43 100644 --- a/src/views/Landing/FeaturesSection.jsx +++ b/src/views/Landing/FeaturesSection.jsx @@ -110,18 +110,6 @@ function FeaturesSection() { return ( - - Donetick is under development - - - - - Donetick is beta software. and is still under development. thing may - change, break, or disappear at any time. Please use it at your own - risk and discretion. I will do my best to keep the service running - - - Why Donetick? diff --git a/src/views/Landing/Footer.jsx b/src/views/Landing/Footer.jsx index 11a011a..3047554 100644 --- a/src/views/Landing/Footer.jsx +++ b/src/views/Landing/Footer.jsx @@ -47,17 +47,6 @@ function Footer() { tick✓ - - Beta - @@ -65,11 +54,11 @@ function Footer() { Github - Core(Backend) + Donetick + Docker Images + + - Packages + Releases diff --git a/src/views/Landing/GettingStarted.jsx b/src/views/Landing/GettingStarted.jsx new file mode 100644 index 0000000..44aa532 --- /dev/null +++ b/src/views/Landing/GettingStarted.jsx @@ -0,0 +1,162 @@ +import { + AddHome, + AutoAwesome, + Cloud, + GitHub, + InstallMobile, + Storage, +} from '@mui/icons-material' +import { Box, Button, Card, Grid, styled, Typography } from '@mui/joy' +const IconContainer = styled('div')({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + borderRadius: '50%', + minWidth: '60px', + height: '60px', + marginRight: '16px', +}) + +const ButtonContainer = styled('div')({ + display: 'flex', + justifyContent: 'center', + marginTop: 'auto', +}) + +function StartOptionCard({ icon: Icon, title, description, button, index }) { + return ( + + {/* Changes are within this div */} + + {Icon} + + + {title} + + + + + {description} + + + {button} + + ) +} + +const GettingStarted = () => { + const information = [ + { + title: 'Donetick Web', + icon: , + description: + 'The easiest way! just create account and start using DoneTick', + button: ( + + ), + }, + { + title: 'Selfhosted', + icon: , + description: 'Download the binary and manage your own DoneTick instance', + button: ( + + ), + }, + { + title: 'Hassio Addon', + icon: , + description: + 'have Home Assistant? install DoneTick as a Home Assistant Addon with single click', + button: ( + + ), + }, + ] + return ( + + + Getting Started + + + + + you can start using DoneTick in multiple ways, easiest way is to use + Donetick Web and you can start in seconds, or if you are into + selfhosting you can download the binary and run it on your own server, + or if you are using Home Assistant you can install DoneTick as a Home + Assistant Addon + +
+ + {information.map((info, index) => ( + + + + ))} + +
+ + + ) +} + +export default GettingStarted diff --git a/src/views/Landing/HomeHero.jsx b/src/views/Landing/HomeHero.jsx index 644c9cc..35286ec 100644 --- a/src/views/Landing/HomeHero.jsx +++ b/src/views/Landing/HomeHero.jsx @@ -61,17 +61,6 @@ const HomeHero = () => { > tick - - Beta - ) @@ -167,7 +156,7 @@ const HomeHero = () => { className='hover:scale-105' onClick={() => { // new window open to https://github.com/Donetick: - window.open('https://github.com/donetick', '_blank') + window.open('https://github.com/donetick/donetick', '_blank') }} startDecorator={} > diff --git a/src/views/Landing/Landing.jsx b/src/views/Landing/Landing.jsx index 4ca1b60..7e70a03 100644 --- a/src/views/Landing/Landing.jsx +++ b/src/views/Landing/Landing.jsx @@ -9,6 +9,7 @@ import DemoMyChore from './DemoMyChore' import DemoScheduler from './DemoScheduler' import FeaturesSection from './FeaturesSection' import Footer from './Footer' +import GettingStarted from './GettingStarted' import HomeHero from './HomeHero' const Landing = () => { const Navigate = useNavigate() @@ -39,6 +40,8 @@ const Landing = () => { + + {/* */} { tick✓ - - Beta - Date: Mon, 29 Jul 2024 02:46:24 -0400 Subject: Update landing page with version number in footer --- src/views/Landing/Footer.jsx | 4 ++++ src/views/Landing/GettingStarted.jsx | 11 ++++++++++- 2 files changed, 14 insertions(+), 1 deletion(-) (limited to 'src/views') diff --git a/src/views/Landing/Footer.jsx b/src/views/Landing/Footer.jsx index 3047554..d8cd4a4 100644 --- a/src/views/Landing/Footer.jsx +++ b/src/views/Landing/Footer.jsx @@ -4,6 +4,7 @@ import Box from '@mui/joy/Box' import Link from '@mui/joy/Link' import Typography from '@mui/joy/Typography' import * as React from 'react' +import { version } from '../../../package.json' function Footer() { return ( @@ -103,6 +104,9 @@ function Footer() { Changelog(soon) + + V{version} + {/* diff --git a/src/views/Landing/GettingStarted.jsx b/src/views/Landing/GettingStarted.jsx index 44aa532..ede365d 100644 --- a/src/views/Landing/GettingStarted.jsx +++ b/src/views/Landing/GettingStarted.jsx @@ -7,6 +7,7 @@ import { Storage, } from '@mui/icons-material' import { Box, Button, Card, Grid, styled, Typography } from '@mui/joy' +import { useNavigate } from 'react-router-dom' const IconContainer = styled('div')({ display: 'flex', alignItems: 'center', @@ -65,6 +66,7 @@ function StartOptionCard({ icon: Icon, title, description, button, index }) { } const GettingStarted = () => { + const navigate = useNavigate() const information = [ { title: 'Donetick Web', @@ -72,7 +74,14 @@ const GettingStarted = () => { description: 'The easiest way! just create account and start using DoneTick', button: ( - ), -- cgit From e9745683748ac5ecfdf704607441a3204d8c5516 Mon Sep 17 00:00:00 2001 From: Mo Tarbin Date: Sat, 10 Aug 2024 02:08:49 -0400 Subject: Update Fetcher.jsx to include UpdateChoreAssignee function and ChoreCard.jsx to handle assignee change --- src/views/Chores/ChoreCard.jsx | 23 ++++++++++++++++------- src/views/Modals/Inputs/SelectModal.jsx | 4 ++-- src/views/components/NavBar.jsx | 10 +++++----- 3 files changed, 23 insertions(+), 14 deletions(-) (limited to 'src/views') diff --git a/src/views/Chores/ChoreCard.jsx b/src/views/Chores/ChoreCard.jsx index 97e407a..fdf025e 100644 --- a/src/views/Chores/ChoreCard.jsx +++ b/src/views/Chores/ChoreCard.jsx @@ -39,7 +39,7 @@ import moment from 'moment' import React, { useEffect } from 'react' import { useNavigate } from 'react-router-dom' import { API_URL } from '../../Config' -import { MarkChoreComplete, SkipChore } from '../../utils/Fetcher' +import { MarkChoreComplete, SkipChore, UpdateChoreAssignee } from '../../utils/Fetcher' import { Fetch } from '../../utils/TokenManager' import ConfirmationModal from '../Modals/Inputs/ConfirmationModal' import DateModal from '../Modals/Inputs/DateModal' @@ -219,7 +219,16 @@ const ChoreCard = ({ }) } const handleAssigneChange = assigneeId => { - // TODO: Implement assignee change + UpdateChoreAssignee(chore.id, assigneeId).then(response => { + if (response.ok) { + response.json().then(data => { + const newChore = data.res + onChoreUpdate(newChore, 'assigned') + }) + } + } + ) + } const handleCompleteWithNote = note => { Fetch(`${API_URL}/chores/${chore.id}/do`, { @@ -547,10 +556,6 @@ const ChoreCard = ({ Delegate to someone else - - - Complete as someone else - { @@ -620,10 +625,14 @@ const ChoreCard = ({ options={performers} displayKey='displayName' title={`Delegate to someone else`} + placeholder={'Select a performer'} onClose={() => { setIsChangeAssigneeModalOpen(false) }} - onSave={handleAssigneChange} + onSave={(selected)=>{ + handleAssigneChange(selected.id) + } + } /> { onSave(options.find(item => item.id === selected)) @@ -20,7 +20,7 @@ function SelectModal({ isOpen, onClose, onSave, options, title, displayKey }) { {title} - {options.map((item, index) => ( + setError(null)} + autoHideDuration={5000} + message={error} + > + {error} + ) } diff --git a/src/views/ChoreEdit/ChoreView.jsx b/src/views/ChoreEdit/ChoreView.jsx index 172ad9b..b77b511 100644 --- a/src/views/ChoreEdit/ChoreView.jsx +++ b/src/views/ChoreEdit/ChoreView.jsx @@ -3,6 +3,7 @@ import { CancelScheduleSend, Check, Checklist, + Edit, History, PeopleAlt, Person, @@ -258,7 +259,7 @@ const ChoreView = () => { > {infoCards.map((detail, index) => ( - + {/* divider between the list items: */} @@ -411,7 +412,15 @@ const ChoreView = () => { }} /> )} - + - or - - + + + More + + - + + + Date: Sun, 1 Sep 2024 14:11:08 -0400 Subject: Add CookiePermissionSnackbar component to Landing page, Better UI to selected dates --- src/views/Chores/ChoreCard.jsx | 40 +++++++++++++++++++------- src/views/Landing/CookiePermissionSnackbar.jsx | 40 ++++++++++++++++++++++++++ src/views/Landing/Landing.jsx | 3 +- 3 files changed, 72 insertions(+), 11 deletions(-) create mode 100644 src/views/Landing/CookiePermissionSnackbar.jsx (limited to 'src/views') diff --git a/src/views/Chores/ChoreCard.jsx b/src/views/Chores/ChoreCard.jsx index fdf025e..29ee933 100644 --- a/src/views/Chores/ChoreCard.jsx +++ b/src/views/Chores/ChoreCard.jsx @@ -3,7 +3,6 @@ import { Check, Delete, Edit, - HowToReg, KeyboardDoubleArrowUp, LocalOffer, ManageSearch, @@ -39,7 +38,11 @@ import moment from 'moment' import React, { useEffect } from 'react' import { useNavigate } from 'react-router-dom' import { API_URL } from '../../Config' -import { MarkChoreComplete, SkipChore, UpdateChoreAssignee } from '../../utils/Fetcher' +import { + MarkChoreComplete, + SkipChore, + UpdateChoreAssignee, +} from '../../utils/Fetcher' import { Fetch } from '../../utils/TokenManager' import ConfirmationModal from '../Modals/Inputs/ConfirmationModal' import DateModal from '../Modals/Inputs/DateModal' @@ -226,9 +229,7 @@ const ChoreCard = ({ onChoreUpdate(newChore, 'assigned') }) } - } - ) - + }) } const handleCompleteWithNote = note => { Fetch(`${API_URL}/chores/${chore.id}/do`, { @@ -314,8 +315,28 @@ const ChoreCard = ({ return 'Yearly' } else if (chore.frequencyType === 'days_of_the_week') { let days = JSON.parse(chore.frequencyMetadata).days - days = days.map(d => moment().day(d).format('ddd')) - return days.join(', ') + if (days.length > 4) { + const allDays = [ + 'Sunday', + 'Monday', + 'Tuesday', + 'Wednesday', + 'Thursday', + 'Friday', + 'Saturday', + ] + const selectedDays = days.map(d => moment().day(d).format('dddd')) + const notSelectedDay = allDays.filter( + day => !selectedDays.includes(day), + ) + const notSelectedShortdays = notSelectedDay.map(d => + moment().day(d).format('ddd'), + ) + return `Daily except ${notSelectedShortdays.join(', ')}` + } else { + days = days.map(d => moment().day(d).format('ddd')) + return days.join(', ') + } } else if (chore.frequencyType === 'day_of_the_month') { let freqData = JSON.parse(chore.frequencyMetadata) const months = freqData.months.map(m => moment().month(m).format('MMM')) @@ -629,10 +650,9 @@ const ChoreCard = ({ onClose={() => { setIsChangeAssigneeModalOpen(false) }} - onSave={(selected)=>{ + onSave={selected => { handleAssigneChange(selected.id) - } - } + }} /> { + useEffect(() => { + const cookiePermission = Cookies.get('cookies_permission') + + if (cookiePermission !== 'true') { + setOpen(true) + } + }, []) + + const [open, setOpen] = useState(false) + const handleClose = () => { + // Cookies.set('cookies_permission', 'true') + setOpen(false) + } + + return ( + { + if (reason === 'clickaway') { + return + } + // Cookies.set('cookies_permission', 'true') + handleClose() + }} + > + We use cookies to ensure you get the best experience on our website. + + + ) +} + +export default CookiePermissionSnackbar diff --git a/src/views/Landing/Landing.jsx b/src/views/Landing/Landing.jsx index 7e70a03..a323ecc 100644 --- a/src/views/Landing/Landing.jsx +++ b/src/views/Landing/Landing.jsx @@ -3,6 +3,7 @@ import AOS from 'aos' import 'aos/dist/aos.css' import { useEffect } from 'react' import { useNavigate } from 'react-router-dom' +import CookiePermissionSnackbar from './CookiePermissionSnackbar' import DemoAssignee from './DemoAssignee' import DemoHistory from './DemoHistory' import DemoMyChore from './DemoMyChore' @@ -52,7 +53,7 @@ const Landing = () => { mb: 5, }} > - +