[Feature] 24/12h support

package.json

@@ -49,7 +49,7 @@
     "standard": "^8.3.0"
   },
   "dependencies": {
-    "electron": "1.4.7",
+    "electron": "1.4.10",
     "menubar": "^5.1.0",
     "auto-launch": "^5.0.1",
     "applescript": "^1.0.0",
@@ -59,6 +59,8 @@
     "chart.js": "^2.2.1",
     "countup.js": "^1.7.1",
     "semver": "^5.1.0",
-    "superagent": "^3.0.0"
+    "superagent": "^3.1.0",
+    "jquery-lang-js": "^3.0.2",
+    "moment": "^2.17.1"
   }
 }

src/components/weather.js

@@ -293,7 +293,7 @@ const showHourlyWeatherData = function () {
           position: 'bottom',
           time: {
             unit: 'hour',
-            tooltipFormat: 'ddd - HH:mm',
+            tooltipFormat: 'ddd - ' + store.getTimeFormat(),
             displayFormats: {
               hour: 'MMM D, hA'
             }

src/main/config.json

@@ -21,13 +21,10 @@
     "error" : "#444444",
     "list": ["#b1695a", "#DB9864", "#E3BB88", "#D0C7A8", "#B1C2A3", "#80BBB2", "#6D9E96", "#8F95A5", "#6F7685"]
   },
-  "date": {
-    "days": ["mon", "tue", "wed", "thu", "fri", "sat", "sun"],
-    "months": ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"]
-  },
   "start": {
     "city": "Berlin, DE",
     "format": "metric",
+    "time": "HH:mm",
     "interval": 300000
   },
   "random": {

src/main/index.html

@@ -87,7 +87,7 @@ <h1>
                 </div>
                 <div class="form-item">
                     <label for="apikey">API Key</label>
-                    <input type="text" name="apikey" id="apikey" value=""/>
+                    <input type="text" name="apikey" id="apikey" value="" class="small"/>
                     <span class="help">
                         You need a free api key from <a href="http://www.openweathermap.org/" alt="openweathermap" target="_blank">openweathermap</a>.
                     </span>
@@ -111,6 +111,15 @@ <h1>
                         <div class="pull-right"><input type="checkbox" name="auto-launch" value="true"><span class="fit"></span></div>
                     </label>
                 </div>
+                <div class="form-item small">
+                    <label class="clear">
+                        <div class="pull-left">Time format</div>
+                        <div class="pull-right fit">
+                            <label class="inline small"><input type="Radio" name="time" value="24" data-field="HH:mm" checked="checked" /><span></span>24h </label>
+                            <label class="inline small"><input type="Radio" name="time" value="12" data-field="h:mm a"/><span></span>12h </label>
+                        </div>
+                    </label>
+                </div>
                 <div class="form-item small">
                     <button class="apply pull-left">Apply</button>
                     <button class="quit pull-right">Quit</button>

src/main/main.js

@@ -39,8 +39,13 @@ const loadEventListener = function () {
   })
 
   jQuery('input[type="radio"][name="format"]').change(function () {
-    store.setFormat(jQuery(this).val())
-    weather.refreshWeather()
+      store.setFormat(jQuery(this).val())
+      weather.refreshWeather()
+  })
+
+  jQuery('input[type="radio"][name="time"]').change(function () {
+      store.setTimeFormat(jQuery(this).attr('data-field'))
+      weather.refreshWeather()
   })
 
   jQuery('input[type="checkbox"][name="favorite-city"]').change(function () {
@@ -139,6 +144,12 @@ const init = function () {
     store.setFormat(config.start.format)
   }
 
+  if (store.getTimeFormat()) {
+      store.setTimeFormat(store.getTimeFormat())
+  } else {
+      store.setTimeFormat(config.start.time)
+  }
+
   if (store.getApiKey()) {
     store.setApiKey(store.getApiKey())
   } else {

src/main/style.css

@@ -266,7 +266,7 @@ h1:after {
 }
 
 #main .clock {
-    width: 40px;
+    width: 60px;
     height: 20px;
     position: absolute;
     top: 10px;
@@ -317,6 +317,7 @@ h1:after {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;;
+    text-transform: lowercase;
 }
 
 #details .header::after {
@@ -438,6 +439,10 @@ h1:after {
     display: inline-block;
 }
 
+#settings .form-item label.inline.small {
+    font-size: 12px;
+}
+
 #settings .form-item input[type="text"] {
      display: block;
      width: 100%;
@@ -457,6 +462,11 @@ h1:after {
     padding-right: 40px;
 }
 
+#settings .form-item input[type="text"].small {
+    font-size: 12px;
+    padding: 3px;
+}
+
 #settings .form-item label.fav {
     margin-top: -22px;
     position: absolute;

src/utilities/store.js

@@ -96,6 +96,18 @@ const setWdata = function (data) {
   wdata = data
 }
 
+const getTimeFormat = function () {
+  return localStore.get('time-format')
+}
+
+const setTimeFormat = function (format) {
+  localStore.set('time-format', format)
+  if (format === 'HH:mm')
+    jQuery('input:radio[name="time"]')[0].checked = true
+  else
+    jQuery('input:radio[name="time"]')[1].checked = true
+}
+
 exports.getWdata = getWdata
 exports.setWdata = setWdata
 exports.setCity = setCity
@@ -110,3 +122,5 @@ exports.getFavoriteCity = getFavoriteCity
 exports.setFavoriteCity = setFavoriteCity
 exports.getAutoLaunch = getAutoLaunch
 exports.setAutoLaunch = setAutoLaunch
+exports.getTimeFormat = getTimeFormat
+exports.setTimeFormat = setTimeFormat

src/utilities/utils.js

@@ -6,32 +6,22 @@ const config = require('./../main/config.json')
 
 const ipcRenderer = require('electron').ipcRenderer
 const jQuery = require('jquery')
+const moment = require('moment')
 
 let loading = [false, false, false, false]
-const months = config.date.months
-
-const getTodayDay = function () {
-  var days = [
-    'sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'
-  ]
-  var date = timezone.getDate(new Date())
-  return days[(date.getDay())]
-}
 
 const getTodayDate = function () {
-  var date = timezone.getDate(new Date())
-  return getTodayDay() + ', ' + months[date.getMonth()] + ' ' + date.getDate()
+  var date = moment(timezone.getDate(new Date()))
+  return date.format('dddd, MMM D');
 }
 
 const getTime = function () {
-  var dt = timezone.getDate(new Date())
-  return dt.getHours() + ':' + addZero(dt.getMinutes())
+  var dt = moment(timezone.getDate(new Date()))
+  return dt.format(store.getTimeFormat())
 }
 
 const getStyledDate = function (num) {
-  var days = config.date.days
-  var date = new Date()
-  return days[(date.getDay() + num) % 7]
+  return moment().add(num+1, 'days').format('ddd')
 }
 
 const roundTemp = function (temp) {
@@ -48,11 +38,11 @@ const toggleSettings = function () {
     jQuery('#settings .content').fadeOut()
     jQuery('#nav-icon').removeClass('open')
   } else {
-    jQuery('#main').height('120px')
+    jQuery('#main').height('100px')
     jQuery('#main .content').fadeOut()
     jQuery('#main .actual-icon').fadeOut()
     jQuery('#details').fadeOut()
-    jQuery('#settings').height('340px')
+    jQuery('#settings').height('360px')
     jQuery('#settings .content').delay(500).fadeIn()
     jQuery('#nav-icon').addClass('open')
   }