Use Flask-Moment to integrate Moment.js

greyli · Jul 30, 2018 · 3825abf · 3825abf
1 parent 958b59a
commit 3825abf
Show file tree

Hide file tree

Showing 5 changed files with 522 additions and 2 deletions.
diff --git a/sayhello/__init__.py b/sayhello/__init__.py
@@ -7,6 +7,7 @@
 """
 from flask import Flask
 from flask_bootstrap import Bootstrap
+from flask_moment import Moment
 from flask_sqlalchemy import SQLAlchemy
 
 app = Flask('sayhello')
@@ -16,5 +17,6 @@
 
 db = SQLAlchemy(app)
 bootstrap = Bootstrap(app)
+moment = Moment(app)
 
 from sayhello import views, errors, commands
diff --git a/sayhello/static/js/moment-with-locales.min.js b/sayhello/static/js/moment-with-locales.min.js
diff --git a/sayhello/static/js/script.js b/sayhello/static/js/script.js
@@ -0,0 +1,8 @@
+$(function () {
+    function render_time() {
+        return moment($(this).data('timestamp')).format('lll')
+    }
+    $('[data-toggle="tooltip"]').tooltip(
+        {title: render_time}
+    );
+});
diff --git a/sayhello/templates/base.html b/sayhello/templates/base.html
@@ -38,5 +38,6 @@ <h1 class="text-center display-4">
 <script type="text/javascript" src="{{ url_for('static', filename='js/popper.min.js') }}"></script>
 <script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
 <script type="text/javascript" src="{{ url_for('static', filename='js/script.js') }}"></script>
+{{ moment.include_moment(local_js=url_for('static', filename='js/moment-with-locales.min.js')) }}
 </body>
-</html>
+</html>
diff --git a/sayhello/templates/index.html b/sayhello/templates/index.html
@@ -17,7 +17,11 @@ <h5>{{ messages|length }} messages
                     <h5 class="mb-1 text-success">{{ message.name }}
                         <small class="text-muted"> #{{ loop.revindex }}</small>
                     </h5>
-                    <small>{{ message.timestamp.strftime('%Y/%m/%d %H:%M') }}</small>
+                    <small data-toggle="tooltip" data-placement="top"
+                           data-timestamp="{{ message.timestamp.strftime('%Y-%m-%dT%H:%M:%SZ') }}"
+                           data-delay="500">
+                        {{ moment(message.timestamp).fromNow(refresh=True) }}
+                    </small>
                 </div>
                 <p class="mb-1">{{ message.body }}</p>
             </a>