Add cached map data and css vars

wbbaker · Jun 14, 2023 · 7ccabbe · 7ccabbe
1 parent 0079130
commit 7ccabbe
Show file tree

Hide file tree

Showing 10 changed files with 157 additions and 4 deletions.
diff --git a/src/assets/css/vars.css b/src/assets/css/vars.css
@@ -5,6 +5,10 @@
   --color-secondary: 14, 165, 233;
   --color-secondary-content: 255, 255, 255;
 
+  --color-success: 34, 197, 94;
+  --color-warning: 245, 158, 11;
+  --color-danger: 239, 68, 68;
+
   --color-base-foreground: 255, 255, 255;
   --color-base-background: 245, 247, 251;
   --color-base-muted: 226, 232, 240;
@@ -27,6 +31,10 @@
   --color-secondary: 14, 165, 233;
   --color-secondary-content: 255, 255, 255;
 
+  --color-success: 22, 163, 74;
+  --color-warning: 217, 119, 6;
+  --color-danger: 185, 28, 28;
+
   --color-base-background: 23, 23, 23;
   --color-base-foreground: 38, 38, 38;
   --color-base-muted: 48, 48, 48;

diff --git a/src/components/Icon/IconWarning.global.vue b/src/components/Icon/IconWarning.global.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+    />
+  </svg>
+</template>
diff --git a/src/modules/otus/components/Panel/PanelMap/CachedMap.vue b/src/modules/otus/components/Panel/PanelMap/CachedMap.vue
@@ -0,0 +1,101 @@
+<template>
+  <VButton
+    class="left-2 bottom-2 !px-2 py-2 rounded-full absolute z-[1500]"
+    primary
+  >
+    <IconCheck
+      v-if="cachedMap.synced"
+      class="w-4 h-4"
+      @click="isModalVisible = true"
+    />
+    <IconWarning
+      v-else
+      class="w-4 h-4"
+      @click="isModalVisible = true"
+    />
+  </VButton>
+  <VModal
+    v-if="isModalVisible"
+    @close="() => (isModalVisible = false)"
+  >
+    <template #header>
+      <h3>Cached map</h3>
+    </template>
+    <div class="p-4 pt-0">
+      <VTable>
+        <VTableHeader>
+          <VTableHeaderRow>
+            <VTableHeaderCell>Data</VTableHeaderCell>
+            <VTableHeaderCell></VTableHeaderCell>
+          </VTableHeaderRow>
+        </VTableHeader>
+        <VTableBody>
+          <VTableBodyRow>
+            <VTableBodyCell> Is synced </VTableBodyCell>
+            <VTableBodyCell>
+              <p
+                class="text-success flex text-sm items-center"
+                v-if="cachedMap.synced"
+              >
+                <IconCheck class="w-4 h-4" />
+                <span class="ml-1">Map is synchronized</span>
+              </p>
+              <p
+                class="text-warning flex text-sm items-center"
+                v-else
+              >
+                <IconWarning class="w-4 h-4" />
+                <span class="ml-1">Map is not synchronized</span>
+              </p>
+            </VTableBodyCell>
+          </VTableBodyRow>
+          <VTableBodyRow>
+            <VTableBodyCell> Last update </VTableBodyCell>
+            <VTableBodyCell>
+              {{ new Date(cachedMap.updated_at) }}
+            </VTableBodyCell>
+          </VTableBodyRow>
+        </VTableBody>
+        <VTableHeader>
+          <VTableHeaderRow>
+            <VTableHeaderCell>Source</VTableHeaderCell>
+            <VTableHeaderCell>Total</VTableHeaderCell>
+          </VTableHeaderRow>
+        </VTableHeader>
+        <VTableBody>
+          <VTableBodyRow
+            v-for="(value, key) in cachedMap.source_scope"
+            :key="key"
+          >
+            <VTableBodyCell class="capitalize">
+              {{ key.replaceAll('_', ' ') }}
+            </VTableBodyCell>
+            <VTableBodyCell>
+              {{ value }}
+            </VTableBodyCell>
+          </VTableBodyRow>
+        </VTableBody>
+      </VTable>
+    </div>
+  </VModal>
+</template>
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  cachedMap: {
+    type: Object,
+    required: true
+  }
+})
+
+const isModalVisible = ref(false)
+</script>
+
+<style>
+.cached-map-icon {
+  right: 20px;
+  top: 20px;
+  z-index: 1098;
+}
+</style>
diff --git a/src/modules/otus/components/Panel/PanelMap/PanelMap.vue b/src/modules/otus/components/Panel/PanelMap/PanelMap.vue
@@ -25,6 +25,11 @@
           :shapes="store.distribution.geojson"
           @close="() => (isOtuSearchVisible = false)"
         />
+
+        <CachedMap
+          v-if="store.distribution.cachedMap"
+          :cached-map="store.distribution.cachedMap"
+        />
       </ClientOnly>
     </div>
     <div
@@ -55,6 +60,7 @@
 <script setup>
 import { ref, watch } from 'vue'
 import { useOtuStore } from '@/modules/otus/store/store'
+import CachedMap from './CachedMap.vue'
 import OtuSearch from '../../Search/OtuSearch.vue'
 
 const props = defineProps({

diff --git a/src/modules/otus/services/TaxonWorks.js b/src/modules/otus/services/TaxonWorks.js
@@ -68,4 +68,8 @@ export default class TaxonWorks {
   static getDwC(otuId) {
     return makeAPIRequest.get(`/otus/${otuId}/inventory/dwc`)
   }
+
+  static getCachedMap(id) {
+    return makeAPIRequest.get(`/cached_maps/${id}`)
+  }
 }
diff --git a/src/modules/otus/store/actions/index.js b/src/modules/otus/store/actions/index.js
@@ -1,3 +1,4 @@
 export * from './loadCatalog'
 export * from './loadDistribution'
 export * from './loadTaxonomy'
+export * from './loadCachedMap'
diff --git a/src/modules/otus/store/actions/loadCachedMap.js b/src/modules/otus/store/actions/loadCachedMap.js
@@ -0,0 +1,9 @@
+import TaxonWorks from '../../services/TaxonWorks'
+
+export const actionLoadCachedMap = {
+  loadCachedMap(mapId) {
+    TaxonWorks.getCachedMap(mapId).then((response) => {
+      this.distribution.cachedMap = response.data
+    })
+  }
+}
diff --git a/src/modules/otus/store/actions/loadDistribution.js b/src/modules/otus/store/actions/loadDistribution.js
@@ -19,6 +19,8 @@ export const actionLoadDistribution = {
           this.distribution.geojson = {
             features: [makeGeoJSONFeature(geojson, 'Aggregate')]
           }
+
+          this.loadCachedMap(data.cached_map.id)
         })
         .catch((e) => {
           this.distribution.errorMessage = e.response.data.error

diff --git a/src/modules/otus/store/store.js b/src/modules/otus/store/store.js
@@ -5,7 +5,8 @@ import { useOtuPageRequestStore } from './request'
 import {
   actionLoadDistribution,
   actionLoadCatalog,
-  actionLoadTaxonomy
+  actionLoadTaxonomy,
+  actionLoadCachedMap
 } from './actions'
 
 export const useOtuStore = defineStore('otuStore', {
@@ -17,7 +18,8 @@ export const useOtuStore = defineStore('otuStore', {
       distribution: {
         geojson: null,
         errorMessage: null,
-        currentShapeTypes: []
+        currentShapeTypes: [],
+        cachedMap: null
       },
       catalog: {
         sources: [],
@@ -70,6 +72,7 @@ export const useOtuStore = defineStore('otuStore', {
 
     ...actionLoadDistribution,
     ...actionLoadCatalog,
-    ...actionLoadTaxonomy
+    ...actionLoadTaxonomy,
+    ...actionLoadCachedMap
   }
 })
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -50,7 +50,11 @@ module.exports = {
         secondary: {
           color: withOpacity('--color-secondary'),
           content: withOpacity('--color-secondary-content')
-        }
+        },
+
+        danger: withOpacity('--color-danger'),
+        success: withOpacity('--color-success'),
+        warning: withOpacity('--color-warning')
       },
       typography: ({ theme }) => ({
         DEFAULT: {