_includes/appscms/extras/ratings.html in appscms-tools-theme-3.8.4 vs _includes/appscms/extras/ratings.html in appscms-tools-theme-3.8.5

@@ -1,33 +1,125 @@
+{%- if page.tool -%} {%- assign tool = page.tool -%} {%- assign data =
+site.data.rating.rating.tools -%} {% assign file = page.fileName %} {% assign
+lang = page.lang %} {% assign folder = page.folderName %} {% assign Data=
+site.data[folder][lang][file] %}
 <!-- rating section -->
 <div class="container">
   <div class="row justify-content-center">
-    <div class="col-lg-7 col-md-9 col-sm-10 col-10 pt-5 text-center">
-      <div class="input-group w-100 shadow ratings">
-        <span class="input-group-text bg-transparent border-0">
-          Rate this tool:
-        </span>
-        <div class="input-group-append">
-          <span class="input-group-text bg-transparent border-0">
-            <i class="fas fa-star fa-lg"></i>
-            <i class="fas fa-star fa-lg"></i>
-            <i class="fas fa-star fa-lg"></i>
-            <i class="fas fa-star fa-lg"></i>
-            <i class="fas fa-star fa-lg"></i>
+    <div class="col-lg-8 col-md-9 col-sm-10 col-10 pt-5 text-center">
+      <div class="rating-tool">
+        <img
+          id="rating-img"
+          loading="lazy"
+          src="/assets/images/rating.png"
+          alt="rating-img"
+          {%-
+          if
+          site.crossorigin
+          -%}
+          crossorigin
+          {%-
+          endif
+          -%}
+        />
+        <div class="rating-text">
+          {{Data.rate | default: 'Rate this tool' }} :
+        </div>
+        <div class="rating-stars">
+          <i class="fas fa-star rating-star"></i
+          ><i class="fas fa-star rating-star"></i
+          ><i class="fas fa-star rating-star"></i
+          ><i class="fas fa-star rating-star"></i
+          ><i class="fas fa-star rating-star"></i>
+        </div>
+        <div class="rating-value ml-2">
+          {%- for item in data -%} {%- if item.name ==tool -%} {%- assign rating
+          = item.rating -%} {%- assign votes = item.votes -%} {%- endif -%} {%-
+          endfor -%}
+          <span class="rating">
+            <strong id="rating">{{rating}}</strong><span>/5</span>
           </span>
+          &nbsp;
+          <span class="total-ratings" id="count">{{votes}} </span> {{Data.votes
+          | default: 'votes' }}
         </div>
-        <span></span>
-        <span
-          class="input-group-text bg-transparent border-0 appsms-user-rating-count"
-          >4.9</span
-        >
-        <span
-          class="input-group-text bg-transparent border-0 appsms-user-total-count"
-          >/5</span
-        >
-        <span class="input-group-text bg-transparent border-0 raing-votes"
-          >32 votes</span
-        >
       </div>
+      <script>
+        const ratingValue = document.getElementById("rating");
+        const count = document.getElementById("count");
+        const setRating = async (rating) => {
+          const name = "{{site.name}}";
+          const tool = "{{page.tool}}";
+          const data = { website: name, feature: tool, rating: rating };
+          fetch(
+            "https://ratingapi-main.netlify.app/.netlify/functions/api/v1/rating/add",
+            {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify(data),
+            }
+          )
+            .then((response) => response.json())
+            .then((data) => {
+              ratingValue.innerText = data.rating;
+              count.innerText = data.count;
+            })
+            .catch((error) => {
+              console.error("Error:", error);
+            });
+        };
+        const tool = "{{page.tool}}";
+        const fetchRating = async () => {
+          const data = await fetch(
+            `https://ratingapi-main.netlify.app/.netlify/functions/api/v1/${tool}/rating`
+          ).then((res) => res.json());
+          ratingValue.innerText = data.rating;
+          count.innerText = data.votes;
+        };
+        let ratingImg = document.querySelector("#rating-img");
+        ratingImg.addEventListener("load", (event) => {
+          fetchRating();
+        });
+        const ratingNode = document.getElementsByClassName("rating-star");
+        let ratedValue = localStorage.getItem(`${tool}rating`);
+        if (ratedValue) {
+          Array.from(ratingNode)
+            .slice(0, ratedValue)
+            .map((item) => {
+              item.style.color = "#FF8A1F";
+            });
+        }
+
+        Array.from(ratingNode).map((item) =>
+          item.addEventListener("click", () => {
+            const tool = "{{page.tool}}";
+            if (!localStorage.getItem(`${tool}rating`)) {
+              function indexInClass(node) {
+                var className = node.className;
+                var num = 0;
+                for (var i = 0; i < ratingNode.length; i++) {
+                  if (ratingNode[i] === node) {
+                    return num;
+                  }
+                  num++;
+                }
+                return -1;
+              }
+              const index = indexInClass(item);
+              Array.from(ratingNode)
+                .slice(0, index + 1)
+                .map((item) => {
+                  item.style.color = "#FF8A1F";
+                });
+              setRating(index + 1);
+              localStorage.setItem(`${tool}rating`, index + 1);
+            }
+          })
+        );
+      </script>
     </div>
   </div>
 </div>
+
+{%- endif -%}