Added examples to naming settings

UI/Settings/MediaManagement/Naming/View.js

@@ -10,7 +10,9 @@ define(
 
             ui: {
                 namingOptions         : '.x-naming-options',
-                renameEpisodesCheckbox: '.x-rename-episodes'
+                renameEpisodesCheckbox: '.x-rename-episodes',
+                singleEpisodeExample  : '.x-single-episode-example',
+                multiEpisodeExample   : '.x-multi-episode-example'
             },
 
             events: {
@@ -21,6 +23,9 @@ define(
                 if(!this.model.get('renameEpisodes')){
                     this.ui.namingOptions.hide();
                 }
+
+                this.listenTo(this.model, 'change', this._buildExamples);
+                this._buildExamples();
             },
 
             _setNamingOptionsVisibility: function () {
@@ -32,6 +37,24 @@ define(
                 else {
                     this.ui.namingOptions.slideUp();
                 }
+            },
+
+            _buildExamples: function () {
+                var self = this;
+
+                var data = this.model.toJSON();
+                data.id = 0;
+
+                var promise = $.ajax({
+                    type: 'POST',
+                    url : window.ApiRoot + '/naming',
+                    data: JSON.stringify(data)
+                });
+
+                promise.done(function (result) {
+                    self.ui.singleEpisodeExample.html(result.singleEpisodeExample);
+                    self.ui.multiEpisodeExample.html(result.multiEpisodeExample);
+                });
             }
         });
 

UI/Settings/MediaManagement/Naming/ViewTemplate.html

@@ -129,4 +129,20 @@
             </div>
         </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>
 </fieldset>

UI/Settings/MediaManagement/Sorting/ViewTemplate.html

@@ -24,9 +24,9 @@
 
         <div class="controls">
             <input type="text" placeholder="Season %s" 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)"/>
-        </span>
+            <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)"/>
+            </span>
         </div>
     </div>
 </fieldset>

UI/Settings/settings.less

@@ -38,4 +38,9 @@ li.save-and-add:hover {
   i {
     .clickable;
   }
+}
+
+.naming-example {
+  display: inline-block;
+  margin-top: 5px;
 }