Skip to content

Commit 01218d8

Browse files
Hex-4Hex-4
committed
make saving work ‼️ 
1 parent 8c6ac69 commit 01218d8

File tree

4 files changed

+113
-38
lines changed

4 files changed

+113
-38
lines changed

‎bun.lock‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"dependencies": {
77
"chromapicker": "^1.0.2",
88
"date-fns": "^4.1.0",
9+
"lockr": "^0.9.0-beta.2",
910
},
1011
"devDependencies": {
1112
"@eslint/compat": "^1.2.5",
@@ -503,6 +504,8 @@
503504

504505
"locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],
505506

507+
"lockr": ["lockr@0.9.0-beta.2", "", {}, "sha512-kxlAUIdLZ6pClbhlFQBjSC7fdytyk2Y2O+htfgFwegHhKOqrJ7krK1QZOe5yHPBxvvqXpMRE4zLTHkjhB3Be8Q=="],
508+
506509
"lodash.castarray": ["lodash.castarray@4.4.0", "", {}, "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q=="],
507510

508511
"lodash.isplainobject": ["lodash.isplainobject@4.0.6", "", {}, "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="],

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
},
3939
"dependencies": {
4040
"chromapicker": "^1.0.2",
41-
"date-fns": "^4.1.0"
41+
"date-fns": "^4.1.0",
42+
"lockr": "^0.9.0-beta.2"
4243
}
4344
}

‎src/components/dot.svelte‎

Lines changed: 64 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,123 @@
11
<script>
2-
let { dotNum, nowDots } = $props();
2+
let { dotNum, nowDots, newColor = $bindable(), note = $bindable() } = $props();
33
import { onMount } from 'svelte';
4+
import { browser } from '$app/environment';
45
56
import ColorPicker, { ChromeVariant } from 'svelte-awesome-color-picker';
67
78
let popover = $state();
9+
let origColor = $state();
810
911
function openPopover() {
1012
console.log(popover);
1113
popover.showPopover();
1214
}
1315
14-
let color = $state();
15-
let note = $state("")
16+
let color = $derived.by(() => {
17+
if (newColor) {
18+
console.log('USING NEW');
19+
return newColor;
20+
} else {
21+
return origColor;
22+
}
23+
});
1624
1725
$effect(() => {
1826
if (dotNum < nowDots) {
19-
color = 'bg-text';
27+
origColor = 'bg-text';
2028
} else if (dotNum == nowDots) {
21-
color = 'bg-primary';
29+
origColor = 'bg-primary';
2230
} else {
23-
color = 'bg-inactive';
31+
origColor = 'bg-inactive';
2432
}
25-
})
26-
27-
$inspect(color);
33+
});
2834
35+
function lerp(i) {
36+
if (browser) {
37+
const t = i / (document.querySelectorAll('.dot').length - 1); // normalize 0 -> 1
38+
const eased = t * t;
39+
return eased * 3000; // max delay in ms
40+
} else {
41+
return 1;
42+
}
43+
}
2944
45+
$inspect(newColor);
3046
</script>
3147

3248
{#snippet picker()}
33-
<div popover class="bg-bg border-text rounded-xl border-1 p-4 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 backdrop:backdrop-blur-sm transition-all open:flex flex-row items-center gap-3" bind:this={popover}>
49+
<div
50+
popover
51+
class="bg-bg border-text absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex-row items-center gap-3 rounded-xl border-1 p-4 transition-all backdrop:backdrop-blur-sm open:flex"
52+
bind:this={popover}
53+
>
3454
<!-- svelte-ignore a11y_click_events_have_key_events -->
3555
<!-- svelte-ignore a11y_no_static_element_interactions -->
36-
56+
3757
<div class="flex flex-row gap-1">
38-
<div aria-label="Red"
58+
<div
59+
aria-label="Red"
3960
class="bg-red h-6 w-3 rounded-full transition-all hover:w-6"
4061
onclick={() => {
41-
color = 'bg-red';
62+
newColor = 'bg-red';
4263
}}
4364
></div>
44-
<div aria-label="Yellow"
65+
<div
66+
aria-label="Yellow"
4567
class="bg-yellow h-6 w-3 rounded-full transition-all hover:w-6"
4668
onclick={() => {
47-
color = 'bg-yellow';
69+
newColor = 'bg-yellow';
4870
}}
4971
></div>
50-
<div aria-label="Green"
72+
<div
73+
aria-label="Green"
5174
class="bg-green h-6 w-3 rounded-full transition-all hover:w-6"
5275
onclick={() => {
53-
color = 'bg-green';
76+
newColor = 'bg-green';
5477
}}
5578
></div>
56-
<div aria-label="Blue"
79+
<div
80+
aria-label="Blue"
5781
class="bg-blue h-6 w-3 rounded-full transition-all hover:w-6"
5882
onclick={() => {
59-
color = 'bg-blue';
83+
newColor = 'bg-blue';
6084
}}
6185
></div>
62-
<div aria-label="Primary"
86+
<div
87+
aria-label="Primary"
6388
class="bg-primary h-6 w-3 rounded-full transition-all hover:w-6"
6489
onclick={() => {
65-
color = 'bg-primary';
90+
newColor = 'bg-primary';
6691
}}
6792
></div>
68-
<div aria-label="Inactive"
93+
<div
94+
aria-label="Inactive"
6995
class="bg-inactive h-6 w-3 rounded-full transition-all hover:w-6"
7096
onclick={() => {
71-
color = 'bg-inactive';
97+
newColor = 'bg-inactive';
98+
}}
99+
></div>
100+
<div
101+
aria-label="Reset"
102+
class="border-text text-text h-6 w-3 rounded-full border-2 border-dashed transition-all hover:w-6"
103+
onclick={() => {
104+
newColor = "";
72105
}}
73106
></div>
74107
</div>
75-
<div class="w-[1px] h-10 bg-text"></div>
76-
<input type="text" bind:value={note} placeholder="add a note..." class="bg-inactive rounded-lg text-text h-8 text-md w-70">
108+
<div class="bg-text h-10 w-[1px]"></div>
109+
<input
110+
type="text"
111+
bind:value={note}
112+
placeholder="add a note..."
113+
class="bg-inactive text-text text-md h-8 w-70 rounded-lg"
114+
/>
77115
</div>
78116
{/snippet}
79117

80118
<div>
81119
<button onclick={openPopover} aria-label="Open Dot Dialog">
82-
<div class={['dot size-6 rounded-full', color]}></div>
120+
<div class={['dot size-6 rounded-full transition-all duration-1000', color]}></div>
83121
{@render picker()}
84122
</button>
85123
{@render picker()}

‎src/routes/+page.svelte‎

Lines changed: 44 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111
} from 'date-fns';
1212
import Dot from '../components/dot.svelte';
1313
import { browser } from '$app/environment';
14+
import * as Lockr from "lockr"
15+
1416
1517
function changeBg() {
1618
document.querySelector(':root').style.setProperty('--bg-color', '#ffffff');
@@ -19,6 +21,9 @@
1921
let unit = $state('day');
2022
let timerange = $state('month');
2123
24+
let currentColors = $state(new Array(30).fill(''));
25+
let currentNotes = $state(new Array(30).fill(''));
26+
2227
const secondsPer = {
2328
min: 60,
2429
hour: 60 * 60,
@@ -110,7 +115,21 @@
110115
111116
let rows = $derived(Math.ceil(dots / cols));
112117
let lastRow = $derived(dots % cols);
113-
$inspect(nowDots);
118+
119+
let viewID = $derived(timerange + unit + colsName);
120+
121+
function save() {
122+
console.log("SAVING!")
123+
Lockr.set(viewID + "_notes", currentNotes)
124+
Lockr.set(viewID + "_colors", currentColors)
125+
}
126+
127+
$effect(() => {
128+
currentColors = Lockr.get(viewID + "_colors", new Array(30).fill(''))
129+
currentNotes = Lockr.get(viewID + "_notes", new Array(30).fill(''))
130+
})
131+
132+
$inspect(currentColors);
114133
</script>
115134

116135
{#snippet grid()}
@@ -119,23 +138,38 @@
119138
<div class="flex flex-row gap-1">
120139
{#each cols != null ? { length: cols } : { length: 1 }, dot}
121140
{#if lastRow == 0}
122-
<Dot dotNum={row * cols + dot + 1} {nowDots} />
141+
<Dot
142+
dotNum={row * cols + dot + 1}
143+
{nowDots}
144+
bind:newColor={currentColors[calcAmountOfDots(row, dot) - 1]}
145+
bind:note={currentNotes[calcAmountOfDots(row, dot) - 1]}
146+
/>
123147
{:else if dot + 1 <= lastRow || row + 1 != rows}
124-
<Dot dotNum={row * cols + dot + 1} {nowDots} />
148+
<Dot
149+
dotNum={row * cols + dot + 1}
150+
{nowDots}
151+
bind:newColor={currentColors[calcAmountOfDots(row, dot) - 1]}
152+
bind:note={currentNotes[calcAmountOfDots(row, dot) - 1]}
153+
/>
125154
{/if}
126155
{/each}
127156
</div>
128157
{/each}
129158
</div>
130159
{/snippet}
131160

132-
<div class="bg-bg h-full w-full min-h-screen min-w-screen p-50">
133-
{#if timerange === 'year' && colsName === 'month' && unit === "day"}
161+
<div class="bg-bg h-full min-h-screen w-full min-w-screen p-50 transition-all">
162+
{#if timerange === 'year' && colsName === 'month' && unit === 'day'}
134163
<div class="flex flex-col gap-1">
135164
{#each { length: 12 }, row}
136165
<div class="flex flex-row gap-1">
137166
{#each { length: daysInMonth[row] }, dot}
138-
<Dot dotNum={calcAmountOfDots(row, dot)} {nowDots} />
167+
<Dot
168+
dotNum={calcAmountOfDots(row, dot)}
169+
{nowDots}
170+
bind:newColor={currentColors[calcAmountOfDots(row, dot) - 1]}
171+
bind:note={currentNotes[calcAmountOfDots(row, dot) - 1]}
172+
/>
139173
{/each}
140174
</div>
141175
{/each}
@@ -174,9 +208,8 @@
174208
<option value="year">a year</option>
175209
</select>
176210

177-
<div popover id="test" class="size-24 bg-primary">
178-
<!-- <ColorPicker components={ChromeVariant} sliderDirection="horizontal" isDialog={false} /> -->
179-
180-
</div>
181-
<button popovertarget="test" class="bg-inactive text-text"> test</button>
211+
<br />
212+
213+
<button class="bg-inactive text-text" onclick={save}>save notes and colors to this view</button>
214+
<button class="bg-inactive text-text">reset saved data for this view</button>
182215
</div>

0 commit comments

Comments
 (0)