From 42e4664744e42aac666d087aff01d322c01fc456 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Mon, 29 May 2023 21:34:05 +0800
Subject: [PATCH] feat: footer fixed

---
 src/layouts/components/DefaultLayout.vue |   4 +-
 src/layouts/components/NavFooter.vue     |   3 +-
 src/modules/[chain]/uptime/index.vue     | 379 +++++++++++++----------
 3 files changed, 222 insertions(+), 164 deletions(-)

diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
index 4b11ce00..70fc1535 100644
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -152,7 +152,7 @@ const showDiscord = window.location.host.search('ping.pub') > -1;
           :to="item?.to"
           v-if="item?.title && !item?.children?.length && item?.to"
           @click="sidebarShow = false"
-          class=" cursor-pointer rounded-lg px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
+          class="cursor-pointer rounded-lg px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
         >
           <Icon
             v-if="item?.icon?.icon"
@@ -210,7 +210,7 @@ const showDiscord = window.location.host.search('ping.pub') > -1;
         <a
           href="https://becole.com"
           target="_blank"
-          class="py-2 px-4 flex items-center  cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]"
+          class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]"
         >
           <img
             src="https://becole.com/static/logo/logo_becole.png"
diff --git a/src/layouts/components/NavFooter.vue b/src/layouts/components/NavFooter.vue
index ac0bebf3..b9f4a4b3 100644
--- a/src/layouts/components/NavFooter.vue
+++ b/src/layouts/components/NavFooter.vue
@@ -1,6 +1,7 @@
 <template>
+  <div class="h-10 bg-gray-100 dark:bg-[#171d30] w-full"></div>
   <footer
-    class="footer items-center pt-4  pb-8 text-sm bg-gray-100 dark:bg-[#171d30] sticky bottom-0 z-10 mt-8"
+    class="footer items-center h-10 text-sm bg-gray-100 dark:bg-[#171d30] fixed bottom-0 pr-14 pl-4 z-10"
   >
     <div class="items-center grid-flow-col">
       &copy;
diff --git a/src/modules/[chain]/uptime/index.vue b/src/modules/[chain]/uptime/index.vue
index dcd0ee2f..ca1bb420 100644
--- a/src/modules/[chain]/uptime/index.vue
+++ b/src/modules/[chain]/uptime/index.vue
@@ -2,10 +2,10 @@
 import { ref, onMounted, computed, onUnmounted } from 'vue';
 import { fromHex, toBase64 } from '@cosmjs/encoding';
 import {
-    useFormatter,
-    useStakingStore,
-    useBaseStore,
-    useBlockchain,
+  useFormatter,
+  useStakingStore,
+  useBaseStore,
+  useBlockchain,
 } from '@/stores';
 import UptimeBar from '@/components/UptimeBar.vue';
 import type { Commit, SlashingParam, SigningInfo } from '@/types';
@@ -21,187 +21,242 @@ const latest = ref(0);
 const commits = ref([] as Commit[]);
 const keyword = ref('');
 const live = ref(true);
-const slashingParam = ref({} as SlashingParam)
+const slashingParam = ref({} as SlashingParam);
 
 const signingInfo = ref({} as Record<string, SigningInfo>);
 
-const filterOptout = ref(false)
+const filterOptout = ref(false);
 // filter validators by keywords
 const validators = computed(() => {
-    if (keyword)
-        return stakingStore.validators.filter(
-            (x) => x.description.moniker.indexOf(keyword.value) > -1
-        );
-    return stakingStore.validators;
+  if (keyword)
+    return stakingStore.validators.filter(
+      (x) => x.description.moniker.indexOf(keyword.value) > -1
+    );
+  return stakingStore.validators;
 });
 
 const list = computed(() => {
-    const window = Number(slashingParam.value.signed_blocks_window || 0)
-    const vset = validators.value.map(v => {
-        const signing = signingInfo.value[consensusPubkeyToHexAddress(v.consensus_pubkey)]
-        return {
-            v,
-            signing,
-            hex: toBase64(fromHex(consensusPubkeyToHexAddress(v.consensus_pubkey))),
-            uptime: signing && window > 0 ? (window - Number(signing.missed_blocks_counter)) / window : undefined
-        }
-    })
-    return filterOptout.value ? vset.filter(x => x.signing) : vset
-})
+  const window = Number(slashingParam.value.signed_blocks_window || 0);
+  const vset = validators.value.map((v) => {
+    const signing =
+      signingInfo.value[consensusPubkeyToHexAddress(v.consensus_pubkey)];
+    return {
+      v,
+      signing,
+      hex: toBase64(fromHex(consensusPubkeyToHexAddress(v.consensus_pubkey))),
+      uptime:
+        signing && window > 0
+          ? (window - Number(signing.missed_blocks_counter)) / window
+          : undefined,
+    };
+  });
+  return filterOptout.value ? vset.filter((x) => x.signing) : vset;
+});
 
 onMounted(() => {
-    live.value = true;
+  live.value = true;
 
-    baseStore.fetchLatest().then(l => {
-        let b = l
-        if (baseStore.recents?.findIndex(x => x.block_id.hash === l.block_id.hash) > -1) {
-            b = baseStore.recents?.at(0) || l
-        }
-        latest.value = Number(b.block.header.height);
-        commits.value.unshift(b.block.last_commit);
-        const height = Number(b.block.header?.height || 0);
-        if (height > 50) {
-            // constructs sequence for loading blocks
-            let promise = Promise.resolve();
-            for (let i = height - 1; i > height - 50; i -= 1) {
-                promise = promise.then(
-                    () =>
-                        new Promise((resolve, reject) => {
-                            if (live.value && commits2.value.length < 50) {
-                                // continue only if the page is living
-                                baseStore.fetchBlock(i).then((x) => {
-                                    commits.value.unshift(x.block.last_commit);
-                                    resolve();
-                                });
-                            }
-                        })
-                );
-            }
-        }
+  baseStore.fetchLatest().then((l) => {
+    let b = l;
+    if (
+      baseStore.recents?.findIndex((x) => x.block_id.hash === l.block_id.hash) >
+      -1
+    ) {
+      b = baseStore.recents?.at(0) || l;
+    }
+    latest.value = Number(b.block.header.height);
+    commits.value.unshift(b.block.last_commit);
+    const height = Number(b.block.header?.height || 0);
+    if (height > 50) {
+      // constructs sequence for loading blocks
+      let promise = Promise.resolve();
+      for (let i = height - 1; i > height - 50; i -= 1) {
+        promise = promise.then(
+          () =>
+            new Promise((resolve, reject) => {
+              if (live.value && commits2.value.length < 50) {
+                // continue only if the page is living
+                baseStore.fetchBlock(i).then((x) => {
+                  commits.value.unshift(x.block.last_commit);
+                  resolve();
+                });
+              }
+            })
+        );
+      }
+    }
+  });
+
+  chainStore.rpc.getSlashingSigningInfos().then((x) => {
+    x.info?.forEach((i) => {
+      signingInfo.value[valconsToBase64(i.address)] = i;
     });
+  });
 
-    chainStore.rpc.getSlashingSigningInfos().then((x) => {
-        x.info?.forEach((i) => {
-            signingInfo.value[valconsToBase64(i.address)] = i;
-        });
-    });
-
-    chainStore.rpc.getSlashingParams().then(x => {
-        slashingParam.value = x.params
-    })
+  chainStore.rpc.getSlashingParams().then((x) => {
+    slashingParam.value = x.params;
+  });
 });
 
 const commits2 = computed(() => {
-    const la = baseStore.recents.map(b => b.block.last_commit)
-    const all = [...commits.value, ...la]
-    return all.length > 50 ? all.slice(all.length - 50) : all
-})
+  const la = baseStore.recents.map((b) => b.block.last_commit);
+  const all = [...commits.value, ...la];
+  return all.length > 50 ? all.slice(all.length - 50) : all;
+});
 
 onUnmounted(() => {
-    live.value = false;
+  live.value = false;
 });
 
 //const tab = ref(window.location.hash.search("block")>-1?"2":"3")
-const tab = ref("2")
+const tab = ref('2');
 function changeTab(v: string) {
-    tab.value = v
+  tab.value = v;
 }
 </script>
 
 <template>
-    <div>
-        <div class="tabs tabs-boxed bg-transparent mb-4">
-            <a class="tab text-gray-400 capitalize" :class="{ 'tab-active': tab === '3' }"
-                @click="changeTab('3')">Overall</a>
-            <a class="tab text-gray-400 capitalize" :class="{ 'tab-active': tab === '2' }"
-                @click="changeTab('2')">Blocks</a>
-            <RouterLink :to="`/${chain}/uptime/customize`">
-                <a class="tab text-gray-400 capitalize">Customize</a>
-            </RouterLink>
-        </div>
-        <div class="bg-base-100 px-5 pt-5">
-            <div class="flex items-center gap-x-4">
-                <label v-if="chainStore.isConsumerChain" class="text-center">
-                    <input type="checkbox" v-model="filterOptout" class="checkbox" />
-                    Only Consumer Set
-                </label>
-                <input type="text" v-model="keyword" placeholder="Keywords to filter validators"
-                    class="input input-sm w-full flex-1 border border-gray-200 dark:border-gray-600" />
-            </div>
-            <!-- grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-x-4 mt-4 -->
-            <div class="flex flex-row flex-wrap gap-x-4 mt-4" :class="tab === '2' ? '' : 'hidden'">
-                <div v-for="({ v, signing, hex }, i) in list" :key="i">
-                    <!-- flex items-center justify-between py-0 -->
-                    <div class="flex items-center justify-between py-0 w-72">
-                        <label class="truncate text-sm">
-                            <span class="ml-1 text-black dark:text-white">{{ i + 1 }}.{{ v.description.moniker }}</span>
-                        </label>
-                        <div v-if="Number(signing?.missed_blocks_counter || 0) > 10"
-                            class="badge badge-sm bg-transparent border-0 text-red-500">
-                            {{ signing?.missed_blocks_counter }}
-                        </div>
-                        <div v-else class="badge badge-sm bg-transparent text-green-600 border-0">
-                            {{ signing?.missed_blocks_counter }}
-                        </div>
-                    </div>
-                    <UptimeBar :blocks="commits2" :validator="hex" />
-                </div>
-            </div>
-
-            <div :class="tab === '3' ? '' : 'hidden'" class="overflow-x-auto">
-                <table class="table table-compact w-full mt-5">
-                    <thead class=" capitalize">
-                        <tr>
-                            <td>Validator</td>
-                            <td class="text-right">Uptime</td>
-                            <td>Last Jailed Time</td>
-                            <td class="text-right">Signed Precommits</td>
-                            <td class="text-right">Start Height</td>
-                            <td>Tombstoned</td>
-                        </tr>
-                    </thead>
-                    <tr v-for="({ v, signing, uptime }, i) in list" class="hover">
-                        <td>
-                            <div class="truncate max-w-sm">{{ i + 1 }}. {{ v.description.moniker }}</div>
-                        </td>
-                        <td class="text-right">
-                            <span v-if="signing" class=""
-                                :class="uptime && uptime > 0.95 ? 'text-green-500' : 'text-red-500'">
-                                <div class="tooltip" :data-tip="`${signing.missed_blocks_counter} missing blocks`"> {{
-                                    format.percent(uptime) }} </div>
-                            </span>
-                        </td>
-                        <td><span v-if="signing && !signing.jailed_until.startsWith('1970')">
-                                <div class="tooltip" :data-tip="format.toDay(signing?.jailed_until, 'long')">
-                                    <span>{{ format.toDay(signing?.jailed_until, "from") }}</span>
-                                </div>
-                            </span></td>
-                        <td class="text-xs text-right">
-
-                            <span v-if="signing && signing.jailed_until.startsWith('1970')" class="text-right">{{
-                                format.percent(Number(signing.index_offset) / (latest - Number(signing.start_height)))
-                            }}</span>
-                            {{ signing?.index_offset }}
-                        </td>
-                        <td class="text-right">{{ signing?.start_height }}</td>
-                        <td class=" capitalize">{{ signing?.tombstoned }}</td>
-                    </tr>
-                    <tfoot>
-                        <tr>
-                            <td colspan="2" class="text-right"> Minimum uptime per window: <span class="lowercase tooltip"
-                                    :data-tip="`Window size: ${slashingParam.signed_blocks_window}`"><span
-                                        class="ml-2 btn btn-error btn-xs">{{
-                                            format.percent(slashingParam.min_signed_per_window) }}</span>
-                                </span></td>
-                            <td colspan="8"></td>
-                        </tr>
-                    </tfoot>
-                </table>
-            </div>
-
-            <div class="h-6"></div>
-        </div>
+  <div>
+    <div class="tabs tabs-boxed bg-transparent mb-4">
+      <a
+        class="tab text-gray-400 capitalize"
+        :class="{ 'tab-active': tab === '3' }"
+        @click="changeTab('3')"
+        >Overall</a
+      >
+      <a
+        class="tab text-gray-400 capitalize"
+        :class="{ 'tab-active': tab === '2' }"
+        @click="changeTab('2')"
+        >Blocks</a
+      >
+      <RouterLink :to="`/${chain}/uptime/customize`">
+        <a class="tab text-gray-400 capitalize">Customize</a>
+      </RouterLink>
     </div>
+    <div class="bg-base-100 px-5 pt-5">
+      <div class="flex items-center gap-x-4">
+        <label v-if="chainStore.isConsumerChain" class="text-center">
+          <input type="checkbox" v-model="filterOptout" class="checkbox" />
+          Only Consumer Set
+        </label>
+        <input
+          type="text"
+          v-model="keyword"
+          placeholder="Keywords to filter validators"
+          class="input input-sm w-full flex-1 border border-gray-200 dark:border-gray-600"
+        />
+      </div>
+      <!-- grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-x-4 mt-4 -->
+      <div
+        class="flex flex-row flex-wrap gap-x-4 mt-4"
+        :class="tab === '2' ? '' : 'hidden'"
+      >
+        <div v-for="({ v, signing, hex }, i) in list" :key="i">
+          <div class="flex items-center justify-between py-0 w-72">
+            <label class="truncate text-sm">
+              <span class="ml-1 text-black dark:text-white"
+                >{{ i + 1 }}.{{ v.description.moniker }}</span
+              >
+            </label>
+            <div
+              v-if="Number(signing?.missed_blocks_counter || 0) > 10"
+              class="badge badge-sm bg-transparent border-0 text-red-500"
+            >
+              {{ signing?.missed_blocks_counter }}
+            </div>
+            <div
+              v-else
+              class="badge badge-sm bg-transparent text-green-600 border-0"
+            >
+              {{ signing?.missed_blocks_counter }}
+            </div>
+          </div>
+          <UptimeBar :blocks="commits2" :validator="hex" />
+        </div>
+      </div>
+
+      <div :class="tab === '3' ? '' : 'hidden'" class="overflow-x-auto">
+        <table class="table table-compact w-full mt-5">
+          <thead class="capitalize">
+            <tr>
+              <td>Validator</td>
+              <td class="text-right">Uptime</td>
+              <td>Last Jailed Time</td>
+              <td class="text-right">Signed Precommits</td>
+              <td class="text-right">Start Height</td>
+              <td>Tombstoned</td>
+            </tr>
+          </thead>
+          <tr v-for="({ v, signing, uptime }, i) in list" class="hover">
+            <td>
+              <div class="truncate max-w-sm">
+                {{ i + 1 }}. {{ v.description.moniker }}
+              </div>
+            </td>
+            <td class="text-right">
+              <span
+                v-if="signing"
+                class=""
+                :class="
+                  uptime && uptime > 0.95 ? 'text-green-500' : 'text-red-500'
+                "
+              >
+                <div
+                  class="tooltip"
+                  :data-tip="`${signing.missed_blocks_counter} missing blocks`"
+                >
+                  {{ format.percent(uptime) }}
+                </div>
+              </span>
+            </td>
+            <td>
+              <span v-if="signing && !signing.jailed_until.startsWith('1970')">
+                <div
+                  class="tooltip"
+                  :data-tip="format.toDay(signing?.jailed_until, 'long')"
+                >
+                  <span>{{ format.toDay(signing?.jailed_until, 'from') }}</span>
+                </div>
+              </span>
+            </td>
+            <td class="text-xs text-right">
+              <span
+                v-if="signing && signing.jailed_until.startsWith('1970')"
+                class="text-right"
+                >{{
+                  format.percent(
+                    Number(signing.index_offset) /
+                      (latest - Number(signing.start_height))
+                  )
+                }}</span
+              >
+              {{ signing?.index_offset }}
+            </td>
+            <td class="text-right">{{ signing?.start_height }}</td>
+            <td class="capitalize">{{ signing?.tombstoned }}</td>
+          </tr>
+          <tfoot>
+            <tr>
+              <td colspan="2" class="text-right">
+                Minimum uptime per window:
+                <span
+                  class="lowercase tooltip"
+                  :data-tip="`Window size: ${slashingParam.signed_blocks_window}`"
+                  ><span class="ml-2 btn btn-error btn-xs">{{
+                    format.percent(slashingParam.min_signed_per_window)
+                  }}</span>
+                </span>
+              </td>
+              <td colspan="8"></td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+
+      <div class="h-6"></div>
+    </div>
+  </div>
 </template>
 <route>
   {
@@ -212,6 +267,8 @@ function changeTab(v: string) {
   }
 </route>
 
-<style lang="scss">.v-field--variant-outlined .v-field__outline__notch {
-    border-width: 0 !important;
-}</style>
+<style lang="scss">
+.v-field--variant-outlined .v-field__outline__notch {
+  border-width: 0 !important;
+}
+</style>