improved time display on time record list
This commit is contained in:
@@ -13,7 +13,12 @@
|
|||||||
let tasks = {};
|
let tasks = {};
|
||||||
let projects = {};
|
let projects = {};
|
||||||
let detail = $state(null);
|
let detail = $state(null);
|
||||||
let sortedTimes = $derived.by(() => Object.values(times).sort((b, a) => a.start_time - b.start_time));
|
let sortedTimes = $derived.by(() => Object.values(times).map(time => ({
|
||||||
|
...time,
|
||||||
|
start: display(time.start_time),
|
||||||
|
end: display(time.end_time),
|
||||||
|
end_date: display(time.end_time)?.substring(0,10)
|
||||||
|
})).sort((b, a) => a.start_time - b.start_time));
|
||||||
let selected = $state({});
|
let selected = $state({});
|
||||||
let ranges = {};
|
let ranges = {};
|
||||||
let timeMap = $derived.by(calcYearMap);
|
let timeMap = $derived.by(calcYearMap);
|
||||||
@@ -32,9 +37,8 @@
|
|||||||
let monthIndex = 0;
|
let monthIndex = 0;
|
||||||
for (let idx in sortedTimes){
|
for (let idx in sortedTimes){
|
||||||
const time = sortedTimes[idx];
|
const time = sortedTimes[idx];
|
||||||
const start = display(time.start_time);
|
const year = time.start.substring(0,4);
|
||||||
const year = start.substring(0,4);
|
const month = time.start.substring(5,7);
|
||||||
const month = start.substring(5,7);
|
|
||||||
if (year != lastYear){
|
if (year != lastYear){
|
||||||
lastYear = year;
|
lastYear = year;
|
||||||
if (yearCount) result.years[yearIndex] = yearCount;
|
if (yearCount) result.years[yearIndex] = yearCount;
|
||||||
@@ -96,8 +100,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function toggleRange(range){
|
function toggleRange(range){
|
||||||
console.log('toggleRange → '+range);
|
let affected = sortedTimes.filter(time => time.start.startsWith(range));
|
||||||
let affected = sortedTimes.filter(time => display(time.start_time).startsWith(range));
|
|
||||||
if (ranges[range]){
|
if (ranges[range]){
|
||||||
delete ranges[range];
|
delete ranges[range];
|
||||||
for (let time of affected){
|
for (let time of affected){
|
||||||
@@ -166,13 +169,13 @@
|
|||||||
{#each sortedTimes as time,line}
|
{#each sortedTimes as time,line}
|
||||||
<tr class={selected[time.id]?'selected':''}>
|
<tr class={selected[time.id]?'selected':''}>
|
||||||
{#if timeMap.years[line]}
|
{#if timeMap.years[line]}
|
||||||
<td class="year" rowspan={timeMap.years[line]} onclick={e => toggleRange(display(time.start_time).substring(0,4))}>
|
<td class="year" rowspan={timeMap.years[line]} onclick={e => toggleRange(time.start.substring(0,4))}>
|
||||||
{display(time.start_time).substring(0,4)}
|
{time.start.substring(0,4)}
|
||||||
</td>
|
</td>
|
||||||
{/if}
|
{/if}
|
||||||
{#if timeMap.months[line]}
|
{#if timeMap.months[line]}
|
||||||
<td class="month" rowspan={timeMap.months[line]} onclick={e => toggleRange(display(time.start_time).substring(0,7))}>
|
<td class="month" rowspan={timeMap.months[line]} onclick={e => toggleRange(time.start.substring(0,7))}>
|
||||||
{display(time.start_time).substring(5,7)}
|
{time.start.substring(5,7)}
|
||||||
</td>
|
</td>
|
||||||
{/if}
|
{/if}
|
||||||
{#if detail == time.id}
|
{#if detail == time.id}
|
||||||
@@ -181,7 +184,7 @@
|
|||||||
</td>
|
</td>
|
||||||
{:else}
|
{:else}
|
||||||
<td class="start_end" onclick={e => toggleSelect(time.id)}>
|
<td class="start_end" onclick={e => toggleSelect(time.id)}>
|
||||||
{display(time.start_time)}{#if time.end_time}<wbr>…<wbr>{display(time.end_time)}{/if}
|
{time.start}{#if time.end_time}<wbr>…<wbr>{time.start.startsWith(time.end_date)?time.end.substring(11):time.end}{/if}
|
||||||
</td>
|
</td>
|
||||||
<td class="duration" onclick={e => {detail = time.id}}>
|
<td class="duration" onclick={e => {detail = time.id}}>
|
||||||
{#if time.duration}
|
{#if time.duration}
|
||||||
|
|||||||
@@ -1,11 +1,12 @@
|
|||||||
export function display(timestamp){
|
export function display(timestamp){
|
||||||
const date = new Date(timestamp * 1000);
|
if (timestamp == null) return null;
|
||||||
const year = date.getFullYear();
|
const date = new Date(timestamp * 1000);
|
||||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
const year = date.getFullYear();
|
||||||
const day = String(date.getDate()).padStart(2, '0');
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||||
const hours = String(date.getHours()).padStart(2, '0');
|
const day = String(date.getDate()).padStart(2, '0');
|
||||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
const hours = String(date.getHours()).padStart(2, '0');
|
||||||
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||||
|
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function padTo2Digits(num) {
|
function padTo2Digits(num) {
|
||||||
|
|||||||
Reference in New Issue
Block a user