client: added basic date-taken functionality

- [client] added `date-fns` as dependency (it's much cleaner to format
  dates this way)
- [client] added basic sidebar stuff in `html/post_readonly_sidebar.tpl`
- [client] updated `js/models/post.js` to reflect changes
- [client] added `formatUserFriendlyTime()` in `js/util/misc.js`
- [client] added `makeUserFriendlyTime()` in `js/util/views.js` in
  conjunction with it
- [misc] ran post-commit; previous commits did not

client/html/post_readonly_sidebar.tpl

@@ -30,6 +30,11 @@
             <%= ctx.makeRelativeTime(ctx.post.creationTime) %>
         </section>
 
+        <section class='date-taken'>
+            <i class='fa fa-clock-o'></i>Taken on
+            <%= ctx.makeUserFriendlyTime(ctx.post.dateTaken) %>
+        </section>
+
         <% if (ctx.enableSafety) { %>
             <section class='safety'>
                 <i class='fa fa-circle safety-<%- ctx.post.safety %>'></i><!--

client/js/models/post.js

@@ -150,6 +150,10 @@ class Post extends events.EventTarget {
         return this._hasCustomThumbnail;
     }
 
+    get dateTaken() {
+        return this._dateTaken;
+    }
+
     set flags(value) {
         this._flags = value;
     }
@@ -492,6 +496,7 @@ class Post extends events.EventTarget {
             _ownScore: response.ownScore,
             _ownFavorite: response.ownFavorite,
             _hasCustomThumbnail: response.hasCustomThumbnail,
+            _dateTaken: response.dateTaken,
         });
 
         for (let obj of [this, this._orig]) {

client/js/util/misc.js

@@ -4,6 +4,8 @@ const markdown = require("./markdown.js");
 const uri = require("./uri.js");
 const settings = require("../models/settings.js");
 
+const format = require("date-fns/format");
+
 function decamelize(str, sep) {
     sep = sep === undefined ? "-" : sep;
     return str
@@ -94,6 +96,14 @@ function formatRelativeTime(timeString) {
     return future ? "in " + text : text + " ago";
 }
 
+function formatUserFriendlyTime(timeString) {
+    if (!timeString) {
+        return "an unknown date";
+    }
+
+    return format(Date.parse(timeString), "iii, LLLL dd yyyy 'at' HH:mm:ss");
+}
+
 function formatMarkdown(text) {
     return markdown.formatMarkdown(text);
 }
@@ -214,6 +224,7 @@ function getPrettyName(tag) {
 module.exports = {
     range: range,
     formatRelativeTime: formatRelativeTime,
+    formatUserFriendlyTime: formatUserFriendlyTime,
     formatFileSize: formatFileSize,
     formatMarkdown: formatMarkdown,
     formatInlineMarkdown: formatInlineMarkdown,

client/js/util/views.js

@@ -40,6 +40,14 @@ function makeRelativeTime(time) {
     );
 }
 
+function makeUserFriendlyTime(time) {
+    return makeElement(
+        "time",
+        { datetime: time, title: time },
+        misc.formatUserFriendlyTime(time)
+    );
+}
+
 function makeThumbnail(url) {
     return makeElement(
         "span",
@@ -433,6 +441,7 @@ function getTemplate(templatePath) {
             getPostUrl: getPostUrl,
             getPostEditUrl: getPostEditUrl,
             makeRelativeTime: makeRelativeTime,
+            makeUserFriendlyTime: makeUserFriendlyTime,
             makeFileSize: makeFileSize,
             makeMarkdown: makeMarkdown,
             makeThumbnail: makeThumbnail,

client/package-lock.json

@@ -6,6 +6,7 @@
     "": {
       "name": "szurubooru",
       "dependencies": {
+        "date-fns": "^2.26.0",
         "dompurify": "^2.0.17",
         "font-awesome": "^4.7.0",
         "ios-inner-height": "^1.0.3",
@@ -1835,6 +1836,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.26.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.26.0.tgz",
+      "integrity": "sha512-VQI812dRi3cusdY/fhoBKvc6l2W8BPWU1FNVnFH9Nttjx4AFBRzfSVb/Eyc7jBT6e9sg1XtAGsYpBQ6c/jygbg==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/date-now": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
@@ -6348,6 +6361,11 @@
         "css-tree": "1.0.0-alpha.29"
       }
     },
+    "date-fns": {
+      "version": "2.26.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.26.0.tgz",
+      "integrity": "sha512-VQI812dRi3cusdY/fhoBKvc6l2W8BPWU1FNVnFH9Nttjx4AFBRzfSVb/Eyc7jBT6e9sg1XtAGsYpBQ6c/jygbg=="
+    },
     "date-now": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",

client/package.json

@@ -6,6 +6,7 @@
     "watch": "node build.js --watch"
   },
   "dependencies": {
+    "date-fns": "^2.26.0",
     "dompurify": "^2.0.17",
     "font-awesome": "^4.7.0",
     "ios-inner-height": "^1.0.3",