From 0b9285bc0a0437002178ac0f6175011b58d36003 Mon Sep 17 00:00:00 2001
From: Daniel Espendiller <daniel@espendiller.net>
Date: Tue, 13 Aug 2024 18:28:10 +0200
Subject: [PATCH] update to vue.js 3

---
 templates/trades.html.twig |  10 ++--
 web/static/js/trades.js    |  49 ++++++++--------
 web/static/js/trades.vue   | 116 ++++++++++++++++++++++++++++---------
 3 files changed, 119 insertions(+), 56 deletions(-)

diff --git a/templates/trades.html.twig b/templates/trades.html.twig
index 798549c75..2a717aeaf 100644
--- a/templates/trades.html.twig
+++ b/templates/trades.html.twig
@@ -3,9 +3,9 @@
 {% block title %}Trades | Crypto Bot{% endblock %}
 
 {% block javascript %}
-    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-    <script src="https://unpkg.com/http-vue-loader"></script>
-    <script src="/js/trades.js?v={{ asset_version() }}" type="module"></script>
+<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"></script>
+<script src="/js/trades.js?v={{ asset_version() }}" type="module"></script>
 {% endblock %}
 
 {% block content %}
@@ -30,11 +30,11 @@
         <!-- /.Content Header (Page header) -->
 
         <!-- Main content -->
-        <div class="content" id="vue-trades">
+        <div class="content">
             <div class="container-fluid">
                 <div class="row">
                     <div class="col-md-12">
-                        <trades></trades>
+                        <div id="vue-trades"></div>
                     </div>
                 </div>
                 <!-- /.row -->
diff --git a/web/static/js/trades.js b/web/static/js/trades.js
index 023ee7960..5cd092d3a 100644
--- a/web/static/js/trades.js
+++ b/web/static/js/trades.js
@@ -1,30 +1,31 @@
-Vue.filter('filter_price', function(value) {
-  if (parseFloat(value) < 1) {
-    return Intl.NumberFormat('en-US', {
-      useGrouping: false,
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 6
-    }).format(value);
-  }
+const options = {
+  moduleCache: {
+    vue: Vue
+  },
 
-  return Intl.NumberFormat('en-US', {
-    useGrouping: false,
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2
-  }).format(value);
-});
+  getFile(url) {
+    return fetch(url).then(response => (response.ok ? response.text() : Promise.reject(response)));
+  },
 
-Vue.filter('round', function(value, decimalPlaces = 0) {
-  return value.toFixed(decimalPlaces);
-});
+  addStyle(styleStr) {
+    const style = document.createElement('style');
+    style.textContent = styleStr;
+    const ref = document.head.getElementsByTagName('style')[0] || null;
+    document.head.insertBefore(style, ref);
+  },
 
-Vue.filter('date', function(value) {
-  return new Date(value).toLocaleString();
-});
+  log(type, ...args) {
+    console.log(type, ...args);
+  }
+};
+
+const { loadModule, version } = window['vue3-sfc-loader'];
 
-new Vue({
-  el: '#vue-trades',
+const app = Vue.createApp({
   components: {
-    'trades': httpVueLoader('js/trades.vue')
-  }
+    'my-component': Vue.defineAsyncComponent(() => loadModule('./js/trades.vue', options))
+  },
+  template: `<my-component></my-component>`
 });
+
+app.mount('#vue-trades');
diff --git a/web/static/js/trades.vue b/web/static/js/trades.vue
index 3ebf5c0d7..e6331f8d1 100644
--- a/web/static/js/trades.vue
+++ b/web/static/js/trades.vue
@@ -4,7 +4,7 @@
       <div class="card-header">
         <h3 class="card-title">Positions</h3> <span class="text-muted float-right"><transition name="slide-fade" mode="out-in"><div :key="positionsUpdatedAt">{{ positionsUpdatedAt }}</div></transition></span>
       </div>
-      <!-- /.card-header -->
+
       <div class="card-body">
         <table class="table table-bordered table-sm table-hover">
           <thead>
@@ -31,30 +31,30 @@
             </td>
             <td>
               <template v-if="!!position.currency">
-                {{ position.currency|filter_price }}
+                {{ formatPrice(position.currency) }}
               </template>
               <template v-if="!!position.currencyProfit">
-                <span class="text-muted"> / {{ position.currencyProfit|filter_price }}</span>
+                <span class="text-muted"> / {{ formatPrice(position.currencyProfit) }}</span>
               </template>
             </td>
             <td>
             <span v-if="typeof position.position.profit !== 'undefined'" v-bind:class="{ 'text-success': position.position.profit >= 0, 'text-danger': position.position.profit < 0 }">
-              {{ position.position.profit|round(2) }} %
+              {{ round(position.position.profit, 2) }} %
             </span>
             </td>
             <td>
               <template v-if="!!position.position.entry">
-                {{ position.position.entry|filter_price }}
+                {{ formatPrice(position.position.entry) }}
               </template>
             </td>
             <td>
               <template v-if="!!position.position.updatedAt">
-                {{ position.position.updatedAt|date('d.m.y H:i') }}
+                {{ date(position.position.updatedAt, 'd.m.y H:i') }}
               </template>
             </td>
             <td>
               <template v-if="!!position.position.createdAt">
-                {{ position.position.createdAt|date('d.m.y H:i') }}
+                {{ date(position.position.createdAt, 'd.m.y H:i') }}
               </template>
             </td>
             <td>
@@ -77,7 +77,7 @@
 
     <div class="card">
       <div class="card-header">
-        <h3 class="card-title">Orders</h3> <span class="text-muted float-right"><transition name="slide-fade" mode="out-in"><div :key="positionsUpdatedAt">{{ ordersUpdatedAt }}</div></transition></span>
+        <h3 class="card-title">Orders</h3> <span class="text-muted float-right"><transition name="slide-fade" mode="out-in"><div :key="ordersUpdatedAt">{{ ordersUpdatedAt }}</div></transition></span>
       </div>
       <div class="card-body">
         <div class="table-responsive">
@@ -106,12 +106,12 @@
               <td><a target="blank" :href="'/tradingview/' + order.exchange + ':' + order.order.symbol">{{ order.order.symbol }}</a></td>
               <td>{{ order.order.type }}</td>
               <td>{{ order.order.id }}</td>
-              <td>{{ order.order.price }}<span class="text-muted" v-if="order.percent_to_price" title="Percent to current price"> {{ order.percent_to_price|round(1) }} %</span></td>
+              <td>{{ order.order.price }}<span class="text-muted" v-if="order.percent_to_price" title="Percent to current price"> {{ round(order.percent_to_price, 1) }} %</span></td>
               <td v-bind:class="{ 'text-success': order.order.amount > 0, 'text-danger': order.order.amount < 0 }">{{ order.order.amount }}</td>
               <td>{{ order.order.retry }}</td>
               <td>{{ order.order.ourId }}</td>
-              <td>{{ order.order.createdAt|date('d.m.y H:i') }}</td>
-              <td>{{ order.order.updatedAt|date('d.m.y H:i') }}</td>
+              <td>{{ date(order.order.createdAt, 'd.m.y H:i') }}</td>
+              <td>{{ date(order.order.updatedAt, 'd.m.y H:i') }}</td>
               <td>{{ order.order.status }}</td>
               <td>
                 <i v-if="order.order.side === 'sell'" class="fas fa-chevron-circle-down text-danger" title="short"></i>
@@ -130,19 +130,22 @@
 </template>
 
 <script>
-module.exports = {
-  data: function() {
+import { ref } from 'vue'
+
+export default {
+  data() {
+    const positionsUpdatedAt = ref(null);
+    const ordersUpdatedAt = ref(null);
+    const orders = ref([]);
+    const positions = ref([]);
+
     return {
-      positions: [],
-      orders: [],
-      positionsUpdatedAt: '',
-      ordersUpdatedAt: ''
+      positionsUpdatedAt,
+      ordersUpdatedAt,
+      orders,
+      positions
     }
   },
-  created: function() {
-    this.fetchPageAsJson();
-    this.timer = setInterval(this.fetchPageAsJson, 3000);
-  },
   methods: {
     async fetchPageAsJson() {
       const res = await fetch('/trades.json');
@@ -155,27 +158,86 @@ module.exports = {
       this.positions = data.positions || [];
       this.orders = data.orders || [];
 
+      this.positions = [
+        {
+          'currency': 12.12,
+          'currencyProfit': 12,
+          'exchange': 'binance',
+          'position': {
+            'type': 'long',
+            'amount': 12.12,
+            'profit': 12,
+            'entry': 13.23,
+            'updatedAt' : new Date(),
+            'createdAt': new Date(),
+          }
+        }
+      ]
+
+      this.orders = [
+        {
+          'currency': 12.12,
+          'currencyProfit': 12,
+          'exchange': 'binance',
+          'order': {
+            'type': 'ggg',
+            'id': 'aaa',
+            'price': 12.12,
+            'percent_to_price': 4,
+            'ourId': '12',
+            'entry': 13.23,
+            'side': 'buy',
+            'updatedAt': new Date(),
+            'createdAt': new Date(),
+            'status': 'aaaa',
+          }
+        }
+      ];
+
       this.positionsUpdatedAt = new Date().toLocaleTimeString();
       this.ordersUpdatedAt = new Date().toLocaleTimeString();
     },
-    cancelAutoUpdate() {
-      clearInterval(this.timer);
+    formatPrice(value) {
+      if (parseFloat(value) < 1) {
+        return Intl.NumberFormat('en-US', {
+          useGrouping: false,
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 6
+        }).format(value);
+      }
+
+      return Intl.NumberFormat('en-US', {
+        useGrouping: false,
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      }).format(value);
+    },
+    round(value, decimalPlaces = 0) {
+      return value.toFixed(decimalPlaces);
+    },
+    date(value) {
+      return new Date(value).toLocaleString();
     }
   },
-  beforeDestroy() {
-    clearInterval(this.timer);
-  },
+  mounted() {
+    this.fetchPageAsJson();
+    this.timer = setInterval(this.fetchPageAsJson, 3000);
+  }
 }
+
 </script>
 
-<style>
+<style scoped>
 .slide-fade-enter-active {
   transition: all .3s ease;
 }
+
 .slide-fade-leave-active {
   transition: all .6s cubic-bezier(1.0, 0.5, 0.8, 1.0);
 }
+
 .slide-fade-enter, .slide-fade-leave-to {
   opacity: 0.3;
 }
 </style>
+