fisk/core/templates/index.html

{% extends "base.html" %}
{% load static %}
{% load joinsep %}
{% 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">
      <div class="grid-stack-item-content">
        <nav class="panel">
          <p class="panel-heading" style="padding: .2em; line-height: .5em;">
            <i class="fa-solid fa-arrows-up-down-left-right has-text-grey-light"></i>
            Controls
          </p>
          <article class="panel-block is-active">
            {% include 'window-content/controls.html' %}
          </article>
        </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-content">
        <nav class="panel">
          <p class="panel-heading" style="padding: .2em; line-height: .5em;">
            <i class="fa-solid fa-arrows-up-down-left-right has-text-grey-light"></i>
            Home
          </p>
          <article class="panel-block is-active">
            {% include 'window-content/main.html' %}
          </article>
        </nav>
      </div>
    </div> -->

    <script>
      var grid = GridStack.init({
        cellHeight: 20,
        cellWidth: 50,
        cellHeightUnit: 'px',
        auto: true,
        float: true,
        draggable: {handle: '.panel-heading', scroll: false, appendTo: 'body'},
        removable: false,
        animate: true,
      });
      // GridStack.init();

      // a widget is ready to be loaded
      document.addEventListener('load-widget', function(event) {
        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);

          // 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 = "";
          // container.firstElementChild.outerHTML = "";
          grid.addWidget(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
          );

          // 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>
      <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 %}