From 803ad8ca919f84e60b0459acd68818d8cc2ce9f7 Mon Sep 17 00:00:00 2001
From: Mark McDowall <markus.mcd5@gmail.com>
Date: Sun, 29 May 2011 14:25:00 -0700
Subject: [PATCH] Removed jQuery UI selectable, using custom select boxes now.
 Cutoff dropbox is dynamic (based on selected qualities).

---
 .../Controllers/SettingsController.cs         |  4 +-
 .../Views/Settings/QualityProfileItem.cshtml  | 99 ++++++++++---------
 NzbDrone.Web/Views/Settings/Test.cshtml       | 99 +++++++++----------
 3 files changed, 98 insertions(+), 104 deletions(-)

diff --git a/NzbDrone.Web/Controllers/SettingsController.cs b/NzbDrone.Web/Controllers/SettingsController.cs
index 414ca01a6..f70e006ba 100644
--- a/NzbDrone.Web/Controllers/SettingsController.cs
+++ b/NzbDrone.Web/Controllers/SettingsController.cs
@@ -472,8 +472,8 @@ namespace NzbDrone.Web.Controllers
 
                     profile.Allowed = new List<QualityTypes>();
 
-                    //Remove the extra comma from the end and replace double commas with a single one (the Javascript gets a little crazy)
-                    profile.AllowedString = profile.AllowedString.Replace(",,", ",").Trim(',');
+                    //Remove the extra comma from the end
+                    profile.AllowedString = profile.AllowedString.Trim(',');
 
                     foreach (var quality in profile.AllowedString.Split(','))
                     {
diff --git a/NzbDrone.Web/Views/Settings/QualityProfileItem.cshtml b/NzbDrone.Web/Views/Settings/QualityProfileItem.cshtml
index aea894c63..b5a6ebaf7 100644
--- a/NzbDrone.Web/Views/Settings/QualityProfileItem.cshtml
+++ b/NzbDrone.Web/Views/Settings/QualityProfileItem.cshtml
@@ -7,11 +7,11 @@
     Layout = null;
 }
 
-<script type="text/javascript">
-    $(document).ready(function () {
-        addOption('@Model.Name', '@ViewData["ProfileId"]');
-    });
-</script>
+<style>
+    .quality-selectee { width: 75px; padding: 1px; padding-left: 3px; padding-right: 3px; margin: 2px; float: left; }
+    .quality-selecting { background: #85AEF9; }
+    .quality-selected { background: #065EFE; color: white; }
+</style>
 
 @using (Html.BeginCollectionItem("Profiles"))
 {
@@ -22,36 +22,7 @@
     string allowedStringName = String.Format("{0}_AllowedString", idClean);
     string title = String.Format("{0}_Title", idClean);
     string nameBox = String.Format("{0}_Name", idClean);
-    string cutoff = String.Format("{0}.Cutoff", ugly);
-
-    <style>
-	    .selectableList .ui-selecting { background: #85AEF9; }
-	    .selectableList .ui-selected { background: #065EFE; color: white; }
-	    .selectableList { list-style-type: none; margin: 0; padding: 0; }
-	    .selectableList li { margin: 3px; margin-left: 10px; padding-left: 0.4em; padding-bottom: 1.5em; padding-top: 0em; float: left; font-size: 1.2em; width: 110px; height: 6px; }
-    </style>
-    
-    <script type="text/javascript">
-        $(function () {
-            $("#@selectable").selectable({
-                create: function () {
-                    var result = "";
-                    $(".ui-selected", this).each(function () {
-                        result +=  this.id + ",";
-                    });
-                    $("#@allowedStringName").empty().val(result);
-                },
-                    
-                stop: function () {
-                    var result = "";
-                    $(".ui-selected", this).each(function () {
-                        result += this.id + ",";
-                    });
-                    $("#@allowedStringName").empty().val(result);
-                }
-            });
-        })
-	</script>
+    string cutoff = String.Format("{0}_Cutoff", idClean);
 
     <div class="profileSectionEditor" id="div_@(ViewData["ProfileId"])">
 
@@ -70,49 +41,81 @@
 
                 <div class="config-group" style="width: 255px; margin-bottom: 5px; margin-left: 5px;">
                     <div class="config-title">@Html.LabelFor(x => x.Cutoff)</div>
-                    <div class="config-value">@Html.DropDownListFor(m => m.Cutoff, new SelectList(ViewData["Qualities"] as IEnumerable, Model.Cutoff))</div>
+                    <div class="config-value">@Html.DropDownListFor(m => m.Cutoff, new SelectList(Model.Allowed, Model.Cutoff))</div>
                     <div class="config-validation">@Html.ValidationMessageFor(x => x.Cutoff)</div>
                 </div>                
             </div>
 
             <div class="selectableDiv" style="margin-top: 30px;">
-                <ol id="@selectable" class="selectableList">
-                    
+                <div id="@selectable">
                     @{var qualitiesList = (List<QualityTypes>)ViewData["Qualities"];}
-
                     @for (int i = 0; i < qualitiesList.Count(); i++)
                     {
+                        if (qualitiesList[i].ToString() == "Unknown")
+                        {
+                            continue;
+                        }
+                        
                         if (Model.Allowed != null)
                         {
                             if (Model.Allowed.Contains(qualitiesList[i]))
                             {
-                                <li class="ui-widget-content ui-selected" id="@qualitiesList[i].ToString()">
-                                    @Html.Label(qualitiesList[i].ToString())
-                                </li>
+                                <fieldset class="quality-selectee quality-selected">@qualitiesList[i].ToString()</fieldset>
                                 continue;
                             }
                         }
                         
-                        <li class="ui-widget-content" id="@qualitiesList[i].ToString()">
-                            @Html.Label(qualitiesList[i].ToString())
-                        </li>
+                        <fieldset class="quality-selectee">@qualitiesList[i].ToString()</fieldset>
                     }
-                </ol>
+                </div>
             </div>
 
-            <div class="hiddenProfileDetails2">
+            <div class="hiddenProfileDetails">
                 @Html.HiddenFor(x => x.QualityProfileId)
                 @Html.HiddenFor(x => x.UserProfile)
                 @Html.HiddenFor(m => m.AllowedString)
             </div>
         </fieldset>
-    </div> 
+    </div>
 
     <script type="text/javascript">
+        $(document).ready(function () {
+            addOption('@Model.Name', '@ViewData["ProfileId"]');
+
+            result = "";
+            $("#@selectable .quality-selected").each(function () {
+                result += this.firstChild.data + ",";
+            });
+
+            $("#@allowedStringName").empty().val(result);
+            $('#@selectable .quality-selectee').disableSelection();
+        });
+
         $("#@nameBox").keyup(function () {
             var value = $(this).val();
             $("#@title").text(value);
             renameOption(value, '@ViewData["ProfileId"]');
         }).keyup();
+
+        $('#@selectable .quality-selectee').click(function () {
+            if ($(this).hasClass('quality-selected'))
+            {
+                $(this).removeClass('quality-selected');
+                var toRemove = this.firstChild.data;
+                $('#@cutoff option').each(function () { if ($(this).text().indexOf(toRemove) > -1) $('#@cutoff option').remove(':contains("' + $(this).text() + '")'); });
+            }
+            
+            else {
+                $(this).addClass('quality-selected');
+                $('<option>' + this.firstChild.data + '</option>').appendTo('#@cutoff');
+            }
+
+            result = "";
+            $("#@selectable .quality-selected").each(function () {
+                result += this.firstChild.data + ",";
+            });
+
+            $("#@allowedStringName").empty().val(result);
+        });
     </script>
 }
\ No newline at end of file
diff --git a/NzbDrone.Web/Views/Settings/Test.cshtml b/NzbDrone.Web/Views/Settings/Test.cshtml
index 5f27b2002..e2ec5cac0 100644
--- a/NzbDrone.Web/Views/Settings/Test.cshtml
+++ b/NzbDrone.Web/Views/Settings/Test.cshtml
@@ -1,58 +1,49 @@
-Hello World
-
-<input type="checkbox" id="id_chk1" class="chkbox" value="1" />Check 1<br/>
-    <input type="checkbox" id="id_chk2" class="chkbox" value="2" />Check 2<br/>
-    <input type="checkbox" id="id_chk3" class="chkbox" value="3" />Check 3<br/>
-    <input type="checkbox" id="id_chk4" class="chkbox" value="4" />Check 4<br/>
-    <input type="checkbox" id="id_chk5" class="chkbox" value="5" />Check 5<br/>
-    <input type="checkbox" id="id_chk6" class="chkbox" value="6" />Check 6<br/>
-    <input type="checkbox" id="id_chk7" class="chkbox" value="7" />Check 7<br/>
-
-    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
-    <script type="text/javascript">
-        var lastChecked = null;
-
-        $(document).ready(function () {
-            $('.chkbox').click(function (event) {
-                if (!lastChecked) {
-                    lastChecked = this;
-                    return;
-                }
-
-                if (event.shiftKey) {
-                    var start = $('.chkbox').index(this);
-                    var end = $('.chkbox').index(lastChecked);
-
-                    for (i = Math.min(start, end); i <= Math.max(start, end); i++) {
-                        $('.chkbox')[i].checked = lastChecked.checked;
-                    }
-                }
-
-                lastChecked = this;
-            });
-        });
-    </script>
+<style>
+    .quality-selectee { width: 75px; padding: 1px; padding-left: 5px; margin: 3px; }
+    .quality-selecting { background: #85AEF9; }
+    .quality-selected { background: #065EFE; color: white; }
+</style>
 
+<fieldset class="quality-selectee">
+SDTV
+</fieldset>
 
-<style>
-	#selectable .ui-selecting { background: #85AEF9; }
-	#selectable .ui-selected { background: #065EFE; color: white; }
-	#selectable { list-style-type: none; margin: 0; padding: 0; width: 110px; }
-	#selectable li { margin: 3px; padding-left: 0.4em; padding-bottom: 1.5em; padding-top: 0em; font-size: 1.2em; height: 6px; }
-</style>
+<fieldset class="quality-selectee">
+DVD
+</fieldset>
+
+<fieldset class="quality-selectee">
+HDTV
+</fieldset>
+
+<fieldset class="quality-selectee">
+WEBDL
+</fieldset>
+
+<fieldset class="quality-selectee">
+Bluray720p
+</fieldset>
+
+<fieldset class="quality-selectee">
+Bluray1080p
+</fieldset>
+
+<br />
+
+@Html.TextBox("result", "")
 
 <script type="text/javascript">
-	$(function () {
-	    $("#selectable").selectable();
-	});
-</script>
-
-<ol id="selectable">
-	<li class="ui-widget-content">Unknown</li>
-	<li class="ui-widget-content">SDTV</li>
-	<li class="ui-widget-content">DVD</li>
-	<li class="ui-widget-content">HDTV</li>
-	<li class="ui-widget-content">WEBDL</li>
-	<li class="ui-widget-content">Bluray720p</li>
-	<li class="ui-widget-content">Bluray1080p</li>
-</ol>
\ No newline at end of file
+    $('.quality-selectee').click(function () {
+        if ($(this).hasClass('quality-selected'))
+            $(this).removeClass('quality-selected');
+        else
+            $(this).addClass('quality-selected');
+
+        result = "";
+        $(".quality-selected").each(function () {
+            result += this.firstChild.data + ",";
+        });
+
+        $("#result").empty().val(result);
+    });
+</script>
\ No newline at end of file