Update optimer and fleetup javascript (#695)

* Split out moment duration formatter

* Replace fleetup timer js

* Replace optimer js

* Remove obsolete countdown.js library

* Remove unused dateformat.js references

* Remove obsolete dateformat library
This commit is contained in:
Basraah 2017-02-07 19:04:31 +10:00 committed by GitHub
parent 1a749bf712
commit ff1c2030ca
11 changed files with 166 additions and 1310 deletions

View File

@ -56,8 +56,4 @@
</div>
</div>
</div>
<script src="/static/js/dateformat.js"></script>
{% endblock content %}

View File

@ -61,8 +61,4 @@
{% endif %}
{% endif %}
</div>
<script src="/static/js/dateformat.js"></script>
{% endblock content %}

View File

@ -35,8 +35,4 @@
</table>
</div>
</div>
<script src="/static/js/dateformat.js"></script>
{% endblock content %}

View File

@ -41,8 +41,4 @@
</table>
{% endif %}
</div>
<script src="/static/js/dateformat.js"></script>
{% endblock content %}

View File

@ -99,8 +99,4 @@
{% endif %}
{% endif %}
</div>
<script src="/static/js/dateformat.js"></script>
{% endblock content %}

File diff suppressed because it is too large Load Diff

View File

@ -1,86 +0,0 @@
(function() {
Date.shortMonths = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
Date.longMonths = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
Date.shortDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
Date.longDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
// defining patterns
var replaceChars = {
// Day
d: function() { return (this.getDate() < 10 ? '0' : '') + this.getDate(); },
D: function() { return Date.shortDays[this.getDay()]; },
j: function() { return this.getDate(); },
l: function() { return Date.longDays[this.getDay()]; },
N: function() { return (this.getDay() == 0 ? 7 : this.getDay()); },
S: function() { return (this.getDate() % 10 == 1 && this.getDate() != 11 ? 'st' : (this.getDate() % 10 == 2 && this.getDate() != 12 ? 'nd' : (this.getDate() % 10 == 3 && this.getDate() != 13 ? 'rd' : 'th'))); },
w: function() { return this.getDay(); },
z: function() { var d = new Date(this.getFullYear(),0,1); return Math.ceil((this - d) / 86400000); }, // Fixed now
// Week
W: function() {
var target = new Date(this.valueOf());
var dayNr = (this.getDay() + 6) % 7;
target.setDate(target.getDate() - dayNr + 3);
var firstThursday = target.valueOf();
target.setMonth(0, 1);
if (target.getDay() !== 4) {
target.setMonth(0, 1 + ((4 - target.getDay()) + 7) % 7);
}
return 1 + Math.ceil((firstThursday - target) / 604800000);
},
// Month
F: function() { return Date.longMonths[this.getMonth()]; },
m: function() { return (this.getMonth() < 9 ? '0' : '') + (this.getMonth() + 1); },
M: function() { return Date.shortMonths[this.getMonth()]; },
n: function() { return this.getMonth() + 1; },
t: function() { var d = new Date(); return new Date(d.getFullYear(), d.getMonth(), 0).getDate() }, // Fixed now, gets #days of date
// Year
L: function() { var year = this.getFullYear(); return (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0)); }, // Fixed now
o: function() { var d = new Date(this.valueOf()); d.setDate(d.getDate() - ((this.getDay() + 6) % 7) + 3); return d.getFullYear();}, //Fixed now
Y: function() { return this.getFullYear(); },
y: function() { return ('' + this.getFullYear()).substr(2); },
// Time
a: function() { return this.getHours() < 12 ? 'am' : 'pm'; },
A: function() { return this.getHours() < 12 ? 'AM' : 'PM'; },
B: function() { return Math.floor((((this.getUTCHours() + 1) % 24) + this.getUTCMinutes() / 60 + this.getUTCSeconds() / 3600) * 1000 / 24); }, // Fixed now
g: function() { return this.getHours() % 12 || 12; },
G: function() { return this.getHours(); },
h: function() { return ((this.getHours() % 12 || 12) < 10 ? '0' : '') + (this.getHours() % 12 || 12); },
H: function() { return (this.getHours() < 10 ? '0' : '') + this.getHours(); },
i: function() { return (this.getMinutes() < 10 ? '0' : '') + this.getMinutes(); },
s: function() { return (this.getSeconds() < 10 ? '0' : '') + this.getSeconds(); },
u: function() { var m = this.getMilliseconds(); return (m < 10 ? '00' : (m < 100 ?
'0' : '')) + m; },
// Timezone
e: function() { return "Not Yet Supported"; },
I: function() {
var DST = null;
for (var i = 0; i < 12; ++i) {
var d = new Date(this.getFullYear(), i, 1);
var offset = d.getTimezoneOffset();
if (DST === null) DST = offset;
else if (offset < DST) { DST = offset; break; } else if (offset > DST) break;
}
return (this.getTimezoneOffset() == DST) | 0;
},
O: function() { return (-this.getTimezoneOffset() < 0 ? '-' : '+') + (Math.abs(this.getTimezoneOffset() / 60) < 10 ? '0' : '') + (Math.abs(this.getTimezoneOffset() / 60)) + '00'; },
P: function() { return (-this.getTimezoneOffset() < 0 ? '-' : '+') + (Math.abs(this.getTimezoneOffset() / 60) < 10 ? '0' : '') + (Math.abs(this.getTimezoneOffset() / 60)) + ':00'; }, // Fixed now
T: function() { return this.toTimeString().replace(/^.+ \(?([^\)]+)\)?$/, '$1'); },
Z: function() { return -this.getTimezoneOffset() * 60; },
// Full Date/Time
c: function() { return this.format("Y-m-d\\TH:i:sP"); }, // Fixed now
r: function() { return this.toString(); },
U: function() { return this.getTime() / 1000; }
};
// Simulates PHP's date function
Date.prototype.format = function(format) {
var date = this;
return format.replace(/(\\?)(.)/g, function(_, esc, chr) {
return (esc === '' && replaceChars[chr]) ? replaceChars[chr].call(date) : chr;
});
};
}).call(this);

15
stock/static/js/timers.js Normal file
View File

@ -0,0 +1,15 @@
/**
* Get a duration string like countdown.js
* e.g. "1y 2d 3h 4m 5s"
* @param duration moment.duration
*/
function getDurationString(duration) {
var out = "";
if (duration.years()) {
out += duration.years() + 'y ';
}
if (duration.days()) {
out += duration.days() + 'd ';
}
return out + duration.hours() + "h " + duration.minutes() + "m " + duration.seconds() + "s";
}

View File

@ -59,7 +59,10 @@
<td class="col-md-6">{{ start.end|date:"l d M H:i" }} <span class="label label-success">{% trans "Eve Time" %}</span></td>
</tr>
<tr>
<td class="col-md-6"><div id="countdown{{ start.operation_id }}"></div></td>
<td class="col-md-6">
<span id="localtime{{ start.operation_id }}"></span>&nbsp;<span class='label label-success'>Local time</span><br>
<div id="countdown{{ start.operation_id }}"></div>
</td>
<td class="col-md-6"></td>
</tr>
@ -197,22 +200,81 @@
</div>
</div>
<script src="/static/js/dateformat.js"></script>
<script src="/static/js/countdown.js"></script>
<script>
var clockClosest = document.getElementById("countdownclosest"), targetDate = new Date(Date.UTC({{ closest_timer.eve_time | date:"Y, m-1, d, H, i" }}));{% for subject, start in operations_list %}
var clock{{ start.operation_id }} = document.getElementById("countdown{{ start.operation_id }}"), targetDate{{ start.operation_id }} = new Date(Date.UTC({{ start.start | date:"Y, m-1, d, H, i" }}));{% endfor %}
{% include 'bundles/moment-js.html' with locale=True %}
<script src="{% static 'js/timers.js' %}"></script>
<script type="text/javascript">
// Data
var timers = [
{% for start, op in operations_list %}
{
'id': {{ op.operation_id }},
'start': moment("{{ op.start | date:"c" }}"),
'end': moment("{{ op.end | date:"c" }}"),
'expired': false
},
{% endfor %}
]
</script>
<script type="text/javascript">
setInterval(function(){clockClosest.innerHTML = targetDate.format('D @ h:ia'); if (targetDate > Date.now()){ clockClosest.innerHTML = clockClosest.innerHTML + "<BR>" + countdown(targetDate).toString();}}, 1000);
{% for subject, start in operations_list %}setInterval(function(){clock{{ start.operation_id }}.innerHTML = targetDate{{ start.operation_id }}.format('l d M H:i'); if (targetDate{{ start.operation_id }} > Date.now()){ clock{{ start.operation_id }}.innerHTML = clock{{ start.operation_id }}.innerHTML + " <span class='label label-success'>Local time</span></br><h2>" + countdown(targetDate{{ start.operation_id }}).toString() + "</h2>";}}, 1000);{% endfor %}
{% for timer in corp_timers %}setInterval(function(){clock{{ timer.id }}.innerHTML = targetDate{{ timer.id }}.format('D @ h:ia'); if (targetDate{{ timer.id }} > Date.now()){ clock{{ timer.id }}.innerHTML = clock{{ timer.id }}.innerHTML + "<BR>" + countdown(targetDate{{ timer.id }}).toString();}}, 1000);{% endfor %}
timedUpdate();
setAllLocalTimes();
setInterval(function(){updateClock()}, 1000);
// Start timed updates
setInterval(timedUpdate, 1000);
function updateClock() {
var clock = new Date();
document.getElementById("current-time").innerHTML = "<b>" + clock.toUTCString() + "</b>";
}
function timedUpdate() {
updateClock();
updateAllTimers();
}
function updateAllTimers () {
var l = timers.length;
for (var i=0; i < l; ++i) {
if (timers[i].expired) continue;
updateTimer(timers[i]);
}
}
/**
* Update a timer
* @param timer Timer information
* @param timer.start Date of the timer
* @param timer.id Id number of the timer
* @param timer.expired
*/
function updateTimer(timer) {
if (timer.start.isAfter(Date.now())) {
var duration = moment.duration(timer.start - moment(), 'milliseconds');
document.getElementById("countdown" + timer.id).innerHTML = getDurationString(duration);
} else {
timer.expired = true;
document.getElementById("countdown" + timer.id).innerHTML = "";
}
}
/**
* Set all local time fields
*/
function setAllLocalTimes() {
var l = timers.length;
for (var i=0; i < l; ++i) {
setLocalTime(timers[i]);
}
}
/**
* Set the local time info for the timer
* @param timer Timer information
* @param timer.start Date of the timer
* @param timer.id Id number of the timer
*/
function setLocalTime(timer) {
document.getElementById("localtime" + timer.id).innerHTML = timer.start.format("ddd @ LT");
}
function updateClock() {
document.getElementById("current-time").innerHTML = "<b>" + moment.utc().format('ddd, ll HH:mm:ss z') + "</b>";
}
</script>
{% endblock content %}

View File

@ -51,7 +51,7 @@
</td>
<td style="width:150px" class="text-center">{{ ops.location }}</td>
<td style="width:150px" class="text-center" nowrap>{{ ops.start | date:"Y-m-d H:i" }}</td>
<td class="text-center" nowrap><div id="countdown{{ ops.id }}"></div></td>
<td class="text-center" nowrap><div id="localtime{{ ops.id }}"></div><div id="countdown{{ ops.id }}"></div></td>
<td style="width:150px" class="text-center">{{ ops.duration }}</td>
<td style="width:150px" class="text-center">{{ ops.fc }}</td>
<td style="width:150px" class="text-center">{{ ops.details }}</td>
@ -76,26 +76,80 @@
{% endif %}
</div>
<script src="/static/js/dateformat.js"></script>
<script src="/static/js/countdown.js"></script>
<script>
var locale = "{{ LANGUAGE_CODE }}";
{% for ops in optimer %}var clock{{ ops.id }} = document.getElementById("countdown{{ ops.id }}"), targetDate{{ ops.id }} = new Date(Date.UTC({{ ops.start | date:"Y, m-1, d, H, i" }}));{% endfor %}
{% for ops in optimer %}setInterval(function(){
var options = { weekday: 'short' };
var options2 = { hour: 'numeric', minute: 'numeric' };
var time = ((targetDate{{ ops.id }}.toLocaleString(locale, options)) + " @ " + (targetDate{{ ops.id }}.toLocaleString(locale, options2)));
clock{{ ops.id }}.innerHTML = time;
if (targetDate{{ ops.id }} > Date.now())
{ clock{{ ops.id }}.innerHTML = clock{{ ops.id }}.innerHTML + "<BR>" + countdown(targetDate{{ ops.id }}).toString();}}, 1000);{% endfor %}
{% include 'bundles/moment-js.html' with locale=True %}
<script src="{% static 'js/timers.js' %}"></script>
<script type="text/javascript">
// Data
var timers = [
{% for op in optimer %}
{
'id': {{ op.id }},
'start': moment("{{ op.start | date:"c" }}"),
'expired': false
},
{% endfor %}
];
</script>
<script type="text/javascript">
setInterval(function(){updateClock()}, 1000);
timedUpdate();
setAllLocalTimes();
function updateClock() {
var options = { timeZone: 'UTC', weekday: 'short', day: 'numeric', month: 'short', year: 'numeric', hour: "numeric", minute: "numeric", second: "numeric" };
var clock = new Date()
document.getElementById("current-time").innerHTML = "<b>" + clock.toLocaleString(locale, options) + "</b>";
}
</script>
// Start timed updates
setInterval(timedUpdate, 1000);
function timedUpdate() {
updateClock();
updateAllTimers();
}
function updateAllTimers () {
var l = timers.length;
for (var i=0; i < l; ++i) {
if (timers[i].expired) continue;
updateTimer(timers[i]);
}
}
/**
* Update a timer
* @param timer Timer information
* @param timer.start Date of the timer
* @param timer.id Id number of the timer
* @param timer.expired
*/
function updateTimer(timer) {
if (timer.start.isAfter(Date.now())) {
var duration = moment.duration(timer.start - moment(), 'milliseconds');
document.getElementById("countdown" + timer.id).innerHTML = getDurationString(duration);
} else {
timer.expired = true;
document.getElementById("countdown" + timer.id).innerHTML = "";
}
}
/**
* Set all local time fields
*/
function setAllLocalTimes() {
var l = timers.length;
for (var i=0; i < l; ++i) {
setLocalTime(timers[i]);
}
}
/**
* Set the local time info for the timer
* @param timer Timer information
* @param timer.start Date of the timer
* @param timer.id Id number of the timer
*/
function setLocalTime(timer) {
document.getElementById("localtime" + timer.id).innerHTML = timer.start.format("ddd @ LT");
}
function updateClock() {
document.getElementById("current-time").innerHTML = "<b>" + moment.utc().format('LLLL') + "</b>";
}
</script>
{% endblock content %}

View File

@ -431,6 +431,7 @@
</div>
{% include 'bundles/moment-js.html' with locale=True %}
<script src="{% static 'js/timers.js' %}"></script>
<script type="text/javascript">
var locale = "{{ LANGUAGE_CODE }}";
@ -490,22 +491,6 @@
}
}
/**
* Get a duration string like countdown.js
* e.g. "1y 2d 3h 4m 5s"
* @param duration moment.duration
*/
function getDurationString(duration) {
var out = "";
if (duration.years()) {
out += duration.years() + 'y ';
}
if (duration.days()) {
out += duration.days() + 'd ';
}
return out + duration.hours() + "h " + duration.minutes() + "m " + duration.seconds() + "s";
}
/**
* Set all local time fields
*/