Display current time in Alarm state

mopidy_alarmclock/alarm_manager.py

@@ -30,6 +30,11 @@ def is_set(self):
     def get_ring_time(self):
         return self.clock_datetime.strftime('%H:%M')
 
+    def get_seconds_since_midnight(self):
+        # snippet found here http://stackoverflow.com/a/15971505/927592
+        now = datetime.datetime.now()
+        return int((now - now.replace(hour=0, minute=0, second=0, microsecond=0)).total_seconds())
+
     def reset(self):
         self.clock_datetime = None
         self.playlist = None

mopidy_alarmclock/templates/index.html

@@ -17,6 +17,7 @@ <h3 class="panel-title">Alarm state</h3>
     <div class="panel-body">
         <p>
             The alarm will start at <strong>{{ alarm_manager.get_ring_time() }}</strong> and play playlist <strong>{{ alarm_manager.playlist.name }}</strong> with <strong>{{ alarm_manager.volume }}% volume</strong> (time to full volume {{ alarm_manager.volume_increase_seconds }} sec).<br/>
+            <span id="clock"></span><br/>
 
             <a role="button" class="btn btn-success btn-large btn-warning" href="/alarmclock/cancel/">Cancel alarm</a>
         </p>
@@ -96,7 +97,22 @@ <h3 class="panel-title">Alarm state</h3>
 
 {% block extra-js %}
 <script type="text/javascript">
-$('.clockpicker').clockpicker({'autoclose':true});
+{% if alarm_manager.is_set() %}
+var secondsSinceMidnight = {{ alarm_manager.get_seconds_since_midnight() }};
+function updateClock() {
+    var h = Math.floor(secondsSinceMidnight / 3600);
+    var mm = Math.floor(secondsSinceMidnight % 3600 / 60);
+    if(mm < 10) {
+        mm = "0" + mm;
+    }
+    $("#clock").html("Current time of alarm clock is " + h + ":" + mm + ".");
+    secondsSinceMidnight = (secondsSinceMidnight + 1) % 86400;
+}
+updateClock();
+window.setInterval(updateClock, 1000);
+{% else %}
+$('.clockpicker').clockpicker({'autoclose': true});
 $('#volume').change();
+{% end %}
 </script>
 {% end %}