Added personal contact form view counter

SomajitDey · Sep 21, 2024 · 09541e7 · 09541e7
1 parent 343e560
commit 09541e7
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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">