From 32368fb689d298393bc99e04a4bd97d6bc1943c4 Mon Sep 17 00:00:00 2001 From: Kiril Videlov Date: Sat, 25 Feb 2023 00:20:30 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=A6=20Fix=20timeline=20view=20and=20ad?= =?UTF-8?q?d=20session=20overview=20logic?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Improve project timeline view - Increase the amount of returned recordings - Add selection type and reset selection function - Add scrollExpandedIntoView function - Add logic for session overview to show session duration and nearest neighbors [src/routes/projects/[projectId]/timeline/+page.svelte] - Raise the amount of returned recordings from 10 to 100 - Add a Selection type for tracking session selection - Add a resetSelection function to reset the selection - Add a scrollExpandedIntoView function to scroll the expanded selection into view - Update the day view to allow for expanding a day to view its sessions - Add logic to the session overview to only show nearest neighbors - Add logic to the session overview to show session duration - Add logic to the session overview --- .../[projectId]/timeline/+page.svelte | 265 ++++++++++++++---- 1 file changed, 205 insertions(+), 60 deletions(-) diff --git a/src/routes/projects/[projectId]/timeline/+page.svelte b/src/routes/projects/[projectId]/timeline/+page.svelte index c92596330..8c47ff23a 100644 --- a/src/routes/projects/[projectId]/timeline/+page.svelte +++ b/src/routes/projects/[projectId]/timeline/+page.svelte @@ -84,73 +84,218 @@ return dateSessions; }); + + type Selection = { sessionIdx: number; dateMilliseconds: number }; + let selection = {} as Selection; + + const resetSelection = () => { + selection = {} as Selection; + }; + + function scrollExpandedIntoView() { + new Promise((r) => setTimeout(r, 100)).then(() => { + document.getElementById("expanded").scrollIntoView({ + behavior: "smooth", + }); + }); + } -
-
- All sessions -
+
+
+
{#if $dateSessions === undefined} Loading... {:else} - {#each Object.entries($dateSessions) as [dateMilliseconds, uiSessions]} - -
-
{formatDate(new Date(+dateMilliseconds))}
-
- {#each uiSessions as uiSession} - +
+ {#each Object.entries($dateSessions) as [dateMilliseconds, uiSessions]} + {#if selection.dateMilliseconds == +dateMilliseconds} + +
-
- {formatTime( - new Date( - uiSession.session.meta.startTimestampMs - ) - )} - - - {formatTime( - new Date( - uiSession.session.meta.lastTimestampMs - ) - )} -
-
- {Math.round( - (uiSession.session.meta - .lastTimestampMs - - uiSession.session.meta - .startTimestampMs) / - 1000 / - 60 - )} min -
-
- {#each Object.keys(uiSession.deltas) as filePath} -
-
- {@html pathToIconSvg( - filePath - )} -
-
- {pathToName(filePath)} -
-
- {/each} -
+ {formatDate(new Date(+dateMilliseconds))}
- {/each} -
-
- {/each} +
+ {#each uiSessions as uiSession, i} + + + {#if Math.abs(i - selection.sessionIdx) < 2} + {#if i === selection.sessionIdx} + + +
+
+ {formatTime( + new Date( + uiSession.session.meta.startTimestampMs + ) + )} + - + {formatTime( + new Date( + uiSession.session.meta.lastTimestampMs + ) + )} +
+ +
+ {:else} +
+
+ {formatTime( + new Date( + uiSession.session.meta.startTimestampMs + ) + )} + - + {formatTime( + new Date( + uiSession.session.meta.lastTimestampMs + ) + )} +
+
+ {Math.round( + (uiSession.session + .meta + .lastTimestampMs - + uiSession + .session + .meta + .startTimestampMs) / + 1000 / + 60 + )} min +
+
+ {#each Object.keys(uiSession.deltas) as filePath} +
+
+ {@html pathToIconSvg( + filePath + )} +
+
+ {pathToName( + filePath + )} +
+
+ {/each} +
+
+ {/if} + {/if} + {/each} +
+
+ {:else} + +
+
+ {formatDate(new Date(+dateMilliseconds))} +
+
+ {#each uiSessions as uiSession, i} + +
+ +
{ + selection = { + sessionIdx: i, + dateMilliseconds: + +dateMilliseconds, + }; + scrollExpandedIntoView(); + }} + > + {formatTime( + new Date( + uiSession.session.meta.startTimestampMs + ) + )} + - + {formatTime( + new Date( + uiSession.session.meta.lastTimestampMs + ) + )} +
+
+ {Math.round( + (uiSession.session.meta + .lastTimestampMs - + uiSession.session.meta + .startTimestampMs) / + 1000 / + 60 + )} min +
+
+ {#each Object.keys(uiSession.deltas) as filePath} +
+
+ {@html pathToIconSvg( + filePath + )} +
+
+ {pathToName( + filePath + )} +
+
+ {/each} +
+
+ {/each} +
+
+ Day summary +
+
+ {/if} + {/each} +
{/if}