123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224 |
- <script setup lang="ts">
- /* Import modules. */
- import moment from 'moment'
- definePageMeta({
- layout: 'admin',
- })
- useHead({
- title: `Club Dashboard — Hush Your Money`,
- meta: [
- { name: 'description', content: `Hush Your Money makes spending safu.` }
- ],
- })
- /* Initialize stores. */
- import { useSystemStore } from '@/stores/system'
- const System = useSystemStore()
- const profiles = ref(null)
- const status = ref(null)
- const system = ref(null)
- const clubAddress = ref(null)
- const clubPubkey = ref(null)
- const displayCreatedAt = computed(() => {
- if (!status.value || !status.value.createdAt) {
- return 'loading...'
- }
- return moment.unix(status.value.createdAt).format('llll')
- })
- const displayTimeAgo = computed(() => {
- if (!status.value || !status.value.createdAt) {
- return 'loading...'
- }
- return moment.unix(status.value.createdAt).fromNow()
- })
- const numProfiles = computed(() => {
- if (!profiles.value) {
- return 'loading...'
- }
- return Object.keys(profiles.value).length
- })
- const lastProfileUpdate = computed(() => {
- if (!profiles.value) {
- return 'loading...'
- }
- const times = []
- Object.keys(profiles.value).forEach(_profileid => {
- const profile = profiles.value[_profileid]
- const time = profile.updatedAt
- console.log('UPDATE TIME', time)
- times.push(time)
- })
- const sorted = times.sort((a, b) => {
- return b - a
- })
- return moment.unix(sorted[0]).format('llll')
- })
- const displayProfileTimeAgo = computed(() => {
- if (!profiles.value) {
- return 'loading...'
- }
- const times = []
- Object.keys(profiles.value).forEach(_profileid => {
- const profile = profiles.value[_profileid]
- const time = profile.updatedAt
- console.log('UPDATE TIME', time)
- times.push(time)
- })
- const sorted = times.sort((a, b) => {
- return b - a
- })
- return moment.unix(sorted[0]).fromNow()
- })
- const init = async () => {
- /* Request system (status). */
- system.value = await $fetch('/api/system')
- .catch(err => console.error(err))
- // console.log('SYSTEM', system.value)
- /* Set (system) status. */
- status.value = system.value.status
- /* Request profiles. */
- profiles.value = await $fetch('/api/profiles')
- .catch(err => console.error(err))
- // console.log('PROFILES', profiles.value)
- /* Request wallet. */
- const response = await $fetch('/api/wallet')
- .catch(err => console.error(err))
- console.log('WALLET', response)
- clubAddress.value = response.address
- clubPubkey.value = response.publicKey
- }
- onMounted(() => {
- init()
- })
- // onBeforeUnmount(() => {
- // console.log('Before Unmount!')
- // // Now is the time to perform all cleanup operations.
- // })
- </script>
- <template>
- <main class="max-w-5xl mx-auto py-5 flex flex-col gap-4">
- <h1 class="text-5xl font-medium">
- Club Dashboard
- </h1>
- <p>
- Welcome to the Hush Your Money Administration Area.
- </p>
- <div class="grid grid-cols-2 gap-6">
- <section class="w-full px-5 py-3 flex flex-col gap-0 bg-amber-100 border-2 border-amber-300 rounded-2xl shadow">
- <h2 class="text-amber-500 text-base font-bold tracking-widest uppercase">
- {{numProfiles * 2}} Fusions??
- </h2>
- <h3 class="text-amber-700 text-2xl font-medium tracking-widest">
- {{lastProfileUpdate}}
- </h3>
- <h3 class="text-amber-700 text-base text-right font-medium tracking-widest">
- {{displayProfileTimeAgo}}
- </h3>
- </section>
- <section class="w-full px-5 py-3 flex flex-col gap-0 bg-amber-100 border-2 border-amber-300 rounded-2xl shadow">
- <h2 class="text-amber-500 text-base font-bold tracking-widest uppercase">
- {{numProfiles}} Profiles
- </h2>
- <h3 class="text-amber-700 text-2xl font-medium tracking-widest">
- {{lastProfileUpdate}}
- </h3>
- <h3 class="text-amber-700 text-base text-right font-medium tracking-widest">
- {{displayProfileTimeAgo}}
- </h3>
- </section>
- <section class="w-full px-5 py-3 flex flex-col gap-0 bg-amber-100 border-2 border-amber-300 rounded-2xl shadow">
- <h2 class="text-amber-500 text-base font-bold tracking-widest uppercase">
- {{Math.ceil(numProfiles * 3.33)}} Sessions??
- </h2>
- <h3 class="text-amber-700 text-2xl font-medium tracking-widest">
- {{lastProfileUpdate}}
- </h3>
- <h3 class="text-amber-700 text-base text-right font-medium tracking-widest">
- {{displayProfileTimeAgo}}
- </h3>
- </section>
- <section class="w-full px-5 py-3 flex flex-col gap-0 bg-amber-100 border-2 border-amber-300 rounded-2xl shadow">
- <h2 class="text-amber-500 text-base font-bold tracking-widest uppercase">
- Last Club Startup
- </h2>
- <h3 class="text-amber-700 text-2xl font-medium tracking-widest">
- {{displayCreatedAt}}
- </h3>
- <h3 class="text-amber-700 text-base text-right font-medium tracking-widest">
- {{displayTimeAgo}}
- </h3>
- </section>
- <section class="w-full px-5 py-3 flex flex-col gap-0 bg-amber-100 border-2 border-amber-300 rounded-2xl shadow">
- <h2 class="text-amber-500 text-base font-bold tracking-widest uppercase">
- Club Wallet
- </h2>
- <NuxtLink :to="'https://explorer.nexa.org/address/' + clubAddress" target="_blank" class="text-amber-700 text-base font-medium tracking-tight hover:text-amber-600 hover:underline">
- {{clubAddress}}
- </NuxtLink>
- <h3 class="text-amber-700 text-base text-right font-medium italic">
- Current signer of ALL Club messages
- </h3>
- </section>
- <section class="w-full px-5 py-3 flex flex-col gap-0 bg-amber-100 border-2 border-amber-300 rounded-2xl shadow">
- <h2 class="text-amber-500 text-base font-bold tracking-widest uppercase">
- Club Public Key
- </h2>
- <h3 class="text-amber-700 text-xs font-medium tracking-tight">
- {{clubPubkey}}
- </h3>
- <h3 class="text-amber-700 text-base text-right font-medium italic">
- Use this key to sign encrypted messages
- </h3>
- </section>
- </div>
- <pre class="text-xs">{{system}}</pre>
- <pre class="text-xs">{{profiles}}</pre>
- </main>
- </template>
|