Browse Source

figure out scope handling, and add EntryStatusLine.

mian
Gisle Aune 3 years ago
parent
commit
e44b8b4831
  1. 9
      src/app.d.ts
  2. 2
      src/lib/components/frontpage/RequirementLink.svelte
  3. 3
      src/lib/components/frontpage/SprintLink.svelte
  4. 62
      src/lib/components/layout/EntryStatusLine.svelte
  5. 2
      src/lib/models/scope.ts
  6. 78
      src/routes/[scope].json.ts
  7. 32
      src/routes/[scope]/__layout.svelte
  8. 20
      src/routes/[scope]/index.svelte

9
src/app.d.ts

@ -1,10 +1,15 @@
/// <reference types="@sveltejs/kit" /> /// <reference types="@sveltejs/kit" />
import type Scope from "$lib/models/scope";
// See https://kit.svelte.dev/docs/types#the-app-namespace // See https://kit.svelte.dev/docs/types#the-app-namespace
// for information about these interfaces // for information about these interfaces
declare global {
declare namespace App { declare namespace App {
// interface Locals {}
// interface Platform {} // interface Platform {}
// interface Session {} // interface Session {}
// interface Stuff {}
interface Stuff {
scope?: Scope
}
}
} }

2
src/lib/components/frontpage/RequirementLink.svelte

@ -9,6 +9,7 @@
import EntryProgress from "../layout/EntryProgress.svelte"; import EntryProgress from "../layout/EntryProgress.svelte";
import EntryProgressRow from "../layout/EntryProgressRow.svelte"; import EntryProgressRow from "../layout/EntryProgressRow.svelte";
import EntryStatusIcon from "../layout/EntryStatusIcon.svelte"; import EntryStatusIcon from "../layout/EntryStatusIcon.svelte";
import EntryStatusLine from "../layout/EntryStatusLine.svelte";
import Icon from "../layout/Icon.svelte"; import Icon from "../layout/Icon.svelte";
export let requirement: StandaloneRequirement export let requirement: StandaloneRequirement
@ -26,6 +27,7 @@
<EntryStatusIcon status={requirement.status} /> <EntryStatusIcon status={requirement.status} />
<EntryName subtitle={requirement.project.name}>{requirement.name}</EntryName> <EntryName subtitle={requirement.project.name}>{requirement.name}</EntryName>
{#if !compact} {#if !compact}
<EntryStatusLine status={requirement.status} />
<EntryDescription>{requirement.description}</EntryDescription> <EntryDescription>{requirement.description}</EntryDescription>
{/if} {/if}
<EntryProgressRow> <EntryProgressRow>

3
src/lib/components/frontpage/SprintLink.svelte

@ -50,9 +50,10 @@ import Status from "$lib/models/status";
break; break;
} }
case "requirements": { case "requirements": {
// Completed, failed or dropped should fix.
aggregate = calculateAggregate(sprint.requirements.map(r => ( aggregate = calculateAggregate(sprint.requirements.map(r => (
r.status >= Status.Completed r.status >= Status.Completed
? r.stats.map(s => ({...s, acquired: s.required}))
? r.stats.map(s => ({...s, acquired: Math.max(s.required, s.acquired)}))
: r.stats : r.stats
)).flat()); )).flat());
break; break;

62
src/lib/components/layout/EntryStatusLine.svelte

@ -0,0 +1,62 @@
<script lang="ts">
import type Status from "$lib/models/status";
import type { IconName } from "./Icon.svelte";
import Icon from "./Icon.svelte";
import StatusColor from "./StatusColor.svelte";
export let status: Status
let statusText: string = "Unknown";
let statusIcon: IconName = "question";
$: switch (status) {
case 0:
statusIcon = "hourglass";
statusText = "Blocked";
break;
case 1:
statusIcon = "lightbulb";
statusText = "Available";
break;
case 2:
statusIcon = "calendar";
statusText = "Background";
break;
case 3:
statusIcon = "spinner";
statusText = "Active";
break;
case 4:
statusIcon = "check";
statusText = "Completed";
break;
case 5:
statusIcon = "times";
statusText = "Failed";
break;
case 6:
statusIcon = "times";
statusText = "Dropped";
break;
}
</script>
<div class="entry-status">
<StatusColor status={status}>
<Icon name={statusIcon} />
<span>{statusText}</span>
</StatusColor>
</div>
<style lang="scss">
@import "../colors.sass";
div.entry-status {
font-size: 0.75em;
font-weight: 600;
opacity: $opacity-entry5;
:global(.icon) {
font-size: 0.75em;
}
}
</style>

2
src/lib/models/scope.ts

@ -1,7 +1,9 @@
import type { ProjectEntry } from "./project"; import type { ProjectEntry } from "./project";
import type Stat from "./stat";
export default interface Scope extends ScopeEntry { export default interface Scope extends ScopeEntry {
activeProjects: ProjectEntry[] activeProjects: ProjectEntry[]
stats: Stat[]
} }
export interface ScopeEntry { export interface ScopeEntry {

78
src/routes/[scope].json.ts

@ -0,0 +1,78 @@
import type { RequestHandler } from "@sveltejs/kit"
import Status from "$lib/models/status"
import type Scope from "$lib/models/scope"
export const get: RequestHandler = async({params}) => {
const scopeId = parseInt(params.scope);
const scope = scopes.find(s => s.id === scopeId);
if (scope === null) {
return {
status: 404,
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
message: "Scope not found",
}),
}
}
return {
status: 200,
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
scope
}),
}
}
const scopes: Scope[] = [
{
id: 1, name: "3D Modeling", abbreviation: "3D",
stats: [
{id: 101, name: "Asset", weight: 0.1, description: "Some description"},
{id: 102, name: "Tweak", weight: 0.2, description: "Some description"},
{
id: 103, name: "Complexity", weight: 1, description: "Some description",
allowedAmounts: {
"Basic": 1,
"Medium": 3,
"Complex": 6,
"Excessive": 12,
}
},
{id: 104, name: "Hard Surface", weight: 0.4, description: "Some description"},
{id: 105, name: "UV Mapping", weight: 0.2, description: "Some description"},
{id: 106, name: "Third-Party Asset", weight: 0.1, description: "Some description"},
{id: 107, name: "Material", weight: 0.1, description: "Some description"},
],
activeProjects: [
{id: 1001, name: "3D Maps: Proving the Concept", status: Status.Active},
{id: 1002, name: "Redrock HQ", status: Status.Active},
{id: 1003, name: "Tutorial: Realistic Environments", status: Status.Background},
]
},
{
id: 2, name: "Roleplay", abbreviation: "RP",
stats: [
{id: 201, name: "Story", weight: 3, description: "Some description"},
{id: 202, name: "Story Word", weight: 0.002, description: "Some description"},
{id: 203, name: "Worldbuilding", weight: 0.50, description: "Some description"},
{id: 204, name: "Characterbuilding", weight: 0.50, description: "Some description"},
{id: 205, name: "Note", weight: 1, description: "Some description"},
{id: 206, name: "Wiki Section", weight: 1, description: "Some description"},
{id: 207, name: "Wiki Research", weight: 0.5, description: "Some description"},
{id: 208, name: "Wiki Complexity", weight: 0.5, description: "Some description"},
],
activeProjects: [
{id: 2001, name: "Ilyna T'Rea", status: Status.Active},
{id: 2002, name: "Renala T'Iavay", status: Status.Active},
{id: 2003, name: "Background Stories", status: Status.Background},
]
},
//{id: 3, name: "Minecraft", abbreviation: "MC"},
//{id: 4, name: "Coding", abbreviation: "CODE"},
//{id: 5, name: "System Administration", abbreviation: "SA"},
]

32
src/routes/[scope]/__layout.svelte

@ -0,0 +1,32 @@
<script lang="ts" context="module">
import type { Load } from "@sveltejs/kit/types/internal";
export const load: Load = async({ fetch, params }) => {
const res = await fetch(`/${params.scope}.json`);
if (res.ok) {
const data = await res.json();
return {
props: {
...data,
},
stuff: {
scope: data.scope,
}
};
}
return;
}
</script>
<script lang="ts">
import type Scope from "$lib/models/scope";
export let scope: Scope;
</script>
<h1>{scope.name}</h1>
<slot></slot>

20
src/routes/[scope]/index.svelte

@ -0,0 +1,20 @@
<script lang="ts" context="module">
import type { Load, LoadInput } from "@sveltejs/kit/types/internal";
export const load: Load = async({ stuff }) => {
return {
props: {
scope: stuff.scope,
}
};
}
</script>
<script lang="ts">
import type Scope from "$lib/models/scope";
import { page } from "$app/stores";
export let scope: Scope;
</script>
<h1>{$page.stuff.scope.name}</h1>
Loading…
Cancel
Save