Notes

{% fetchxml appDetailsQuery %}
<fetch mapping='logical'>
<entity name='crff0_appdetail'>
<attribute name='crff0_name' />
<attribute name='crff0_description' />
<filter type='and'>
<condition attribute='crff0_appdetailid' operator='eq' value='f45c424a-7cc5-ee11-a81c-6045bd6ca1b2' /> <!-- Replace with your actual App Details GUID -->
</filter>
</entity>
</fetch>
{% endfetchxml %}

{% fetchxml locationsQuery %}
<fetch distinct="true" mapping="logical" output-format="xml-platform" version="1.0" returntotalrecordcount="true">
<entity name='annotation'>
<attribute name='filename' />
<attribute name='documentbody' />
<attribute name='mimetype' />
<filter type='and'>
<condition attribute='objectid' operator='eq' value='f45c424a-7cc5-ee11-a81c-6045bd6ca1b2' /> <!-- Replace with your actual App Details GUID -->
</filter>
</entity>
</fetch>
{% endfetchxml %}

{% fetchxml ratingsQuery %}
<fetch mapping='logical'>
<entity name='crff0_apprating'>
<attribute name='crff0_ratings' />
<filter type='and'>
<condition attribute='crff0_appname' operator='eq' value='f45c424a-7cc5-ee11-a81c-6045bd6ca1b2' />
</filter>
</entity>
</fetch>
{% endfetchxml %}

{% assign interval = interval | integer %}
{% assign count = count | integer %}
{% assign height = height | integer %}
{% assign width = width | integer %}

<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Display Name, Description, and Average Rating -->
{% if appDetailsQuery.results.entities.size > 0 %}
<h3>{{ appDetailsQuery.results.entities[0]["crff0_name"] }}</h3>
<p>{{ appDetailsQuery.results.entities[0]["crff0_description"] }}</p>
{% endif %}

{% if ratingsQuery.results.entities.size > 0 %}
{% assign totalRating = 0 %}
{% for ratingEntity in ratingsQuery.results.entities %}
{% assign totalRating = totalRating | plus: ratingEntity["crff0_ratings"] %}
{% endfor %}
{% assign averageRating = totalRating | divided_by: ratingsQuery.results.entities.size % | plus: 1 %}
{% assign countRating = ratingsQuery.results.entities.size %}
<!-- Display star rating if needed -->
<div class="star-rating">
{% for i in (1..5) %}
{% if i <= averageRating %}
<span class="fa fa-star checked"></span>
{% else %}
<span class="fa fa-star"></span>
{% endif %}
{% endfor %}
</div>
{% else %}
<p>No ratings available for this app.</p>
{% endif %}

</div>

<div class="col-md-6">
<span>Showing {{ count }} out of {{ locationsQuery.results.entities.size }}</span>
{% if locationsQuery.results.entities.size > 0 %}
<div id="carousel-example-generic"
class="carousel slide"
data-ride="carousel"
data-interval="{{interval}}">
<!-- Indicators -->
<ol class="carousel-indicators">
{% for location in locationsQuery.results.entities limit: count %}
<li
data-target="#carousel-example-generic"
data-slide-to="{{forloop.index0}}"
class="{% if forloop.first %}active{% endif %}"></li>
{% endfor %}
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
{% for loc in locationsQuery.results.entities limit: count %}
<div class="item {% if forloop.first %}active{% endif %}" >
<img src=' data:{{ loc["mimetype"] }};base64,{{ loc["documentbody"] }}'>
<div class="carousel-caption" style="background:white">
<h3>{{ loc.filename }}</h3>

</div>
</div>
{% endfor %}
</div>
<!-- Controls -->
<a
class="left carousel-control"
href="#carousel-example-generic"
role="button"
data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a
class="right carousel-control"
href="#carousel-example-generic"
role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
{% endif %}
</div>
</div>
</div>

<style>
.carousel .item {
background-size: cover;
background-repeat: no-repeat;
}
.star-rating {
display: inline-block;
font-size: 22px; /* Adjust as needed */
}

.fa-star {
color: #fcdc7b; /* Color for empty stars */
}

.fa-star.checked {
color: #ff9800; /* Color for filled stars */
}

.fa-star-half.checked {
color: #ff9800; /* Color for half-filled stars */
}
</style>

{% manifest %}
{
"type": "Functional",
"displayName": "Locations Slider",
"description": "Locations slider using the table 'Place' as the data source",
"tables": ["cr50f_place"],
"params": [
{
"id": "title",
"displayName": "Title",
"description": ""
},
{
"id": "interval",
"displayName": "Interval",
"description": "The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. Default: 5000ms"
},
{
"id": "count",
"displayName": "Count",
"description": "The number of locations to display"
},
{
"id": "height",
"displayName": "Slide's height",
"description": "In px, default: 500px"
}
]
}
{% endmanifest %}