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.

158 lines
3.6 KiB

  1. <script lang="ts">
  2. import type { IconName } from "../external/icons";
  3. import type { TaskResult } from "../models/task";
  4. import DaysLeft from "./DaysLeft.svelte";
  5. import Icon from "./Icon.svelte";
  6. import LinkHook from "./LinkHook.svelte";
  7. import Markdown from "./Markdown.svelte";
  8. import ProjectIcon from "./ProjectIcon.svelte";
  9. import ProjectProgress from "./ProjectProgress.svelte";
  10. import TimeProgress from "./TimeProgress.svelte";
  11. interface EntryIconHolder {
  12. icon: IconName
  13. }
  14. interface EntryCommon {
  15. id: string
  16. name: string
  17. description: string
  18. icon?: IconName
  19. startTime?: string
  20. endTime?: string
  21. createdTime?: string
  22. group?: EntryIconHolder
  23. project?: EntryIconHolder
  24. tasks?: TaskResult[]
  25. active?: boolean
  26. statusName?: string
  27. }
  28. export let entry: EntryCommon;
  29. export let full = false;
  30. export let headerLink = "";
  31. export let hideProgress: boolean = false;
  32. export let hideIcon: boolean = false;
  33. export let showTimeProgress: boolean = false;
  34. export let annotations: IconName[] = [];
  35. export let removeHook: boolean = false;
  36. let iconName: IconName;
  37. $: {
  38. if (entry.project != null) {
  39. iconName = entry.project.icon;
  40. } else if (entry.group != null) {
  41. iconName = entry.group.icon;
  42. } else {
  43. iconName = entry.icon || "question";
  44. }
  45. }
  46. </script>
  47. <div class="parent-entry" class:full={full}>
  48. {#if !removeHook}
  49. <LinkHook id={entry.id} />
  50. {/if}
  51. {#if !hideIcon}
  52. <div class="icon" class:completed={entry.active === false}>
  53. {#if entry.active != null}
  54. <ProjectIcon project={entry} />
  55. {:else}
  56. <Icon block name={iconName} />
  57. {/if}
  58. </div>
  59. {/if}
  60. <div class="body">
  61. <div class="header">
  62. <div class="name">
  63. {#if headerLink}
  64. <a href={headerLink}>{entry.name}</a>
  65. {:else}
  66. {entry.name}
  67. {/if}
  68. </div>
  69. <slot name="pre-annotation"></slot>
  70. {#each annotations as annotation (annotation)}
  71. <div class="annotation">
  72. <Icon block name={annotation} />
  73. </div>
  74. {/each}
  75. <div class="separator"></div>
  76. <slot name="post-seprator"></slot>
  77. {#if entry.endTime != null}
  78. <div class="days-left">
  79. <DaysLeft startTime={entry.startTime || entry.createdTime} endTime={entry.endTime} />
  80. </div>
  81. {/if}
  82. </div>
  83. {#if (!hideProgress && entry.tasks != null)}
  84. <ProjectProgress project={entry} />
  85. {#if showTimeProgress && entry.endTime}
  86. <TimeProgress startTime={entry.startTime || entry.createdTime} endTime={entry.endTime} />
  87. {/if}
  88. {/if}
  89. <slot name="above-description"></slot>
  90. {#if (full)}
  91. <Markdown source={entry.description} />
  92. {/if}
  93. <slot></slot>
  94. </div>
  95. </div>
  96. <style>
  97. div.parent-entry {
  98. display: flex;
  99. flex-direction: row;
  100. padding-bottom: 0.5em;
  101. }
  102. div.parent-entry.full {
  103. padding-bottom: 1em;
  104. }
  105. div.icon {
  106. font-size: 2em;
  107. padding: 0 0.5ch;
  108. width: 2ch;
  109. padding-top: 0.125em;
  110. color: #444;
  111. }
  112. div.icon.completed {
  113. color: #484;
  114. }
  115. div.body {
  116. display: flex;
  117. flex-direction: column;
  118. width: 100%;
  119. }
  120. div.header {
  121. display: flex;
  122. flex-direction: row;
  123. }
  124. div.name {
  125. font-size: 1em;
  126. margin: auto 0;
  127. vertical-align: middle;
  128. font-weight: 100;
  129. }
  130. div.annotation {
  131. margin: auto 0;
  132. padding: 0 0.5ch;
  133. line-height: 0em;
  134. color: #333;
  135. }
  136. div.annotation + div.annotation {
  137. padding-left: 0;
  138. }
  139. div.separator {
  140. margin-left: auto;
  141. }
  142. div.days-left {
  143. margin-right: 0.25ch;
  144. margin-left: 1ch;
  145. }
  146. a {
  147. color: inherit;
  148. text-decoration-color: #777;
  149. }
  150. </style>