Issue 8: Add option for twelve hour clock

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.1] - 2022-03-17
+### Added
+- Show alternative 12 hour clock format using "ampmclock" option.
+
 ## [1.1.1] - 2022-03-17
 ### Fixed
 - Metrictemp option was not passed to page template.

README.md

@@ -49,6 +49,7 @@ You can use the following optional environment variables to configure/customise
 
 - `SITENAME` - Custom site name.
 - `SHOWCLOCK: 'true'` - Show/hide the clock.
+- `AMPMCLOCK: 'true'` - Show 12 hour clock format if true.
 - `SHOWGREETING: 'true'` - Show a friendly greeting message rather than "#home".
 - `BGBLUR: 70` - Background image blur percentage.
 - `BGBRIGHT: 85` - Background image brightness percentage.

jumpapp/assets/css/styles.css

@@ -137,6 +137,10 @@ body {
         font-size: 2.4em;
         vertical-align: middle;
     }
+        .time span {
+            font-size: .5em;
+            padding-left: 5px;
+        }
 
     .weather {
         color: inherit;

jumpapp/assets/js/src/classes/Clock.js

@@ -11,22 +11,24 @@ export default class Clock {
     /**
      * Calculate the time shifted from UTC.
      *
+     * @param boolean ampm Return 12 hour format if true.
      * @param number utcshift Number of seconds to shift time from UTC.
      */
-    constructor(eventemitter) {
+    constructor(eventemitter, ampm = false) {
         this.set_utc_shift();
         this.contentintervalid = null;
         this.eventemitter = eventemitter;
+        this.ampm = ampm;
     }
 
-    set_utc_shift(utcshift = 0) {
-        this.utcshift = utcshift*1000;
+    set_utc_shift(newutcshift = 0) {
+        this.utcshift = newutcshift*1000;
         this.shiftedtimestamp = new Date().getTime()+this.utcshift;
         this.shifteddate = new Date(this.shiftedtimestamp);
     }
 
     /**
-     * Return a string representing time in HH:MM format.
+     * Return a formatted string representing time for display in template.
      *
      * @returns string The time string.
      */
@@ -34,9 +36,16 @@ export default class Clock {
         // We need to use getUTCHours and getUTC Minutes here to stop
         // the Date() object adjusting the returned time relative to the
         // browser's local timezone.
-        const hour = String(this.shifteddate.getUTCHours()).padStart(2, "0");
-        const minutes = String(this.shifteddate.getUTCMinutes()).padStart(2, "0");
-        return hour + ":" + minutes;
+        let hour = this.shifteddate.getUTCHours();
+        const minutes = String(this.shifteddate.getUTCMinutes()).padStart(2, '0');
+
+        if (!this.ampm) {
+            return String(hour).padStart(2, '0') + ":" + minutes;
+        }
+        // Convert to 12 hour AM/PM format and return.
+        const suffix = hour <= 12 ? 'AM':'PM';
+        hour = ((hour + 11) % 12 + 1);
+        return hour + ':' + minutes + '<span>' + suffix + '</span>';
     }
 
     /**

jumpapp/assets/js/src/classes/Main.js

@@ -29,7 +29,7 @@ export default class Main {
         }
         // Finally create instances of the classes we'll be using.
         this.eventemitter = new EventEmitter();
-        this.clock = new Clock(this.eventemitter);
+        this.clock = new Clock(this.eventemitter, !!JUMP.ampmclock);
         this.weather = new Weather(this.eventemitter);
     }
 

jumpapp/classes/Pages/HomePage.php

@@ -16,6 +16,7 @@ class HomePage extends AbstractPage {
             'title' => $this->config->get('sitename'),
             'owmapikey' => !!$this->config->get('owmapikey', false),
             'metrictemp' => $this->config->parse_bool($this->config->get('metrictemp')),
+            'ampmclock' => $this->config->parse_bool($this->config->get('ampmclock', false)),
         ]);
     }
 

jumpapp/config.php

@@ -21,6 +21,8 @@ return [
     'noindex'        => getenv('NOINDEX')        ?:   true,
     // Should the clock be displayed?
     'showclock'      => getenv('SHOWCLOCK')      ?:   true,
+    // 12 hour clock format?
+    'ampmclock'      => getenv('AMPMCLOCK')      ?:   false,
     // Show a friendly greeting message rather than "#home".
     'showgreeting'   => getenv('SHOWGREETING')   ?:   true,
     // Background blur percentage.

jumpapp/templates/header.mustache

@@ -15,7 +15,8 @@
         <script>
             const JUMP = {
                 owmapikey: '{{owmapikey}}',
-                metrictemp: '{{metrictemp}}'
+                metrictemp: '{{metrictemp}}',
+                ampmclock: '{{ampmclock}}',
             };
         </script>
     </head>