-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added sortable drag and drop for saved timers
- Loading branch information
Showing
8 changed files
with
205 additions
and
96 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -13,6 +13,7 @@ function App() { | |
| > | ||
| <TimerApp /> | ||
| <Sidebar /> | ||
|
|
||
| <SettingsMenu /> | ||
| </main> | ||
| ); | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,98 +1,53 @@ | ||
| import useStore from "../store/useStore"; | ||
| import CloseIcon from "../assets/icons/CloseIcon.svg"; | ||
| import { inputSettings as lang } from "../utils/lang"; | ||
|
|
||
| export default function Sidebar() { | ||
| const removeBorders = useStore((state) => state.removeUIBorders); | ||
| const enableBackgroundColors = useStore((state) => state.enableBackgroundColors); | ||
| import { DndContext, PointerSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core"; | ||
| import { SortableContext, arrayMove } from "@dnd-kit/sortable"; | ||
| import SidebarItem from "./SidebarItem"; | ||
|
|
||
| export default function Sidebar() { | ||
| const savedWorkouts = useStore((state) => state.savedWorkouts); | ||
| const setSavedWorkouts = useStore((state) => state.setSavedWorkouts); | ||
| const SetIsLoadingSavedTimer = useStore((state) => state.SetIsLoadingSavedTimer); | ||
| const preferredLanguage = useStore((state) => state.preferredLanguage); | ||
|
|
||
| function handleDelete(id) { | ||
| let timers = savedWorkouts.filter((i) => i.id !== id); | ||
| setSavedWorkouts(timers); | ||
| localStorage.setItem("savedTimer", JSON.stringify(timers)); | ||
| } | ||
|
|
||
| function handleLoad(id) { | ||
| let timer = savedWorkouts.find((i) => i.id === id); | ||
|
|
||
| useStore.setState({ | ||
| Rounds: timer.Rounds, | ||
| WorkMinutes: timer.WorkMinutes, | ||
| WorkSeconds: timer.WorkSeconds, | ||
| WorkColor: timer.WorkColor, | ||
| RestMinutes: timer.RestMinutes, | ||
| RestSeconds: timer.RestSeconds, | ||
| RestColor: timer.RestColor, | ||
| PrepareMinutes: timer.PrepareMinutes, | ||
| PrepareSeconds: timer.PrepareSeconds, | ||
| PrepColor: timer.PrepColor, | ||
| }); | ||
|
|
||
| // adds an effect to the inputs when the btn is clicked | ||
| SetIsLoadingSavedTimer(true); | ||
| setTimeout(() => { | ||
| SetIsLoadingSavedTimer(false); | ||
| }, 300); | ||
| const pointerSensor = useSensor(PointerSensor, { | ||
| activationConstraint: { | ||
| distance: 8, | ||
| }, | ||
| }); | ||
| const touchSensor = useSensor(TouchSensor, { | ||
| activationConstraint: { | ||
| delay: 250, | ||
| tolerance: 5, | ||
| }, | ||
| }); | ||
|
|
||
| const sensors = useSensors(pointerSensor, touchSensor); | ||
|
|
||
| function handleDragEnd(e) { | ||
| const { active, over } = e; | ||
| if (active.id !== over.id) { | ||
| const currentItems = [...savedWorkouts]; | ||
|
|
||
| const oldIndex = currentItems.findIndex((i) => i.id === active.id); | ||
| const newIndex = currentItems.findIndex((i) => i.id === over.id); | ||
|
|
||
| const newArray = arrayMove(currentItems, oldIndex, newIndex); | ||
| localStorage.setItem("savedTimer", JSON.stringify(newArray)); | ||
|
|
||
| setSavedWorkouts(newArray); | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <aside className="flex justify-center min-[1360px]:absolute mt-5 xl:mt-4 2xl:mt-9 2xl:pl-1 max-h-[95%] "> | ||
| <section className="2xl:px-2 py-1 2xl-px-4 flex flex-col gap-6 overflow-x-hidden overflow-y-auto"> | ||
| {savedWorkouts.map((i, index) => ( | ||
| <div | ||
| className="relative bg-neutral-900 px-16 sm:px-6 md:px-6 2xl:px-10 py-2 2xl:py-4 rounded-lg border border-gray-500 text-base xl:text-sm 2xl:text-base" | ||
| key={i.id} | ||
| style={{ borderColor: enableBackgroundColors && removeBorders ? "transparent" : "" }} | ||
| > | ||
| <div className="p-2 px-3 absolute top-0 right-0"> | ||
| <button onClick={() => handleDelete(i.id)}> | ||
| <img src={CloseIcon} alt="close" className="w-6" width="24" height="24" /> | ||
| </button> | ||
| </div> | ||
| <div className="flex text-2xl justify-center"> | ||
| <span>{i.Title || `Timer ${index + 1}`}</span> | ||
| </div> | ||
| <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3 sm:gap-y-2 lg:gap-x-6 py-2 sm:py-4 px-0 justify-center text-left text-md sm:text-lg min-[1360px]:text-sm min-[1620px]:text-base"> | ||
| <span className="sm:pl-5 text-center sm:text-left order-1 sm:order-none "> | ||
| {lang.rounds[preferredLanguage]} {i.Rounds} | ||
| </span> | ||
|
|
||
| <div className="order-2 sm:order-none flex gap-2 items-center"> | ||
| <span className={`rounded-full w-3 h-3 inline-block `} style={{ backgroundColor: i.WorkColor }}></span> | ||
| <span> | ||
| {lang.work[preferredLanguage]} {`${i.WorkMinutes}:${i.WorkSeconds}`} | ||
| </span> | ||
| </div> | ||
| <div className="order-4 sm:order-none flex gap-2 items-center"> | ||
| <span className={` rounded-full w-3 h-3 inline-block `} style={{ backgroundColor: i.PrepColor }}></span> | ||
| <span> | ||
| {lang.prepare[preferredLanguage]} {`${i.PrepareMinutes}:${i.PrepareSeconds}`} | ||
| </span> | ||
| </div> | ||
|
|
||
| <div className="order-3 sm:order-none flex gap-2 items-center"> | ||
| <span className={`rounded-full w-3 h-3 inline-block`} style={{ backgroundColor: i.RestColor }}></span> | ||
| <span> | ||
| {lang.rest[preferredLanguage]} {`${i.RestMinutes}:${i.RestSeconds}`} | ||
| </span> | ||
| </div> | ||
| </div> | ||
| <div className="flex justify-center"> | ||
| <button | ||
| onClick={() => handleLoad(i.id)} | ||
| className="bg-blue-500 text-black font-medium rounded-lg px-2 py-1 hover:bg-blue-600 transition duration-200" | ||
| > | ||
| Load | ||
| </button> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </section> | ||
| </aside> | ||
| <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}> | ||
| <aside className="flex justify-center min-[1360px]:fixed mt-5 xl:mt-4 2xl:mt-9 2xl:pl-1 max-h-[95%] xl:overflow-y-auto pr-2 "> | ||
| <section className="2xl:px-2 py-1 2xl-px-4 flex flex-col gap-6 "> | ||
| <SortableContext items={savedWorkouts}> | ||
| {savedWorkouts.map((i) => ( | ||
| <SidebarItem item={i} key={i.id} /> | ||
| ))} | ||
| </SortableContext> | ||
| </section> | ||
| </aside> | ||
| </DndContext> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| import { useSortable } from "@dnd-kit/sortable"; | ||
| import { CSS } from "@dnd-kit/utilities"; | ||
| import useStore from "../store/useStore"; | ||
| import CloseIcon from "../assets/icons/CloseIcon.svg"; | ||
| import { inputSettings as lang } from "../utils/lang"; | ||
|
|
||
| export default function SidebarItem({ item }) { | ||
| const { attributes, listeners, setNodeRef, transform, transition, isDragging, isSorting } = useSortable({ id: item.id }); | ||
|
|
||
| const style = { | ||
| transform: CSS.Transform.toString(transform), | ||
| transition, | ||
| }; | ||
| const savedWorkouts = useStore((state) => state.savedWorkouts); | ||
| const setSavedWorkouts = useStore((state) => state.setSavedWorkouts); | ||
| const SetIsLoadingSavedTimer = useStore((state) => state.SetIsLoadingSavedTimer); | ||
| const preferredLanguage = useStore((state) => state.preferredLanguage); | ||
| const removeBorders = useStore((state) => state.removeUIBorders); | ||
| const enableBackgroundColors = useStore((state) => state.enableBackgroundColors); | ||
|
|
||
| function handleDelete(id) { | ||
| let timers = savedWorkouts.filter((i) => i.id !== id); | ||
| setSavedWorkouts(timers); | ||
| localStorage.setItem("savedTimer", JSON.stringify(timers)); | ||
| } | ||
|
|
||
| function handleLoad(id) { | ||
| let timer = savedWorkouts.find((i) => i.id === id); | ||
|
|
||
| console.log(timer); | ||
| useStore.setState({ | ||
| Rounds: timer.Rounds, | ||
| WorkMinutes: timer.WorkMinutes, | ||
| WorkSeconds: timer.WorkSeconds, | ||
| WorkColor: timer.WorkColor, | ||
| RestMinutes: timer.RestMinutes, | ||
| RestSeconds: timer.RestSeconds, | ||
| RestColor: timer.RestColor, | ||
| PrepareMinutes: timer.PrepareMinutes, | ||
| PrepareSeconds: timer.PrepareSeconds, | ||
| PrepColor: timer.PrepColor, | ||
| }); | ||
|
|
||
| // adds an effect to the inputs when the btn is clicked | ||
| SetIsLoadingSavedTimer(true); | ||
| setTimeout(() => { | ||
| SetIsLoadingSavedTimer(false); | ||
| }, 300); | ||
| } | ||
|
|
||
| return ( | ||
| <div | ||
| ref={setNodeRef} | ||
| {...attributes} | ||
| {...listeners} | ||
| className="relative bg-neutral-900 px-16 sm:px-6 md:px-6 2xl:px-10 py-2 2xl:py-4 rounded-lg border border-gray-500 text-base xl:text-sm 2xl:text-base" | ||
| style={{ ...style, borderColor: enableBackgroundColors && removeBorders ? "transparent" : "" }} | ||
| > | ||
| <div className="p-2 px-3 absolute top-0 right-0"> | ||
| <button onClick={() => handleDelete(item.id)}> | ||
| <img src={CloseIcon} alt="close" className="w-6" width="24" height="24" /> | ||
| </button> | ||
| </div> | ||
| <div className="flex text-2xl justify-center"> | ||
| <span>{item.Title}</span> | ||
| </div> | ||
| <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3 sm:gap-y-2 lg:gap-x-6 py-2 sm:py-4 px-0 justify-center text-left text-md sm:text-lg min-[1360px]:text-sm min-[1620px]:text-base"> | ||
| <span className="sm:pl-5 text-center sm:text-left order-1 sm:order-none "> | ||
| {lang.rounds[preferredLanguage]} {item.Rounds} | ||
| </span> | ||
|
|
||
| <div className="order-2 sm:order-none flex gap-2 items-center"> | ||
| <span className={`rounded-full w-3 h-3 inline-block `} style={{ backgroundColor: item.WorkColor }}></span> | ||
| <span> | ||
| {lang.work[preferredLanguage]} {`${item.WorkMinutes}:${item.WorkSeconds}`} | ||
| </span> | ||
| </div> | ||
| <div className="order-4 sm:order-none flex gap-2 items-center"> | ||
| <span className={` rounded-full w-3 h-3 inline-block `} style={{ backgroundColor: item.PrepColor }}></span> | ||
| <span> | ||
| {lang.prepare[preferredLanguage]} {`${item.PrepareMinutes}:${item.PrepareSeconds}`} | ||
| </span> | ||
| </div> | ||
|
|
||
| <div className="order-3 sm:order-none flex gap-2 items-center"> | ||
| <span className={`rounded-full w-3 h-3 inline-block`} style={{ backgroundColor: item.RestColor }}></span> | ||
| <span> | ||
| {lang.rest[preferredLanguage]} {`${item.RestMinutes}:${item.RestSeconds}`} | ||
| </span> | ||
| </div> | ||
| </div> | ||
| <div className="flex justify-center"> | ||
| <button onClick={() => handleLoad(item.id)} className="bg-blue-500 text-black font-medium rounded-lg px-2 py-1 hover:bg-blue-600 transition duration-200"> | ||
| Load | ||
| </button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters