first commit
This commit is contained in:
@@ -0,0 +1,53 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import type { ModalData } from "../stores/modal";
|
||||
import modalStore from "../stores/modal";
|
||||
|
||||
export let open: ModalData = {name: "none"};
|
||||
export let disabled: boolean = false;
|
||||
export let compact: boolean = false;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function handleClick() {
|
||||
dispatch("click", {open});
|
||||
|
||||
if (open.name !== "none") {
|
||||
modalStore.set(open);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="boi" class:disabled class:compact on:click={handleClick}><slot></slot></div>
|
||||
|
||||
<style>
|
||||
div.boi {
|
||||
border: 6px dashed;
|
||||
padding: 0.5em;
|
||||
margin: 1em 0.5ch;
|
||||
text-align: center;
|
||||
color: #777;
|
||||
border-color: #333;
|
||||
cursor: pointer;
|
||||
border-bottom-right-radius: 0.25em;
|
||||
font-size: 2em;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
div.boi:hover {
|
||||
color: #AAA;
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
div.boi.disabled {
|
||||
color: #333;
|
||||
border-color: #222;
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
div.boi.compact {
|
||||
margin: 0;
|
||||
border-width: 4px;
|
||||
padding: 0.25em;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,17 @@
|
||||
<script lang="ts">
|
||||
export let time: Date | string = new Date();
|
||||
|
||||
let timeStr = "";
|
||||
|
||||
function formatTime(time: Date): string {
|
||||
const pad = (n:number) => n < 10 ? '0'+n : n.toString();
|
||||
|
||||
return `${time.getFullYear()}-${pad(time.getMonth()+1)}-${pad(time.getDate())} ${pad(time.getHours())}:${pad(time.getMinutes())}`
|
||||
}
|
||||
|
||||
$: timeStr = formatTime(new Date(time));
|
||||
</script>
|
||||
|
||||
<span>{timeStr}</span>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,87 @@
|
||||
<script lang="ts">
|
||||
export let startTime: Date | string = new Date();
|
||||
export let endTime: Date | string = new Date();
|
||||
|
||||
let started = false;
|
||||
let overdue = false;
|
||||
let danger = false;
|
||||
let amount = 0;
|
||||
let amountStr = "0";
|
||||
let unit = "days";
|
||||
let titleTimeStr = "";
|
||||
|
||||
function formatTime(time: Date): string {
|
||||
const pad = (n:number) => n < 9 ? '0'+n : n.toString();
|
||||
|
||||
return `${time.getFullYear()}-${pad(time.getMonth()+1)}-${pad(time.getDate())}`
|
||||
}
|
||||
|
||||
$: {
|
||||
const now = new Date();
|
||||
|
||||
overdue = false;
|
||||
unit = "days";
|
||||
|
||||
const st = (startTime instanceof Date) ? startTime : new Date(startTime);
|
||||
const et = (endTime instanceof Date) ? endTime : new Date(endTime);
|
||||
|
||||
if (now < st) {
|
||||
started = false;
|
||||
amount = (st.getTime() - now.getTime()) / 86400000
|
||||
} else {
|
||||
started = true;
|
||||
amount = (et.getTime() - now.getTime()) / 86400000
|
||||
}
|
||||
|
||||
if (amount < 0) {
|
||||
overdue = true;
|
||||
amount = -amount;
|
||||
}
|
||||
|
||||
danger = (!overdue && started && amount <= 3);
|
||||
|
||||
if (amount < 2) {
|
||||
amount *= 24;
|
||||
unit = "hours"
|
||||
}
|
||||
if (amount < 2) {
|
||||
amount *= 60;
|
||||
unit = "minutes";
|
||||
}
|
||||
|
||||
amount = Math.floor(amount);
|
||||
if (amount <= 1) {
|
||||
unit = unit.slice(0, -1);
|
||||
}
|
||||
|
||||
if (amount < 1) {
|
||||
amountStr = "< 1"
|
||||
} else {
|
||||
amountStr = amount.toString()
|
||||
}
|
||||
|
||||
titleTimeStr = `${formatTime(new Date(startTime))} – ${formatTime(new Date(endTime))}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<span title={titleTimeStr}>
|
||||
{#if (overdue)}
|
||||
<span class="overdue">{amountStr} {unit} ago</span>
|
||||
{:else if (started)}
|
||||
<span class:danger class="started">{amountStr} {unit} left</span>
|
||||
{:else}
|
||||
<span class="pending">In {amountStr} {unit}</span>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<style>
|
||||
span.pending {
|
||||
color: #2797e2;
|
||||
}
|
||||
span.danger {
|
||||
color: #e28127;
|
||||
}
|
||||
span.overdue {
|
||||
color: #666666;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<script lang="ts">
|
||||
import type { IconName } from "../external/icons";
|
||||
import type { GoalResult } from "../models/goal";
|
||||
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";
|
||||
|
||||
export let goal: GoalResult = null;
|
||||
export let showAllOptions = false;
|
||||
|
||||
let iconName: IconName = "question";
|
||||
let mdGoalEdit: ModalData;
|
||||
let mdGoalDelete: ModalData;
|
||||
|
||||
$: iconName = goal.group.icon as IconName;
|
||||
$: mdGoalEdit = {name:"goal.edit", goal};
|
||||
$: mdGoalDelete = {name:"goal.delete", goal};
|
||||
</script>
|
||||
|
||||
<div class="goal" class:full={showAllOptions}>
|
||||
<div class="icon"><Icon block name={iconName} /></div>
|
||||
<div class="body">
|
||||
<div class="header">
|
||||
<div class="name">{goal.name}</div>
|
||||
<div class="times">
|
||||
<DaysLeft startTime={goal.startTime} endTime={goal.endTime} />
|
||||
</div>
|
||||
</div>
|
||||
{#if showAllOptions}
|
||||
<div class="description">
|
||||
<p>{goal.description}</p>
|
||||
</div>
|
||||
<OptionRow>
|
||||
<Option open={mdGoalEdit}>Edit</Option>
|
||||
<Option open={mdGoalDelete}>Delete</Option>
|
||||
</OptionRow>
|
||||
{/if}
|
||||
<div class="progress">
|
||||
<Progress count={goal.completedAmount} target={goal.amount} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div.goal {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
div.goal.full {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
div.icon {
|
||||
font-size: 2em;
|
||||
padding: 0 0.5ch;
|
||||
width: 2ch;
|
||||
padding-top: 0.125em;
|
||||
color: #333;
|
||||
}
|
||||
div.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
div.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
div.name {
|
||||
font-size: 1em;
|
||||
margin: auto 0;
|
||||
vertical-align: middle;
|
||||
font-weight: 100;
|
||||
}
|
||||
div.times {
|
||||
margin-left: auto;
|
||||
margin-right: 0.25ch;
|
||||
}
|
||||
|
||||
div.progress {
|
||||
padding-top: 0.125em;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
div.description > p {
|
||||
padding: 0;
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,84 @@
|
||||
<script lang="ts">
|
||||
import type { IconName } from "../external/icons";
|
||||
import type { GroupResult } from "../models/group";
|
||||
import type { ModalData } from "../stores/modal";
|
||||
import DaysLeft from "./DaysLeft.svelte";
|
||||
import Icon from "./Icon.svelte";
|
||||
import ItemEntry from "./ItemEntry.svelte";
|
||||
import Option from "./Option.svelte";
|
||||
import OptionRow from "./OptionRow.svelte";
|
||||
import TaskEntry from "./TaskEntry.svelte";
|
||||
|
||||
export let group: GroupResult = null;
|
||||
export let showAllOptions: boolean = false;
|
||||
|
||||
let iconName: IconName = "question";
|
||||
let mdItemAdd: ModalData;
|
||||
let mdGroupEdit: ModalData;
|
||||
let mdGroupDelete: ModalData;
|
||||
|
||||
$: iconName = group.icon as IconName;
|
||||
$: mdItemAdd = {name:"item.add", group};
|
||||
$: mdGroupEdit = {name:"group.edit", group};
|
||||
$: mdGroupDelete = {name:"group.delete", group};
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div class="icon"><Icon block name={iconName} /></div>
|
||||
<div class="body">
|
||||
<div class="header">
|
||||
<div class="name">{group.name}</div>
|
||||
</div>
|
||||
{#if showAllOptions}
|
||||
<div class="description">
|
||||
<p>{group.description}</p>
|
||||
</div>
|
||||
<OptionRow>
|
||||
<Option open={mdItemAdd}>Add Item</Option>
|
||||
<Option open={mdGroupEdit}>Edit</Option>
|
||||
<Option open={mdGroupDelete}>Delete</Option>
|
||||
</OptionRow>
|
||||
{/if}
|
||||
<div class="list" class:full={showAllOptions}>
|
||||
{#each group.items as item (item.id)}
|
||||
<ItemEntry item={item} group={group} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div.group {
|
||||
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.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.description > p {
|
||||
padding: 0;
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script lang="ts">
|
||||
import groupStore from "../stores/group";
|
||||
|
||||
export let value = "";
|
||||
export let name = "";
|
||||
export let disabled = false;
|
||||
|
||||
$: {
|
||||
if ($groupStore.stale && !$groupStore.loading) {
|
||||
groupStore.load();
|
||||
}
|
||||
}
|
||||
|
||||
$: {
|
||||
if (!disabled && $groupStore.groups.length > 0 && value === "") {
|
||||
const nonEmpty = $groupStore.groups.find(g => g.items.length > 0);
|
||||
if (nonEmpty != null) {
|
||||
value = nonEmpty.id;
|
||||
} else {
|
||||
value = $groupStore.groups[0].id;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<select disabled={disabled || $groupStore.loading} name={name} bind:value={value}>
|
||||
{#each $groupStore.groups as group (group.id)}
|
||||
<option value={group.id} selected={group.id === value}>{group.name} ({group.items.length} items)</option>
|
||||
{/each}
|
||||
</select>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script lang="ts">
|
||||
import Icon from "fa-svelte"
|
||||
import icons from "../external/icons";
|
||||
import type { IconName } from "../external/icons";
|
||||
|
||||
export let name: IconName = "question";
|
||||
export let block: boolean = false;
|
||||
</script>
|
||||
|
||||
{#if block}
|
||||
<div>
|
||||
<Icon class="activity-icon" icon={icons[name] || icons.question} />
|
||||
</div>
|
||||
{:else}
|
||||
<Icon class="activity-icon" icon={icons[name] || icons.question} />
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,56 @@
|
||||
<script lang="ts">
|
||||
import type { IconName } from "../external/icons";
|
||||
import { iconNames } from "../external/icons";
|
||||
import Icon from "./Icon.svelte";
|
||||
|
||||
export let value: IconName;
|
||||
export let disabled: boolean;
|
||||
</script>
|
||||
|
||||
<div class:disabled class="icon-select">
|
||||
{#each iconNames as iconName (iconName)}
|
||||
<div class="icon-item" class:selected={value===iconName} on:click={() => {if (!disabled) { value = iconName }}}>
|
||||
<Icon name={iconName} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div.icon-select {
|
||||
background: #222;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 0.05em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
div.icon-select.disabled {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
div.icon-item {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: calc(100% / 8);
|
||||
padding: 0.35em 0 0.25em 0;
|
||||
text-align: center;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
div.icon-item:hover {
|
||||
background-color: #292929;
|
||||
}
|
||||
div.icon-item.selected {
|
||||
background-color: rgb(18, 63, 75);
|
||||
}
|
||||
div.icon-item.selected:hover {
|
||||
background-color: rgb(24, 83, 99);
|
||||
}
|
||||
div.icon-select.disabled > div.icon-item {
|
||||
background-color: #444;
|
||||
cursor: default;
|
||||
}
|
||||
div.icon-select.disabled > div.icon-item.selected {
|
||||
background-color: #555;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,86 @@
|
||||
<script lang="ts">
|
||||
import type { IconName } from "../external/icons";
|
||||
import type { GroupResult } from "../models/group";
|
||||
import type { default as Item } from "../models/item";
|
||||
import type { ModalData } from "../stores/modal";
|
||||
import Option from "./Option.svelte";
|
||||
import OptionRow from "./OptionRow.svelte";
|
||||
|
||||
export let item: Item = null;
|
||||
export let group: GroupResult = null;
|
||||
|
||||
let mdItemEdit: ModalData;
|
||||
let mdItemDelete: ModalData;
|
||||
|
||||
$: mdItemEdit = {name: "item.edit", item, group};
|
||||
$: mdItemDelete = {name: "item.delete", item, group};
|
||||
</script>
|
||||
|
||||
<div class="item">
|
||||
<div class="body">
|
||||
<div class="header">
|
||||
<div class="icon">
|
||||
{item.groupWeight}
|
||||
</div>
|
||||
<div class="name">{item.name}</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>{item.description}</p>
|
||||
|
||||
<OptionRow>
|
||||
<Option open={mdItemEdit}>Edit</Option>
|
||||
<Option open={mdItemDelete}>Delete</Option>
|
||||
</OptionRow>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div.item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0.25em 0 0.75em 0;
|
||||
}
|
||||
div.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
div.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
div.icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 1em;
|
||||
padding: 0.125em .5ch;
|
||||
min-width: 2ch;
|
||||
text-align: center;
|
||||
|
||||
margin-right: 0.5em;
|
||||
background: #444;
|
||||
color: #CCC;
|
||||
}
|
||||
|
||||
div.name {
|
||||
font-size: 1em;
|
||||
font-weight: 100;
|
||||
margin: auto 0;
|
||||
vertical-align: middle;
|
||||
padding: 0.125em .5ch;
|
||||
}
|
||||
|
||||
div.description {
|
||||
padding: 0.25em 1ch;
|
||||
background: #222;
|
||||
color: #aaa;
|
||||
border-bottom-right-radius: 0.5em;
|
||||
}
|
||||
div.description p {
|
||||
padding: 0;
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,31 @@
|
||||
<script lang="ts">
|
||||
import groupStore from "../stores/group";
|
||||
|
||||
export let value = "";
|
||||
export let name = "";
|
||||
|
||||
$: {
|
||||
if ($groupStore.stale && !$groupStore.loading) {
|
||||
groupStore.load();
|
||||
}
|
||||
}
|
||||
|
||||
$: {
|
||||
if ($groupStore.groups.length > 0 && value === "") {
|
||||
const nonEmpty = $groupStore.groups.find(g => g.items.length > 0);
|
||||
if (nonEmpty != null) {
|
||||
value = nonEmpty.items[0].id;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<select name={name} bind:value={value} disabled={$groupStore.loading}>
|
||||
{#each $groupStore.groups as group (group.id)}
|
||||
<optgroup label={group.name}>
|
||||
{#each group.items as item (item.id)}
|
||||
<option value={item.id} selected={item.id === value}>{item.name} ({item.groupWeight})</option>
|
||||
{/each}
|
||||
</optgroup>
|
||||
{/each}
|
||||
</select>
|
||||
@@ -0,0 +1,95 @@
|
||||
<script lang="ts">
|
||||
import type { IconName } from "../external/icons";
|
||||
import type { LogResult } from "../models/log";
|
||||
import type { ModalData } from "../stores/modal";
|
||||
import { formatTime } from "../utils/time";
|
||||
import Icon from "./Icon.svelte";
|
||||
import Option from "./Option.svelte";
|
||||
import OptionRow from "./OptionRow.svelte";
|
||||
|
||||
export let log: LogResult = null;
|
||||
|
||||
let taskIconName: IconName = "question";
|
||||
let mdLogEdit: ModalData;
|
||||
let mdLogDelete: ModalData;
|
||||
|
||||
$: taskIconName = log.task.icon as IconName;
|
||||
$: mdLogEdit = {name: "log.edit", log};
|
||||
$: mdLogDelete = {name: "log.delete", log};
|
||||
</script>
|
||||
|
||||
<div class="log">
|
||||
<div class="body">
|
||||
<div class="header">
|
||||
<div class="icon">
|
||||
<Icon name={taskIconName} />
|
||||
</div>
|
||||
<div class="name">{log.task.name}</div>
|
||||
<div class="times">{formatTime(log.loggedTime)}</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>{log.description}</p>
|
||||
|
||||
<OptionRow>
|
||||
<Option open={mdLogEdit}>Edit Log</Option>
|
||||
<Option open={mdLogDelete}>Delete Log</Option>
|
||||
</OptionRow>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div.log {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
div.icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 1em;
|
||||
padding: 0.125em .5ch;
|
||||
padding-top: 0.2em;
|
||||
|
||||
margin-right: 0.5em;
|
||||
background: #444;
|
||||
color: #CCC;
|
||||
}
|
||||
div.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
div.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
div.name {
|
||||
font-size: 1em;
|
||||
font-weight: 100;
|
||||
margin: auto 0;
|
||||
vertical-align: middle;
|
||||
padding: 0.125em .5ch;
|
||||
}
|
||||
div.times {
|
||||
margin-left: auto;
|
||||
margin-right: 0.25ch;
|
||||
}
|
||||
|
||||
div.description {
|
||||
padding: 0.25em 1ch;
|
||||
background: #222;
|
||||
color: #aaa;
|
||||
border-bottom-right-radius: 0.5em;
|
||||
}
|
||||
div.description p {
|
||||
padding: 0;
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
|
||||
div.log {
|
||||
padding: 0.25em 1ch;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,44 @@
|
||||
<script lang="ts">
|
||||
import { link } from "svelte-routing";
|
||||
|
||||
export let location: string = window.location.pathname.split("?")[0];
|
||||
|
||||
function updateLocation() {
|
||||
setTimeout(() => {
|
||||
location = window.location.pathname.split("?")[0];
|
||||
}, 0);
|
||||
}
|
||||
|
||||
$: selected = {
|
||||
home: location == "/",
|
||||
goals: location.startsWith("/goals"),
|
||||
projects: location.startsWith("/projects"),
|
||||
items: location.startsWith("/items"),
|
||||
logs: location.startsWith("/logs"),
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav>
|
||||
<a on:click={updateLocation} class:selected={selected.home} use:link href="/">Stufflog</a>
|
||||
<a on:click={updateLocation} class:selected={selected.goals} use:link href="/goals">Goals</a>
|
||||
<a on:click={updateLocation} class:selected={selected.projects} use:link href="/projects">Projects</a>
|
||||
<a on:click={updateLocation} class:selected={selected.items} use:link href="/items">Items</a>
|
||||
<a on:click={updateLocation} class:selected={selected.logs} use:link href="/logs">Logs</a>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
nav {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 0.25em;
|
||||
color: #555;
|
||||
font-size: 1em;
|
||||
}
|
||||
a.selected {
|
||||
color: #AAA;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,215 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import Icon from './Icon.svelte';
|
||||
|
||||
export let title: string = "";
|
||||
export let wide: boolean = false;
|
||||
export let error: string | null = null;
|
||||
export let closable: boolean = false;
|
||||
export let show: boolean = false;
|
||||
|
||||
onMount(() => {
|
||||
const listener = (ev: KeyboardEvent) => {
|
||||
console.log(ev.key);
|
||||
|
||||
if ((ev.ctrlKey || ev.altKey) && (ev.key === "Escape" || ev.key.toLowerCase() === "q")) {
|
||||
dispatch("close");
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("keyup", listener);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("keyup", listener);
|
||||
}
|
||||
})
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
</script>
|
||||
|
||||
{#if show}
|
||||
<div class="modal-background">
|
||||
<div class="modal" class:wide>
|
||||
<div class="header">
|
||||
<div class="title" class:noclose={!closable}>{title}</div>
|
||||
{#if (closable)}
|
||||
<div class="x">
|
||||
<div class="button" on:click={() => dispatch("close")}>
|
||||
<Icon name="times" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<hr />
|
||||
{#if (error != null)}
|
||||
<div class="error">{error}</div>
|
||||
{/if}
|
||||
<div class="body">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
div.modal-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
div.modal {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: calc(100vw - 4em);
|
||||
max-width: 40ch;
|
||||
max-height: calc(100vh - 4em);
|
||||
overflow: auto;
|
||||
transform: translate(-50%,-50%);
|
||||
padding: 1em;
|
||||
border-radius: 0.2em;
|
||||
|
||||
background: #333;
|
||||
}
|
||||
div.modal.wide {
|
||||
max-width: 60ch;
|
||||
}
|
||||
|
||||
div.modal :global(hr) {
|
||||
border: 0.5px solid gray;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div.error {
|
||||
margin: 0.5em;
|
||||
padding: 0.5em;
|
||||
|
||||
border: 1px solid rgb(204, 65, 65);
|
||||
border-radius: 0.2em;
|
||||
background-color: rgb(133, 39, 39);
|
||||
color: rgb(211, 141, 141);
|
||||
|
||||
animation: fadein 0.5s;
|
||||
}
|
||||
|
||||
div.body {
|
||||
margin: 1em 0.25ch;
|
||||
}
|
||||
|
||||
div.title {
|
||||
color: #CCC;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
div.title.noclose {
|
||||
margin-bottom: 1.2em;
|
||||
}
|
||||
|
||||
div.x {
|
||||
position: relative;
|
||||
line-height: 1em;
|
||||
top: -1em;
|
||||
text-align: right;
|
||||
}
|
||||
div.x div.button {
|
||||
color: #CCC;
|
||||
display: inline-block;
|
||||
padding: 0em 0.5ch 0.1em 0.5ch;
|
||||
line-height: 1em;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
div.x div.button:hover {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
div.modal :global(button) {
|
||||
display: inline-block;
|
||||
padding: 0.25em 0.75ch 0.26em 0.75ch;
|
||||
margin: 0.75em 0.25ch 0.25em 0.25ch;
|
||||
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 0.2em;
|
||||
color: #CCC;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.modal :global(button:hover), div.modal :global(button:focus) {
|
||||
background: #222;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
div.modal :global(label) {
|
||||
padding: 0 0 0.125em 0.25ch;
|
||||
font-size: 0.75em;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
div.modal :global(input), div.modal :global(select), div.modal :global(textarea) {
|
||||
width: 100%;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
background: #222;
|
||||
color: #777;
|
||||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
}
|
||||
div.modal :global(select) {
|
||||
padding-left: 0.5ch;
|
||||
}
|
||||
div.modal :global(input:disabled) {
|
||||
background: #444;
|
||||
color: #aaa;
|
||||
}
|
||||
div.modal :global(textarea) {
|
||||
height: 6em;
|
||||
}
|
||||
div.modal :global(textarea:disabled) {
|
||||
background: #444;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
div.modal :global(input:last-of-type) {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
div.modal :global(input.nolast) {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
div.modal :global(input[type="checkbox"]) {
|
||||
width: initial;
|
||||
display: inline-block;
|
||||
}
|
||||
div.modal :global(input[type="checkbox"] + label) {
|
||||
width: initial;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div.modal :global(input:focus), div.modal :global(select:focus), div.modal :global(textarea:focus) {
|
||||
background: #111;
|
||||
color: #CCC;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
div.modal :global(p) {
|
||||
margin: 0.25em 1ch 1em 1ch;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,10 @@
|
||||
<script lang="ts">
|
||||
import type { ModalData } from "../stores/modal";
|
||||
import modalStore from "../stores/modal";
|
||||
|
||||
export let name: ModalData["name"] = "none";
|
||||
</script>
|
||||
|
||||
{#if $modalStore.name === name}
|
||||
<slot></slot>
|
||||
{/if}
|
||||
@@ -0,0 +1,38 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import type { ModalData } from "../stores/modal";
|
||||
import modalStore from "../stores/modal";
|
||||
|
||||
export let open: ModalData = {name: "none"};
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function handleClick() {
|
||||
dispatch("click", {open});
|
||||
|
||||
if (open.name !== "none") {
|
||||
modalStore.set(open);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div on:click={handleClick} class="option"><slot></slot></div>
|
||||
|
||||
<style>
|
||||
div.option {
|
||||
display: inline-block;
|
||||
font-size: 0.9em;
|
||||
padding: 0.125em 0.75ch;
|
||||
cursor: pointer;
|
||||
color: #aa8822;
|
||||
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
div.option:hover {
|
||||
color: #FC1;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,10 @@
|
||||
<div class="option-row">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div.option-row {
|
||||
margin-left: -0.5ch;
|
||||
margin-right: -0.5ch;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,80 @@
|
||||
<script lang="ts" context="module">
|
||||
const COLORS = [
|
||||
"none",
|
||||
"bronze",
|
||||
"silver",
|
||||
"gold",
|
||||
"diamond"
|
||||
]
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export let target = 1;
|
||||
export let count = 0;
|
||||
|
||||
let offClass = COLORS[0];
|
||||
let onClass = COLORS[1];
|
||||
let ons = 0;
|
||||
let offs = 1;
|
||||
|
||||
$: {
|
||||
let level = Math.floor(count / target);
|
||||
if (level >= COLORS.length - 1) {
|
||||
offs = 0;
|
||||
ons = target;
|
||||
offClass = "gold";
|
||||
onClass = "diamond";
|
||||
} else {
|
||||
if (count > 0 && count == (level * target)) {
|
||||
level -= 1;
|
||||
}
|
||||
|
||||
ons = count - (level * target);
|
||||
offs = target - ons;
|
||||
offClass = COLORS[level];
|
||||
onClass = COLORS[level + 1];
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="bar">
|
||||
{#each {length: ons} as _}
|
||||
<div class={"on " + onClass}></div>
|
||||
{/each}
|
||||
{#each {length: offs} as _}
|
||||
<div class={"off " + offClass}></div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div.bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
div.bar > div {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
border: 0.1px solid #000;
|
||||
}
|
||||
|
||||
div.none { background-color: #555555; }
|
||||
div.bronze { background-color: #f4b083; }
|
||||
div.silver { background-color: #d8dce4; }
|
||||
div.gold { background-color: #ffd966; }
|
||||
div.diamond { background-color: #84f5ff; }
|
||||
|
||||
div.on {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
div.off {
|
||||
opacity: 0.33;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,94 @@
|
||||
<script lang="ts">
|
||||
import type { IconName } from "../external/icons";
|
||||
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 TaskEntry from "./TaskEntry.svelte";
|
||||
|
||||
export let project: ProjectResult = null;
|
||||
export let showAllOptions: boolean = false;
|
||||
|
||||
let iconName: IconName = "question";
|
||||
let mdAddTask: ModalData;
|
||||
let mdProjectAdd: ModalData;
|
||||
let mdProjectEdit: ModalData;
|
||||
let mdProjectDelete: ModalData;
|
||||
|
||||
$: iconName = project.icon as IconName;
|
||||
$: mdAddTask = {name:"task.add", project};
|
||||
$: mdProjectAdd = {name:"project.add"};
|
||||
$: mdProjectEdit = {name:"project.edit", project};
|
||||
$: mdProjectDelete = {name:"project.delete", project};
|
||||
</script>
|
||||
|
||||
<div class="project">
|
||||
<div class="icon"><Icon block name={iconName} /></div>
|
||||
<div class="body">
|
||||
<div class="header">
|
||||
<div class="name">{project.name}</div>
|
||||
{#if (project.endTime != null)}
|
||||
<div class="times">
|
||||
<DaysLeft startTime={project.createdTime} endTime={project.endTime} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#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)}
|
||||
<TaskEntry showAllOptions={showAllOptions} task={task} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
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.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.times {
|
||||
margin-left: auto;
|
||||
margin-right: 0.25ch;
|
||||
}
|
||||
|
||||
div.description > p {
|
||||
padding: 0;
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,161 @@
|
||||
<script lang="ts">
|
||||
import type { IconName } from "../external/icons";
|
||||
import type { TaskResult } from "../models/task";
|
||||
import type { ModalData } from "../stores/modal";
|
||||
import DateSpan from "./DateSpan.svelte";
|
||||
import DaysLeft from "./DaysLeft.svelte";
|
||||
import Icon from "./Icon.svelte";
|
||||
import Option from "./Option.svelte";
|
||||
import OptionRow from "./OptionRow.svelte";
|
||||
|
||||
export let task: TaskResult = null;
|
||||
export let showAllOptions: boolean = false;
|
||||
|
||||
let itomIconName: IconName = "question";
|
||||
let showLogs = false;
|
||||
let mdLogAdd: ModalData;
|
||||
let mdTaskEdit: ModalData;
|
||||
let mdTaskDelete: ModalData;
|
||||
|
||||
function toggleShowLogs() {
|
||||
showLogs = !showLogs;
|
||||
}
|
||||
|
||||
$: itomIconName = task.item.icon as IconName;
|
||||
$: mdLogAdd = {name: "log.add", task};
|
||||
$: mdTaskEdit = {name: "task.edit", task};
|
||||
$: mdTaskDelete = {name: "task.delete", task};
|
||||
</script>
|
||||
|
||||
<div class="task">
|
||||
<div class="body">
|
||||
<div class="header">
|
||||
{#if !task.active}
|
||||
<div class="icon done">
|
||||
<Icon name="check" />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="icon">
|
||||
{task.completedAmount} / {task.itemAmount}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="name">{task.name}</div>
|
||||
{#if (task.endTime != null)}
|
||||
<div class="times">
|
||||
<DaysLeft startTime={task.createdTime} endTime={task.endTime} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>{task.description}</p>
|
||||
<div class="item">
|
||||
<div class="item-icon">
|
||||
<Icon name={itomIconName} />
|
||||
</div>
|
||||
<div class="item-name">{task.item.name} ({task.item.groupWeight})</div>
|
||||
</div>
|
||||
<OptionRow>
|
||||
{#if task.logs.length > 0}
|
||||
<Option on:click={toggleShowLogs}>{showLogs ? "Hide Logs" : "Show Logs"}</Option>
|
||||
{/if}
|
||||
<Option open={mdLogAdd}>Add Log</Option>
|
||||
{#if showAllOptions}
|
||||
<Option open={mdTaskEdit}>Edit</Option>
|
||||
<Option open={mdTaskDelete}>Delete</Option>
|
||||
{/if}
|
||||
</OptionRow>
|
||||
{#if showLogs && task.logs.length > 0}
|
||||
<div class="log-list">
|
||||
{#each task.logs as log (log.id)}
|
||||
<div class="log">
|
||||
<div class="log-time"><DateSpan time={log.loggedTime} /></div>
|
||||
<div class="log-description">{log.description}</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div.task {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0.25em 0 0.75em 0;
|
||||
}
|
||||
div.icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 1em;
|
||||
padding: 0.125em .5ch;
|
||||
|
||||
margin-right: 0.5em;
|
||||
background: #444;
|
||||
color: #CCC;
|
||||
}
|
||||
div.icon.done {
|
||||
padding-top: 0.2em;
|
||||
background: #484;
|
||||
color: #78ff78;
|
||||
}
|
||||
div.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
div.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
div.name {
|
||||
font-size: 1em;
|
||||
font-weight: 100;
|
||||
margin: auto 0;
|
||||
vertical-align: middle;
|
||||
padding: 0.125em .5ch;
|
||||
}
|
||||
div.times {
|
||||
margin-left: auto;
|
||||
margin-right: 0.25ch;
|
||||
padding: 0.125em 0;
|
||||
}
|
||||
|
||||
div.description {
|
||||
padding: 0.25em 1ch;
|
||||
background: #222;
|
||||
color: #aaa;
|
||||
border-bottom-right-radius: 0.5em;
|
||||
}
|
||||
div.description p {
|
||||
padding: 0;
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
|
||||
div.log-list {
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
div.log {
|
||||
padding: 0.25em 1ch;
|
||||
}
|
||||
div.log-time {
|
||||
font-size: 0.75em;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
div.item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 0.25em;
|
||||
margin-bottom: 0em;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
div.item div.item-icon {
|
||||
padding: 0.25em 0.5ch 0.25em 0;
|
||||
}
|
||||
div.item div.item-name {
|
||||
padding: 0.125em;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user