day view loads data as JSON

pager is all javascript now
combine day-related javascript
consolidate live view into day view
fix yesterday on live view after rotate

src/gthnk_web/journal/__init__.py

@@ -12,6 +12,7 @@
 from .j2_slugify import slugify, _slugify
 from ..app import gthnk
 
+days_of_week = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
 
 journal = flask.Blueprint('journal',
     __name__,
@@ -67,8 +68,8 @@ def search_view():
         count=count
         )
 
-@journal.route("live.json")
-def live_timestamp():
+@journal.route("status.json")
+def status_json():
     "Return the timestamp of the latest input file."
     input_files = flask.current_app.config["INPUT_FILES"]
     latest_time = 0.0
@@ -79,44 +80,46 @@ def live_timestamp():
             if mtime > latest_time:
                 latest_time = mtime
 
-    return {'timestamp': latest_time}
-
-@journal.route("live")
-def live_view():
-    "View the current buffer"
-    days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
-    today = datetime.datetime.today()
-
-    j = Journal()
-    for buffer in gthnk.buffers:
-        FileBuffer(buffer, journal=j).read()
+    # check the filetree for any updates
+    gthnk.filetree.read_journal()
 
-    return flask.render_template(
-        'day.html.j2',
-        date=today.strftime('%Y-%m-%d'),
-        day=None,
-        day_str=render_day_pipeline(str(j)),
-        day_of_week=days[today.weekday()],
-        is_buffer=True,
-    )
+    return {
+        'timestamp': latest_time,
+        'latest': gthnk.journal.get_latest_datestamp(),
+    }
 
 @journal.route("<date>.html")
 def day_view(date):
     "View the specified day as HTML."
-    # check for any new days that have been added
-    gthnk.filetree.read_journal()
-    day = gthnk.journal.get_day(date)
-    # if there is any content, this day exists
-    if len(day.entries) > 0:
-        days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
-        return flask.render_template(
-            'day.html.j2',
-            date=date,
-            day=day,
-            day_str=render_day_pipeline(str(day)),
-            day_of_week=days[datetime.datetime.strptime(date, "%Y-%m-%d").weekday()],
-        )
-    return flask.redirect(flask.url_for('.nearest_day', date=date))
+    return flask.render_template('day.html.j2', date=date)
+
+@journal.route("<date>.json")
+def day_json(date):
+    day_struct = {}
+    if date == "live":
+        today = datetime.datetime.today()
+        j = Journal()
+        for buffer in gthnk.buffers:
+            FileBuffer(buffer, journal=j).read()
+        day_struct = {
+            'datestamp': today.strftime('%Y-%m-%d'),
+            'content': render_day_pipeline(str(j)),
+            'day_of_week': days_of_week[today.weekday()],
+            'yesterday': gthnk.journal.get_latest_datestamp(),
+            'tomorrow': None,
+        }
+    else:
+        day = gthnk.journal.get_day(date)
+        if day:
+            day_struct = {
+                'datestamp': day.datestamp,
+                'content': render_day_pipeline(str(day)),
+                'day_of_week': days_of_week[datetime.datetime.strptime(date, "%Y-%m-%d").weekday()],
+                'yesterday': day.yesterday.datestamp if day.yesterday else None,
+                'tomorrow': day.tomorrow.datestamp if day.tomorrow else None,
+            }
+    if day_struct:
+        return flask.jsonify(day_struct)
 
 @journal.route("<date>.txt")
 def text_view(date):

src/gthnk_web/journal/static/dynamic-day.js

@@ -0,0 +1,143 @@
+var today = null;
+var yesterday = null;
+var tomorrow = null;
+var live_page = null;
+
+function get_day_json(date_str) {
+    var url = "/journal/" + date_str + ".json";
+    return $.ajax({
+        dataType: "json",
+        url: url,
+        async: false
+    });
+}
+
+function disable_button(id) {
+    $(id).addClass("disabled");
+    $(id).removeClass("text-white");
+}
+
+function enable_button(id) {
+    $(id).removeClass("disabled");
+    $(id).addClass("text-white");
+}
+
+async function update_day(date_str) {
+    var _json = await get_day_json(date_str);
+    today = _json["datestamp"];
+    tomorrow = _json["tomorrow"];
+    yesterday = _json["yesterday"];
+
+    $("#day-of-week").text(_json["day_of_week"]);
+    $("#entries").html(_json["content"]);
+
+    if (!tomorrow) {
+        disable_button("#link-tomorrow");
+    } else {
+        enable_button("#link-tomorrow");
+    }
+
+    if (!yesterday) {
+        disable_button("#link-yesterday");
+    } else {
+        enable_button("#link-yesterday");
+    }
+
+    if (date_str == "live") {
+        disable_button("#link-live");
+        live_page = true;
+        window.scrollTo(0, document.body.scrollHeight);
+        start_checking_status();
+    } else {
+        enable_button("#link-live");
+        live_page = false;
+        stop_checking_status();
+    }
+
+    window.history.pushState({}, date_str, url="/journal/" + date_str + ".html");
+}
+
+function go_to_yesterday() {
+    if (yesterday) {
+        // window.history.pushState({}, yesterday, url="/journal/" + yesterday + ".html");
+        update_day(yesterday);
+    } else {
+        window.location.href = "/journal/latest";
+    }
+}
+
+function go_to_tomorrow() {
+    if (tomorrow) {
+        // window.history.pushState({}, tomorrow, url="/journal/" + tomorrow + ".html");
+        update_day(tomorrow);
+    } else {
+        if (!live_page) {
+            // window.history.pushState({}, tomorrow, url="/journal/live.html");
+            update_day("live");
+        }
+    }
+}
+
+function checkKey(e) {
+    e = e || window.event;
+
+    if (e.keyCode == '37') {
+        go_to_yesterday();
+    }
+    else if (e.keyCode == '39') {
+        go_to_tomorrow();
+    }
+    else if (e.keyCode == 192) { 
+        window.location.href = "/journal/live";
+    }
+}
+
+// mtime for status checking
+var mtime = 0;
+
+// timer for the status checker
+var status_checker = null;
+
+function check_buffer() {
+    $.ajax({
+        dataType: "json",
+        url: "/journal/status.json",
+        success: function(data) {
+            if (data.timestamp > mtime) {
+                mtime = data.timestamp;
+                update_day("live"); 
+            } else {
+                if (yesterday != data.latest) {
+                    update_day("live");
+                }
+            }
+        }
+    });
+}
+
+function start_checking_status() {
+    if (!status_checker) {
+        status_checker = setInterval( function() {
+            check_buffer();
+        }, 5000);
+
+        // check the buffer once, right now, just to set the mtime.
+        check_buffer();
+    }
+}
+
+function stop_checking_status() {
+    if (status_checker) {
+        clearInterval(status_checker);
+        status_checker = null;
+    }
+}
+
+// init keyboard handling
+document.onkeydown = checkKey;
+
+// init touch swiper
+var swiper = new Swipe(document.getElementsByTagName('body')[0]);
+swiper.onLeft(go_to_tomorrow);
+swiper.onRight(go_to_yesterday);
+swiper.run();

src/gthnk_web/journal/templates/day.html.j2

@@ -3,7 +3,9 @@
 {% set current_page = 'day-view' -%}
 
 {% block navigation -%}
-{% include "pager.html.j2" -%}
+  <a id="link-yesterday" class="nav-item nav-link px-1" href="javascript:go_to_yesterday();" title="previous day"><i class="fas fa-backward"></i></a>
+  <a id="link-tomorrow" class="nav-item nav-link px-1" href="javascript:go_to_tomorrow();" title="next day"><i class="fas fa-forward"></i></a>
+  <a id="link-live" class="nav-item nav-link px-1" href="javascript:update_day('live');" title="live journal"><i class="fas fa-fast-forward"></i></a>
 {% endblock -%}
 
 {% block content -%}
@@ -12,42 +14,16 @@
       <div class="col-xl-1"></div>
       <div class="col-xl-10">
         <a id="entries_anchor" name="entries_anchor"></a>
-
-        <div class="gthnk-card" id="entries">
-          <p id="day-of-week">
-            {% if is_buffer -%}
-              (buffer)
-            {% else -%}
-              {{ day_of_week }}
-            {% endif -%}
-          </p>
-          {{ day_str|safe }}
-        </div>
+        <div class="gthnk-card" id="day-of-week"></div>
+        <div class="gthnk-card" id="entries"></div>
       </div>
       <div class="col-xl-1"></div>
     </div>
   </div>
 
-  {# inter-day navigation -#}
+  <script src="{{ url_for('.static', filename='images.js') }}"></script>
+  <script src="{{ url_for('.static', filename='dynamic-day.js') }}"></script>
   <script>
-    var today = "{{ date }}";
-
-    {% if day and day.yesterday -%}
-      var yesterday = "{{day.yesterday.datestamp}}";
-    {% else -%}
-      var yesterday = null;
-    {% endif -%}
-
-    {% if day and day.tomorrow -%}
-      var tomorrow = "{{day.tomorrow.datestamp}}";
-    {% else -%}
-      var tomorrow = null;
-    {% endif -%}
+    update_day("{{ date }}");
   </script>
-  <script src="{{ url_for('.static', filename='gthnk-images.js') }}"></script>
-  <script src="{{ url_for('.static', filename='gthnk-navigate.js') }}"></script>
-
-  {% if is_buffer -%}
-    <script src="{{ url_for('.static', filename='gthnk-live-update.js') }}"></script>
-  {% endif -%}
 {% endblock -%}