Make a proper front page

core/templates/index.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% load static %}
 {% load joinsep %}
-{% block outer_content %}
+{% block content %}
 
   <div class="grid-stack" id="grid-stack-main">
     <!-- <div class="grid-stack-item" gs-w="5" gs-h="14" gs-y="0" gs-x="1">
@@ -17,7 +17,7 @@
         </nav>
       </div>
     </div> -->
-    <div class="grid-stack-item" gs-w="4" gs-h="25" gs-y="0" gs-x="6">
+    <!-- <div class="grid-stack-item" gs-w="4" gs-h="25" gs-y="0" gs-x="6">
       <div class="grid-stack-item-content">
         <nav class="panel">
           <p class="panel-heading" style="padding: .2em; line-height: .5em;">
@@ -29,7 +29,7 @@
           </article>
         </nav>
       </div>
-    </div>
+    </div> -->
 
     <script>
       var grid = GridStack.init({
@@ -46,57 +46,88 @@
 
       // a widget is ready to be loaded
       document.addEventListener('load-widget', function(event) {
-        let container = htmx.find('#widget');
-        // get the scripts, they won't be run on the new element so we need to eval them
-        var scripts = htmx.findAll(container, "script");
-        let widgetelement = container.firstElementChild.cloneNode(true);
-        var new_id = widgetelement.id;
+        let containers = htmx.findAll('#widget');
+        console.log("CONTAINERS", containers);
+        for (let x = 0, len = containers.length; x < len; x++) {
+          container = containers[x];
+          console.log("CONTAINER", container);
+          // get the scripts, they won't be run on the new element so we need to eval them
+          let widgetelement = container.firstElementChild.cloneNode(true);
+          console.log(widgetelement);
+          var scripts = htmx.findAll(widgetelement, "script");
+          var new_id = widgetelement.id;
 
-        // check if there's an existing element like the one we want to swap
-        let grid_element = htmx.find('#grid-stack-main');
-        let existing_widget = htmx.find(grid_element, "#"+new_id);
+          // check if there's an existing element like the one we want to swap
+          let grid_element = htmx.find('#grid-stack-main');
+          let existing_widget = htmx.find(grid_element, "#"+new_id);
 
-        // get the size and position attributes
-        if (existing_widget) {
-          let attrs = existing_widget.getAttributeNames();
-          for (let i = 0, len = attrs.length; i < len; i++) {
-            if (attrs[i].startsWith('gs-')) { // only target gridstack attributes
-              widgetelement.setAttribute(attrs[i], existing_widget.getAttribute(attrs[i]));
+          // get the size and position attributes
+          if (existing_widget) {
+            let attrs = existing_widget.getAttributeNames();
+            for (let i = 0, len = attrs.length; i < len; i++) {
+              if (attrs[i].startsWith('gs-')) { // only target gridstack attributes
+                widgetelement.setAttribute(attrs[i], existing_widget.getAttribute(attrs[i]));
+              }
             }
           }
-        }
-        // clear the queue element
-        container.outerHTML = "";
-        grid.addWidget(widgetelement);
+          // clear the queue element
+          container.outerHTML = "";
+          // container.firstElementChild.outerHTML = "";
+          grid.addWidget(widgetelement);
 
-        // re-create the HTMX JS listeners, otherwise HTMX won't work inside the grid
-        htmx.process(widgetelement);
+          // re-create the HTMX JS listeners, otherwise HTMX won't work inside the grid
+          htmx.process(widgetelement);
 
-        // update the size of the widget according to its content
-        var added_widget = htmx.find(grid_element, "#"+new_id);
-        var itemContent = htmx.find(added_widget, ".control");
-        var scrollheight = itemContent.scrollHeight+80;
-        var verticalmargin = 0;
-        var cellheight = grid.opts.cellHeight;
-        var height = Math.ceil((scrollheight + verticalmargin) / (cellheight + verticalmargin));
-        var opts = {
-          h: height,
-        }
-        grid.update(
-          added_widget,
-          opts
-        );
+          // update the size of the widget according to its content
+          var added_widget = htmx.find(grid_element, "#"+new_id);
+          var itemContent = htmx.find(added_widget, ".control");
+          var scrollheight = itemContent.scrollHeight+80;
+          var verticalmargin = 0;
+          var cellheight = grid.opts.cellHeight;
+          var height = Math.ceil((scrollheight + verticalmargin) / (cellheight + verticalmargin));
+          var opts = {
+            h: height,
+          }
+          grid.update(
+            added_widget,
+            opts
+          );
 
-        // run the JS scripts inside the added element again
-        for (var i = 0; i < scripts.length; i++) {
-          eval(scripts[i].innerHTML);
+          // run the JS scripts inside the added element again
+          for (var i = 0; i < scripts.length; i++) {
+            eval(scripts[i].innerHTML);
+          }
         }
+        // clear the containers we just added
+        // for (let x = 0, len = containers.length; x < len; x++) {
+        //   container = containers[x];
+        //   container.inner = "";
+        // }
+        grid.compact();
       });
     </script>
-    <div
-      hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-      hx-get="{% url 'profit' type='widget' %}"
-      hx-target="#widgets-here"
-      hx-trigger="load"></div>
+    <div>
+      <div
+        hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+        hx-get="{% url 'positions' type='widget' %}"
+        hx-target="#widgets-here"
+        hx-trigger="load"
+        hx-swap="afterend"
+        style="display: none;"></div>
+      <div
+        hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+        hx-get="{% url 'strategies' type='widget' %}"
+        hx-target="#widgets-here"
+        hx-trigger="load"
+        hx-swap="afterend"
+        style="display: none;"></div>
+      <div
+        hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+        hx-get="{% url 'profit' type='widget' %}"
+        hx-target="#widgets-here"
+        hx-trigger="load"
+        hx-swap="afterend"
+        style="display: none;"></div>
+    </div>
 
 {% endblock %}

core/templates/partials/profit-list.html

@@ -15,10 +15,10 @@
     <th>currency</th>
   </thead>
   {% for item in object_list %}
-  <tr class="
-  {% if item.pl > 0 %}has-background-success-light
-  {% elif item.pl < 0 %}has-background-danger-light
-  {% endif %}">
+    <tr class="
+      {% if item.pl > 0 %}has-background-success-light
+      {% elif item.pl < 0 %}has-background-danger-light
+      {% endif %}">
       <td>{{ item.account.id }}</td>
       <td>{{ item.account.name }}</td>
       <td>{{ item.pl }}</td>

core/templates/wm/widget.html

@@ -1,5 +1,5 @@
 <div id="widget">
-  <div id="widget-{{ unique }}" class="grid-stack-item" {% block widget_options %}gs-w="5" gs-h="1" gs-y="0" gs-x="1"{% endblock %}>
+  <div id="widget-{{ unique }}" class="grid-stack-item" {% block widget_options %}{% if widget_options is None %}gs-w="6" gs-h="1" gs-y="7" gs-x="0"{% else %}{% autoescape off %}{{ widget_options }}{% endautoescape %}{% endif %}{% endblock %}>
     <div class="grid-stack-item-content">
 
       <nav class="panel">

core/views/positions.py

@@ -93,6 +93,7 @@ class Positions(LoginRequiredMixin, OTPRequiredMixin, View):
             "list_url": list_url,
             "context_object_name_singular": self.context_object_name_singular,
             "context_object_name": self.context_object_name,
+            "widget_options": 'gs-w="12" gs-h="1" gs-y="0" gs-x="0"',
         }
         # Return partials for HTMX
         if self.request.htmx:

core/views/profit.py

@@ -5,15 +5,15 @@ from django.http import HttpResponseBadRequest
 from django.shortcuts import render
 from django.urls import reverse
 from django.views import View
-from rest_framework.parsers import FormParser
 from two_factor.views.mixins import OTPRequiredMixin
 
 from core.exchanges import GenericAPIError
-from core.models import Account, Trade
+from core.models import Account
 from core.util import logs
 
 log = logs.get_logger(__name__)
 
+
 def get_profit(user):
     items = []
     accounts = Account.objects.filter(user=user)
@@ -21,12 +21,18 @@ def get_profit(user):
         try:
             details = account.client.get_account()
             pl = details["pl"]
-            item = {"account": account, "pl": float(pl), "balance": details["balance"], "currency": details["currency"]}
+            item = {
+                "account": account,
+                "pl": float(pl),
+                "balance": details["balance"],
+                "currency": details["currency"],
+            }
             items.append(item)
         except GenericAPIError:
             continue
     return items
 
+
 class Profit(LoginRequiredMixin, OTPRequiredMixin, View):
     allowed_types = ["modal", "widget", "window", "page"]
     window_content = "window-content/objects.html"
@@ -65,10 +71,10 @@ class Profit(LoginRequiredMixin, OTPRequiredMixin, View):
         }
         # Return partials for HTMX
         if self.request.htmx:
-            if request.headers["HX-Target"] == self.context_object_name+"-table":
+            if request.headers["HX-Target"] == self.context_object_name + "-table":
                 self.template_name = self.list_template
             elif orig_type == "page":
                 self.template_name = self.list_template
             else:
                 context["window_content"] = self.list_template
-        return render(request, self.template_name, context)
+        return render(request, self.template_name, context)