Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Develop #7

Closed
wants to merge 6 commits into from
Closed

Develop #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4439fbc
test
Henahax Aug 27, 2024
7ac91f0
data
Henahax Aug 27, 2024
c2ceaa1
progress
Henahax Aug 28, 2024
252a8c5
rework object
Henahax Sep 2, 2024
b733ddb
opacity tasks
Henahax Sep 2, 2024
55897c7
RC
Henahax Sep 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
313 changes: 171 additions & 142 deletions src/routes/reset/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,72 @@
<script lang="ts">
import Title from '$lib/Title.svelte';
import type { Task } from './types';
import { getUTCTimeForStartOfNextDay, getUTCTimeForStartOfNextWeek } from './functions.svelte';
import IntervalTimer from './IntervalTimer.svelte';
import EventTimer from './EventTimer.svelte';
import categories from './categories.json';
import taskList from './tasks.json';
import intervals from './intervals.json';
import categories from './categories.json';
import tasks from './tasks.json';

import type { Interval, Category, Task } from './types';

let tasks: Task[] = $state(taskList as Task[]);
let filter = $state('');
let data = $state([] as Interval[]);

$effect(() => {
getCookieValues(tasks);
});
function init() {
let initData = [] as any;

function getCookieValues(tasks: Task[]) {
// Parse cookies
const cookies = document.cookie.split('; ').map((cookie) => {
const [name, value] = cookie.split('=');
const [namespace, subname] = name.split('.');
return { namespace, subname, value };
});

tasks.forEach((task) => {
cookies.forEach(({ namespace, subname, value }) => {
if (namespace === task.id) {
if (subname === 'display') {
task.display = value === 'true';
} else if (subname === 'checked') {
task.checked = value === 'true';
intervals.forEach((interval) => {
// Clone the interval object to avoid mutating the original
let newInterval = { ...(interval as Interval) };
let myCategories = [] as Category[];

categories.forEach((category) => {
// Clone the category object to avoid mutating the original
let newCategory = { ...(category as Category) };
let myTasks = [] as Task[];

tasks.forEach((task) => {
if (task.interval === interval.id && task.category === category.id) {
cookies.forEach(({ namespace, subname, value }) => {
if (namespace === task.id) {
if (subname === 'display') {
task.display = value === 'true';
} else if (subname === 'checked') {
task.checked = value === 'true';
}
}
});
myTasks.push(task);
}
});

if (myTasks.length > 0) {
newCategory.tasks = myTasks; // Assign tasks to the cloned category
myCategories.push(newCategory);
}
});

if (myCategories.length > 0) {
newInterval.categories = myCategories;
initData.push(newInterval);
}
});

// Assign the processed data to the global `data` variable
data = initData;
}

$effect(() => {
init();
});

async function setCookie(task: Task, isSetting = false) {
let time = new Date().getTime();
let suffix: string;
Expand Down Expand Up @@ -151,97 +183,98 @@
</dialog>

<div class="mx-auto flex w-full flex-col justify-center gap-4 px-2 pb-2 sm:flex-row">
{#each intervals as interval}
{#if tasks.filter((task) => task.interval === interval.id && task.display).length > 0}
<div>
<h3 class="p-2 text-lg font-bold">
{interval.tasks} ({tasks.filter(
(task) => task.interval === interval.id && task.display && task.checked
).length}/{tasks.filter((task) => task.interval === interval.id && task.display)
.length}):
</h3>
<div
class="columns-1 gap-2 {interval.id === 'daily' ? 'xl:columns-2 2xl:columns-3' : ''}"
>
{#each categories as category}
{#each data as interval}
<div class="flex flex-col gap-2">
<h2 class="px-2 text-lg font-bold">
{#if interval && interval.categories}
{interval.tasks}
({interval.categories.reduce(
(sum, category) =>
sum + category.tasks.filter((task) => task.checked && task.display).length,
0
)}/{interval.categories.reduce(
(sum, category) => sum + category.tasks.filter((task) => task.display).length,
0
)}):
{/if}
</h2>

<div
class="columns-1 gap-2 {interval.id === 'daily' ? 'xl:columns-2 2xl:columns-3' : ''}"
>
{#each interval.categories as category}
{#if category.tasks.filter((task:Task) => task.display).length > 0}
<div
class="collapse-arrow bg-base-100 card collapse shadow-xl"
class:opacity-50={tasks.filter(
(task) =>
task.interval === interval.id &&
task.category === category.id &&
task.display &&
!task.checked
class="bg-base-100 collapse-plus collapse"
class:opacity-50={category.tasks.filter(
(tasks) => tasks.display && !tasks.checked
).length === 0}
id={category.id}
>
<input
class="collapse-checkbox"
type="checkbox"
title={interval.reset}
checked={tasks.filter(
(task) =>
task.interval === interval.id &&
task.category === category.id &&
task.display &&
!task.checked
).length > 0}
checked={category.tasks.filter((task:Task) => task.display && !task.checked)
.length !== 0}
/>
<div class="collapse-title flex items-center gap-2 font-semibold">
<div class="collapse-title flex flex-row items-center gap-2 font-semibold">
<i class={interval.class}></i>
{category.name}
</div>
<div class="collapse-content">
<ul class="divide-base-300 flex flex-col divide-y">
{#each tasks.filter((task) => task.interval === interval.id && task.category === category.id && task.display) as task}
<li class="flex flex-row items-center gap-2 py-1">
<label class="flex w-full flex-row items-center gap-2">
<input
class="checkbox checkbox-lg"
type="checkbox"
bind:checked={task.checked}
onchange={() => setCookie(task)}
/>
<img class="size-8" src={task.icon} alt={task.name} />
<div class="flex flex-col">
<div class="text-sm font-semibold">{task.name}</div>
{#if task.location}
<div class="text-xs opacity-70">
<i class="fa-solid fa-location-dot"></i>
{task.location}
</div>
{/if}
{#if task.description}
<div class="text-xs opacity-70">{task.description}</div>
{/if}
</div>
</label>
{#if !task.checked}
<div class="flex flex-col">
<div class="flex flex-row justify-end gap-1 text-sm">
<a href={task.link} title="more info">
<i class="fa-regular fa-circle-question"></i>
</a>
<ul class="flex flex-col justify-center gap-2">
{#each category.tasks as task}
{#if task.display}
<li class="flex flex-row gap-4">
<label
class="flex w-full cursor-pointer flex-row items-center gap-2 hover:brightness-125"
>
<input
class="checkbox checkbox-lg"
type="checkbox"
bind:checked={task.checked}
onchange={() => setCookie(task)}
/>
<img class="size-8" src={task.icon} alt={task.name} />
<div class="flex flex-col">
<div class="text-sm font-semibold">{task.name}</div>
{#if task.location}
<div class="text-xs opacity-70">
<i class="fa-solid fa-location-dot"></i>
{task.location}
</div>
{/if}
{#if task.description}
<div class="text-xs opacity-70">{task.description}</div>
{/if}
</div>
{#if task.timer}
<div class="flex flex-col justify-end text-right text-xs">
<EventTimer {task} />
</label>
{#if !task.checked}
<div class="flex flex-col justify-center">
<div class="flex flex-row justify-end gap-1 text-sm">
<a class="hover:opacity-50" href={task.link} title="more info">
<i class="fa-regular fa-circle-question"></i>
</a>
</div>
{/if}
</div>
{/if}
</li>
{#if task.timer}
<div class="flex flex-col justify-end text-right text-xs">
<EventTimer {task} />
</div>
{/if}
</div>
{/if}
</li>
{/if}
{/each}
</ul>
</div>
</div>
{/each}
</div>
{/if}
{/each}
</div>
{/if}
</div>
{/each}
</div>
</div>

<div class="drawer-side z-50">
<label for="my-drawer" aria-label="close sidebar" class="drawer-overlay"></label>

Expand All @@ -250,7 +283,7 @@
<div class="flex flex-row items-center justify-between gap-4">
<h2 class="text-xl">Displayed Tasks</h2>
<label for="my-drawer" aria-label="close sidebar" class="btn btn-ghost btn-xs btn-square">
<i class="fa-solid fa-xmark"></i>
✕
</label>
</div>

Expand All @@ -260,47 +293,59 @@
</label>
</div>

<div class="flex w-full flex-col gap-4 overflow-y-auto p-4">
{#each intervals as interval}
<div class="settingsInterval">
<h3 class="text-lg font-bold">{interval.tasks}</h3>
<div class="flex flex-col gap-2">
{#each categories as category}
<div class="settingsCategory">
<h4 class="text-md">{category.name}</h4>
<ul class="divide-y divide-neutral-700">
{#each tasks.filter((task) => task.interval === interval.id && task.category === category.id && (task.name
<div class="flex w-full flex-col gap-8 overflow-y-auto p-4">
{#each data.filter( (interval:Interval) => interval.categories.some( (category) => category.tasks.some((task) => task.name
.toLowerCase()
.includes(filter.toLowerCase()) || (task.location && task.location
.toLowerCase()
.includes(filter.toLowerCase())) || (task.description && task.description
.toLowerCase()
.includes(filter.toLowerCase()))) ) ) as interval}
<div class="flex flex-col gap-2">
<h3 class="text-lg font-bold">{interval.tasks}:</h3>
<div class="flex flex-col gap-4">
{#each interval.categories.filter( (category) => category.tasks.some((task) => task.name
.toLowerCase()
.includes(filter.toLowerCase()) || (task.location && task.location
.toLowerCase()
.includes(filter.toLowerCase()) || (task.description && task.description
.toLowerCase()
.includes(filter.toLowerCase())) || (task.location && task.location
.toLowerCase()
.includes(filter.toLowerCase())))) as task}
<li class="py-1">
<label class="flex flex-row items-center gap-2">
<input
class="checkbox"
type="checkbox"
bind:checked={task.display}
onchange={() => setCookie(task, true)}
/>
<img class="size-8" src={task.icon} alt={task.name} />
<div class="flex flex-col items-start">
<div class="text-sm">{task.name}</div>
{#if task.location}
<div class="text-xs opacity-70">
<i class="fa-solid fa-location-dot"></i>
{task.location}
</div>
{/if}
{#if task.description}
<div class="text-xs opacity-70">{task.description}</div>
{/if}
</div>
</label>
</li>
.includes(filter.toLowerCase())) || (task.description && task.description
.toLowerCase()
.includes(filter.toLowerCase()))) ) as category}
<div>
<div class="font-semibold">{category.name}</div>
<div class="flex flex-col justify-center">
{#each category.tasks.filter((task) => task.name
.toLowerCase()
.includes(filter.toLowerCase()) || (task.location && task.location
.toLowerCase()
.includes(filter.toLowerCase())) || (task.description && task.description
.toLowerCase()
.includes(filter.toLowerCase()))) as task}
<label class="flex flex-row items-center gap-2 py-1 hover:brightness-125">
<input
class="checkbox"
type="checkbox"
bind:checked={task.display}
onchange={() => setCookie(task, true)}
/>
<img class="size-8" src={task.icon} alt={task.name} />
<div class="flex flex-col justify-center">
<div class="text-sm">{task.name}</div>
{#if task.location}
<div class="text-xs opacity-50">
<i class="fa-solid fa-location-dot"></i>
{task.location}
</div>
{/if}
{#if task.description}
<div class="text-xs opacity-50">
{task.description}
</div>
{/if}
</div>
</label>
{/each}
</ul>
</div>
</div>
{/each}
</div>
Expand All @@ -312,29 +357,13 @@
</div>

<style>
.settingsInterval:not(:has(input[type='checkbox'])),
.settingsCategory:not(:has(input[type='checkbox'])),
.collapse:not(:has(li)) {
display: none;
}

.collapse:not(:last-child) {
margin-bottom: 0.5rem;
}

.collapse-content li:first-child {
padding-top: 0;
}

.collapse-content li:last-child {
padding-bottom: 0;
}

.collapse-content li:has(input[type='checkbox']:checked) {
text-decoration: line-through;
opacity: 0.5;
}

.info-grid {
grid-template-columns: fit-content(0) 1fr;
}
Expand Down
Loading
Loading