From 09541e7424dd0e7faf6cdc7459e43f6626b37912 Mon Sep 17 00:00:00 2001
From: Somajit Dey <dey.somajit@gmail.com>
Date: Sat, 21 Sep 2024 23:52:32 +0530
Subject: [PATCH] Added personal contact form view counter

---
 404.html      | 18 ++++++++++++++++--
 app/server.js |  9 +++++++++
 index.html    |  2 +-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/404.html b/404.html
index cbc01c2..8f7cd0c 100644
--- a/404.html
+++ b/404.html
@@ -33,7 +33,21 @@ <h1>Hello there! Feel free to post your message/comment/query to me</h1>
                                     <iframe name="hidden_iframe" src="about:blank" hidden></iframe>
 
     <script>
-        document.getElementById("submit").setAttribute("formaction", atob(location.pathname.split('/').pop().replace(/_/g,'+').replace(/-/g,'/')));
-    </script>
+        let postTo = sessionStorage.getItem("postTo");
+        
+        if (! postTo) { // No sessionStorage from earlier. This rules out reload.
+            postTo = atob(location.pathname.split('/').pop().replace(/_/g,'+').replace(/-/g,'/'));
+            sessionStorage.setItem("postTo", postTo);
+            
+            // Post towards reporting new view of this page. Ignores page reloads by detecting presence of prior sessionStorage.
+            fetch(postTo, {
+                method: "POST",
+                headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 
+                body: "From=EasyFormViewCounter"
+            })
+        }
+        
+        document.getElementById("submit").setAttribute("formaction", postTo);        
+        </script>
     </body>
 </html>
diff --git a/app/server.js b/app/server.js
index fd7b0f3..23d9b67 100644
--- a/app/server.js
+++ b/app/server.js
@@ -22,6 +22,15 @@ function updateUnreadCount(){
 
 function inbox(json){
     const data = JSON.parse(json); // Read form data into entry object
+    
+    if (data.From === "EasyFormViewCounter") {
+        let viewCount = localStorage.getItem("EasyFormViewCounter");
+        ++viewCount;
+        document.getElementById("EasyFormViewCounter").innerText = `which has ${viewCount} views`;
+        localStorage.setItem("EasyFormViewCounter", viewCount);
+        return;
+    }
+    
     data.Timestamp = Date();
     const keysEnumArray = Object.keys(data); // Enumerated array of form fields.
 
diff --git a/index.html b/index.html
index d329ba7..5ef5fc6 100755
--- a/index.html
+++ b/index.html
@@ -107,7 +107,7 @@ <h3>Server</h3>
                                     <p>Test if everything is working properly with the following sample form (embed in your own website with 
                                     <button type="button" onclick="spaGoTo('about');">this code</button>). You should get a Telegram message upon clicking Post! Your posted data 
                                     should also be logged below.</p>
-                                    <p>You also get <a id="readyForm" target="_blank">your own contact form URL</a>.</p>
+                                    <p>You also get <a id="readyForm" target="_blank">your own contact form URL</a><span id="EasyFormViewCounter" class="badge bg-danger"></span>.</p>
                                     <form method="POST" target="hidden_iframe">
                                         <input type="hidden" name="From" value="tester">
                                         <div class="row mt-2">