Calendar/Date localization

New: Choose calendar starting day of week
New: Choose prefered date/time formats
New: Option to disable relative dates and show absolute dates instead

src/UI/Settings/SettingsLayout.js

@@ -21,6 +21,8 @@ define(
         'Settings/Notifications/NotificationCollection',
         'Settings/Metadata/MetadataLayout',
         'Settings/General/GeneralView',
+        'Settings/UI/UiView',
+        'Settings/UI/UiSettingsModel',
         'Shared/LoadingView',
         'Config'
     ], function ($,
@@ -43,6 +45,8 @@ define(
                  NotificationCollection,
                  MetadataLayout,
                  GeneralView,
+                 UiView,
+                 UiSettingsModel,
                  LoadingView,
                  Config) {
         return Marionette.Layout.extend({
@@ -57,6 +61,7 @@ define(
                 notifications   : '#notifications',
                 metadata        : '#metadata',
                 general         : '#general',
+                uiRegion        : '#ui',
                 loading         : '#loading-region'
             },
 
@@ -69,6 +74,7 @@ define(
                 notificationsTab   : '.x-notifications-tab',
                 metadataTab        : '.x-metadata-tab',
                 generalTab         : '.x-general-tab',
+                uiTab              : '.x-ui-tab',
                 advancedSettings   : '.x-advanced-settings'
             },
 
@@ -81,6 +87,7 @@ define(
                 'click .x-notifications-tab'    : '_showNotifications',
                 'click .x-metadata-tab'         : '_showMetadata',
                 'click .x-general-tab'          : '_showGeneral',
+                'click .x-ui-tab'               : '_showUi',
                 'click .x-save-settings'        : '_save',
                 'change .x-advanced-settings'   : '_toggleAdvancedSettings'
             },
@@ -103,6 +110,7 @@ define(
                 this.downloadClientSettings = new DownloadClientSettingsModel();
                 this.notificationCollection = new NotificationCollection();
                 this.generalSettings = new GeneralSettingsModel();
+                this.uiSettings = new UiSettingsModel();
 
                 Backbone.$.when(
                         this.mediaManagementSettings.fetch(),
@@ -110,7 +118,8 @@ define(
                         this.indexerSettings.fetch(),
                         this.downloadClientSettings.fetch(),
                         this.notificationCollection.fetch(),
-                        this.generalSettings.fetch()
+                        this.generalSettings.fetch(),
+                        this.uiSettings.fetch()
                     ).done(function () {
                         if(!self.isClosed)
                         {
@@ -123,6 +132,7 @@ define(
                         self.notifications.show(new NotificationCollectionView({ collection: self.notificationCollection }));
                         self.metadata.show(new MetadataLayout());
                         self.general.show(new GeneralView({ model: self.generalSettings }));
+                        self.uiRegion.show(new UiView({ model: self.uiSettings }));
                         }
                     });
 
@@ -155,6 +165,9 @@ define(
                     case 'general':
                         this._showGeneral();
                         break;
+                    case 'ui':
+                        this._showUi();
+                        break;
                     default:
                         this._showMediaManagement();
                 }
@@ -232,6 +245,15 @@ define(
                 this._navigate('settings/general');
             },
 
+            _showUi: function (e) {
+                if (e) {
+                    e.preventDefault();
+                }
+
+                this.ui.uiTab.tab('show');
+                this._navigate('settings/ui');
+            },
+
             _navigate:function(route){
                 Backbone.history.navigate(route, { trigger: false, replace: true });
             },

src/UI/Settings/SettingsLayoutTemplate.html

@@ -7,6 +7,7 @@
     <li><a href="#notifications" class="x-notifications-tab no-router">Connect</a></li>
     <li><a href="#metadata" class="x-metadata-tab no-router">Metadata</a></li>
     <li><a href="#general" class="x-general-tab no-router">General</a></li>
+    <li><a href="#ui" class="x-ui-tab no-router">UI</a></li>
 </ul>
 
 <div class="row settings-controls">
@@ -42,6 +43,7 @@
     <div class="tab-pane" id="notifications"></div>
     <div class="tab-pane" id="metadata"></div>
     <div class="tab-pane" id="general"></div>
+    <div class="tab-pane" id="ui"></div>
 </div>
 
 <div id="loading-region"></div>

src/UI/Settings/UI/UiSettingsModel.js

@@ -0,0 +1,12 @@
+'use strict';
+define(
+    [
+        'Settings/SettingsModelBase'
+    ], function (SettingsModelBase) {
+        return SettingsModelBase.extend({
+
+            url           : window.NzbDrone.ApiRoot + '/config/ui',
+            successMessage: 'UI settings saved',
+            errorMessage  : 'Failed to save UI settings'
+        });
+    });

src/UI/Settings/UI/UiView.js

@@ -0,0 +1,27 @@
+'use strict';
+define(
+    [
+        'vent',
+        'marionette',
+        'Shared/UiSettingsModel',
+        'Mixins/AsModelBoundView',
+        'Mixins/AsValidatedView'
+    ], function (vent, Marionette, UiSettingsModel, AsModelBoundView, AsValidatedView) {
+        var view = Marionette.ItemView.extend({
+            template: 'Settings/UI/UiViewTemplate',
+
+            initialize: function () {
+                this.listenTo(this.model, 'sync', this._reloadUiSettings);
+            },
+
+            _reloadUiSettings: function() {
+                UiSettingsModel.fetch();
+            }
+        });
+
+        AsModelBoundView.call(view);
+        AsValidatedView.call(view);
+
+        return view;
+    });
+

src/UI/Settings/UI/UiViewTemplate.html

@@ -0,0 +1,95 @@
+<div class="form-horizontal">
+    <fieldset>
+        <legend>Calendar</legend>
+
+        <div class="form-group">
+            <label class="col-sm-3 control-label">First Day of Week</label>
+
+            <div class="col-sm-4">
+                <select name="firstDayOfWeek" class="form-control">
+                    <option value="0">Sunday</option>
+                    <option value="1">Monday</option>
+                </select>
+            </div>
+        </div>
+
+        <div class="form-group">
+            <label class="col-sm-3 control-label">Week Column Header</label>
+
+            <div class="col-sm-1 col-sm-push-4 help-inline">
+                <i class="icon-nd-form-warning" title="Shown above each column when week is the active view"/>
+            </div>
+
+            <div class="col-sm-4 col-sm-pull-1">
+                <select name="calendarWeekColumnHeader" class="form-control">
+                    <option value="ddd M/D">Tue 3/25</option>
+                    <option value="ddd MM/DD">Tue 03/25</option>
+                    <option value="ddd D/M">Tue 25/3</option>
+                    <option value="ddd DD/MM">Tue 25/03</option>
+                </select>
+            </div>
+        </div>
+    </fieldset>
+
+    <fieldset>
+        <legend>Dates</legend>
+
+        <div class="form-group">
+            <label class="col-sm-3 control-label">Short Date Format</label>
+
+            <div class="col-sm-4">
+                <select name="shortDateFormat" class="form-control">
+                    <option value="MMM D YYYY">Mar 25 2014</option>
+                    <option value="DD MMM YYYY">25 Mar 2014</option>
+                    <option value="MM/D/YYYY">03/25/2014</option>
+                    <option value="DD/MM/YYYY">25/03/2014</option>
+                </select>
+            </div>
+        </div>
+
+        <div class="form-group">
+            <label class="col-sm-3 control-label">Long Date Format</label>
+
+            <div class="col-sm-4">
+                <select name="longDateFormat" class="form-control">
+                    <option value="dddd, MMMM D YYYY">Tuesday, March 25, 2014</option>
+                    <option value="dddd, D MMMM YYYY">Tuesday, 25 March, 2014</option>
+                </select>
+            </div>
+        </div>
+
+        <div class="form-group">
+            <label class="col-sm-3 control-label">Time Format</label>
+
+            <div class="col-sm-4">
+                <select name="timeFormat" class="form-control">
+                    <option value="h(:mm)a">5pm/5:30pm</option>
+                    <option value="HH:mm">17:00/17:30</option>
+                </select>
+            </div>
+        </div>
+
+        <div class="form-group">
+            <label class="col-sm-3 control-label">Show Relative Dates</label>
+
+            <div class="col-sm-8">
+                <div class="input-group">
+                    <label class="checkbox toggle well">
+                        <input type="checkbox" name="showRelativeDates"/>
+
+                        <p>
+                            <span>Yes</span>
+                            <span>No</span>
+                        </p>
+
+                        <div class="btn btn-primary slide-button"/>
+                    </label>
+
+                    <span class="help-inline-checkbox">
+                        <i class="icon-nd-form-info" title="Show relative (Today/Yesterday/etc) or absolute dates"/>
+                    </span>
+                </div>
+            </div>
+        </div>
+    </fieldset>
+</div>

src/UI/Settings/settings.less

@@ -109,6 +109,10 @@ li.save-and-add:hover {
 }
 
 .settings-tabs {
+  li>a {
+    padding : 10px;
+  }
+
   @media (min-width: @screen-sm-min) and (max-width: @screen-md-max) {
     li {
       a {