Add CardBase.vue

nanase · Sep 6, 2024 · eff8f89 · eff8f89
1 parent e598dde
commit eff8f89
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 73 deletions.
diff --git a/src/components/observation/CardBase.vue b/src/components/observation/CardBase.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { JST } from '@/lib/dayjs';
+
+import UpdateCircle from '@/components/common/UpdateCircle.vue';
+import UpdateTime from '@/components/common/UpdateTime.vue';
+
+import { fill } from '@/components/observation/converter';
+import type { Observator } from '@/type/observator';
+
+const { observator, name, hidden } = defineProps<{
+  observator: Observator;
+  name: string;
+  hidden?: boolean;
+}>();
+</script>
+
+<template>
+  <v-row no-gutters class="h-100 card-base" justify="start">
+    <v-col cols="12" class="align-self-start">
+      <slot name="sensors"></slot>
+      <div>{{ fill(name, '(no name)') }}</div>
+    </v-col>
+    <v-col cols="12" class="align-self-end" v-if="hidden">
+      <v-icon icon="mdi-eye-off" size="xsmall" />
+      Hidden
+    </v-col>
+    <v-col cols="12" class="align-self-end">
+      <slot name="status"></slot>
+      <div class="queued">
+        <v-tooltip location="bottom">
+          <template v-slot:activator="{ props }">
+            <UpdateCircle v-bind="props" :time="JST(observator.fetchedAt * 1000)" />
+          </template>
+          <p>Sequence #{{ observator.sequence }}</p>
+          <p>Fetched At {{ JST(observator.fetchedAt * 1000).format('YYYY-MM-DD h:mm:ss') }}</p>
+        </v-tooltip>
+        {{}}
+        <UpdateTime :time="JST(observator.fetchedAt * 1000)" :update-interval="5" />
+      </div>
+    </v-col>
+  </v-row>
+</template>
+
+<style lang="scss" scoped>
+.card-base :deep(.queued) {
+  display: inline-block;
+
+  &:not(:last-child) {
+    padding-right: 0.5rem;
+  }
+}
+</style>
diff --git a/src/components/observation/ESP32CentralCard.vue b/src/components/observation/ESP32CentralCard.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
-import { JST } from '@/lib/dayjs';
-
 import type { ObservatorESP32Central } from '@/type/observator';
-import UpdateCircle from '@/components/common/UpdateCircle.vue';
-import UpdateTime from '@/components/common/UpdateTime.vue';
+import CardBase from './CardBase.vue';
 import LevelIcon from '@/components/common/LevelIcon.vue';
 
-import { convertRSSILevel, fill } from '@/components/observation/converter';
+import { convertRSSILevel } from '@/components/observation/converter';
 
 const { observator, name, hidden } = defineProps<{
   observator: ObservatorESP32Central;
@@ -23,8 +20,8 @@ function calcSeaPressure(): number {
 </script>
 
 <template>
-  <v-row no-gutters class="h-100" justify="start">
-    <v-col cols="12" class="align-self-start">
+  <CardBase :observator :name :hidden>
+    <template #sensors>
       <div class="text-green-darken-2 queued">
         <span class="text-h5 font-weight-bold">{{ observator.sensor[0].value.toFixed(2) ?? '--' }}</span>
         <span class="font-weight-bold">℃</span>
@@ -41,13 +38,8 @@ function calcSeaPressure(): number {
         <span class="text-h5 font-weight-bold">{{ observator.sensor[3].value ?? '--' }}</span>
         <span class="font-weight-bold">ppm</span>
       </div>
-      <div>{{ fill(name, '(no name)') }}</div>
-    </v-col>
-    <v-col cols="12" class="align-self-end" v-if="hidden">
-      <v-icon icon="mdi-eye-off" size="xsmall" />
-      Hidden
-    </v-col>
-    <v-col cols="12" class="align-self-end">
+    </template>
+    <template #status>
       <div class="queued">
         <LevelIcon
           icon="mdi-network-strength"
@@ -58,27 +50,6 @@ function calcSeaPressure(): number {
         {{ observator.sensor[4].value }}
         dBm
       </div>
-      <div class="queued">
-        <v-tooltip location="bottom">
-          <template v-slot:activator="{ props }">
-            <UpdateCircle v-bind="props" :time="JST(observator.fetchedAt * 1000)" />
-          </template>
-          <p>Sequence #{{ observator.sequence }}</p>
-          <p>Fetched At {{ JST(observator.fetchedAt * 1000).format('YYYY-MM-DD h:mm:ss') }}</p>
-        </v-tooltip>
-        {{}}
-        <UpdateTime :time="JST(observator.fetchedAt * 1000)" :update-interval="5" />
-      </div>
-    </v-col>
-  </v-row>
+    </template>
+  </CardBase>
 </template>
-
-<style lang="scss" scoped>
-.queued {
-  display: inline-block;
-
-  &:not(:last-child) {
-    padding-right: 0.5rem;
-  }
-}
-</style>
diff --git a/src/components/observation/W3200010Card.vue b/src/components/observation/W3200010Card.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
-import { JST } from '@/lib/dayjs';
-
 import type { ObservatorW3200010 } from '@/type/observator';
-import UpdateCircle from '@/components/common/UpdateCircle.vue';
-import UpdateTime from '@/components/common/UpdateTime.vue';
+import CardBase from './CardBase.vue';
 import LevelIcon from '@/components/common/LevelIcon.vue';
 
 import { convertRSSILevel, convertBatteryLevel, fill } from '@/components/observation/converter';
@@ -16,8 +13,8 @@ const { observator, name, hidden } = defineProps<{
 </script>
 
 <template>
-  <v-row no-gutters class="h-100" justify="start">
-    <v-col cols="12" class="align-self-start">
+  <CardBase :observator :name :hidden>
+    <template #sensors>
       <div class="text-green-darken-2 queued">
         <span class="text-h4 font-weight-bold">{{ observator.sensor[0].value.toFixed(1) ?? '--' }}</span>
         <span class="font-weight-bold">℃</span>
@@ -26,13 +23,8 @@ const { observator, name, hidden } = defineProps<{
         <span class="text-h4 font-weight-bold">{{ observator.sensor[1].value ?? '--' }}</span>
         <span class="font-weight-bold">%</span>
       </div>
-      <div>{{ fill(name, '(no name)') }}</div>
-    </v-col>
-    <v-col cols="12" class="align-self-end" v-if="hidden">
-      <v-icon icon="mdi-eye-off" size="xsmall" />
-      Hidden
-    </v-col>
-    <v-col cols="12" class="align-self-end">
+    </template>
+    <template #status>
       <div class="queued">
         <LevelIcon
           icon="mdi-network-strength"
@@ -53,27 +45,6 @@ const { observator, name, hidden } = defineProps<{
         {{ observator.sensor[2].value }}
         %
       </div>
-      <div class="queued">
-        <v-tooltip location="bottom">
-          <template v-slot:activator="{ props }">
-            <UpdateCircle v-bind="props" :time="JST(observator.fetchedAt * 1000)" />
-          </template>
-          <p>Sequence #{{ observator.sequence }}</p>
-          <p>Fetched At {{ JST(observator.fetchedAt * 1000).format('YYYY-MM-DD h:mm:ss') }}</p>
-        </v-tooltip>
-        {{}}
-        <UpdateTime :time="JST(observator.fetchedAt * 1000)" :update-interval="5" />
-      </div>
-    </v-col>
-  </v-row>
+    </template>
+  </CardBase>
 </template>
-
-<style lang="scss" scoped>
-.queued {
-  display: inline-block;
-
-  &:not(:last-child) {
-    padding-right: 0.5rem;
-  }
-}
-</style>