[templates] Add JS-calculated hovertext for date ages

On torrent listing and torrent view, mouse over the times to see "X hours Y minutes Z seconds ago" etc
This commit is contained in:
TheAMM 2017-05-13 02:30:39 +03:00
parent 517d3e8e32
commit 39230e1f39
4 changed files with 62 additions and 5 deletions

View File

@ -1,5 +1,5 @@
from enum import Enum, IntEnum
from datetime import datetime
from datetime import datetime, timezone
from nyaa import app, db
from nyaa.torrents import create_magnet
from sqlalchemy import func, ForeignKeyConstraint, Index
@ -24,6 +24,10 @@ else:
COL_ASCII_GENERAL_CI = 'NOCASE'
# For property timestamps
UTC_EPOCH = datetime.utcfromtimestamp(0)
class TorrentFlags(IntEnum):
NONE = 0
ANONYMOUS = 1
@ -85,6 +89,11 @@ class Torrent(db.Model):
def __repr__(self):
return '<{0} #{1.id} \'{1.display_name}\' {1.filesize}b>'.format(type(self).__name__, self)
@property
def created_utc_timestamp(self):
''' Returns a UTC POSIX timestamp, as seconds '''
return (self.created_time - UTC_EPOCH).total_seconds()
@property
def magnet_uri(self):
return create_magnet(self)

View File

@ -31,6 +31,51 @@ $(document).ready(function() {
});
});
function _format_time_difference(seconds) {
var units = [
["year", 365*24*60*60],
["month", 30*24*60*60],
["week", 7*24*60*60],
["day", 24*60*60],
["hour", 60*60],
["minute", 60],
["second", 1]
];
var suffix = " ago";
var prefix = "";
if (seconds < 0) {
suffix = "";
prefix = "After ";
}
var parts = [];
for (var i = 0; i < units.length; i++) {
var scale = units[i];
var m = (seconds / scale[1]) | 0;
if (m > 0) {
// N unit(s)
parts.push( m.toString() + " " + scale[0] + (m == 1 ? "" : "s") );
seconds -= m*scale[1];
}
}
return prefix + parts.join(" ") + suffix;
}
document.addEventListener("DOMContentLoaded", function(event) {
var now_timestamp = (Date.now() / 1000) | 0; // UTC timestamp in seconds
var timestamp_targets = document.querySelectorAll('[data-timestamp]');
for (var i = 0; i < timestamp_targets.length; i++) {
var target = timestamp_targets[i];
var torrent_timestamp = parseInt(target.getAttribute('data-timestamp'));
if (torrent_timestamp) {
var timedelta = now_timestamp - torrent_timestamp;
target.setAttribute('title', _format_time_difference(timedelta));
}
};
});
//
// This is the unminified version of the theme changer script in the layout.html @ line: 21

View File

@ -55,9 +55,12 @@
</a>
</td>
<td><a href="/view/{{ torrent.id }}">{{ torrent.display_name | escape }}</a></td>
<td style="white-space: nowrap;text-align: center;">{% if torrent.has_torrent %}<a href="/view/{{ torrent.id }}/torrent"><i class="fa fa-fw fa-download"></i></a> {% endif %}<a href="{{ torrent.magnet_uri }}"><i class="fa fa-fw fa-magnet"></i></a></td>
<td>{{ torrent.filesize | filesizeformat(True) }}</td>
<td>{{ torrent.created_time.strftime('%Y-%m-%d %H:%M') }}</td>
<td style="white-space: nowrap;text-align: center;">
{% if torrent.has_torrent %}<a href="/view/{{ torrent.id }}/torrent"><i class="fa fa-fw fa-download"></i></a>{% endif %}
<a href="{{ torrent.magnet_uri }}"><i class="fa fa-fw fa-magnet"></i></a>
</td>
<td class="text-center">{{ torrent.filesize | filesizeformat(True) }}</td>
<td class="text-center" data-timestamp="{{ torrent.created_utc_timestamp|int }}">{{ torrent.created_time.strftime('%Y-%m-%d %H:%M') }}</td>
{% if config.ENABLE_SHOW_STATS %}
<td class="text-center" style="color: green;">{{ torrent.stats.seed_count }}</td>
<td class="text-center" style="color: red;">{{ torrent.stats.leech_count }}</td>

View File

@ -16,7 +16,7 @@
<div class="col-md-5">{{ torrent.main_category.name }} - {{ torrent.sub_category.name }}</div>
<div class="col-md-1">Date:</div>
<div class="col-md-5">{{ torrent.created_time.strftime('%Y-%m-%d, %H:%M UTC') }}</div>
<div class="col-md-5" data-timestamp="{{ torrent.created_utc_timestamp|int }}">{{ torrent.created_time.strftime('%Y-%m-%d, %H:%M UTC') }}</div>
</div>
<div class="row">