adding mustache

paras151 · Aug 5, 2019 · 2284eb4 · 2284eb4
1 parent 1f917b6
commit 2284eb4
Show file tree

Hide file tree

Showing 3 changed files with 736 additions and 10 deletions.
diff --git a/public/index.html b/public/index.html
@@ -28,9 +28,37 @@ <h3>People</h3>
 
     </div>
 
+    <script id="message-template" type="text">
+        <li class="message">
+            <div class="message__title">
+                <h4>{{from}}</h4>
+                <span>{{createdAt}}</span>
+
+            </div>
+            <div class="message__body">
+                <p>{{text}}</p>
+            </div>
+        </li>
+    </script>
+
+    <script id="location-message-template" type="text">
+            <li class="message">
+                <div class="message__title">
+                    <h4>{{from}}</h4>
+                    <span>{{createdAt}}</span>
+
+                </div>
+                <div class="message__body">
+                    <a href="{{url}}" target="_blank">My current location</a>
+                </div>
+            </li>
+        </script>
+
     <script src = "/socket.io/socket.io.js"></script>
     <script src = "js/libs/jquery-3.4.1.min.js"></script>
     <script src = "js/libs/moment.js"></script>
+    <script src = "js/libs/mustache.js"></script>
     <script src = "js/index.js"></script>
+
 </body>
 </html>
diff --git a/public/js/index.js b/public/js/index.js
@@ -15,20 +15,36 @@ socket.on('disconnect',function(){
 socket.on('newMessage',function(message){
     // console.log("New Message",message);
     var formattedTime = moment(message.createdAt).format('LT');
-    var li = jQuery('<li></li>');
-    li.text(`${message.from} ${formattedTime}: ${message.text}`)
-    jQuery('#messages').append(li);
+    // var li = jQuery('<li></li>');
+    // li.text(`${message.from} ${formattedTime}: ${message.text}`)
+    // jQuery('#messages').append(li);
+
+    var template = jQuery('#message-template').html();
+    var html = Mustache.render(template,{
+        text:message.text,
+        from:message.from,
+        createdAt:formattedTime
+    });
+
+    jQuery('#messages').append(html);
 })
 
 socket.on('newLocationMessage',function(message){
-    var li = jQuery('<li></li>');
-    var a = jQuery('<a target="_blank">My current location</a>')
+    // var li = jQuery('<li></li>');
+    // var a = jQuery('<a target="_blank">My current location</a>')
     var formattedTime = moment(message.createdAt).format('LT');
-
-    li.text(`${message.from} ${formattedTime}: `);
-    a.attr('href',message.url);
-    li.append(a);
-    jQuery('#messages').append(li);
+    var template = jQuery('#location-message-template').html();
+    var html = Mustache.render(template,{
+        from:message.from,
+        url:message.url,
+        createdAt:formattedTime
+    });
+    jQuery('#messages').append(html);
+
+    // li.text(`${message.from} ${formattedTime}: `);
+    // a.attr('href',message.url);
+    // li.append(a);
+    // jQuery('#messages').append(li);
 })