Quality type sizes moved to backbone + SS (API)

NzbDrone.Api/AppHost.cs

@@ -6,8 +6,10 @@ using System.Web;
 using Funq;
 using Ninject;
 using NzbDrone.Api.QualityProfiles;
+using NzbDrone.Api.QualityType;
 using ServiceStack.ContainerAdapter.Ninject;
 using ServiceStack.WebHost.Endpoints;
+using QualityProfileService = NzbDrone.Api.QualityProfiles.QualityProfileService;
 
 namespace NzbDrone.Api
 {
@@ -28,7 +30,9 @@ namespace NzbDrone.Api
 
             Routes
                 .Add<QualityProfileModel>("/qualityprofiles")
-                .Add<QualityProfileModel>("/qualityprofiles/{Id}");
+                .Add<QualityProfileModel>("/qualityprofiles/{Id}")
+                .Add<QualityTypeModel>("/qualitytypes")
+                .Add<QualityTypeModel>("/qualitytypes/{Id}");
 
             Bootstrapper.Initialize();
         }

NzbDrone.Api/Bootstrapper.cs

@@ -4,6 +4,7 @@ using System.Linq;
 using System.Text;
 using AutoMapper;
 using NzbDrone.Api.QualityProfiles;
+using NzbDrone.Api.QualityType;
 using NzbDrone.Api.Resolvers;
 using NzbDrone.Core.Repository.Quality;
 
@@ -13,15 +14,7 @@ namespace NzbDrone.Api
     {
         public static void Initialize()
         {
-            //Mapper.CreateMap<QualityTypes, Int32>()
-            //      .ForMember(dest => dest, opt => opt.ResolveUsing<QualityTypesToIntResolver>());
-
-            //Mapper.CreateMap<Int32, QualityTypes>()
-            //      .ForMember(dest => dest.Id, opt => opt.MapFrom(src => src));
-
-            //Mapper.CreateMap<QualityProfile, QualityProfileModel>()
-            //      .ForMember(dest => dest.Id, opt => opt.MapFrom(src => src.QualityProfileId));
-
+            //QualityProfiles
             Mapper.CreateMap<QualityProfileModel, QualityProfile>()
                   .ForMember(dest => dest.QualityProfileId, opt => opt.MapFrom(src => src.Id))
                   .ForMember(dest => dest.Allowed, opt => opt.ResolveUsing<QualitiesToAllowedResolver>().FromMember(src => src.Qualities));
@@ -32,6 +25,13 @@ namespace NzbDrone.Api
 
             Mapper.CreateMap<QualityTypes, QualityProfileType>()
                   .ForMember(dest => dest.Allowed, opt => opt.Ignore());
+
+            //QualityTypes
+            Mapper.CreateMap<QualityTypeModel, Core.Repository.Quality.QualityType>()
+                  .ForMember(dest => dest.QualityTypeId, opt => opt.MapFrom(src => src.Id));
+
+            Mapper.CreateMap<Core.Repository.Quality.QualityType, QualityTypeModel>()
+                  .ForMember(dest => dest.Id, opt => opt.MapFrom(src => src.QualityTypeId));
         }
     }
 }

NzbDrone.Api/NzbDrone.Api.csproj

@@ -99,11 +99,12 @@
     <Compile Include="Filters\ValidApiRequestAttribute.cs" />
     <Compile Include="Helpers\HttpRequestExtensions.cs" />
     <Compile Include="IApiRequest.cs" />
-    <Compile Include="QualityProfiles\QualityProfileRequest.cs" />
     <Compile Include="Properties\AssemblyInfo.cs" />
     <Compile Include="QualityProfiles\QualityProfileModel.cs" />
     <Compile Include="QualityProfiles\QualityProfileService.cs" />
     <Compile Include="QualityProfiles\QualityProfileType.cs" />
+    <Compile Include="QualityType\QualityTypeModel.cs" />
+    <Compile Include="QualityType\QualityTypeService.cs" />
     <Compile Include="Resolvers\AllowedToQualitiesResolver.cs" />
     <Compile Include="Resolvers\QualitiesToAllowedResolver.cs" />
     <Compile Include="Resolvers\QualityTypesToIntResolver.cs" />

NzbDrone.Api/QualityProfiles/QualityProfileModel.cs

@@ -2,7 +2,6 @@
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
-using NzbDrone.Core.Repository.Quality;
 
 namespace NzbDrone.Api.QualityProfiles
 {

NzbDrone.Api/QualityProfiles/QualityProfileRequest.cs

@@ -1,10 +0,0 @@
-using System.Linq;
-
-namespace NzbDrone.Api.QualityProfiles
-{
-    public class QualityProfileRequest : IApiRequest
-    {
-        public string ApiKey { get; set; }
-        public int Id { get; set; }
-    }
-}

NzbDrone.Api/QualityType/QualityTypeModel.cs

@@ -0,0 +1,13 @@
+using System;
+using System.Linq;
+
+namespace NzbDrone.Api.QualityType
+{
+    public class QualityTypeModel
+    {
+        public Int32 Id { get; set; }
+        public String Name { get; set; }
+        public Int32 MinSize { get; set; }
+        public Int32 MaxSize { get; set; }
+    }
+}

NzbDrone.Api/QualityType/QualityTypeService.cs

@@ -0,0 +1,59 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using AutoMapper;
+using Ninject;
+using NzbDrone.Api.Filters;
+using NzbDrone.Core.Providers;
+using ServiceStack.ServiceInterface;
+
+namespace NzbDrone.Api.QualityType
+{
+    [ValidApiRequest]
+    public class QualityTypeService : RestServiceBase<QualityTypeModel>
+    {
+        private readonly QualityTypeProvider _qualityTypeProvider;
+
+        [Inject]
+        public QualityTypeService(QualityTypeProvider qualityTypeProvider)
+        {
+            _qualityTypeProvider = qualityTypeProvider;
+        }
+
+        public QualityTypeService()
+        {
+        }
+
+        public override object OnGet(QualityTypeModel request)
+        {
+            if (request.Id == 0)
+            {
+                var profiles = _qualityTypeProvider.All().Where(qualityProfile => qualityProfile.QualityTypeId > 0).ToList();
+                return Mapper.Map<List<Core.Repository.Quality.QualityType>, List<QualityTypeModel>>(profiles);
+            }
+
+            var type = _qualityTypeProvider.Get(request.Id);
+            return Mapper.Map<Core.Repository.Quality.QualityType, QualityTypeModel>(type);
+        }
+
+        //Create
+        public override object OnPost(QualityTypeModel request)
+        {
+            throw new NotImplementedException();
+        }
+
+        //Update
+        public override object OnPut(QualityTypeModel request)
+        {
+            var type = Mapper.Map<QualityTypeModel, Core.Repository.Quality.QualityType>(request);
+            _qualityTypeProvider.Update(type);
+
+            return request;
+        }
+
+        public override object OnDelete(QualityTypeModel request)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}

NzbDrone.Api/Resolvers/AllowedToQualitiesResolver.cs

@@ -12,7 +12,7 @@ namespace NzbDrone.Api.Resolvers
     {
         protected override List<QualityProfileType> ResolveCore(List<QualityTypes> source)
         {
-            var qualities = Mapper.Map<List<QualityTypes>, List<QualityProfileType>>(QualityTypes.All());
+            var qualities = Mapper.Map<List<QualityTypes>, List<QualityProfileType>>(QualityTypes.All().Where(q => q.Id > 0).ToList());
 
             qualities.ForEach(quality =>
             {

NzbDrone.Api/Resolvers/QualityTypesToIntResolver.cs

@@ -14,4 +14,4 @@ namespace NzbDrone.Api.Resolvers
             return source.Id;
         }
     }
-}
+}

NzbDrone.Web/Content/QualitySettings.css

@@ -123,6 +123,18 @@
     width: 600px;
 }
 
+.quality-type {
+    margin-top: 5px;
+    margin-bottom: 5px;
+    padding: 4px 10px 4px 10px;
+    border: 1px solid lightgray;
+}
+
+.quality-type .slider {
+    margin-top: 3px;
+    margin-bottom: 3px;
+}
+
 #QualityForm .ui-accordion .ui-accordion-content {
     padding: 1em 2em;
 }

NzbDrone.Web/NzbDrone.Web.csproj

@@ -398,13 +398,14 @@
     <Content Include="Scripts\backbone.js" />
     <Content Include="Scripts\backbone.marionette.min.js" />
     <Content Include="Scripts\backbone.min.js" />
+    <Content Include="Scripts\backbone\apps\qualityTypeApp.js" />
     <Content Include="Scripts\backbone\apps\qualityProfileApp.js" />
-    <Content Include="Scripts\backbone\bootstrapper.js" />
     <Content Include="Scripts\backbone\constants.js" />
-    <Content Include="Scripts\backbone\controller.js" />
+    <Content Include="Scripts\backbone\models\qualityType.js" />
+    <Content Include="Scripts\backbone\models\qualityTypeCollection.js" />
     <Content Include="Scripts\backbone\models\qualityProfileCollection.js" />
     <Content Include="Scripts\backbone\models\qualityProfile.js" />
-    <Content Include="Scripts\backbone\utils.js" />
+    <Content Include="Scripts\backbone\views\qualityTypes.js" />
     <Content Include="Scripts\backbone\views\qualityProfiles.js" />
     <Content Include="Scripts\conditional-validation.js" />
     <Content Include="Scripts\DataTables-1.9.4\media\js\FixedHeader.js" />
@@ -531,7 +532,6 @@
     <Content Include="Views\Upcoming\Index.cshtml" />
     <Content Include="Views\Series\Index.cshtml" />
     <Content Include="Views\Shared\Error.cshtml" />
-    <Content Include="Views\Settings\QualityProfileItem.cshtml" />
     <Content Include="Views\System\Indexers.cshtml" />
     <Content Include="Views\System\Config.cshtml" />
     <Content Include="Views\Settings\_SettingsLayout.cshtml" />

NzbDrone.Web/Scripts/NzbDrone/AutoBind.js

@@ -1,7 +1,7 @@
 $(document).ready(function () {
 
     //All forms are ajax forms
-    $("form").livequery(function () {
+        $("form").livequery(function () {
 
         var options = {
             type: 'post',
@@ -16,7 +16,6 @@
         $(this).removeAttr('disabled');
     });
 
-
     //All buttons are jQueryUI buttons
     $('button, input[type="button"], input[type="submit"], input[type="reset"]').livequery(function () {
         $(this).button();

NzbDrone.Web/Scripts/NzbDrone/qualitySettings.js

@@ -1,80 +1,4 @@
-var deleteQualityProfileUrl = '../../Settings/DeleteQualityProfile';
-
-$(document).on('click', '.delete-profile', function (e) {
-    var container = $(this).closest('.profileSection');
-    var id = $(container).attr('data-profile-id');
-
-    $.ajax({
-        type: "POST",
-        url: deleteQualityProfileUrl,
-        data: jQuery.param({ profileId: id }),
-        success: function (data, textStatus, jqXHR) {
-            $(container).remove();
-            removeOption(id);
-        }
-    });
-    
-    e.preventDefault();
-});
-
-function renameOption(text, value) {
-    $("#DefaultQualityProfileId option[value='" + value + "']").html(text);
-}
-
-function addOption(text, value) {
-    var myCombo = $('#DefaultQualityProfileId');
-
-    var exists = $("#DefaultQualityProfileId option[value='" + value + "']");
-
-    if (exists.length == 0)
-        myCombo.append($('\<option\> \</option\>').val(value).html(text));
-}
-
-function removeOption(value) {
-    $("#DefaultQualityProfileId option[value='" + value + "']").remove();
-}
-
-function getProfileId(obj) {
-    var parentProfileSection = $(obj).closest('.profileSection');
-    return parentProfileSection.attr('data-profile-id');
-}
-
-function getCleanId(obj) {
-    var parentProfileSection = $(obj).parents('.profileSection');
-    return parentProfileSection.children('.cleanId').val();
-}
-
-$(document).on('keyup', '.profileName_textbox', function () {
-    var value = $(this).val();
-
-    $(this).closest('.profileSection').find('.titleText').text(value);
-    var profileId = getProfileId(this);
-    
-    renameOption(value, profileId);
-}).keyup();
-
-$(document).on('click', '.quality-selectee', function () {
-    var id = $(this).attr('id');
-    var cleanId = getCleanId(this);
-    var cutoff = '#' + cleanId + '_Cutoff';
-    var name = jQuery('[for="' + id + '"]').children('.ui-button-text').text();
-    var qualityId = $(this).attr('data-quality-id');
-
-    //Remove 'Unknown'
-    $(cutoff + ' option').each(function () { if ($(this).text().indexOf('Unknown') > -1) $(cutoff + ' option').remove(':contains("' + $(this).text() + '")'); });
-
-    //Add option to cutoff SelectList
-    if ($(this).attr('checked')) {
-        $('<option>' + name + '</option>').val(qualityId).appendTo(cutoff);
-    }
-
-    //Remove option from cutoff SelectList
-    else {
-        $(cutoff).find('option[value="' + qualityId + '"]').remove();
-    }
-});
-
-var sliderOptions = {
+var sliderOptions = {
     min: 0,
     max: 200,
     value: 0,
@@ -88,14 +12,19 @@ var sliderOptions = {
         $(this).siblings('.slider-value').val(ui.value);
         $(this).siblings('.30-minute').text(ui.value * 30);
         $(this).siblings('.60-minute').text(ui.value * 60);
+    },
+    change: function (event, ui) {
+        $(this).siblings('.slider-value').val(ui.value).trigger('change');
     }
 };
 
-function setupSliders() {
-    $(".slider").each(function () {
-        var localOptions = sliderOptions;
-        localOptions["value"] = $(this).siblings('.slider-value').val();
+$('.quality-selectee').livequery(function () {
+    $(this).button();
+});
+
+$('.slider').livequery(function () {
+    var localOptions = sliderOptions;
+    localOptions["value"] = $(this).siblings('.slider-value').val();
 
-        $(this).empty().slider(localOptions);
-    });
-}
+    $(this).empty().slider(localOptions);
+});

NzbDrone.Web/Scripts/backbone/apps/qualityTypeApp.js

@@ -0,0 +1,19 @@
+QualityTypeApp = {};
+
+QualityTypeApp.Views = {};
+QualityTypeApp.Models = {};
+QualityTypeApp.Collections = {};
+
+QualityTypeApp.App = new Backbone.Marionette.Application();
+
+// Setup default application views
+QualityTypeApp.App.addInitializer(function () {
+
+    QualityTypeApp.App.addRegions({
+        mainRegion: '#sliders'
+    });
+
+    var qualityTypes = new QualityTypeCollectionView();
+    
+    QualityTypeApp.App.mainRegion.show(qualityTypes);
+});

NzbDrone.Web/Scripts/backbone/bootstrapper.js

@@ -1,7 +0,0 @@
-$(function () {
-    // Legacy support for templating
-    utils.loadTemplate(['QualityProfilesView', 'QualityProfileView'],
-    function () {
-        NzbDrone.App.start();
-    });
-});

NzbDrone.Web/Scripts/backbone/constants.js

@@ -3,4 +3,11 @@
         QualityProfileCollection: '#QualityProfileCollectionTemplate',
         QualityProfile: '#QualityProfileTemplate'
     },
+};
+
+QualityTypeApp.Constants = {
+    Templates: {
+        QualityTypeCollection: '#QualityTypeCollectionTemplate',
+        QualityType: '#QualityTypeTemplate'
+    },
 };

NzbDrone.Web/Scripts/backbone/controller.js

@@ -1,57 +0,0 @@
-(function (nzbDrone) {
-
-    var appController = function () {
-        return {
-            home: function (id) {
-
-                // if (!this.homeView) {
-                // this.homeView = new HomeView();
-                // }
-                // $('#content').html(this.homeView.el);
-
-                nzbDrone.App.Layout.content.show(new nzbDrone.Views.HomeView());
-
-                this.menuItemSelected('home-menu');
-            },
-
-            list: function (page) {
-
-                var p = page ? parseInt(page, 10) : 1;
-                var profileList = new ProfileCollection();
-                profileList.fetch({
-                    success: function () {
-                        $('#content').html(new QualityProfilesView({ model: profileList, page: p }).el);
-                    }
-                });
-                this.menuItemSelected('home-menu');
-            },
-
-            wineDetails: function (id) {
-                var profile = new Profile({ id: id });
-                profile.fetch({
-                    success: function () {
-                        $('#content').html(new QualityProfileView({ model: profile }).el);
-                    }
-                });
-                this.menuItemSelected();
-            },
-
-            addWine: function () {
-                var wine = new Profile();
-                $('#content').html(new QualityProfileView({ model: wine }).el);
-                this.menuItemSelected('add-menu');
-            },
-
-            menuItemSelected: function (item) {
-
-                // Using the application vent object as our global event aggregator
-                nzbDrone.App.vent.trigger(
-                    nzbDrone.Constants.Events.MenuItemSelected, // Event name
-                    item); // Options
-            }
-        };
-    };
-
-    nzbDrone.AppController = appController;
-
-})(window.NodeCellar);

NzbDrone.Web/Scripts/backbone/models/qualityType.js

@@ -0,0 +1,38 @@
+window.QualityType = Backbone.Model.extend({
+
+    urlRoot: '/api/qualitytypes',
+
+    idAttribute: 'Id',
+
+    initialize: function () {
+        this.validators = {};
+    },
+
+    validateItem: function (key) {
+        return (this.validators[key]) ? this.validators[key](this.get(key)) : { isValid: true };
+    },
+
+    // TODO: Implement Backbone's standard validate() method instead.
+    validateAll: function () {
+
+        var messages = {};
+
+        for (var key in this.validators) {
+            if (this.validators.hasOwnProperty(key)) {
+                var check = this.validators[key](this.get(key));
+                if (check.isValid === false) {
+                    messages[key] = check.message;
+                }
+            }
+        }
+
+        return _.size(messages) > 0 ? { isValid: false, messages: messages } : { isValid: true };
+    },
+
+    defaults: {
+        Id: null,
+        Name: '',
+        MaxSize: 100,
+        MinSize: 0
+    }
+});

NzbDrone.Web/Scripts/backbone/models/qualityTypeCollection.js

@@ -0,0 +1,4 @@
+window.QualityTypeCollection = Backbone.Collection.extend({
+    model: QualityType,
+    url: '/api/qualitytypes'
+});

NzbDrone.Web/Scripts/backbone/utils.js

@@ -1,53 +0,0 @@
-window.utils = {
-
-    // Asynchronously load templates located in separate .html files
-    loadTemplate: function (views, callback) {
-
-        var deferreds = [];
-
-        $.each(views, function (index, view) {
-            if (window[view]) {
-                deferreds.push($.get('tpl/' + view + '.html', function (data) {
-                    window[view].prototype.template = _.template(data);
-                }));
-            } else {
-                alert(view + ' not found');
-            }
-        });
-
-        $.when.apply(null, deferreds).done(callback);
-    },
-
-    displayValidationErrors: function (messages) {
-        for (var key in messages) {
-            if (messages.hasOwnProperty(key)) {
-                this.addValidationError(key, messages[key]);
-            }
-        }
-        this.showAlert('Warning!', 'Fix validation errors and try again', 'alert-warning');
-    },
-
-    addValidationError: function (field, message) {
-        var controlGroup = $('#' + field).parent().parent();
-        controlGroup.addClass('error');
-        $('.help-inline', controlGroup).html(message);
-    },
-
-    removeValidationError: function (field) {
-        var controlGroup = $('#' + field).parent().parent();
-        controlGroup.removeClass('error');
-        $('.help-inline', controlGroup).html('');
-    },
-
-    showAlert: function (title, text, klass) {
-        $('.alert').removeClass('alert-error alert-warning alert-success alert-info');
-        $('.alert').addClass(klass);
-        $('.alert').html('<strong>' + title + '</strong> ' + text);
-        $('.alert').show();
-    },
-
-    hideAlert: function () {
-        $('.alert').hide();
-    }
-
-};

NzbDrone.Web/Scripts/backbone/views/qualityProfiles.js

@@ -107,15 +107,15 @@ QualityProfileCollectionView = Backbone.Marionette.CompositeView.extend({
         //Todo: Need to get the default profile from the server, instead of creating it manually...
         var newProfile = new QualityProfile({
             Name: '', Cutoff: 0, Qualities: [
-                { "Id": 0, "Weight": 0, "Name": "Unknown", "Allowed": false },
                 { "Id": 1, "Weight": 1, "Name": "SDTV", "Allowed": false },
                 { "Id": 8, "Weight": 2, "Name": "WEBDL-480p", "Allowed": false },
                 { "Id": 2, "Weight": 3, "Name": "DVD", "Allowed": false },
-                { "Id": 4, "Weight": 4, "Name": "HDTV", "Allowed": false },
-                { "Id": 5, "Weight": 5, "Name": "WEBDL-720p", "Allowed": false },
+                { "Id": 4, "Weight": 4, "Name": "HDTV-720p", "Allowed": false },
+                { "Id": 9, "Weight": 5, "Name": "HDTV-1080p", "Allowed": false },
+                { "Id": 5, "Weight": 6, "Name": "WEBDL-720p", "Allowed": false },
                 { "Id": 3, "Weight": 6, "Name": "WEBDL-1080p", "Allowed": false },
-                { "Id": 6, "Weight": 7, "Name": "Bluray720p", "Allowed": false },
-                { "Id": 7, "Weight": 8, "Name": "Bluray1080p", "Allowed": false }
+                { "Id": 6, "Weight": 8, "Name": "Bluray720p", "Allowed": false },
+                { "Id": 7, "Weight": 9, "Name": "Bluray1080p", "Allowed": false }
             ]
         });
         //Todo: It would be nice to not have to save this on add (via create)

NzbDrone.Web/Scripts/backbone/views/qualityTypes.js

@@ -0,0 +1,29 @@
+QualityTypeView = Backbone.Marionette.ItemView.extend({
+    tagName: "div",
+    className: "quality-type",
+    template: QualityTypeApp.Constants.Templates.QualityType,
+    events: {
+        'change .slider-value': 'changeSize'
+    },
+    changeSize: function (e) {
+        var target = $(e.target);
+        var maxSize = parseInt($(target).val());
+        
+        this.model.set({ "MaxSize": maxSize });
+        this.model.save();
+    }
+});
+
+QualityTypeCollectionView = Backbone.Marionette.CompositeView.extend({
+    tagName: "div",
+    id: "quality-type-collection",
+    itemView: QualityTypeView,
+    template: QualityTypeApp.Constants.Templates.QualityTypeCollection,
+    
+    initialize: function () {
+        _.bindAll(this, 'render');
+        this.collection = new QualityTypeCollection();
+        this.collection.fetch();
+        this.collection.bind('reset', this.render);
+    }
+});

NzbDrone.Web/Views/Settings/Quality.cshtml

@@ -14,104 +14,41 @@
                 <span class="small">@Html.DescriptionFor(m => m.DefaultQualityProfileId)</span>
             </label>
             @Html.DropDownListFor(m => m.DefaultQualityProfileId, Model.QualityProfileSelectList, new { @class = "inputClass" })
+            
+            <br />
+            <button type="submit" class="save_button" disabled="disabled">Save</button>
         </div>
         
         <div class="jquery-accordion">
-            <h3>
-                <a href="#">Profiles</a></h3>
+            <h3><a href="#">Profiles</a></h3>
             <div id="profileContainer">
                 <div id="profiles">
                 </div>
             </div>
-            <h3>
-                <a href="#">Size Limits</a></h3>
+
+            <h3><a href="#">Size Limits</a></h3>
             <div class="sliders">
                 <div class="infoBox">
                     Size Limits specify the maximum download size NzbDrone will send to your download client.
                 </div>
-                <div class="slider-container">
-                    <b>SDTV</b>
-                    <div id="sdtv-slider" class="slider">
-                    </div>
-                    @Html.HiddenFor(m => m.SdtvMaxSize, new { @class = "slider-value" })
-                    30 minute size: <span class="30-minute"></span>MB | 60 minute size: <span class="60-minute">
-                                                                                        </span>MB
-                </div>
-                <div class="slider-container">
-                    <b>DVD</b>
-                    <div id="dvd-slider" class="slider">
-                    </div>
-                    @Html.HiddenFor(m => m.DvdMaxSize, new { @class = "slider-value" })
-                    30 minute size: <span class="30-minute"></span>MB | 60 minute size: <span class="60-minute">
-                                                                                        </span>MB
-                </div>
-                <div class="slider-container">
-                    <b>HDTV</b>
-                    <div id="hdtv-slider" class="slider">
-                    </div>
-                    @Html.HiddenFor(m => m.HdtvMaxSize, new { @class = "slider-value" })
-                    30 minute size: <span class="30-minute"></span>MB | 60 minute size: <span class="60-minute">
-                                                                                        </span>MB
-                </div>
-                <div class="slider-container">
-                    <b>WEBDL-720p</b>
-                    <div id="webdl-slider" class="slider">
-                    </div>
-                    @Html.HiddenFor(m => m.Webdl720pMaxSize, new { @class = "slider-value" })
-                    30 minute size: <span class="30-minute"></span>MB | 60 minute size: <span class="60-minute">
-                                                                                        </span>MB
-                </div>
-                <div class="slider-container">
-                    <b>Bluray 720p</b>
-                    <div id="bluray720p-slider" class="slider">
-                    </div>
-                    @Html.HiddenFor(m => m.Bluray720pMaxSize, new { @class = "slider-value" })
-                    30 minute size: <span class="30-minute"></span>MB | 60 minute size: <span class="60-minute">
-                                                                                        </span>MB
-                </div>
-                <div class="slider-container">
-                    <b>WEBDL-1080p</b>
-                    <div id="webdl-slider" class="slider">
-                    </div>
-                    @Html.HiddenFor(m => m.Webdl1080pMaxSize, new { @class = "slider-value" })
-                    30 minute size: <span class="30-minute"></span>MB | 60 minute size: <span class="60-minute">
-                                                                                        </span>MB
-                </div>
-                <div class="slider-container">
-                    <b>Bluray 1080p</b>
-                    <div id="bluray1080p-slider" class="slider">
-                    </div>
-                    @Html.HiddenFor(m => m.Bluray1080pMaxSize, new { @class = "slider-value" })
-                    30 minute size: <span class="30-minute"></span>MB | 60 minute size: <span class="60-minute">
-                                                                                        </span>MB
-                </div>
+                <div id="sliders"></div>
             </div>
         </div>
-        <br />
-        <button type="submit" class="save_button" disabled="disabled">
-            Save</button>
     }
 </div>
 
 @section Scripts {
     @Html.IncludeScript("NzbDrone/qualitySettings.js")
-
-    <script type="text/javascript">
-        $(document).ready(function() {
-            setupSliders();
-        });
-
-        $('.quality-selectee').livequery(function() {
-            $(this).button();
-        });
-    </script>
     
     @Html.IncludeScript("backbone/apps/qualityProfileApp.js")
+    @Html.IncludeScript("backbone/apps/qualityTypeApp.js")
     @Html.IncludeScript("backbone/constants.js")
     @Html.IncludeScript("backbone/models/qualityProfile.js")
     @Html.IncludeScript("backbone/models/qualityProfileCollection.js")
     @Html.IncludeScript("backbone/views/qualityProfiles.js")
-    @*@Html.IncludeScript("backbone/bootstrapper.js")*@
+    @Html.IncludeScript("backbone/models/qualityType.js")
+    @Html.IncludeScript("backbone/models/qualityTypeCollection.js")
+    @Html.IncludeScript("backbone/views/qualityTypes.js")
 
     <script id="QualityProfileTemplate" type="text/template">
         <a href="#" class="remove-profile"><i class="icon-remove"></i></a>
@@ -143,8 +80,6 @@
             />
             <label for="<%= guid %>_<%= quality.Id %>"><%= quality.Name %></label>
         <% }); %>
-    
-    
     </script>
     
     <script id="QualityProfileCollectionTemplate" type="text/template">
@@ -156,9 +91,20 @@
         </div> 
     </script>
     
+    <script id="QualityTypeTemplate" type="text/template">
+        <b><%= Name %></b>
+        <div class="slider"></div>
+        <input type="hidden" value="<%= MaxSize %>" class="slider-value">
+        30 minute size: <span class="30-minute"></span>MB | 60 minute size: <span class="60-minute"></span>MB
+    </script>
+    
+    <script id="QualityTypeCollectionTemplate" type="text/template">    
+    </script>
+    
     <script>
         $(document).ready(function() {
             QualityProfileApp.App.start();
+            QualityTypeApp.App.start();
         });
     </script>
 }

NzbDrone.Web/Views/Settings/QualityProfileItem.cshtml

@@ -1,44 +0,0 @@
-@model NzbDrone.Web.Models.QualityProfileModel
-@using NzbDrone.Web.Helpers
-@{
-    Layout = null;
-}
-@using (Html.BeginCollectionItem("Profiles"))
-{
-    var idClean = ViewData.TemplateInfo.HtmlFieldPrefix.Replace('[', '_').Replace(']', '_');
-
-    <div class="profileSection" data-profile-id="@Model.QualityProfileId">
-        <div class="qualityHeader">
-            <span class="titleText">
-                @Model.Name
-            </span>
-            <a href="@Url.Action("DeleteQualityProfile", "Settings", new { profileId = @Model.QualityProfileId })" class="delete-profile">
-                <i class="icon-remove"></i>
-            </a>
-        </div>
-        <div class="profileOptions">
-            @Html.LabelFor(x => x.Name)
-            @Html.TextBoxFor(x => x.Name, new { @class = "profileName_textbox" })
-            @Html.LabelFor(x => x.Cutoff)
-            @Html.DropDownListFor(m => m.Cutoff, new SelectList(Model.Allowed, "Id", "Name", Model.Cutoff))
-        </div>
-        <div class="qualitySelectees">
-            @Html.CheckBoxFor(m => m.Sdtv, new { @class = "quality-selectee", data_quality_id = Model.SdtvId })
-            @Html.LabelFor(m => m.Sdtv)
-            @Html.CheckBoxFor(m => m.Dvd, new { @class = "quality-selectee", data_quality_id = Model.DvdId })
-            @Html.LabelFor(m => m.Dvd)
-            @Html.CheckBoxFor(m => m.Hdtv, new { @class = "quality-selectee", data_quality_id = Model.HdtvId })
-            @Html.LabelFor(m => m.Hdtv)
-            @Html.CheckBoxFor(m => m.Webdl720p, new { @class = "quality-selectee", data_quality_id = Model.Webdl720pId })
-            @Html.LabelFor(m => m.Webdl720p)
-            @Html.CheckBoxFor(m => m.Bluray720p, new { @class = "quality-selectee", data_quality_id = Model.Bluray720pId })
-            @Html.LabelFor(m => m.Bluray720p)
-            @Html.CheckBoxFor(m => m.Webdl1080p, new { @class = "quality-selectee", data_quality_id = Model.Webdl1080pId })
-            @Html.LabelFor(m => m.Webdl1080p)
-            @Html.CheckBoxFor(m => m.Bluray1080p, new { @class = "quality-selectee", data_quality_id = Model.Bluray1080pId })
-            @Html.LabelFor(m => m.Bluray1080p)
-        </div>
-        @Html.HiddenFor(x => x.QualityProfileId, new { @class = "qualityProfileId" })
-        @Html.Hidden("cleanId", idClean, new { @class = "cleanId" })
-    </div>
-}