You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
3.5 KiB
137 lines
3.5 KiB
<script lang="ts">
|
|
import { onMount } from "svelte";
|
|
import type { ProjectResult } from "../models/project";
|
|
import type { ModalData } from "../stores/modal";
|
|
import DaysLeft from "./DaysLeft.svelte";
|
|
import Icon from "./Icon.svelte";
|
|
import Option from "./Option.svelte";
|
|
import OptionRow from "./OptionRow.svelte";
|
|
import Progress from "./Progress.svelte";
|
|
import TaskEntry from "./TaskEntry.svelte";
|
|
|
|
export let project: ProjectResult = null;
|
|
export let showAllOptions: boolean = false;
|
|
export let hideInactive: boolean = false;
|
|
export let linkProject: boolean = false;
|
|
|
|
let mdAddTask: ModalData;
|
|
let mdProjectEdit: ModalData;
|
|
let mdProjectDelete: ModalData;
|
|
let progressAmount: number;
|
|
let progressTarget: number;
|
|
let linkHook: HTMLElement;
|
|
|
|
onMount(() => {
|
|
if (window.location.hash === "#" + project.id) {
|
|
window.scrollTo({top: linkHook.getBoundingClientRect().top});
|
|
}
|
|
});
|
|
|
|
$: mdAddTask = {name:"task.add", project};
|
|
$: mdProjectEdit = {name:"project.edit", project};
|
|
$: mdProjectDelete = {name:"project.delete", project};
|
|
$: progressAmount = project.tasks.map(t => t.active
|
|
? Math.min(t.completedAmount, t.itemAmount) * t.item.groupWeight
|
|
: t.itemAmount * t.item.groupWeight
|
|
).reduce((n,m) => n+m, 0);
|
|
$: progressTarget = Math.max(project.tasks.map(t => t.itemAmount * t.item.groupWeight).reduce((n,m) => n+m, 0), 1);
|
|
</script>
|
|
|
|
<div class="project">
|
|
<div class="link-hook" id={project.id} bind:this={linkHook}></div>
|
|
<div class="icon" class:inactive={!project.active}><Icon block name={project.icon} /></div>
|
|
<div class="body">
|
|
<div class="header">
|
|
<div class="name">
|
|
{#if linkProject}
|
|
<a href="/projects#{project.id}">{project.name}</a>
|
|
{:else}
|
|
{project.name}
|
|
{/if}
|
|
</div>
|
|
{#if (project.endTime != null)}
|
|
<div class="times">
|
|
<DaysLeft startTime={project.createdTime} endTime={project.endTime} />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
<Progress thin green count={progressAmount} target={progressTarget} />
|
|
{#if showAllOptions}
|
|
<div class="description">
|
|
<p>{project.description}</p>
|
|
</div>
|
|
<OptionRow>
|
|
<Option open={mdAddTask}>Add Task</Option>
|
|
<Option open={mdProjectEdit}>Edit</Option>
|
|
<Option open={mdProjectDelete}>Delete</Option>
|
|
</OptionRow>
|
|
{/if}
|
|
<div class="list" class:full={showAllOptions}>
|
|
{#each project.tasks as task (task.id)}
|
|
{#if !hideInactive || task.active}
|
|
<TaskEntry showAllOptions={showAllOptions} task={task} />
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
div.link-hook {
|
|
position: relative;
|
|
top: -2em;
|
|
}
|
|
|
|
div.project {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding-bottom: 1em;
|
|
}
|
|
div.icon {
|
|
font-size: 2em;
|
|
padding: 0 0.5ch;
|
|
width: 2ch;
|
|
padding-top: 0.125em;
|
|
color: #333;
|
|
}
|
|
div.icon.inactive {
|
|
color: #484;
|
|
}
|
|
div.body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
div.header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
div.name {
|
|
font-size: 1em;
|
|
font-weight: 100;
|
|
margin: auto 0;
|
|
vertical-align: middle;
|
|
}
|
|
div.name a {
|
|
color: inherit;
|
|
}
|
|
div.times {
|
|
margin-left: auto;
|
|
margin-right: 0.25ch;
|
|
}
|
|
|
|
div.description > p {
|
|
padding: 0;
|
|
margin: 0.25em 0;
|
|
}
|
|
|
|
@media screen and (max-width: 550px) {
|
|
div.icon {
|
|
color: #777;
|
|
}
|
|
div.icon.inactive {
|
|
color: #78ff78;
|
|
}
|
|
}
|
|
</style>
|