Basic UI + Wizard for custom naming added

src/UI/Mixins/AsModelBoundView.js

@@ -19,7 +19,11 @@ define(
                     this._modelBinder = new ModelBinder();
                 }
 
-                this._modelBinder.bind(this.model, this.el);
+                var options = {
+                    changeTriggers: {'': 'change', '[contenteditable]': 'blur', '[data-onkeyup]': 'keyup'}
+                };
+
+                this._modelBinder.bind(this.model, this.el, null, options);
 
                 if (originalOnRender) {
                     originalOnRender.call(this);

src/UI/Settings/MediaManagement/Naming/NamingSampleModel.js

@@ -6,5 +6,4 @@ define(
         return  Backbone.Model.extend({
             url: window.NzbDrone.ApiRoot + '/config/naming/samples'
         });
-
     });

src/UI/Settings/MediaManagement/Naming/NamingView.js

@@ -1,10 +1,11 @@
 'use strict';
 define(
     [
+        'vent',
         'marionette',
         'Settings/MediaManagement/Naming/NamingSampleModel',
         'Mixins/AsModelBoundView'
-    ], function (Marionette, NamingSampleModel, AsModelBoundView) {
+    ], function (vent, Marionette, NamingSampleModel, AsModelBoundView) {
 
         var view = Marionette.ItemView.extend({
             template: 'Settings/MediaManagement/Naming/NamingViewTemplate',
@@ -13,11 +14,13 @@ define(
                 namingOptions         : '.x-naming-options',
                 renameEpisodesCheckbox: '.x-rename-episodes',
                 singleEpisodeExample  : '.x-single-episode-example',
-                multiEpisodeExample   : '.x-multi-episode-example'
+                multiEpisodeExample   : '.x-multi-episode-example',
+                dailyEpisodeExample   : '.x-daily-episode-example'
             },
 
             events: {
-                'change .x-rename-episodes': '_setFailedDownloadOptionsVisibility'
+                'change .x-rename-episodes': '_setFailedDownloadOptionsVisibility',
+                'click .x-show-wizard'     : '_showWizard'
             },
 
             onRender: function () {
@@ -50,6 +53,11 @@ define(
             _showSamples: function () {
                 this.ui.singleEpisodeExample.html(this.namingSampleModel.get('singleEpisodeExample'));
                 this.ui.multiEpisodeExample.html(this.namingSampleModel.get('multiEpisodeExample'));
+                this.ui.dailyEpisodeExample.html(this.namingSampleModel.get('dailyEpisodeExample'));
+            },
+
+            _showWizard: function () {
+                vent.trigger(vent.Commands.ShowNamingWizard, { model: this.model });
             }
         });
 

src/UI/Settings/MediaManagement/Naming/NamingViewTemplate.html

@@ -24,108 +24,30 @@
 
     <div class="x-naming-options">
         <div class="control-group">
-            <label class="control-label">Include Series Title</label>
+            <label class="control-label">Wizard</label>
 
             <div class="controls">
-                <label class="checkbox toggle well">
-                    <input type="checkbox" name="includeSeriesTitle"/>
+                <button class="btn x-show-wizard">Show Wizard</button>
 
-                    <p>
-                        <span>Yes</span>
-                        <span>No</span>
-                    </p>
-
-                    <div class="btn btn-primary slide-button"/>
-                </label>
+                <span class="help-inline">
+                    <i class="icon-nd-form-info" title="Wizard to setup preferred naming style"/>
+                </span>
             </div>
         </div>
 
         <div class="control-group">
-            <label class="control-label">Include Episode Title</label>
+            <label class="control-label">Standard Episode Format</label>
 
             <div class="controls">
-                <label class="checkbox toggle well">
-                    <input type="checkbox" name="includeEpisodeTitle"/>
-
-                    <p>
-                        <span>Yes</span>
-                        <span>No</span>
-                    </p>
-
-                    <div class="btn btn-primary slide-button"/>
-                </label>
+                <input type="text" class="naming-format" name="standardEpisodeFormat" data-onkeyup="true" />
             </div>
         </div>
 
         <div class="control-group">
-            <label class="control-label">Include Quality</label>
+            <label class="control-label">Daily Episode Format</label>
 
             <div class="controls">
-                <label class="checkbox toggle well">
-                    <input type="checkbox" name="includeQuality"/>
-
-                    <p>
-                        <span>Yes</span>
-                        <span>No</span>
-                    </p>
-
-                    <div class="btn btn-primary slide-button"/>
-                </label>
-            </div>
-        </div>
-
-        <div class="control-group">
-            <label class="control-label">Replace Spaces</label>
-
-            <div class="controls">
-                <label class="checkbox toggle well">
-                    <input type="checkbox" name="replaceSpaces"/>
-
-                    <p>
-                        <span>Yes</span>
-                        <span>No</span>
-                    </p>
-
-                    <div class="btn btn-primary slide-button"/>
-                </label>
-            </div>
-        </div>
-
-        <div class="control-group">
-            <label class="control-label">Separator</label>
-
-            <div class="controls">
-                <select class="inputClass" name="separator">
-                    <option value=" - ">Dash</option>
-                    <option value=" ">Space</option>
-                    <option value=".">Period</option>
-                </select>
-            </div>
-        </div>
-
-        <div class="control-group">
-            <label class="control-label">Numbering Style</label>
-
-            <div class="controls">
-                <select class="inputClass" name="numberStyle">
-                    <option value="0">1x05</option>
-                    <option value="1">01x05</option>
-                    <option value="2">S01E05</option>
-                    <option value="3">s01e05</option>
-                </select>
-            </div>
-        </div>
-
-        <div class="control-group">
-            <label class="control-label">Multi-Episode Style</label>
-
-            <div class="controls">
-                <select class="inputClass" name="multiEpisodeStyle">
-                    <option value="0">Extend</option>
-                    <option value="1">Duplicate</option>
-                    <option value="2">Repeat</option>
-                    <option value="3">Scene</option>
-                </select>
+                <input type="text" class="naming-format" name="dailyEpisodeFormat" data-onkeyup="true" />
             </div>
         </div>
     </div>
@@ -145,4 +67,12 @@
             <span class="x-multi-episode-example naming-example"></span>
         </div>
     </div>
+
+    <div class="control-group">
+        <label class="control-label">Daily-Episode Example</label>
+
+        <div class="controls">
+            <span class="x-daily-episode-example naming-example"></span>
+        </div>
+    </div>
 </fieldset>

src/UI/Settings/MediaManagement/Naming/Wizard/NamingWizardModel.js

@@ -0,0 +1,17 @@
+'use strict';
+define(
+    [
+        'backbone'
+    ], function (Backbone) {
+        return  Backbone.Model.extend({
+            defaults: {
+                includeSeriesTitle : true,
+                includeEpisodeTitle: true,
+                includeQuality     : true,
+                replaceSpaces      : false,
+                separator          : ' - ',
+                numberStyle        : '2',
+                multiEpisodeStyle  : 0
+            }
+        });
+    });

src/UI/Settings/MediaManagement/Naming/Wizard/NamingWizardView.js

@@ -0,0 +1,141 @@
+'use strict';
+define(
+    [
+        'vent',
+        'marionette',
+        'Settings/MediaManagement/Naming/NamingSampleModel',
+        'Settings/MediaManagement/Naming/Wizard/NamingWizardModel',
+        'Mixins/AsModelBoundView'
+    ], function (vent, Marionette, NamingSampleModel, NamingWizardModel, AsModelBoundView) {
+
+        var view = Marionette.ItemView.extend({
+            template: 'Settings/MediaManagement/Naming/Wizard/NamingWizardViewTemplate',
+
+            ui: {
+                namingOptions         : '.x-naming-options',
+                singleEpisodeExample  : '.x-single-episode-example',
+                multiEpisodeExample   : '.x-multi-episode-example',
+                dailyEpisodeExample   : '.x-daily-episode-example'
+            },
+
+            events: {
+                'click .x-apply': '_applyNaming'
+            },
+
+            initialize: function (options) {
+                this.model = new NamingWizardModel();
+                this.namingModel = options.model;
+                this.namingSampleModel = new NamingSampleModel();
+            },
+
+            onRender: function () {
+                if (!this.model.get('renameEpisodes')) {
+                    this.ui.namingOptions.hide();
+                }
+
+                this.listenTo(this.model, 'change', this._buildFormat);
+                this.listenTo(this.namingSampleModel, 'sync', this._showSamples);
+                this._buildFormat();
+            },
+
+            _updateSamples: function () {
+                var data = {
+                    renameEpisodes: true,
+                    standardEpisodeFormat: this.standardEpisodeFormat,
+                    dailyEpisodeFormat: this.dailyEpisodeFormat,
+                    multiEpisodeStyle: this.model.get('multiEpisodeStyle')
+                };
+
+                this.namingSampleModel.fetch({data: data});
+            },
+
+            _showSamples: function () {
+                this.ui.singleEpisodeExample.html(this.namingSampleModel.get('singleEpisodeExample'));
+                this.ui.multiEpisodeExample.html(this.namingSampleModel.get('multiEpisodeExample'));
+                this.ui.dailyEpisodeExample.html(this.namingSampleModel.get('dailyEpisodeExample'));
+            },
+
+            _applyNaming: function () {
+                this.namingModel.set('standardEpisodeFormat', this.standardEpisodeFormat);
+                this.namingModel.set('dailyEpisodeFormat', this.dailyEpisodeFormat);
+                this.namingModel.set('multiEpisodeStyle', this.model.get('multiEpisodeStyle'));
+
+                vent.trigger(vent.Commands.CloseModalCommand);
+            },
+
+            _buildFormat: function () {
+                this.standardEpisodeFormat = '';
+                this.dailyEpisodeFormat = '';
+
+                if (this.model.get('includeSeriesTitle')) {
+                    if (this.model.get('replaceSpaces')) {
+                        this.standardEpisodeFormat += '{Series.Title}';
+                        this.dailyEpisodeFormat += '{Series.Title}';
+                    }
+
+                    else {
+                        this.standardEpisodeFormat += '{Series Title}';
+                        this.dailyEpisodeFormat += '{Series Title}';
+                    }
+
+                    this.standardEpisodeFormat += this.model.get('separator');
+                    this.dailyEpisodeFormat += this.model.get('separator');
+                }
+
+                switch (this.model.get('numberStyle')) {
+                    case '0':
+                        this.standardEpisodeFormat += '{season}x{0episode}';
+                        break;
+                    case '1':
+                        this.standardEpisodeFormat += '{0season}x{0episode}';
+                        break;
+                    case '2':
+                        this.standardEpisodeFormat += 'S{0season}E{0episode}';
+                        break;
+                    case '3':
+                        this.standardEpisodeFormat += 's{0season}e{0episode}';
+                        break;
+                    default:
+                        this.standardEpisodeFormat += 'Unknown Number Pattern';
+                }
+
+                this.dailyEpisodeFormat += '{Air-Date}';
+
+                if (this.model.get('includeEpisodeTitle')) {
+                    this.standardEpisodeFormat += this.model.get('separator');
+                    this.dailyEpisodeFormat += this.model.get('separator');
+
+                    if (this.model.get('replaceSpaces')) {
+                        this.standardEpisodeFormat += '{Episode.Title}';
+                        this.dailyEpisodeFormat += '{Episode.Title}';
+                    }
+
+                    else {
+                        this.standardEpisodeFormat += '{Episode Title}';
+                        this.dailyEpisodeFormat += '{Episode Title}';
+                    }
+                }
+
+                if (this.model.get('includeQuality')) {
+                    if (this.model.get('replaceSpaces')) {
+                        this.standardEpisodeFormat += ' {Quality.Title}';
+                        this.dailyEpisodeFormat += ' {Quality.Title}';
+                    }
+
+                    else {
+                        this.standardEpisodeFormat += ' {Quality Title}';
+                        this.dailyEpisodeFormat += ' {Quality Title}';
+                    }
+                }
+
+                if (this.model.get('replaceSpaces')) {
+                    this.standardEpisodeFormat = this.standardEpisodeFormat.replace(/\s/g, '.');
+                    this.dailyEpisodeFormat = this.dailyEpisodeFormat.replace(/\s/g, '.');
+                }
+
+                this._updateSamples();
+            }
+        });
+
+        return AsModelBoundView.call(view);
+    });

src/UI/Settings/MediaManagement/Naming/Wizard/NamingWizardViewTemplate.html

@@ -0,0 +1,141 @@
+<div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <h3>Naming Wizard</h3>
+</div>
+<div class="modal-body">
+    <div class="form-horizontal">
+        <div class="control-group">
+            <label class="control-label">Include Series Title</label>
+
+            <div class="controls">
+                <label class="checkbox toggle well">
+                    <input type="checkbox" name="includeSeriesTitle"/>
+
+                    <p>
+                        <span>Yes</span>
+                        <span>No</span>
+                    </p>
+
+                    <div class="btn btn-primary slide-button"/>
+                </label>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <label class="control-label">Include Episode Title</label>
+
+            <div class="controls">
+                <label class="checkbox toggle well">
+                    <input type="checkbox" name="includeEpisodeTitle"/>
+
+                    <p>
+                        <span>Yes</span>
+                        <span>No</span>
+                    </p>
+
+                    <div class="btn btn-primary slide-button"/>
+                </label>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <label class="control-label">Include Quality</label>
+
+            <div class="controls">
+                <label class="checkbox toggle well">
+                    <input type="checkbox" name="includeQuality"/>
+
+                    <p>
+                        <span>Yes</span>
+                        <span>No</span>
+                    </p>
+
+                    <div class="btn btn-primary slide-button"/>
+                </label>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <label class="control-label">Replace Spaces</label>
+
+            <div class="controls">
+                <label class="checkbox toggle well">
+                    <input type="checkbox" name="replaceSpaces"/>
+
+                    <p>
+                        <span>Yes</span>
+                        <span>No</span>
+                    </p>
+
+                    <div class="btn btn-primary slide-button"/>
+                </label>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <label class="control-label">Separator</label>
+
+            <div class="controls">
+                <select class="inputClass" name="separator">
+                    <option value=" - ">Dash</option>
+                    <option value=" ">Space</option>
+                    <option value=".">Period</option>
+                </select>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <label class="control-label">Numbering Style</label>
+
+            <div class="controls">
+                <select class="inputClass" name="numberStyle">
+                    <option value="0">1x05</option>
+                    <option value="1">01x05</option>
+                    <option value="2">S01E05</option>
+                    <option value="3">s01e05</option>
+                </select>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <label class="control-label">Multi-Episode Style</label>
+
+            <div class="controls">
+                <select class="inputClass" name="multiEpisodeStyle">
+                    <option value="0">Extend</option>
+                    <option value="1">Duplicate</option>
+                    <option value="2">Repeat</option>
+                    <option value="3">Scene</option>
+                </select>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <label class="control-label">Single Episode Example</label>
+
+            <div class="controls">
+                <span class="x-single-episode-example naming-example"></span>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <label class="control-label">Multi-Episode Example</label>
+
+            <div class="controls">
+                <span class="x-multi-episode-example naming-example"></span>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <label class="control-label">Daily-Episode Example</label>
+
+            <div class="controls">
+                <span class="x-daily-episode-example naming-example"></span>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="modal-footer">
+    <button class="btn" data-dismiss="modal">cancel</button>
+    <button class="btn btn-primary x-apply">apply</button>
+</div>

src/UI/Settings/MediaManagement/Sorting/ViewTemplate.html

@@ -44,9 +44,9 @@
         <label class="control-label">Season Folder Format</label>
 
         <div class="controls">
-            <input type="text" placeholder="Season %s" name="seasonFolderFormat"/>
+            <input type="text" placeholder="Season {season}" name="seasonFolderFormat"/>
             <span class="help-inline">
-                <i class="icon-question-sign" title="How should season folders be named? (Use %0s to pad to two digits, %sn for Series Name)"/>
+                <i class="icon-question-sign" title="How should season folders be named? Please see the wiki for customization options"/>
             </span>
         </div>
     </div>

src/UI/Settings/settings.less

@@ -45,6 +45,10 @@ li.save-and-add:hover {
   margin-top: 5px;
 }
 
+.naming-format {
+  width: 500px;
+}
+
 .advanced-settings-toggle {
   margin-right: 40px;
 
@@ -77,4 +81,4 @@ li.save-and-add:hover {
   .advanced-setting {
     display: block;
   }
-}
+}

src/UI/Shared/Modal/Controller.js

@@ -8,8 +8,9 @@ define(
         'Series/Delete/DeleteSeriesView',
         'Episode/EpisodeDetailsLayout',
         'History/Details/HistoryDetailsView',
-        'System/Logs/Table/Details/LogDetailsView'
-    ], function (vent, AppLayout, Marionette, EditSeriesView, DeleteSeriesView, EpisodeDetailsLayout, HistoryDetailsView, LogDetailsView) {
+        'System/Logs/Table/Details/LogDetailsView',
+        'Settings/MediaManagement/Naming/Wizard/NamingWizardView'
+    ], function (vent, AppLayout, Marionette, EditSeriesView, DeleteSeriesView, EpisodeDetailsLayout, HistoryDetailsView, LogDetailsView, NamingWizardView) {
 
         return Marionette.AppRouter.extend({
 
@@ -20,6 +21,7 @@ define(
                 vent.on(vent.Commands.ShowEpisodeDetails, this._showEpisode, this);
                 vent.on(vent.Commands.ShowHistoryDetails, this._showHistory, this);
                 vent.on(vent.Commands.ShowLogDetails, this._showLogDetails, this);
+                vent.on(vent.Commands.ShowNamingWizard, this._showNamingWizard, this);
             },
 
             _closeModal: function () {
@@ -49,6 +51,11 @@ define(
             _showLogDetails: function (options) {
                 var view = new LogDetailsView({ model: options.model });
                 AppLayout.modalRegion.show(view);
+            },
+
+            _showNamingWizard: function (options) {
+                var view = new NamingWizardView({ model: options.model });
+                AppLayout.modalRegion.show(view);
             }
         });
     });

src/UI/vent.js

@@ -23,7 +23,8 @@ define(
             ShowHistoryDetails : 'ShowHistoryDetails',
             ShowLogDetails     : 'ShowLogDetails',
             SaveSettings       : 'saveSettings',
-            ShowLogFile        : 'showLogFile'
+            ShowLogFile        : 'showLogFile',
+            ShowNamingWizard   : 'showNamingWizard'
         };
 
         return vent;