I would like to test the sortable table with Cypress.io
I follow their page instruction: https://docs.cypress.io/api/commands/trigger.html#Mouse-Events
and it doesn't work...
First: it doesn't move the element
Second: when I see the step by step test on the left side, mouse down and mouse move are located in the same position...
my test
cy.get('.resource-filter-table')
.trigger('mousedown', {witch:1, pageX:188, pageY:196})
.trigger('mousemove', {witch:1, pageX:188, pageY:261})
.trigger('mouseup')
my html
<table class="table table-borderless resource-filter-table">
<thead>
<th scope="col"><input type="checkbox" checked=True class="resourceFilterElementAll" onchange="checkAllResources(this)"></th>
<th scope="col">Line</th>
</thead>
<tbody>
{% for linija in user_lines %}
<tr>
<th><input type="checkbox" checked=True class="resourceFilterElement" onchange="filterOfResources()" id="{{linija.pk}}"></th>
<th class="filter-list-element">{{ linija.line_name}} <i class="filter-list-icon material-icons">drag_handle</i></th>
</tr>
{% endfor %}
</tbody>
</table>
Related
I am quite new to Flask and I am having a hard time to understand why I am only getting a list of elements in my browser (single column), I would like to get 3 different columns and my data is correct:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Mail</th>
<th>Delete</th>
</tr>
{% for n in customers %}
<tr>
<td>{{n['First Name']}} </td>
</tr>
<tr>
<td>{{n['Last Name']}}</td>
</tr>
<tr>
<td>{{ n['Phone']}}</td>
</tr>
<tr>
<td> Supprimer <td></td>
</tr>
{% endfor %}
</table>
What you are really looking for is something like this:
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Mail</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{% for n in customers %}
<tr>
<td>{{n['First Name']}} </td>
<td>{{n['Last Name']}}</td>
<td>{{ n['Phone']}}</td>
<td> Supprimer <td></td>
</tr>
{% endfor %}
</tbody>
</table>
tr Stands for Table Row. Check out this link to learn a bit more about tables
Making a web app that lets a user log workouts. I have a page that groups all the logged workouts together by date, using regroup and a for 2 loops. How do I only show the user that is logged in information their own information. When I try to use a 3rd for loop (ex. {% for workout in workouts%}, {% if workout.person == user %})I just get 2 tables with the same information. Heres the code in my template.
{% regroup workouts by date_of as dateof %}
{%for date_of in dateof %}
<table class="table table-striped table-dark mt-3">
<thead>
<th scope="col">{{date_of.grouper}}</th>
</thead>
<thead>
<tr>
<th scope="col">Body Part</th>
<th scope="col">Exercise</th>
<th scope="col">Weight(lbs)</th>
<th scope="col">Sets</th>
<th scope="col">Reps</th>
</tr>
</thead>
<tbody>
{% for workout in date_of.list %}
<tr>
<td>{{workout.body_part}}</td>
<td>{{workout.exercise}}</td>
<td>{{workout.weight}}</td>
<td>{{workout.sets}}</td>
<td>{{workout.reps}}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endfor %}
Thanks #gunsodo, after looking into it filtering the ListView with get_queryset solved the problem. 🙌🏼
I have a Django Template with a table - result of an iteration.
I am trying to integrate Google Charts in my HTML page for every record, eg. Google Pie Chart.
https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/gallery/piechart.html
It works, but the Google chart appears only once irrespective of number of iterations in a loop. And it appears on the same place
Is there a way to display different charts for every row in a loop, using Google Charts?
Is Google Charts the proper solution for such a task? Which simple visualization package could be a solution.
Thank you.
Have just got it.
The values in the fuction must be changed in every iteration
This is a template, which is responsible for charting.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load Charts and the corechart and barchart packages.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart_Absatz);
function drawChart_Absatz() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['2016', {{c.abs_2016__sum}}],
['2017', {{c.abs_2017__sum}}],
['2018', {{c.abs_2018__sum}}],
['2019', {{c.abs_2019__sum}}],
]);
var barchart_options = {title:'Absatz, Stueck',
width:300,
height:200,
colors: ['#A52A2A', '#A52A2A', '#A52A2A', '#A52A2A'],
legend: 'none'};
var barchart = new google.visualization.BarChart(document.getElementById('a{{c.tmp_code}}'));
barchart.draw(data, barchart_options);
}
</script>
<body>
<!--Table and divs that hold the pie charts-->
<table class="columns">
<tr>
<td><div id="b{{a.tmp_code}}" style="border: 1px solid #ccc"></div></td>
</tr>
</table>
</body>
</html>
Please pay attention that the function must be renamed for every iteration.
This is a newly generated name of the draw() function: a{{c.tmp_code}}. I add a letter "a" in front of the function name, because I have three columns in my table. The draw() function for the second column gets "b", and the third one "c".
And here is the template, which prints the table with embedded charts after every row. I have actually 3 charts after every row, because I have three columns of data.
<div class="table-responsive-sm">
<table class="table table-sm" >
<thead>
<tr class="bg-primary text-white">
<th>Code</th>
<th>Bezeichnung</th>
<th class="bg-dark text-right scope="col">Abs.16</th>
<th class="bg-dark text-right scope="col">Abs.17</th>
<th class="bg-dark text-right scope="col">Abs.18</th>
<th class="bg-dark text-right scope="col">Abs.19</th>
<th class="text-right scope="col">N.erl.16</th>
<th class="text-right scope="col">N.erl.17</th>
<th class="text-right scope="col">N.erl.18</th>
<th class="text-right scope="col">N.erl.19</th>
<th class="bg-dark text-right scope="col">DB2 16</th>
<th class="bg-dark text-right scope="col">DB2 17</th>
<th class="bg-dark text-right scope="col">DB2 18</th>
<th class="bg-dark text-right scope="col">DB2 19</th>
</tr>
</thead>
{% for c in qset %}
<tr class="bg-light">
<td>{{c.tmp_code}}</td>
<td>{{c.tmp_descr}}</td>
<td class="bg-secondary text-white text-right">{{c.abs_2016__sum}}</td>
<td class="bg-secondary text-white text-right">{{c.abs_2017__sum}}</td>
<td class="bg-secondary text-white text-right">{{c.abs_2018__sum}}</td>
<td class="bg-secondary text-white text-right">{{c.abs_2019__sum}}</td>
<td class="text-right">{{c.nerl_2016__sum|floatformat}}</td>
<td class="text-right">{{c.nerl_2017__sum|floatformat}}</td>
<td class="text-right">{{c.nerl_2018__sum|floatformat}}</td>
<td class="text-right">{{c.nerl_2019__sum|floatformat}}</td>
<td class="bg-secondary text-white text-right">{{c.db2_2016__sum|floatformat}}</td>
<td class="bg-secondary text-white text-right">{{c.db2_2017__sum|floatformat}}</td>
<td class="bg-secondary text-white text-right">{{c.db2_2018__sum|floatformat}}</td>
<td class="bg-secondary text-white text-right">{{c.db2_2019__sum|floatformat}}</td>
</tr>
{% block pic1 %}
{% include 'auswertung/chart1.html' %}
{% endblock %}
{% endfor %}
<tr class="bg-primary text-white">
<td class="text-white"></td>
<td class="text-white">TOTAL:</td>
<td class="bg-dark text-right">{{gqset.abs_2016__gsum}}</td>
<td class="bg-dark text-right">{{gqset.abs_2017__gsum}}</td>
<td class="bg-dark text-right">{{gqset.abs_2018__gsum}}</td>
<td class="bg-dark text-right">{{gqset.abs_2019__gsum}}</td>
<td class="text-right text-white">{{gqset.nerl_2016__gsum|floatformat}}</td>
<td class="text-right text-white"">{{gqset.nerl_2017__gsum|floatformat}}</td>
<td class="text-right text-white"">{{gqset.nerl_2018__gsum|floatformat}}</td>
<td class="text-right text-white"">{{gqset.nerl_2019__gsum|floatformat}}</td>
<td class="bg-dark text-right">{{gqset.db2_2016__gsum|floatformat}}</td>
<td class="bg-dark text-right">{{gqset.db2_2017__gsum|floatformat}}</td>
<td class="bg-dark text-right">{{gqset.db2_2018__gsum|floatformat}}</td>
<td class="bg-dark text-right">{{gqset.db2_2019__gsum|floatformat}}</td>
</tr>
{% block pic2 %}
{% include 'auswertung/chart1.html' %}
{% endblock %}
</table>
</div>
I want to display table with basic informations about products, and add hyperlink to cells in column "Product name" after clicking which you will be redirected to more detailed description of product with possibility to edtiing, deleting it etc.
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">Product name</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
{% for element in object %}
<tr>
<td><div class="btn active"><i class="fa fa-check"></i></div></td>
<td>
<a href="{% url 'prod_desc' pk:element.pk %}">
{{element.name|lower|capfirst}}
</a>
</td>
<td>
{{element.price}}
</td>
</tr>
{% endfor %}
</tbody>
</table>
How can I connect hiperlink with product name in table?
In case is there any walk-around solution ?
Is there any restriction about inserting hyperlink in html in general or it's a "Django thing" ?
The problem was in passing primary key of element I used ":" like in dictionary key:value instead of "="
<a href="{% url 'prod_desc' pk=element.pk %}">
{{element.name|lower|capfirst}}
</a>
my table looks like
date name place
4.09.2018 jack London
date name place
4.09.2018 ed paris
date name place
5.09.2018 sam istabul
i have problem with using table. i want to show one table my data but , it doesnt work, my program showing all my data different table but i dont want this. how i repair this situation ?
i want to show one header and all my data below from header like this
- date name place
4.09.2018 jack London
4.09.2018 ed paris
5.09.2018 sam istabul
but this situation adding header for all of my data. it shows here
my html codes
thank u for your interest...
<div class="container">
<div class="row">
<div class="col-3">
<a class="btn btn-warning" href="{% url 'ANASAYFA'%}"> ANASAYFA </a>
<br>
{% now "jS F Y H:i" %}
</div>
<div class="col-6">
{% for i in veriler %}
<table class="table table-bordered table-dark">
<thead>
<tr>
<th scope="col">TARİH</th>
<th scope="col">İSİM-SOYİSİM</th>
<th scope="col">VARDİYA BÖLGE</th>
<th scope="col">VARDİYA DÖNEM</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="i.row">{{ i.gun }}</th>
<th>{{ i.personel }}</th>
<th>{{ i.bolge }}</th>
<td>{{ i.vardiya_donemi }}</td>
</tr>
</tbody>
</table>
{% endfor %}
Try this:
<table class="table table-bordered table-dark">
<thead>
<tr>
<th scope="col">TARİH</th>
<th scope="col">İSİM-SOYİSİM</th>
<th scope="col">VARDİYA BÖLGE</th>
<th scope="col">VARDİYA DÖNEM</th>
</tr>
</thead>
<tbody>
{% for i in veriler %}
<tr>
<th scope="i.row">{{ i.gun }}</th>
<th>{{ i.personel }}</th>
<th>{{ i.bolge }}</th>
<td>{{ i.vardiya_donemi }}</td>
</tr>
{% endfor %}
</tbody>
</table>