Use Jade to dynamically fill a bootstrap caraousel. Some issues on iteration - twitter-bootstrap-3

I am trying to create a boostrap carousel using jade to dynamically iterate through a list of objects and display them in the carousel.
My first question is obviously is this possible.
Secondly how might I go about accomplishing it.
Here is a snippet of my code where I am trying to generate the list containing the data-slide-to to element of my carousel :
10 - var n = 0
11 while n < newsarticles.length
12 if n == 0
13 li.active(data-target="#header-carousel",data-slide-to="n++")
14 else
15 li(data-target="#header-carousel",data-slide-to="n++")
I know this is bad code but I am failing and finding a reference on how to accomplish this if it is possible.
The error it is throwing is
"unexpected text " pointing to line 13
Any advice would be greatly appreciate. Thank you for you time in advance and if there is any more information I can provide that would be helpful please let me know.
Here is a full working example of my dynamic carousel code:
extends layout
block content
div.container
#header-carousel.carousel.slide(data-ride="carousel",data-interval="4000")
ol.carousel-indicators
-var n = 0
while n < newsarticles.length
if n == 0
li.active(data-target="#header-carousel",data-slide-to=n)
- n++
else
li(data-target="#header-carousel",data-slide-to=n)
- n++
.carousel-inner
-var i = 0
- for newsarticle in newsarticles
if i == 0
.item.active
img(src='#{newsarticle.imgurl}')
.carousel-caption #{newsarticle.articletitle}
-i++
else
.item
img(src='#{newsarticle.imgurl}')
.carousel-caption #{newsarticle.articletitle}
-i++
a.left.carousel-control(href="#header-carousel", data-slide="prev")
span.icon-prev
a.right.carousel-control(href="#header-carousel", data-slide="next")
span.icon-next
the data associated with this code is as follows:
newsarticle =
{
articletitle: String,
bodytext: String,
editedon: { type: Date, default: Date.now },
imgurl: String
});

i guess issue would be the string you have n++ increment value in quotes.
i guess you can use a variable for it and then assign it to the data attribute.

Hey I have arrived at a working solution. Thank you everyone for taking a look. The way I achieved what I was attempting to do was by using #Jai's advice along with a little external thinking on my own. The issue was definanly the "" around the n++ but it was also trying to increment the variable n inside of the data-slide-to element. If you remove the quotations around it and then increment the variable n separately it works properly. Here is the working version of the code. Also if this is not the best industry practice and there is a better method of accomplishing this I am open to more solutions.
-var n = 0
while n < newsarticles.length
if n == 0
li.active(data-target="#header-carousel",data-slide-to=n)
- n++
else
li(data-target="#header-carousel",data-slide-to=n)
- n++

Related

Polarion Velocity Script adding a custom field integer

I'm new to Velocity scripting and made a few simple scripts and they work ok.
I'm now trying something else, which should be simple but I can't seem to get it to work.
I'm selecting a bunch of Work Items, reading a custom field (NumberPack) and I just want to sum them.
My script is as follow:
#set($PCR = $transaction.workItems.search.query("type:Paramrequest AND created:[20220101 TO 30000000] AND NumberPack.1:[00000000001 TO 02147483647]"))
#set($Total = 0)
#set($Pack = 0)
#set($x = 0)
#foreach($PCR in $PCR)
##set($Pack = $Pack.parseInt($PCR.fields.get("NumberPack")))
##set($x = $Total.add($Pack))
$PCR.fields.get("NumberPack").render ## this renders each NumberPack of each WI
#set($Pack = $PCR.fields.get("NumberPack"))
##set($x = $Total2.add($PCR.fields.get("NumberPack")))
##set($Total2 = $Total2 + 1)
#set($x = $math.add($x, 1))
#end
<br> Total: $Total
<br> $x
As you can see I tried a few methods but I keep getting the total 0.
Any ideas what I'm doing wrong?
Thanks
If you write
#set($Pack = $PCR.fields.get("NumberPack"))
Pack: $Pack <br>
the output is something like:
Pack: com.polarion.alm.server.api.model.fields.ProxyIntegerField#67807d51
In the API Javadoc (https://almdemo.polarion.com/polarion/sdk/doc/javadoc-rendering/com/polarion/alm/shared/api/model/fields/IntegerField.html), you'll find that api.model.fields IntegerField has a get() method, which gives you the value. Though I agree this is never explicitly stated in the documentation.
You need to write
#set($Pack = $PCR.fields.get("NumberPack").get())
to get the value. The following statement will give you the cumulative sum.
#set($Total = $math.add($Total, $PCR.fields.get("NumberPack").get()))
Also be careful with your #foreach statement. In this case it seems to work, but it would be safer to give your iterator variable a name differing from the collection you are iterating through. For example:
#foreach($PCR in $PCRs)

Pug (express view engine) nesting with conditionals

i'm using pug as my viewengine for express (node js), but im having trouble with some conditionals. I use a grid framework for newsletter designs which works similar to bootstraps grid, meaning i have rows and columns. I need two items per row, which requires to define a new row every two items. I tried it this way:
each elem,index in elements
- var even = index % 2;
if(even)
.row
.column
else
.column
This doenst work as intended, because the else-column is not nested insinde the row column. I could only find the pugjs.org documentation which is a bit poor on this end, so does anyone have experience with this or a link to more documentation? Thanks a lot.
Pug ignores extra indentation, so what you've written is correctly interpreted as:
each elem,index in elements
- var even = index % 2;
if(even)
.row
.column
else
.column
Note that the last .column is truly a sibling of .row.
Instead, try this—
each element, index in elements
if !(index % 2)
.row
.column
if (index + 1 < elements.length)
.column
When index is even (remember it starts at 0) do the following:
Render a row element with one column
If this isn't the last element, add a second column
When index is odd, do nothing (because we already added the second column).
Note that even though it looks like the second column will be rendered as a child of the first column, the contents of an if statement render at the indentation level of the if statement—so they'll be siblings.
Process elements into groups of two.
-
const groupedElements = elements.reduce(function(acc, curr, index) {
let isEven = (index + 1) % 2;
if (isEven) {
acc.push([curr]);
}
else {
acc[acc.length-1].push(curr);
}
return acc;
}, []);
for group in groupedElements
.row
for item in group
.col

How to create a sublist from List<Object> in apache velocity template .vm

I am new to apache velocity, I want to create a subList Object from the List Objects which are coming from some service call in .vm file.
We need to render the list based on some logic in parts, for that we want to create sublist from list.
$table.getBooks() //contains all the Books objects
Below is the sample code which I tried but it did not work.
#set($segregatedList = [])
#set($size = $table.getLineItems().size())
#foreach($index in [0..$size-1])
#set($value = $index + 4)
#set($minimum = $math.min($nItems,$value))
$segregatedList.add($table.getBooks().subList($index,$minimum)))
$index += 4
#end
I executed the code, while rendering $segregatedList is coming as null.
I verified $table.getBooks() contains the Objects as when I am passing this,Objects are getting rendered successfully.
Can someone please tell what I am doing wrong or how can I create a sublist ?
First you are increment index with 4 and can cause an IndexOutOfBoundsException, so need to change until size-5 (and therefore remove math minimum check)
Second you are adding single Element instead of all Elements using addAll
Third your size check if on wrong parameter - should be on relevant $table.getBooks()
And last make sure your list have more than 5 elements
#set($segregatedList = [])
#set($size = $table.getBooks().size())
#foreach($index in [0..$size-5])
#set($value = $index + 4)
$segregatedList.addAll($table.getBooks().subList($index, $value)))
$index += 4
#end

Make line chart with values and dates

In my app i use ios-charts library (swift alternative of MPAndroidChart).
All i need is to display line chart with dates and values.
Right now i use this function to display chart
func setChart(dataPoints: [String], values: [Double]) {
var dataEntries: [ChartDataEntry] = []
for i in 0..<dataPoints.count {
let dataEntry = ChartDataEntry(value: values[i], xIndex: i)
dataEntries.append(dataEntry)
}
let lineChartDataSet = LineChartDataSet(yVals: dataEntries, label: "Items count")
let lineChartData = LineChartData(xVals: dataPoints, dataSet: lineChartDataSet)
dateChartView.data = lineChartData
}
And this is my data:
xItems = ["27.05", "03.06", "17.07", "19.09", "20.09"] //String
let unitsSold = [25.0, 30.0, 45.0, 60.0, 20.0] //Double
But as you can see - xItems are dates in "dd.mm" format. As they are strings they have same paddings between each other. I want them to be more accurate with real dates. For example 19.09 and 20.09 should be very close. I know that i should match each day with some number in order to accomplish it. But i don't know what to do next - how i can adjust x labels margins?
UPDATE
After small research where i found out that many developers had asked about this feature but nothing happened - for my case i found very interesting alternative to this library in Swift - PNChart. It is easy to use, it solves my problem.
The easiest solution will be to loop through your data and add a ChartDataEntry with a value of 0 and a corresponding label for each missing date.
In response to the question in the comments here is a screenshot from one of my applications where I am filling in date gaps with 0 values:
In my case I wanted the 0 values rather than an averaged line from data point to data point as it clearly indicates there is no data on the days skipped (8/11 for instance).
From #Philipp Jahoda's comments it sounds like you could skip the 0 value entries and just index the data you have to the correct labels.
I modified the MPAndroidChart example program to skip a few data points and this is the result:
As #Philipp Jahoda mentioned in the comments the chart handles missing Entry by just connecting to the next data point. From the code below you can see that I am generating x values (labels) for the entire data set but skipping y values (data points) for index 11 - 29 which is what you want. The only thing remaining would be to handle the x labels as it sounds like you don't want 15, 20, and 25 in my example to show up.
ArrayList<String> xVals = new ArrayList<String>();
for (int i = 0; i < count; i++) {
xVals.add((i) + "");
}
ArrayList<Entry> yVals = new ArrayList<Entry>();
for (int i = 0; i < count; i++) {
if (i > 10 && i < 30) {
continue;
}
float mult = (range + 1);
float val = (float) (Math.random() * mult) + 3;// + (float)
// ((mult *
// 0.1) / 10);
yVals.add(new Entry(val, i));
}
What I did is fully feed the dates for x data even no y data for it, and just not add the data entry for the specific xIndex, then it will not draw the y value for the xIndex to achieve what you want, this is the easiest way since you just write a for loop and continue if you detect no y value there.
I don't suggest use 0 or nan, since if it is a line chart, it will connect the 0 data or bad things will happen for nan. You might want to break the lines, but again ios-charts does not support it yet (I also asked a feature for this), you need to write your own code to break the line, or you can live with connecting the 0 data or just connect to the next valid data.
The down side is it may has performance drop since many xIndex there, but I tried ~1000 and it is acceptable. I already asked for such feature a long time ago, but it took lot of time to think about it.
Here's a function I wrote based on Wingzero's answer (I pass NaNs for the entries in the values array that are empty) :
func populateLineChartView(lineChartView: LineChartView, labels: [String], values: [Float]) {
var dataEntries: [ChartDataEntry] = []
for i in 0..<labels.count {
if !values[i].isNaN {
let dataEntry = ChartDataEntry(value: Double(values[i]), xIndex: i)
dataEntries.append(dataEntry)
}
}
let lineChartDataSet = LineChartDataSet(yVals: dataEntries, label: "Label")
let lineChartData = LineChartData(xVals: labels, dataSet: lineChartDataSet)
lineChartView.data = lineChartData
}
The solution which worked for me is splitting Linedataset into 2 Linedatasets. First would hold yvals till empty space and second after emptyspace.
//create 2 LineDataSets. set1- till empty space set2 after empty space
set1 = new LineDataSet(yVals1, "DataSet 1");
set2= new LineDataSet(yVals2,"DataSet 1");
//load datasets into datasets array
ArrayList<ILineDataSet> dataSets = new ArrayList<ILineDataSet>();
dataSets.add(set1);
dataSets.add(set2);
//create a data object with the datasets
LineData data = new LineData(xVals, dataSets);
// set data
mChart.setData(data);

Dynamic variable different for every Wordpress post: how to declare in loop?

I need a wordpress loop that for every post checks a meta numeric variable previously assigned to each of the taxonomies of the post and returns the sum of these meta variables.
To do so, I think I need a dynamic variable name for the total. I mean something like:
variablerelatedtopost = metataxonomy1 + metataxonomy2 + ... + metataxonomyn
echo variablerelatedtopost
How can I do that? Is it possible to generate a dynamic numeric variable via loop? and HOW can I refer to it in a general way, without adressing it with its name?
Thanks everyone! And sorry for possible English mistakes :P
EDIT: I just realized the code by Alex is not what I wanted. I need a variable which changes name at every post and which value is always = 0. Is there a solution?
can you not just add a counter to your loop like this?
//Total should start # 0 before the loop
$total = 0;
// The Query
$the_query = new WP_Query($args);
// The Loop
while ( $the_query->have_posts() ) : $the_query->the_post();
$amount = get_post_meta($post->ID, 'the_meta_data_field', true);
$total = $total + $amount;
endwhile;
//echo total
echo $total;
I found the solution to my problem: an array which increases its lenght at every cicle of the loop. I know it's simple but since I'm just a beginner it took me a while to think about it. I post the code here so maybe it can help someone (and if you find bugs or have improvements, please tell me)
//Before the loop, empty array
$totale = array();
// WP Loop
while ( $loop->have_posts() ) : $loop->the_post();
$totale[] = 0;
$indice = (count($totale)) - 1;
// $termvariable was previously set up as a term meta value
if( has_term( 'numberofterm', 'nameoftaxonomy' ) ) {
$totale[$indice] = $termvariable + $totale[$indice];
}