socketio and other stuff

bfxbot.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+  <component name="PackageRequirementsSettings">
+    <option name="removeUnused" value="true" />
+  </component>
+</module>

main.py

@@ -486,16 +486,25 @@
 #     asyncio.run(Screen.wrapper(main))
 import asyncio
 import os
+import threading
 
 import dotenv
 
 from bfxbot import BfxBot
 from bfxbot.currency import Symbol
-from bfxbot.models import PositionState
+from bfxbot.models import EventHandler, PositionState, SymbolStatus, Event
 from strategy import TrailingStopStrategy
 
 from flask import Flask, render_template
+from flask_socketio import SocketIO
+
 app = Flask(__name__)
+socketio = SocketIO(app)
+dotenv.load_dotenv()
+loop = asyncio.new_event_loop()
+
+bot: BfxBot = None
+eh: EventHandler = None
 
 
 @app.route('/')
@@ -523,6 +532,41 @@ def entry():
 #     while True:
 #         await bot.update()
 
+@socketio.on("close")
+def on_message(message: dict):
+    position_id = message['id']
+
+    print("I would close position {}".format(position_id))
+
+@socketio.on('connect')
+def start_bot():
+    asyncio.set_event_loop(loop)
+
+    global bot
+    global eh
+
+    API_KEY = os.getenv("API_KEY")
+    API_SECRET = os.getenv("API_SECRET")
+
+    bot = BfxBot(api_key=API_KEY, api_secret=API_SECRET)
+    strategy = TrailingStopStrategy()
+    bot.set_strategy(Symbol.BTC, strategy)
+    eh = bot.event_handler(Symbol.BTC)
+
+    @eh.on_any_event()
+    def on_any_event(event: Event, status: SymbolStatus):
+        print("EMITTING")
+    socketio.emit("event", {"kind": "a"})
+
+    threading.Thread(target=lambda: asyncio.run(bot_loop())).start()
+    print("Bot started.")
+
+
+async def bot_loop():
+    await bot.start()
+
+    while True:
+        await bot.update()
+
 if __name__ == '__main__':
-    # asyncio.run(main())
+    socketio.run(app, debug=True)
-    app.run(debug=True)

static/js/rustico.js

@@ -0,0 +1,32 @@
+$(document).ready(function () {
+    GRAPH = $("#price_chart")[0];
+
+    var layout = {
+        dragmode: "pan"
+    };
+
+    var config = {
+        scrollZoom: true,
+        displayModeBar: false,
+        responsive: true,
+    };
+
+    Plotly.newPlot(GRAPH, [{
+        x: [1, 2, 3, 4, 5],
+        y: [1, 2, 4, 8, 100]
+    }], layout, config);
+
+    var socket = io();
+
+    $("#button").click(function () {
+        var row = $(this).closest("tr")[0];
+        var id = row.firstElementChild.textContent;
+
+        socket.emit("close", {
+            id: id
+        })
+    })
+
+    socket.on("event", () => {
+    })
+});

templates/index.html

@@ -8,6 +8,9 @@
     <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/jquery-3.5.1.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/plotly-latest.min.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/socket.io.min.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/toast.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/rustico.js') }}"></script>
 </head>
 
 <title>Hello world!</title>
@@ -33,7 +36,6 @@
             </div>
         </div>
 
-
         <div class="row border-top my-2">
             <div class="col">
                 <div class="card my-2">
@@ -41,13 +43,14 @@
                         <h3>Open positions:</h3>
                     </div>
                     <div class="card-body">
-                        <table class="table table-striped table-hover table-sm">
+                        <table class="table table-striped table-hover table-sm align-middle">
                             <thead>
                                 <tr>
                                     <th>ID</th>
                                     <th>Date</th>
                                     <th>Amount</th>
                                     <th>P/L</th>
+                                    <th>Actions</th>
                                 </tr>
                             </thead>
                             <tbody>
@@ -56,20 +59,23 @@
                                     <th>01/01/2020</th>
                                     <th>BTC +1.0000</th>
                                     <th>1.00 %</th>
+                                    <th>
+                                        <button id="button" type="button" class="btn btn-danger btn-sm">Close</button>
+                                    </th>
                                 </tr>
                             </tbody>
                         </table>
                     </div>
                 </div>
             </div>
-            
+
             <div class="col">
                 <div class="card my-2">
                     <div class="card-header text-center">
                         <h3>Open orders:</h3>
                     </div>
                     <div class="card-body">
-                        <table class="table table-striped table-hover table-sm">
+                        <table class="table table-striped table-hover table-sm align-middle">
                             <thead>
                                 <tr>
                                     <th>ID</th>
@@ -93,16 +99,23 @@
         </div>
 
         <div class="row align-content-center">
-            <div class="col-9 border">
+            <div class="col">
-                <h3 class="border-bottom">Price chart:</h1>
+                <div class="my-auto" id="price_chart">
-                    <p> Price graph here</p>
+                    <!-- Price chart is inserted here by rustico.js -->
-            </div>
+                </div>
-            <div class="col-3 border">
-                <p> Buttons and stuff here</p>
             </div>
         </div>
     </main>
 
+    <div class="toast">
+        <div class="toast-header">
+          Toast Header
+        </div>
+        <div class="toast-body">
+          Some text inside the toast body
+        </div>
+      </div>
+
     <footer class="footer mt-auto py-3 bg-light border-top">
         <div class="container text-center">
             <span class="text-muted">Made with love by the Pepe</span>