XF/fisk
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Implement profit view and fix auto refresh

Browse Source
This commit is contained in:
Mark Veidemanis
2022-11-29 07:20:39 +00:00
parent 2b13802009
commit a39a5c3857
10 changed files with 192 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
core/templates/base.html
View File

@@ -202,6 +202,18 @@
Home
</a>
{% if user.is_authenticated %}
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
View
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="{% url 'profit' type='page' %}">
Profit by account
</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Manage
@@ -215,8 +227,6 @@
</a>
</div>
</div>
{% endif %}
{% if user.is_authenticated %}
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Setup

136
core/templates/index.html
View File

@@ -4,7 +4,7 @@
{% block outer_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" 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;">
@@ -16,7 +16,7 @@
</article>
</nav>
</div>
</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">
@@ -31,86 +31,72 @@
</div>
</div>
<!-- <div class="grid-stack-item" gs-w="5" gs-h="14" gs-y="14" 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>
Offset
</p>
<article class="panel-block is-active">
{# include 'window-content/offset.html' #}
</article>
</nav>
</div>
</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 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;
<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();
// 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);
// 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;
// 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 = "";
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);
}
});
</script>
<script>
</script>
// run the JS scripts inside the added element again
for (var i = 0; i < scripts.length; i++) {
eval(scripts[i].innerHTML);
}
});
</script>
<div
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
hx-get="{% url 'profit' type='widget' %}"
hx-target="#widgets-here"
hx-trigger="load"></div>
{% endblock %}

2
core/templates/partials/position-list.html
View File

@@ -4,7 +4,7 @@
hx-target="#{{ context_object_name }}-table"
id="{{ context_object_name }}-table"
hx-swap="outerHTML"
hx-trigger="{{ context_object_name_singular }}Event from:body"
hx-trigger="{{ context_object_name_singular }}Event from:body, every 5s"
hx-get="{{ list_url }}">
<thead>
<th>account</th>

30
core/templates/partials/profit-list.html Normal file
View File

@@ -0,0 +1,30 @@
{% include 'partials/notify.html' %}
<table
class="table is-fullwidth is-hoverable"
hx-target="#{{ context_object_name }}-table"
id="{{ context_object_name }}-table"
hx-swap="outerHTML"
hx-trigger="{{ context_object_name_singular }}Event from:body, every 3s"
hx-get="{{ list_url }}">
<thead>
<th>id</th>
<th>name</th>
<th>P/L</th>
<th>balance</th>
<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 %}">
<td>{{ item.account.id }}</td>
<td>{{ item.account.name }}</td>
<td>{{ item.pl }}</td>
<td>{{ item.balance }}</td>
<td>{{ item.currency }}</td>
</tr>
{% endfor %}
</table>

2
core/templates/wm/widget.html
View File

@@ -1,5 +1,5 @@
<div id="widget">
<div id="widget-{{ unique }}" class="grid-stack-item" {% block widget_options %}gs-w="10" gs-h="1" gs-y="10" gs-x="1"{% endblock %}>
<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 class="grid-stack-item-content">
<nav class="panel">