From 99423215b1917a6c87ff5fb345a2d9a6c107d66c Mon Sep 17 00:00:00 2001
From: Niko <niko@nobigtech.es>
Date: Tue, 15 Feb 2022 01:22:23 +0100
Subject: [PATCH] Added dayjs() + Improvements on meet.item template

---
 web/data/assets/.gitkeep                 |  0
 web/data/assets/js/dayjs/dayjs.min.js    |  1 +
 web/data/assets/js/dayjs/dl-dayjs.sh     | 10 ++++++++
 web/data/assets/js/dayjs/es.js           |  1 +
 web/data/assets/js/dayjs/relativeTime.js |  1 +
 web/data/assets/js/dayjs/updateLocale.js |  1 +
 web/src/_templates/app/header.php        |  7 +++---
 web/src/app/css/app.css                  | 29 +++++++++++++++++-------
 web/src/app/css/base.css                 |  1 +
 web/src/app/js/app.js                    |  2 ++
 web/src/app/js/pages/meet.js             |  5 ++++
 web/src/app/js/templates/meet/item.html  | 15 ++++++++----
 12 files changed, 58 insertions(+), 15 deletions(-)
 delete mode 100644 web/data/assets/.gitkeep
 create mode 100644 web/data/assets/js/dayjs/dayjs.min.js
 create mode 100755 web/data/assets/js/dayjs/dl-dayjs.sh
 create mode 100644 web/data/assets/js/dayjs/es.js
 create mode 100644 web/data/assets/js/dayjs/relativeTime.js
 create mode 100644 web/data/assets/js/dayjs/updateLocale.js

diff --git a/web/data/assets/.gitkeep b/web/data/assets/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/web/data/assets/js/dayjs/dayjs.min.js b/web/data/assets/js/dayjs/dayjs.min.js
new file mode 100644
index 0000000..d284eec
--- /dev/null
+++ b/web/data/assets/js/dayjs/dayjs.min.js
@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).dayjs=e()}(this,(function(){"use strict";var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",f="month",h="quarter",c="year",d="date",$="Invalid Date",l=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_")},m=function(t,e,n){var r=String(t);return!r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},g={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return(e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return-t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,f),s=n-i<0,u=e.clone().add(r+(s?-1:1),f);return+(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return{M:f,y:c,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:h}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},D="en",v={};v[D]=M;var p=function(t){return t instanceof _},S=function(t,e,n){var r;if(!t)return D;if("string"==typeof t)v[t]&&(r=t),e&&(v[t]=e,r=t);else{var i=t.name;v[i]=t,r=i}return!n&&r&&(D=r),r||!n&&D},w=function(t,e){if(p(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},O=g;O.l=S,O.i=p,O.w=function(t,e){return w(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=S(t.locale,null,!0),this.parse(t)}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(O.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match(l);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init()},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},m.$utils=function(){return O},m.isValid=function(){return!(this.$d.toString()===$)},m.isSame=function(t,e){var n=w(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return w(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<w(t)},m.$g=function(t,e,n){return O.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!O.u(e)||e,h=O.p(t),$=function(t,e){var i=O.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},l=function(t,e){return O.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,g="set"+(this.$u?"UTC":"");switch(h){case c:return r?$(1,0):$(31,11);case f:return r?$(1,M):$(0,M+1);case o:var D=this.$locale().weekStart||0,v=(y<D?y+7:y)-D;return $(r?m-v:m+(6-v),M);case a:case d:return l(g+"Hours",0);case u:return l(g+"Minutes",1);case s:return l(g+"Seconds",2);case i:return l(g+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=O.p(t),h="set"+(this.$u?"UTC":""),$=(n={},n[a]=h+"Date",n[d]=h+"Date",n[f]=h+"Month",n[c]=h+"FullYear",n[u]=h+"Hours",n[s]=h+"Minutes",n[i]=h+"Seconds",n[r]=h+"Milliseconds",n)[o],l=o===a?this.$D+(e-this.$W):e;if(o===f||o===c){var y=this.clone().set(d,1);y.$d[$](l),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d}else $&&this.$d[$](l);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[O.p(t)]()},m.add=function(r,h){var d,$=this;r=Number(r);var l=O.p(h),y=function(t){var e=w($);return O.w(e.date(e.date()+Math.round(t*r)),$)};if(l===f)return this.set(f,this.$M+r);if(l===c)return this.set(c,this.$y+r);if(l===a)return y(1);if(l===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[l]||1,m=this.$d.getTime()+r*M;return O.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||$;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=O.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,f=n.months,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].substr(0,s)},c=function(t){return O.s(s%12||12,t,"0")},d=n.meridiem||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r},l={YY:String(this.$y).slice(-2),YYYY:this.$y,M:a+1,MM:O.s(a+1,2,"0"),MMM:h(n.monthsShort,a,f,3),MMMM:h(f,a),D:this.$D,DD:O.s(this.$D,2,"0"),d:String(this.$W),dd:h(n.weekdaysMin,this.$W,o,2),ddd:h(n.weekdaysShort,this.$W,o,3),dddd:o[this.$W],H:String(s),HH:O.s(s,2,"0"),h:c(1),hh:c(2),a:d(s,u,!0),A:d(s,u,!1),m:String(u),mm:O.s(u,2,"0"),s:String(this.$s),ss:O.s(this.$s,2,"0"),SSS:O.s(this.$ms,3,"0"),Z:i};return r.replace(y,(function(t,e){return e||l[t]||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,$){var l,y=O.p(d),M=w(r),m=(M.utcOffset()-this.utcOffset())*e,g=this-M,D=O.m(this,M);return D=(l={},l[c]=D/12,l[f]=D,l[h]=D/3,l[o]=(g-m)/6048e5,l[a]=(g-m)/864e5,l[u]=g/n,l[s]=g/e,l[i]=g/t,l)[y]||g,$?D:O.a(D)},m.daysInMonth=function(){return this.endOf(f).$D},m.$locale=function(){return v[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=S(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return O.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),b=_.prototype;return w.prototype=b,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",f],["$y",c],["$D",d]].forEach((function(t){b[t[1]]=function(e){return this.$g(e,t[0],t[1])}})),w.extend=function(t,e){return t.$i||(t(e,_,w),t.$i=!0),w},w.locale=S,w.isDayjs=p,w.unix=function(t){return w(1e3*t)},w.en=v[D],w.Ls=v,w.p={},w}));
\ No newline at end of file
diff --git a/web/data/assets/js/dayjs/dl-dayjs.sh b/web/data/assets/js/dayjs/dl-dayjs.sh
new file mode 100755
index 0000000..e96ab32
--- /dev/null
+++ b/web/data/assets/js/dayjs/dl-dayjs.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+# SOURCE: https://github.com/iamkun/dayjs/releases
+VERSION=1.10.7
+rm -f dayjs.min.js relativeTime.js updateLocale.js
+rm -f es.js
+
+wget "https://unpkg.com/dayjs@$VERSION/dayjs.min.js"
+wget "https://unpkg.com/dayjs@$VERSION/plugin/relativeTime.js"
+wget "https://unpkg.com/dayjs@$VERSION/plugin/updateLocale.js"
+wget "https://unpkg.com/dayjs@$VERSION/locale/es.js"
diff --git a/web/data/assets/js/dayjs/es.js b/web/data/assets/js/dayjs/es.js
new file mode 100644
index 0000000..eb33b81
--- /dev/null
+++ b/web/data/assets/js/dayjs/es.js
@@ -0,0 +1 @@
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("dayjs")):"function"==typeof define&&define.amd?define(["dayjs"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).dayjs_locale_es=o(e.dayjs)}(this,(function(e){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=o(e),d={name:"es",monthsShort:"ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic".split("_"),weekdays:"domingo_lunes_martes_miércoles_jueves_viernes_sábado".split("_"),weekdaysShort:"dom._lun._mar._mié._jue._vie._sáb.".split("_"),weekdaysMin:"do_lu_ma_mi_ju_vi_sá".split("_"),months:"enero_febrero_marzo_abril_mayo_junio_julio_agosto_septiembre_octubre_noviembre_diciembre".split("_"),weekStart:1,formats:{LT:"H:mm",LTS:"H:mm:ss",L:"DD/MM/YYYY",LL:"D [de] MMMM [de] YYYY",LLL:"D [de] MMMM [de] YYYY H:mm",LLLL:"dddd, D [de] MMMM [de] YYYY H:mm"},relativeTime:{future:"en %s",past:"hace %s",s:"unos segundos",m:"un minuto",mm:"%d minutos",h:"una hora",hh:"%d horas",d:"un día",dd:"%d días",M:"un mes",MM:"%d meses",y:"un año",yy:"%d años"},ordinal:function(e){return e+"º"}};return s.default.locale(d,null,!0),d}));
\ No newline at end of file
diff --git a/web/data/assets/js/dayjs/relativeTime.js b/web/data/assets/js/dayjs/relativeTime.js
new file mode 100644
index 0000000..898eee6
--- /dev/null
+++ b/web/data/assets/js/dayjs/relativeTime.js
@@ -0,0 +1 @@
+!function(r,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(r="undefined"!=typeof globalThis?globalThis:r||self).dayjs_plugin_relativeTime=e()}(this,(function(){"use strict";return function(r,e,t){r=r||{};var n=e.prototype,o={future:"in %s",past:"%s ago",s:"a few seconds",m:"a minute",mm:"%d minutes",h:"an hour",hh:"%d hours",d:"a day",dd:"%d days",M:"a month",MM:"%d months",y:"a year",yy:"%d years"};function i(r,e,t,o){return n.fromToBase(r,e,t,o)}t.en.relativeTime=o,n.fromToBase=function(e,n,i,d,u){for(var f,a,s,l=i.$locale().relativeTime||o,h=r.thresholds||[{l:"s",r:44,d:"second"},{l:"m",r:89},{l:"mm",r:44,d:"minute"},{l:"h",r:89},{l:"hh",r:21,d:"hour"},{l:"d",r:35},{l:"dd",r:25,d:"day"},{l:"M",r:45},{l:"MM",r:10,d:"month"},{l:"y",r:17},{l:"yy",d:"year"}],m=h.length,c=0;c<m;c+=1){var y=h[c];y.d&&(f=d?t(e).diff(i,y.d,!0):i.diff(e,y.d,!0));var p=(r.rounding||Math.round)(Math.abs(f));if(s=f>0,p<=y.r||!y.r){p<=1&&c>0&&(y=h[c-1]);var v=l[y.l];u&&(p=u(""+p)),a="string"==typeof v?v.replace("%d",p):v(p,n,y.l,s);break}}if(n)return a;var M=s?l.future:l.past;return"function"==typeof M?M(a):M.replace("%s",a)},n.to=function(r,e){return i(r,e,this,!0)},n.from=function(r,e){return i(r,e,this)};var d=function(r){return r.$u?t.utc():t()};n.toNow=function(r){return this.to(d(this),r)},n.fromNow=function(r){return this.from(d(this),r)}}}));
\ No newline at end of file
diff --git a/web/data/assets/js/dayjs/updateLocale.js b/web/data/assets/js/dayjs/updateLocale.js
new file mode 100644
index 0000000..811d9e9
--- /dev/null
+++ b/web/data/assets/js/dayjs/updateLocale.js
@@ -0,0 +1 @@
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e="undefined"!=typeof globalThis?globalThis:e||self).dayjs_plugin_updateLocale=n()}(this,(function(){"use strict";return function(e,n,t){t.updateLocale=function(e,n){var o=t.Ls[e];if(o)return(n?Object.keys(n):[]).forEach((function(e){o[e]=n[e]})),o}}}));
\ No newline at end of file
diff --git a/web/src/_templates/app/header.php b/web/src/_templates/app/header.php
index 6f821c5..3ef2281 100644
--- a/web/src/_templates/app/header.php
+++ b/web/src/_templates/app/header.php
@@ -4,10 +4,11 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<!-- TODO: include later
 	<link rel="manifest" href="/manifest.json">
-	<script type="application/javascript" src="/js/dayjs.min.js"></script>
-	<script type="application/javascript" src="/js/relativeTime.js"></script>
-	<script type="application/javascript" src="/js/updateLocale.js"></script>
 	-->
+	<script type="application/javascript" src="/assets/js/dayjs/dayjs.min.js"></script>
+	<script type="application/javascript" src="/assets/js/dayjs/relativeTime.js"></script>
+	<script type="application/javascript" src="/assets/js/dayjs/updateLocale.js"></script>
+	<script type="application/javascript" src="/assets/js/dayjs/es.js"></script>
 
 	<link rel="stylesheet" href="/assets/fonts/fork-awesome.min.css">
 	<?php tpl_styles(['normalize', 'base', 'app']) ?>
diff --git a/web/src/app/css/app.css b/web/src/app/css/app.css
index e71a60e..df6e296 100644
--- a/web/src/app/css/app.css
+++ b/web/src/app/css/app.css
@@ -123,26 +123,39 @@ main {
 	background: linear-gradient(to right, #00000082, #00000063, #00000063, #00000082);
 }
 
+.meet.item .status { color: #fff }
 .meet.item .status-content {
-	padding: 2em 1em;
-	background: #000000a8;
-	margin-bottom: 1em;
-	border-radius: 4px;
+	padding: 1em;
 	box-shadow: 0px 0px 1em #0000008c;
+	margin-bottom: 1em;
 }
 .meet.item .status-content .text {
 	margin: 0;
 	text-align: justify;
+	font-size: 1.2em;
 	word-break: break-word;
 }
+.meet.item .status-content pre {
+	font-family: inherit !important;
+	margin: 0 !important;
+}
+.meet.item .status .profile { padding: 1em 2em; }
+.meet.item .status .date {
+	width: max-content;
+	float: right;
+	position: relative;
+	top: -1em;
+	left: -1em;
+	background: #00000057;
+	padding: .3em .4em .3em .2em;
+	border-radius: 10px;
+	border-bottom: 1px solid #ffffff3d;
+	font-size: .8em;
+}
 
 .meet.item .content {
 	display: grid;
 }
-.meet.item .status {
-	padding: 1em;
-	color: #fff;
-}
 .item .acct {
 	font-size: .8em;
 	opacity: .7;
diff --git a/web/src/app/css/base.css b/web/src/app/css/base.css
index 7fa9379..2a2ff5d 100644
--- a/web/src/app/css/base.css
+++ b/web/src/app/css/base.css
@@ -18,6 +18,7 @@ body {
 
 .fixed-top { position: fixed; top: 0 }
 .fixed-bottom { position: fixed; bottom: 0 }
+.absolute { position: absolute }
 .absolute-top { position: absolute; top: 0 }
 .absolute-bottom { position: absolute; bottom: 0 }
 
diff --git a/web/src/app/js/app.js b/web/src/app/js/app.js
index 2930c7d..72c5f3f 100644
--- a/web/src/app/js/app.js
+++ b/web/src/app/js/app.js
@@ -123,6 +123,8 @@ function scriptPageHandler(modname, cfg) {
 }
 
 window.onload = function(e) {
+	dayjs.extend(window.dayjs_plugin_relativeTime);
+	dayjs.extend(window.dayjs_plugin_updateLocale);
 	if (getNormalizedURI() === app.vars.app_dir) {
 		scriptPageHandler('pages.home',		{ exact: '' });
 		scriptPageHandler('pages.meet',		{ exact: 'meet' });
diff --git a/web/src/app/js/pages/meet.js b/web/src/app/js/pages/meet.js
index 167ecb5..d7f4145 100644
--- a/web/src/app/js/pages/meet.js
+++ b/web/src/app/js/pages/meet.js
@@ -12,14 +12,19 @@ app.pages.meet = {
 						var tpl = app.template.fill(json[i], app.template.get('meet.item'),
 						function (k,v) {
 							if (k === 'account.name') return capitalize(v);
+							if (k === 'date') return dayjs(parseInt(v)).fromNow(true);
 						});
 						var item = json[i];
 						var icon = app.vars.default_icon;
 						if (item.account.avatar !== undefined &&
 							item.account.avatar.length > 0)
 							icon = item.account.avatar[0].url[0];
+						var textClr = item.text_color;
+						if (textClr === undefined)
+							textClr = '#00000094';
 						tpl = tpl.replaceAll('{avatar}', htmlescape(icon));
 						tpl = tpl.replaceAll('{actionsHeight}', '6em');
+						tpl = tpl.replaceAll('{textColor}', htmlescape(textClr));
 						dom.innerHTML += tpl;
 					}
 				}; _();
diff --git a/web/src/app/js/templates/meet/item.html b/web/src/app/js/templates/meet/item.html
index 54860d1..98da38f 100644
--- a/web/src/app/js/templates/meet/item.html
+++ b/web/src/app/js/templates/meet/item.html
@@ -12,10 +12,17 @@
 		</div>
 		<div>
 		<div class="status fixed-bottom width-max"
-			style="bottom: {actionsHeight}">
-			<div style="max-width: 38em; width: 100%;">
-				<div class="status-content">
-					<p class="text">{.text}</p>
+			style="bottom: {actionsHeight}; max-width: 40em">
+			<div class="flex width-max">
+				<div class="absolute width-max">
+					<div class="date">
+						<i class="fa fa-clock-o fa-fw">
+						</i>{.date}
+					</div>
+				</div>
+				<div class="status-content center width-max"
+					style="background: {textColor};">
+					<div class="text"><pre>{.text}</pre></div>
 				</div>
 			</div>
 			<div class="profile flex">