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

@@ -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 %}