feat: price outdated

yjl9903 · Mar 5, 2024 · 38fe019 · 38fe019
1 parent 31d6dbf
commit 38fe019
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/components/City.vue b/components/City.vue
@@ -24,6 +24,8 @@ import CreateLog from './CreateLog.vue';
 
 const props = defineProps<{ city: CityInfo }>();
 
+const timestamp = useTimestamp({ interval: 10 * 1000 });
+
 const store = useLatestLogs();
 </script>
 
@@ -45,7 +47,10 @@ const store = useLatestLogs();
           <TableRow v-for="product in city.products" :key="product.name">
             <TableCell>{{ product.name }}</TableCell>
             <TableCell v-for="target in cities" :key="target.name"
-              ><Price :log="store.getLatestLog(city.name, product.name, target.name)"></Price
+              ><Price
+                :timestamp="timestamp"
+                :log="store.getLatestLog(city.name, product.name, target.name)"
+              ></Price
             ></TableCell>
             <TableCell><CreateLog :city="city" :product="product"></CreateLog></TableCell>
           </TableRow>

diff --git a/components/Price.vue b/components/Price.vue
@@ -1,11 +1,17 @@
 <script setup lang="ts">
 import type { Log } from '~/drizzle/schema';
 
-defineProps<{ log: Log | undefined }>();
+const props = defineProps<{ timestamp: number; log: Log | undefined }>();
+
+const isOutdated = computed(() => {
+  if (!props.log) return true;
+  const uploadedAt = props.log.uploadedAt.getTime();
+  return props.timestamp - uploadedAt > 3600 * 1000;
+});
 </script>
 
 <template>
-  <div v-if="log">
+  <div v-if="log" :class="{ 'line-through': isOutdated, 'op-50': isOutdated }">
     <div>
       <span>{{ log.price }}</span>
     </div>