Notes

{% fetchxml appDetailsQuery %}
<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' />
<condition attribute='crff0_username' operator='eq' value='{{user.fullname}}' />
</filter>
</entity>
</fetch>
{% endfetchxml %}

{% fetchxml acceleratorDetailsQuery %}
<fetch mapping='logical'>
<entity name='crff0_appdetail'>
<attribute name='crff0_name' />
<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 %}



{% assign userrating=0 %}
{% assign accName = acceleratorDetailsQuery.results.entities[0]["crff0_name"] %}

{% if appDetailsQuery.results.entities.size > 0 %}
{% assign userrating = 1 %}
{% endif %}

<div class="user-rating-container">
<p class="user-rating-label">User Rating:</p>
<div class="star-widget">
<input type="radio" name="rate" id="rate-5">
<label for="rate-5" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-4">
<label for="rate-4" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-3">
<label for="rate-3" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-2">
<label for="rate-2" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-1">
<label for="rate-1" class="fas fa-star"></label>
</div>
<span id="rating-message" style="font-style: italic; font-size: 14px; margin-left: 20px; margin-top: 0px;"></span>
</div>


<style>
.user-rating-container {
display: flex;
align-items: center;
justify-content: flex-start;
margin-left: 20px;
}


.center {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}

.user-rating-label {
font-size: 14px;
}

.star-widget {
height: 40px;
width: auto;
text-align: center;
}


.star-widget input {
display: none;
}

.star-widget label {
float: right;
font-size: 14px;
color: lightgrey;
margin: 0 2px;
cursor: pointer;
}

.star-widget label:before {
content: '★';
}

.star-widget input:checked~label {
color: gold;
}

.star-widget:not(:checked)>label:hover,
.star-widget:not(:checked)>label:hover~label {
color: gold;
}

.star-widget input:checked>label:hover,
.star-widget input:checked>label:hover~label {
color: gold;
}

.star-widget .result:before {
position: absolute;
content: "";
width: 100%;
left: 50%;
transform: translateX(-47%);
bottom: -30px;
font-size: 30px;
font-weight: 500;
color: gold;
font-family: 'Poppins', sans-serif;
display: none;
}

.star-widget input:checked~.result:before {
display: block;
}
</style>



<script>
{% include 'WrapperDemo' %};
var myVar= '{{userrating}}' ;
if(myVar==0){
$(document).ready(function () {
// Add event listener to star rating inputs
$(".star-widget input[type='radio']").on("change", saveRating);
});
}
else{
$("#rating-message").text("User has already rated.");
}

function saveRating() {
var ratingCount = 0;
// Loop through each star input
// $(".star-widget input[type='radio']").each(function () {
// // Check if the star input is checked
// if (this.checked) {
// ratingCount++;
// }
// });

for(var i=1; i<=5; i++){
var input=document.getElementById("rate-"+i);
if(input.checked){
ratingCount+=i;
}
}
console.log(ratingCount);

//var currentUser = document.getElementById("userfullname").value;
var currentname = '{{user.fullname}}';

var appname = '{{accName}}';
//var appname= document.getElementById("app-name").value;
console.log(currentname);
console.log(myVar);
console.log(appname);


// Prepare the object to save in Dataverse table
var ratingObj = {
"crff0_ratings": ratingCount,
"crff0_username":currentname,

};

// AJAX request to save the rating count
webapi.safeAjax({
type: "POST",
url: "/_api/crff0_appratings",
contentType: "application/json",
data: JSON.stringify(ratingObj),
success: function (data, status, xhr) {
// Print the ID of the newly created table record
console.log("Rating count saved successfully. Entity ID: " + xhr.getResponseHeader("entityid"));
$("#rating-message").text("User Ratings Received");

},
error: function (xhr, status, error) {
console.error("Failed to save rating count:", error);
}
});
}
</script>