sofia/identity
1
0
Fork 0
Code Issues 7 Pull requests Actions Packages Projects Releases Wiki Activity

checkpoint 6

Browse source
This commit is contained in:
Sofía Aritz 2024-06-15 17:37:15 +02:00
parent aaefd1b52a
commit 98eaa919ad
Signed by: sofia
GPG key ID: 90B5116E3542B28F
10 changed files with 228 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
identity-web/package.json
View file

@ -35,6 +35,9 @@
},
"type": "module",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.5.2",
"@fortawesome/free-solid-svg-icons": "^6.5.2",
"@fortawesome/svelte-fontawesome": "^0.2.2",
"felte": "^1.2.14"
}
}

5
identity-web/src/lib/entry.ts Normal file
View file

@ -0,0 +1,5 @@
export type Entry = SongEntry | AlbumEntry | EventEntry | MemoryEntry | FeelingEntry | EnvironmentEntry | DateEntry;
export type SongEntry = {
kind: "song"
}

12
identity-web/src/routes/+page.svelte
View file

@ -1,11 +1 @@
<script>
import {login} from '$lib/api.ts'
const handler = async () => {
console.log(await login({
email: 'mock@example.com',
password: 'mock_password'
}))
}
</script>
<button on:click={handler}>Test</button>
<h1>Landing</h1>

58
identity-web/src/routes/dashboard/+page.svelte
View file

@ -1,5 +1,9 @@
<script>
import { account } from "$lib/stores";
import ExternalLink from "./ExternalLink.svelte";
import FeelingPill from "./FeelingPill.svelte";
import Memory from "./Memory.svelte";
import MemoryDescription from "./MemoryDescription.svelte";
</script>
<div class="mt-3.5 justify-center flex ">
@ -9,8 +13,8 @@
<div class="p-6 border border-gray-200 rounded-lg shadow w-full">
<h2 class="text-xl">Latest activity</h2>
<div class="pt-2">
<p>New song: <span class="font-bold">Takin' what's not yours</span></p>
<p>New song: <span class="font-bold">Lovers Rock</span></p>
<p>New song: <span class="font-bold">TV Girl &dash; Taking what's not yours</span></p>
<p>New album: <span class="font-bold">femtanyl &dash; CHASER</span></p>
<p>New memory: <a href="#memory" class="font-bold text-violet-600 hover:underline">§ At the sunflower field with Ms. Violet</a></p>
</div>
</div>
@ -18,10 +22,58 @@
<h2 class="text-xl">Memories from the past</h2>
<div class="pt-2">
<p><time class="pr-2.5 font-mono" datetime="2024-04-13">13/04/2024</time> <a href="#memory" class="font-bold text-violet-600 hover:underline">§ 2024 Birthday</a></p>
<p><time class="pr-2.5 font-mono" datetime="2024-04-01">01/04/2024</time> New song: <span class="font-bold">KMAG YOYO</span></p>
<p><time class="pr-2.5 font-mono" datetime="2024-04-01">01/04/2024</time> New song: <span class="font-bold">Hayes Carll &dash; KMAG YOYO</span></p>
<p><time class="pr-2.5 font-mono" datetime="2024-03-20">20/03/2024</time> <a href="#memory" class="font-bold text-violet-600 hover:underline">§ A new era</a></p>
</div>
</div>
</div>
<div class="w-full flex items-baseline justify-between">
<h2 class="text-2xl mt-6">Memories</h2>
<a class="rounded-lg bg-violet-700 text-white px-3 py-2 text-center hover:bg-violet-800 focus:ring-4 focus:ring-violet-300" href="/memory/new">+ Add a memory</a>
</div>
<div class="mt-3.5 flex flex-col gap-1">
<Memory kind="song" date={new Date("2024-04-13")}>
<ExternalLink href="https://open.spotify.com/track/53mChDyESfwn9Dz8poHRf6">TV Girl &dash; Taking what's not yours</ExternalLink>
<div slot="extended">
<FeelingPill feeling="active"/>
<FeelingPill feeling="happy"/>
<MemoryDescription>
Taking what's not yours is a song that I really like because it talks of things that I find interesting.
</MemoryDescription>
</div>
</Memory>
<Memory kind="album" date={new Date("2024-04-13")}>
<ExternalLink href="https://open.spotify.com/album/1d2PspdXmwrBEcOtquCvzT">femtanyl &dash; CHASER</ExternalLink>
</Memory>
<Memory kind="event" title="SalmorejoTech 2024" date={new Date("2024-04-26")}>
<div slot="extended">
<FeelingPill feeling="excited"/>
<MemoryDescription>SalmorejoTech is a great tech-event. I met some people and everything went great! :)</MemoryDescription>
</div>
</Memory>
<Memory kind="memory" title="At the sunflower field with Ms. Violet" date={new Date("2024-06-26")}>
<MemoryDescription slot="extended">Ms. Violet is my friend, she is a great friend. We spent a good time at the sunflower field. I am lucky to have a friend like her.</MemoryDescription>
</Memory>
<Memory kind="feeling" date={new Date("2024-01-01")}>
<FeelingPill feeling="excited"/>
<MemoryDescription slot="extended">New Year, New me! I'm really excited about what's going to happen this year, lots of changes. Changes may be scary, but they usually are for good!</MemoryDescription>
</Memory>
<Memory kind="environment" title="The park" date={new Date("2024-04-28")}>
<div slot="extended">
<FeelingPill feeling="happy"/>
<FeelingPill feeling="relaxed"/>
<MemoryDescription>The park is a really chill place where I can go and relax for a bit before going to work.</MemoryDescription>
</div>
</Memory>
<Memory kind="date" date={new Date("2024-04-28")}>
<div slot="extended">
<FeelingPill feeling="happy"/>
<MemoryDescription>This day has been a great day! I've talked with my friends.</MemoryDescription>
</div>
</Memory>
</div>
</div>
</div>

11
identity-web/src/routes/dashboard/ExternalLink.svelte Normal file
View file

@ -0,0 +1,11 @@
<script lang="ts">
import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/svelte-fontawesome";
export let href: string
</script>
<a class="font-bold text-violet-600 text-left flex gap-2 items-center hover:underline" target="_blank" href={href}>
<FontAwesomeIcon icon={faArrowUpRightFromSquare}/>
<slot/>
</a>

37
identity-web/src/routes/dashboard/FeelingPill.svelte Normal file
View file

@ -0,0 +1,37 @@
<script lang="ts">
// TODO: Design a more _formal_ color system for emotions (>strong = >weight, etc).
const DEFAULT_COLORS: {[index: string]: string[]} = {
"__DEFAULT__": ["#0a0a0a", "#fafafa"],
"afraid": ["#fda4af", "#0a0a0a"],
"angry": ["#dc2626", "#fafafa"],
"bad": ["#450a0a", "#fafafa"],
"bored": ["#d4d4d8", "#0a0a0a"],
"confused": ["#fef3c7", "#0a0a0a"],
"excited": ["#f97316", "#fafafa"],
"fine": ["#bef264", "#0a0a0a"],
"happy": ["#facc15", "#0a0a0a"],
"hurt": ["#ff69b4", "#0a0a0a"],
"in love": ["#ff1493", "#fafafa"],
"mad": ["#450a0a", "#fafafa"],
"nervous": ["#7e22ce", "#fafafa"],
"okay": ["#86efac", "#0a0a0a"],
"sad": ["#0284c7", "#fafafa"],
"scared": ["#334155", "#fafafa"],
"shy": ["#cbd5e1", "#0a0a0a"],
"sleepy": ["#7dd3fc", "#0a0a0a"],
"active": ["#059669", "#fafafa"],
"surprised": ["#fbbf24", "#0a0a0a"],
"tired": ["#92400e", "#fafafa"],
"upset": ["#b91c1c", "#fafafa"],
"worried": ["#d4d4d8", "#0a0a0a"],
"relaxed": ["#86efac", "#0a0a0a"],
};
export let feeling: "relaxed" | "afraid" | "angry" | "bad" | "bored" | "confused" | "excited" | "fine" | "happy" | "hurt" | "in love" | "mad" | "nervous" | "okay" | "sad" | "scared" | "shy" | "sleepy" | "active" | "surprised" | "tired" | "upset" | "worried" | string
export let bgColor: string = (DEFAULT_COLORS[feeling] || DEFAULT_COLORS["__DEFAULT__"])[0]
export let textColor: string = (DEFAULT_COLORS[feeling] || DEFAULT_COLORS["__DEFAULT__"])[1]
</script>
<div class="inline-block py-0.5 px-1.5 rounded-full text-sm font-semibold my-0.5 w-20 text-center" style={`background-color: ${bgColor}`}>
<span style={`color: ${textColor}`}>{feeling.charAt(0).toUpperCase() + feeling.slice(1)}</span>
</div>

51
identity-web/src/routes/dashboard/Memory.svelte Normal file
View file

@ -0,0 +1,51 @@
<script lang="ts">
import MemoryKind from "./MemoryKind.svelte";
export let date: Date;
export let kind: "song" | "album" | "event" | "feeling" | "environment" | "date" | "memory";
export let title: string | null = kind === "date" ? date.toLocaleDateString() : null;
export let isExtended = false;
$: cardClass = () => {
let cardClass = "border border-gray-200 rounded-lg shadow w-full flex p-3.5"
if (isExtended) {
cardClass += " flex-col gap-1.5"
} else {
if (["event", "environment", "memory"].includes(kind)) {
cardClass += " flex-col"
} else {
cardClass += " gap-4 items-center"
}
}
console.log(cardClass)
return cardClass
};
</script>
<div class={cardClass()}>
<button on:click={() => isExtended = !isExtended}>
<div class="flex items-center gap-2.5">
<MemoryKind kind={kind}/>
{#if title != null && isExtended}
<time datetime={date.toISOString()}>{date.toLocaleDateString()}</time>
{:else if title != null}
<h2 class="text-xl text-left font-semibold">{title}</h2>
{:else if isExtended}
<time datetime={date.toISOString()}>{date.toLocaleDateString()}</time>
{/if}
</div>
{#if title != null && isExtended}
<h2 class="text-xl text-left font-semibold">{title}</h2>
{/if}
</button>
<slot/>
{#if isExtended}
<slot name="extended"/>
{/if}
</div>

3
identity-web/src/routes/dashboard/MemoryDescription.svelte Normal file
View file

@ -0,0 +1,3 @@
<p class="w-full text-left">
<slot/>
</p>

24
identity-web/src/routes/dashboard/MemoryKind.svelte Normal file
View file

@ -0,0 +1,24 @@
<script lang="ts">
import { faCalendarDays, faChampagneGlasses, faHeartPulse, faLandmarkDome, faMusic, faNewspaper, faRecordVinyl, faSeedling } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/svelte-fontawesome";
export let kind: "song" | "album" | "event" | "feeling" | "environment" | "date" | "memory"
</script>
{#if kind === "song"}
<span class="text-xl flex gap-2.5 items-center"><FontAwesomeIcon icon={faMusic}/> Song</span>
{:else if kind === "album"}
<span class="text-xl flex gap-2.5 items-center"><FontAwesomeIcon icon={faRecordVinyl}/> Album</span>
{:else if kind === "event"}
<span class="text-xl flex gap-2.5 items-center"><FontAwesomeIcon icon={faChampagneGlasses}/> Event</span>
{:else if kind === "memory"}
<span class="text-xl flex gap-2.5 items-center"><FontAwesomeIcon icon={faNewspaper}/> Memory</span>
{:else if kind === "feeling"}
<span class="text-xl flex gap-2.5 items-center"><FontAwesomeIcon icon={faHeartPulse}/> Feeling</span>
{:else if kind === "environment"}
<span class="text-xl flex gap-2.5 items-center"><FontAwesomeIcon icon={faSeedling}/> Environment</span>
{:else if kind === "date"}
<span class="text-xl flex gap-2.5 items-center"><FontAwesomeIcon icon={faCalendarDays}/> Date</span>
{:else}
<span>Unknown value. Try loading the page again.</span>
{/if}

38
identity-web/yarn.lock
View file

@ -259,6 +259,41 @@ __metadata:
languageName: node
linkType: hard
"@fortawesome/fontawesome-common-types@npm:6.5.2":
version: 6.5.2
resolution: "@fortawesome/fontawesome-common-types@npm:6.5.2"
checksum: 10c0/12104e93a0056ad1077f7350826f52aa26465bb1d6b4ce75dab0307072a3871301ec750c3a34d89d05e7338c9b446fa2793150cf58a5167217021943ef877d77
languageName: node
linkType: hard
"@fortawesome/fontawesome-svg-core@npm:^6.5.2":
version: 6.5.2
resolution: "@fortawesome/fontawesome-svg-core@npm:6.5.2"
dependencies:
"@fortawesome/fontawesome-common-types": "npm:6.5.2"
checksum: 10c0/91695dd375623988d16e6f0dc69d20350ef3fa3296fe40aa08877aae7beaf64378134656a2227419fe648dcd27a81c03fe1fd9a6c87956d863164b0380ba77d0
languageName: node
linkType: hard
"@fortawesome/free-solid-svg-icons@npm:^6.5.2":
version: 6.5.2
resolution: "@fortawesome/free-solid-svg-icons@npm:6.5.2"
dependencies:
"@fortawesome/fontawesome-common-types": "npm:6.5.2"
checksum: 10c0/af2778b91ba4bf7b61ae0cdf0d39d75b6906a82bfdf8e977881d987b86a32ce157297853b7892aa3b609076b5542ea1e1e78b520d57b6f50677a2a748cf3434c
languageName: node
linkType: hard
"@fortawesome/svelte-fontawesome@npm:^0.2.2":
version: 0.2.2
resolution: "@fortawesome/svelte-fontawesome@npm:0.2.2"
peerDependencies:
"@fortawesome/fontawesome-svg-core": ~1 || ~6
svelte: ">=3.x"
checksum: 10c0/b33c061a0e2063ee31035bd759fb8818fc67d2daea3d2a51c2d5b1cad081baf828025f80d0da95a30e56b1156a098b25ffc45cc4edab1310c4a050a22e3c4f72
languageName: node
linkType: hard
"@humanwhocodes/module-importer@npm:^1.0.1":
version: 1.0.1
resolution: "@humanwhocodes/module-importer@npm:1.0.1"
@ -1863,6 +1898,9 @@ __metadata:
version: 0.0.0-use.local
resolution: "identity-web@workspace:."
dependencies:
"@fortawesome/fontawesome-svg-core": "npm:^6.5.2"
"@fortawesome/free-solid-svg-icons": "npm:^6.5.2"
"@fortawesome/svelte-fontawesome": "npm:^0.2.2"
"@sveltejs/adapter-auto": "npm:^3.0.0"
"@sveltejs/kit": "npm:^2.0.0"
"@sveltejs/vite-plugin-svelte": "npm:^3.0.0"