gisle/stufflog3
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add date.

Browse Source
This commit is contained in:
gisle
2022-03-06 16:34:45 +01:00
parent 89ed1c2e6a
commit 5c8280d88e
12 changed files with 105 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/colors.sass
+6
View File
@@ -12,3 +12,9 @@ $color-entry10: hsl(240, 5%, 77%)
$color-entry11: hsl(240, 5%, 84%)
$color-entry12: hsl(240, 5%, 91%)
$color-entry13: hsl(240, 5%, 98%)
$opacity-entry4: 0.40
$opacity-entry5: 0.60
$color-green: hsl(120, 50%, 74%)
$color-green-dark: hsl(120, 50%, 35%)
src/lib/components/frontpage/ItemLink.svelte
+6
View File
@@ -4,6 +4,7 @@
import EntryAmounts from "../layout/EntryAmounts.svelte";
import EntryButton from "../layout/EntryButton.svelte";
import EntryCompletionIcon from "../layout/EntryCompletionIcon.svelte";
import EntryDate from "../layout/EntryDate.svelte";
import EntryDescription from "../layout/EntryDescription.svelte";
import EntryName from "../layout/EntryName.svelte";
import Icon from "../layout/Icon.svelte";
@@ -39,6 +40,11 @@
<EntryCompletionIcon condition={!!item.acquireDate} />
<EntryName subtitle={subtitle}>{item.name}</EntryName>
{#if !compact}
{#if !!item.acquireDate}
<EntryDate green value={item.acquireDate} verb="Acquired" />
{:else}
<EntryDate value={item.createdDate} verb="Created" />
{/if}
<EntryDescription>{item.description}</EntryDescription>
{/if}
<EntryAmounts values={amounts} />
src/lib/components/frontpage/SprintLink.svelte
+9 -2
View File
@@ -14,6 +14,7 @@
import RequirementLink from "./RequirementLink.svelte";
import EntryButton from "../layout/EntryButton.svelte";
import Icon from "../layout/Icon.svelte";
import Status from "$lib/models/status";
export let sprint: Sprint
@@ -49,7 +50,11 @@ import Icon from "../layout/Icon.svelte";
break;
}
case "requirements": {
aggregate = calculateAggregate(sprint.requirements.map(r => r.stats).flat());
aggregate = calculateAggregate(sprint.requirements.map(r => (
r.status >= Status.Completed
? r.stats.map(s => ({...s, acquired: s.required}))
: r.stats
)).flat());
break;
}
case "stats": {
@@ -113,7 +118,9 @@ import Icon from "../layout/Icon.svelte";
{/if}
{/each}
{#each sprint.requirements as requirement (requirement.id)}
<RequirementLink compact boat={boat} requirement={requirement} />
{#if requirement.status < Status.Completed}
<RequirementLink compact boat={boat} requirement={requirement} />
{/if}
{/each}
</Entry>
</a>
src/lib/components/layout/Entry.svelte
+1 -1
View File
@@ -18,7 +18,7 @@
}
div.entry:hover {
background-color: $color-entry2;
color: $color-entry13;
color: $color-entry11;
}
:global(div.entry div.entry) {
src/lib/components/layout/EntryAmounts.svelte
+1 -1
View File
@@ -37,6 +37,6 @@
}
span.label {
color: $color-entry6;
opacity: $opacity-entry4;
}
</style>
src/lib/components/layout/EntryBgIcon.svelte
+1 -1
View File
@@ -19,6 +19,6 @@
margin-left: auto;
background: none;
pointer-events: none;
opacity: 0.10;
opacity: 0.05;
}
</style>
src/lib/components/layout/EntryDate.svelte
+67
View File
@@ -0,0 +1,67 @@
<script lang="ts">
import currentTime from "$lib/stores/currentTime";
export let value: Date | string;
export let green: boolean = false;
export let verb: string = "Created";
let dateStr = "";
let timeStr = "";
$: {
const date = (value instanceof Date) ? value : new Date(value);
const today = new Date($currentTime.getFullYear(), $currentTime.getMonth(), $currentTime.getDate(), 0, 0, 0, 0);
const thisYear = new Date($currentTime.getFullYear(), 0, 1, 0, 0, 0, 0);
const nextYear = new Date($currentTime.getFullYear()+1, 0, 1, 0, 0, 0, 0);
const offset = date.getTime() - today.getTime();
if (offset >= DAY * 2 || offset < DAY * -1) {
if (date < thisYear || date >= nextYear) {
dateStr = `${date.getDate()} ${MONTHS[date.getMonth()]} ${date.getFullYear()}`
} else {
dateStr = `${date.getDate()} ${MONTHS[date.getMonth()]}`
}
} else if (offset >= DAY * 1) {
dateStr = "tomrrow";
} else if (offset >= 0) {
dateStr = "today";
} else {
dateStr = "yesterday";
}
timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}`
}
</script>
<div class="date" class:green>
<span class="verb">{verb}</span>
<span class="value">{dateStr}</span>
<span class="verb">at</span>
<span class="value">{timeStr}</span>
</div>
<style lang="scss">
@import "../colors.sass";
div.date {
font-size: 0.75em;
font-weight: 600;
&.green {
color: $color-green;
}
> span.verb {
opacity: $opacity-entry4;
}
> span.value {
opacity: $opacity-entry5;
}
}
</style>
<script lang="ts" context="module">
const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
const DAY = 86400000;
function pad(n: number) { return n > 10 ? n.toString() : `0${n}` };
</script>
src/lib/components/layout/EntryName.svelte
+1 -2
View File
@@ -17,14 +17,13 @@
span.abbreviation {
font-size: 1em;
color: $color-entry4;
opacity: $opacity-entry4;
}
@media screen and (max-width: 1500px) {
span.abbreviation {
display: block;
font-size: 0.75em;
margin-bottom: 0.5em;
}
}
</style>
src/lib/components/layout/EntryProgress.svelte
+8 -1
View File
@@ -198,10 +198,17 @@
&.green { background-color: #8ef88e; opacity: 0.8; }
&.red { background-color: hsl(0, 95%, 70%); opacity: 0.8; }
&.off {opacity: 0.30; }
@media (-webkit-min-device-pixel-ratio: 1.3) {
border-width: 0.5px;
}
@media (-webkit-min-device-pixel-ratio: 1.8) {
border-width: 0.25px;
}
}
}
span.ackreq {
color: $color-entry4;
opacity: $opacity-entry4;
}
</style>
src/lib/models/item.ts
+1
View File
@@ -7,6 +7,7 @@ export default interface Item {
name: string
description: string
acquireDate?: string
createdDate: string
stats: StatProgressEntry[]
}
src/routes/index.svelte
-8
View File
@@ -1,11 +1,6 @@
<script lang="ts" context="module">
import type { LoadInput } from "@sveltejs/kit/types/internal";
const TIPS = [
"Ctrl-click items and requirements in your suggestions to log it.",
"Suggestions are incomplete, go into scopes or sprints to view all you need to do.",
]
export async function load({ url, fetch }: LoadInput ) {
const res = await fetch("indexdata.json");
@@ -13,7 +8,6 @@
return {
props: {
...await res.json(),
tip: TIPS[Math.floor(Math.random() * TIPS.length)]
}
};
}
@@ -40,7 +34,6 @@
export let items: StandaloneItem[] = [];
export let requirements: StandaloneRequirement[] = [];
export let sprints: StandaloneSprint[] = [];
export let tip: string;
</script>
<div class="header-wrapper">
@@ -59,7 +52,6 @@
<div class="row">
<h2>Today</h2>
<p>When you mark an item as aquired today, it will appear here.</p>
<p>TIP: {tip}</p>
</div>
</div>
<div class="column">
src/routes/indexdata.json.ts
+4 -1
View File
@@ -21,6 +21,7 @@ export const get: RequestHandler = async({}) => {
name: "Table",
description: "A table for the Redrock rec-room.",
acquireDate: "2022-03-14T00:00:00Z",
createdDate: new Date(Date.now() - 3623511).toISOString(),
stats: [
{id: 1, name: "Asset", weight: 0.2, required: 1, acquired: 1},
{id: 2, name: "Complexity", weight: 1, required: 3, acquired: 5},
@@ -35,6 +36,7 @@ export const get: RequestHandler = async({}) => {
id: 2, scope: scopes[0],
name: "Datapad Set",
description: "I need one, at least, but more is better.",
createdDate: new Date(Date.now() - 3623511).toISOString(),
stats: [
{id: 1, name: "Asset", weight: 0.2, required: 1, acquired: 0},
{id: 2, name: "Complexity", weight: 1, required: 3, acquired: 0},
@@ -50,6 +52,7 @@ export const get: RequestHandler = async({}) => {
id: 3, scope: scopes[1],
name: "Enila/Renala: Technicalities",
description: "Renala is answering Leah's concern and takes the shift at the Respite.",
createdDate: new Date(Date.now() - 3623511).toISOString(),
stats: [
{id: 1, name: "Story", weight: 3, required: 1, acquired: 0},
{id: 2, name: "Story Word", weight: 0.002, required: 500, acquired: 0},
@@ -89,7 +92,7 @@ export const get: RequestHandler = async({}) => {
name: "Background Stories",
status: Status.Active
},
status: Status.Active,
status: Status.Completed,
stats: [
{id: 1, name: "Story", weight: 3, required: 10, acquired: 3},
{id: 2, name: "Story Word", weight: 0.002, required: 5000, acquired: 2173},