From 850d47d6760b7c8701128d19fbd74aa0a78f534c Mon Sep 17 00:00:00 2001
From: Bangara Raju Kottedi <bangararaju.kottedi@gmail.com>
Date: Wed, 30 Aug 2023 04:02:12 +0530
Subject: [PATCH 1/2] scripts updated

---
 db_scripts/PostLikeCounter.sql  | 9 +++++++++
 db_scripts/PostVisitCounter.sql | 9 +++++++++
 db_scripts/mysql.sql            | 7 +++++--
 3 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 db_scripts/PostLikeCounter.sql
 create mode 100644 db_scripts/PostVisitCounter.sql

diff --git a/db_scripts/PostLikeCounter.sql b/db_scripts/PostLikeCounter.sql
new file mode 100644
index 0000000..3dc2919
--- /dev/null
+++ b/db_scripts/PostLikeCounter.sql
@@ -0,0 +1,9 @@
+CREATE TABLE `PostLikeCounter` (
+  `id` int(20) NOT NULL AUTO_INCREMENT,
+  `siteid` varchar(500),
+  `postid` varchar(500),
+  `count` int(20),
+  `datecreated` timestamp DEFAULT current_timestamp() ,
+  `datemodified` timestamp DEFAULT current_timestamp() ON UPDATE current_timestamp(),
+  PRIMARY KEY (`id`)
+)
diff --git a/db_scripts/PostVisitCounter.sql b/db_scripts/PostVisitCounter.sql
new file mode 100644
index 0000000..445acdb
--- /dev/null
+++ b/db_scripts/PostVisitCounter.sql
@@ -0,0 +1,9 @@
+CREATE TABLE `PostVisitCounter` (
+  `id` int(20) NOT NULL AUTO_INCREMENT,
+  `siteid` varchar(500),
+  `postid` varchar(500),
+  `count` int(20),
+  `datecreated` timestamp DEFAULT current_timestamp() ,
+  `datemodified` timestamp DEFAULT current_timestamp() ON UPDATE current_timestamp(),
+  PRIMARY KEY (`id`)
+)
diff --git a/db_scripts/mysql.sql b/db_scripts/mysql.sql
index ce66b43..83a459c 100644
--- a/db_scripts/mysql.sql
+++ b/db_scripts/mysql.sql
@@ -10,9 +10,12 @@ SHOW GRANTS FOR blog_admin@'%';
 
 FLUSH PRIVILEGES
 
-
 -- Create Counter Table
 
 -- DROP TABLE PostVisitCounter
 
--- create table PostVisitCounter (id INT(20) NOT NULL AUTO_INCREMENT PRIMARY KEY, siteid nvarchar(500), postid nvarchar(500), count INT(20), datecreated TIMESTAMP, datemodified TIMESTAMP);
\ No newline at end of file
+-- DROP TABLE PostLikeCounter
+
+-- create table PostVisitCounter (Id INT(20) NOT NULL AUTO_INCREMENT PRIMARY KEY, SiteId nvarchar(500), PostId nvarchar(500), Count INT(20), DateCreated TIMESTAMP, DateModified TIMESTAMP);
+
+-- create table PostLikeCounter (Id INT(20) NOT NULL AUTO_INCREMENT PRIMARY KEY, SiteId nvarchar(500), PostId nvarchar(500), Count INT(20), DateCreated TIMESTAMP, DateModified TIMESTAMP);
\ No newline at end of file

From 4a11f0c85075f18ad2c9584717cf9ac7a0aad0ae Mon Sep 17 00:00:00 2001
From: Bangara Raju Kottedi <bangararaju.kottedi@gmail.com>
Date: Wed, 6 Sep 2023 18:44:23 +0530
Subject: [PATCH 2/2] Likes and Views as a Single component: Improved ui

---
 _includes/likes-views.html | 44 ++++++++++++++++++++++++++++++++++++++
 _includes/likes.html       | 23 ++++----------------
 _includes/views.html       | 14 +++---------
 _layouts/post.html         |  5 ++---
 4 files changed, 53 insertions(+), 33 deletions(-)
 create mode 100644 _includes/likes-views.html

diff --git a/_includes/likes-views.html b/_includes/likes-views.html
new file mode 100644
index 0000000..a87b243
--- /dev/null
+++ b/_includes/likes-views.html
@@ -0,0 +1,44 @@
+<style>
+    .heart-icon {
+        margin-bottom: -41px;
+        margin-right: -39.5px;
+        display: inline-flex;
+        width: 46px;
+        height: 46px;
+        transform: translate(-50%, -50%);
+        background: url("{{ '/assets/img/custom/heart.png' | relative_url }}") no-repeat;
+        background-position: 0 0;
+        cursor: pointer;
+    }
+
+    .heart-icon.liked {
+        animation: like-anim 0.7s steps(28) forwards;
+    }
+
+    @keyframes like-anim {
+        to {
+            background-position: right;
+        }
+    }
+</style>
+
+    {% include views.html tooltip=true onload=false lang=lang %}
+    {% include likes.html tooltip=true onload=false lang=lang %}
+
+<script>
+    const views = document.getElementById("views-count");
+    const likes = document.getElementById("likes-count");
+    const postLikesAndViews = document.getElementById("likes-views");
+
+    postLikesAndViews.style.display = "none";
+
+    ajax(serviceUrl + "/GetPostLikesAndViews?siteId=" + siteId + "&postId=" + postId)
+        .then(function (result) {
+            if (result != "N/A") {
+                var response = JSON.parse(result);
+                views.innerText = response.postViews;
+                likes.innerText = response.postLikes;
+                postLikesAndViews.style.display = "inline";
+            }
+        });
+</script>
\ No newline at end of file
diff --git a/_includes/likes.html b/_includes/likes.html
index d62bf67..29fce07 100644
--- a/_includes/likes.html
+++ b/_includes/likes.html
@@ -1,5 +1,3 @@
-<!-- <link rel="stylesheet" href="{{ '/assets/css/heart.css' | relative_url }}"> -->
-
 <style>
     .heart-icon {
         margin-bottom: -41px;
@@ -26,21 +24,14 @@
 
 <i class="heart-icon" {% if include.tooltip %} title="{{site.data.locales[include.lang].post.likes}}"
     data-bs-toggle="tooltip" data-bs-placement="bottom" {% endif %}></i>
-{% include loader.html id="likes-loader" %}
 <em id="likes-count"></em>
 
 <script>
     const heartIcon = document.querySelector(".heart-icon");
     const likesCount = document.getElementById("likes-count");
-    const likesLoader = document.getElementById("likes-loader");
-
-    likesLoader.style.display = "none";
-
-    let likesAmount = likesCount.innerHTML;
+    const likesOnLoad = "true";
 
     function onLoadAndClick() {
-        likesLoader.style.display = "inline-flex";
-        likesCount.style.display = "none";
         heartIcon.style.pointerEvents = 'none';
     }
 
@@ -53,19 +44,15 @@
                     heartIcon.classList.toggle("liked");
                 }
                 likesCount.innerHTML = result;
-                likesLoader.style.display = "none";
-                likesCount.style.display = "inline-flex";
                 heartIcon.style.pointerEvents = 'auto';
             })
-            .catch(function () {
-                likesLoader.style.display = "none";
-                likesCount.style.display = "inline-flex";
-            });
     }
 
     var apiUrl = serviceUrl + "/GetPostLikes?siteId=" + siteId + "&postId=" + postId;
 
+    if(likesOnLoad == "{{include.onload}}"){
     apiCall(apiUrl);
+    }
 
     heartIcon.addEventListener("click", () => {
         if (!heartIcon.classList.contains("liked")) {
@@ -76,6 +63,4 @@
 
         apiCall(apiUrl, "click");
     });
-</script>
-
-<!-- <script src="{{ '/assets/js/likes.js' | relative_url }}"></script> -->
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/_includes/views.html b/_includes/views.html
index 1dd75b6..b8cb6e7 100644
--- a/_includes/views.html
+++ b/_includes/views.html
@@ -1,27 +1,19 @@
 <i class="fa fa-eye fa-fw" {% if include.tooltip %} title="{{site.data.locales[include.lang].post.views}}"
   data-bs-toggle="tooltip" data-bs-placement="bottom" {% endif %}></i>
-{% include loader.html id="views-loader" style="margin-right: 12px" %}
 <em id="views-count" style="margin-right: 12px">
 </em>
 
 <script>
+  const viewsOnLoad = "true";
+if(viewsOnLoad == "{{include.onload}}"){
   const viewsCount = document.getElementById("views-count");
   const viewsLoader = document.getElementById("views-loader");
 
-  viewsCount.style.display = "none";
-  viewsLoader.style.display = "inline-block";
-
   ajax(serviceUrl + "/GetPostViews?siteId=" + siteId + "&postId=" + postId)
     .then(function (result) {
       viewsCount.innerText = result;
-      viewsLoader.style.display = "none";
-      viewsCount.style.display = "inline-block";
     })
     .catch(function () {
-      viewsLoader.style.display = "none";
-      viewsCount.style.display = "inline-block";
     });
+}
 </script>
-
-<!-- <script src="{{ '/assets/js/views.js' | relative_url }}">
-</script> -->
\ No newline at end of file
diff --git a/_layouts/post.html b/_layouts/post.html
index fed7154..752f30a 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -33,9 +33,8 @@ tail_includes:
     </div>
 
     <!-- post counter -->
-    <div>
-      {% include views.html tooltip=true lang=lang %}
-      {% include likes.html tooltip=true lang=lang %}
+    <div id="likes-views">
+      {% include likes-views.html tooltip=true lang=lang %}
     </div>
   </div>