Active sessions

packages/site/ui/vc/SignedInApp.vue

@@ -15,6 +15,7 @@ import ProjectPermissions from './project/ProjectPermissions.vue';
 import AcceptInvite from './AcceptInvite.vue';
 import ProjectHelp from './project/ProjectHelp.vue';
 import ProjectLanding from './project/ProjectLanding.vue';
+import ProjectSessions from './project/ProjectSessions.vue';
 </script>
 <template>
   <Router>
@@ -37,7 +38,7 @@ import ProjectLanding from './project/ProjectLanding.vue';
             <Route path="/?doc/?rev" :component="ProjectData" retain-on-params-change />
           </Route>
           <Route path="/sessions">
-            <em>(todo: filter the data page showing only live sessions)</em>
+            <Route path="/?doc" :component="ProjectSessions" retain-on-params-change />
           </Route>
           <Route path="/users">
             <Route path="/?user" :component="ProjectUsers" retain-on-params-change />

packages/site/ui/vc/project/ProjectData.vue

@@ -60,7 +60,7 @@ const docs = ref<{
       <template #title>
         <IconText icon="document">Documents</IconText>
       </template>
-
+      
       <SubData v-model="docs" type="Document" show-empty />
       <DataTableRow v-for="doc of docs?.data">
         <A param-root="doc" nested-class="active" :href="doc.id">

packages/site/ui/vc/project/ProjectSessions.vue

@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { useDataRow } from '../../data/useData';
+import A from '../router/A.vue';
+import { useRouter } from '../router/useRouter';
+import DataTable from '../ui/DataTable.vue';
+import DataTableColumn from '../ui/DataTableColumn.vue';
+import SubData from '../ui/SubData.vue';
+import IconText from '../ui/IconText.vue';
+import DataTableRow from '../ui/DataTableRow.vue';
+import ModelDocScope from './ModelDocScope.vue';
+import LiveAdminModelDoc from './LiveAdminModelDoc.vue';
+import ProjectHistoricData from './ProjectHistoricData.vue';
+import { RowsOf } from '../../../lib/spec';
+import { useInterval, useTimeAgo } from '@vueuse/core';
+
+const { params } = useRouter();
+
+const docId = computed(() => {
+  return params.doc || '';
+});
+
+const interval = useInterval(621);
+
+const locks = ref<{
+  data: RowsOf<'DocumentLock'>;
+}>();
+
+const isActive = computed(() => {
+  interval.value; // force read
+  return locks.value?.data.map((row) => {
+    // making a dictionary of id: locked boolean pairs
+    const lockedAt = new Date(row.v.active ?? '');
+    const isLocked = +new Date() - +lockedAt < 6_000; // 4_000 in Go, give leeway
+    const id = row.id;
+    return { id, isLocked };
+  });
+});
+</script>
+
+<template>
+  <DataTable>
+    <DataTableColumn>
+      <template #title>
+        <IconText icon="document">Active Documents</IconText>
+      </template>
+
+      <SubData v-model="locks" type="DocumentLock" show-empty />
+      <DataTableRow v-for="lock of isActive">
+        <template v-if="lock.isLocked">
+          <A param-root="lock" nested-class="active" :href="lock.id">
+            {{ lock.id }}
+          </A>
+        </template>
+      </DataTableRow>
+    </DataTableColumn>
+    <DataTableColumn>
+      <template #title>
+        <IconText icon="jsonDict">Pending Data</IconText>
+      </template>
+      <section>
+        <template v-if="params.doc">
+          <ModelDocScope :doc-id="docId">
+            <LiveAdminModelDoc />
+          </ModelDocScope>
+        </template>
+      </section>
+    </DataTableColumn>
+  </DataTable>
+</template>
+
+<style scoped>
+section {
+  padding: 16px;
+  display: flex;
+  flex-flow: column;
+  gap: 8px;
+  height: 100%;
+  user-select: text;
+}
+
+.active {
+  color: var(--feature-color);
+}
+
+h6 {
+  font: inherit;
+  font-size: 10px;
+  font-weight: 500;
+  opacity: 0.6;
+}
+</style>