added blockchain exchange card; updates; fixes

stepanenko3 · Apr 18, 2022 · 14e0877 · 14e0877
1 parent eeafafc
commit 14e0877
Show file tree

Hide file tree

Showing 8 changed files with 152 additions and 7 deletions.
diff --git a/dist/js/entry.js b/dist/js/entry.js
diff --git a/resources/js/components/BlockchainExchange.vue b/resources/js/components/BlockchainExchange.vue
@@ -0,0 +1,75 @@
+<template>
+    <LoadingCardWithButton
+        heading="Blockchain Exchange Rates"
+        :loading="loading"
+        @refresh="fetch"
+    >
+        <table v-if="data" class="w-full text-left table-collapse">
+            <thead class="bg-white dark:bg-gray-800 sticky-table-header">
+                <tr>
+                    <th class="p-2 font-bold"></th>
+                    <th class="p-2 font-bold">Buy</th>
+                    <th class="p-2 font-bold">Sell</th>
+                </tr>
+            </thead>
+            <tbody class="align-baseline">
+                <tr v-for="(item, index) in data">
+                    <td class="py-2 pr-2 font-bold">
+                        {{ index }}
+                    </td>
+                    <td class="p-2">
+                        {{ item.symbol }} {{ formatPrice(item.buy) }}
+                    </td>
+                    <td class="p-2">
+                        {{ item.symbol }} {{ formatPrice(item.sell) }}
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+        <div v-else>
+            {{ __('No Data') }}
+        </div>
+
+        <div class="py-3 text-xs text-80">
+            Via <a href="https://blockchain.info/ticker">Blockchain.com</a>
+        </div>
+    </LoadingCardWithButton>
+</template>
+
+<script>
+    import Polling from '../mixins/Polling.js'
+
+    export default {
+        props: {
+            card: {
+                type: Object,
+                required: true,
+            },
+        },
+
+        mixins: [Polling],
+
+        data: () => ({
+            data: {},
+            endpoint: '/nova-vendor/stepanenko3/nova-cards/blockchain-exchange',
+        }),
+
+        methods: {
+            success(data) {
+                this.data = data
+            },
+
+            formatPrice(value) {
+                let val = (value/1).toFixed(2).replace('.', ',')
+                return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
+            }
+        },
+    }
+</script>
+
+<style>
+    .sticky-table-header {
+        position: sticky;
+        top: 0;
+    }
+</style>
diff --git a/resources/js/components/LoadingCardWithButton.vue b/resources/js/components/LoadingCardWithButton.vue
@@ -19,7 +19,9 @@
 
         <Loader v-if="loading" class="mb-4"></Loader>
 
-        <slot v-if="!loading" />
+        <div class="card-overflow">
+            <slot v-if="!loading" />
+        </div>
     </Card>
 </template>
 
@@ -49,3 +51,10 @@
         },
     }
 </script>
+
+<style>
+    .card-overflow {
+        max-height: 250px;
+        overflow-y: auto;
+    }
+</style>
diff --git a/resources/js/components/ScheduledJobs.vue b/resources/js/components/ScheduledJobs.vue
@@ -9,11 +9,19 @@
         </p>
 
         <table v-if="data.length" class="w-full text-left table-collapse">
-            <tr v-for="(item, index) in data" :item="item">
-                <td>{{ item.command }}</td>
-                <td>{{ item.expression }}</td>
-                <td>{{ item.humanReadableNextRun }}</td>
-            </tr>
+            <tbody class="align-baseline">
+                <tr v-for="(item, index) in data" :item="item">
+                    <td class="py-2 pr-2 font-bold">
+                        {{ item.command }}
+                    </td>
+                    <td class="p-2">
+                        {{ item.expression }}
+                    </td>
+                    <td class="p-2">
+                        {{ item.humanReadableNextRun }}
+                    </td>
+                </tr>
+            </tbody>
         </table>
     </LoadingCardWithButton>
 </template>

diff --git a/resources/js/entry.js b/resources/js/entry.js
@@ -10,4 +10,5 @@ Nova.booting((Vue) => {
     Vue.component('ssl-card', require('./components/Ssl').default);
     Vue.component('countdown-card', require('./components/Countdown').default);
     Vue.component('world-clock-card', require('./components/WorldClock').default);
+    Vue.component('blockchain-exchange-card', require('./components/BlockchainExchange').default);
   });
diff --git a/routes/api.php b/routes/api.php
@@ -1,6 +1,7 @@
 <?php
 
 use Illuminate\Support\Facades\Route;
+use Stepanenko3\NovaCards\Http\Controllers\BlockchainExchangeController;
 use Stepanenko3\NovaCards\Http\Controllers\ScheduledJobsController;
 use Stepanenko3\NovaCards\Http\Controllers\SslController;
 use Stepanenko3\NovaCards\Http\Controllers\SystemResourcesController;
@@ -23,3 +24,4 @@
 Route::get('scheduled-jobs', ScheduledJobsController::class);
 Route::get('ssl', SslController::class);
 Route::get('world-clock', WorldClockController::class);
+Route::get('blockchain-exchange', BlockchainExchangeController::class);
diff --git a/src/Cards/BlockchainExchangeCard.php b/src/Cards/BlockchainExchangeCard.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace Stepanenko3\NovaCards\Cards;
+
+use Laravel\Nova\Card;
+
+class BlockchainExchangeCard extends Card
+{
+    /**
+     * The width of the card (1/3, 1/2, or full).
+     *
+     * @var string
+     */
+    public $width = '1/3';
+
+    public function pollingTime(int $ms): static
+    {
+        return $this->withMeta(['pollingTime' => $ms]);
+    }
+
+    /**
+     * Get the component name for the element.
+     *
+     * @return string
+     */
+    public function component()
+    {
+        return 'blockchain-exchange-card';
+    }
+}
diff --git a/src/Http/Controllers/BlockchainExchangeController.php b/src/Http/Controllers/BlockchainExchangeController.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace Stepanenko3\NovaCards\Http\Controllers;
+
+use Cache;
+use Http;
+
+class BlockchainExchangeController
+{
+    public function __invoke()
+    {
+        $data = Cache::remember(
+            'blockchain-exchange-rates::ticker',
+            10,
+            fn () => Http::get('https://blockchain.info/ticker')->json(),
+        );
+
+        return response()->json($data);
+    }
+}