move quality-chooser to vue

themes-default/slim/static/js/add-show-options.js

@@ -2,10 +2,10 @@ $(document).ready(() => {
     $(document.body).on('click', '#saveDefaultsButton', event => {
         const anyQualArray = [];
         const bestQualArray = [];
-        $('#allowed_qualities option:selected').each((i, d) => {
+        $('select[name="allowed_qualities"] option:selected').each((i, d) => {
             anyQualArray.push($(d).val());
         });
-        $('#preferred_qualities option:selected').each((i, d) => {
+        $('select[name="preferred_qualities"] option:selected').each((i, d) => {
             bestQualArray.push($(d).val());
         });
 
@@ -31,11 +31,11 @@ $(document).ready(() => {
         });
     });
 
-    $(document.body).on('change', '#statusSelect, #qualityPreset, #season_folders, #allowed_qualities, #preferred_qualities, #subtitles, #scene, #anime, #statusSelectAfter', () => {
+    $(document.body).on('change', '#statusSelect, select[name="quality_preset"], #season_folders, select[name="allowed_qualities"], select[name="preferred_qualities"], #subtitles, #scene, #anime, #statusSelectAfter', () => {
         $('#saveDefaultsButton').prop('disabled', false);
     });
 
-    $(document.body).on('change', '#qualityPreset', () => {
+    $(document.body).on('change', 'select[name="quality_preset"]', () => {
         // Fix issue #181 - force re-render to correct the height of the outer div
         $('span.prev').click();
         $('span.next').click();

themes-default/slim/static/js/vue-submit-form.js

@@ -0,0 +1,21 @@
+window.vueSubmitForm = async function(formId) {
+    const element = document.getElementById(formId);
+    const formData = new FormData(element);
+    const method = element.getAttribute('method');
+    const base = document.getElementsByTagName('base')[0].getAttribute('href');
+    const path = element.getAttribute('action');
+    const redirect = element.getAttribute('redirect');
+
+    // @TODO: Add this back when we're JSON only
+    //        This converts formData to JSON
+    // const body = Array.from(formData.entries()).reduce((memo, pair) => ({
+    // ...memo,
+    // [pair[0]]: pair[1]
+    // }), {});
+    this.$http[method](path, { body: formData, redirect: 'follow' })
+        .then(() => {
+            if (redirect) {
+                window.location.href = base + redirect;
+            }
+        });
+};

themes-default/slim/views/addShows_addExistingShow.mako

@@ -3,7 +3,6 @@
     from medusa import app
 %>
 <%block name="scripts">
-<script type="text/javascript" src="js/quality-chooser.js?${sbPID}"></script>
 <script type="text/javascript" src="js/add-show-options.js?${sbPID}"></script>
 <script>
 let app;

themes-default/slim/views/addShows_newShow.mako

@@ -4,9 +4,11 @@
     from medusa.indexers.indexer_api import indexerApi
 %>
 <%block name="scripts">
-<script type="text/javascript" src="js/quality-chooser.js?${sbPID}"></script>
 <script type="text/javascript" src="js/add-show-options.js?${sbPID}"></script>
 <script type="text/javascript" src="js/blackwhite.js?${sbPID}"></script>
+<script src="js/lib/Frisbee.min.js"></script>
+<script src="js/lib/vue-frisbee.min.js"></script>
+<script src="js/vue-submit-form.js"></script>
 <script>
 let app;
 const startVue = () => {
@@ -19,6 +21,9 @@ const startVue = () => {
             return {
                 header: 'New Show'
             };
+        },
+        methods: {
+            vueSubmitForm
         }
     });
 };
@@ -32,7 +37,7 @@ const startVue = () => {
         <div id="core-component-group1" class="tab-pane active component-group">
             <div id="displayText"></div>
             <br>
-            <form id="addShowForm" method="post" action="addShows/addNewShow" accept-charset="utf-8">
+            <form id="addShowForm" method="post" action="addShows/addNewShow" redirect="/" accept-charset="utf-8">
                 <fieldset class="sectionwrap">
                     <legend class="legendStep">Find a show on selected indexer(s)</legend>
                     <div class="stepDiv">
@@ -90,7 +95,7 @@ const startVue = () => {
             </form>
             <br>
             <div style="width: 100%; text-align: center;">
-                <input class="btn" type="button" id="addShowButton" value="Add Show" disabled="disabled" />
+                <input @click.prevent="vueSubmitForm('addShowForm')" id="addShowButton" class="btn" type="button" value="Add Show" disabled="disabled" />
                 % if provided_show_dir:
                 <input class="btn" type="button" id="skipShowButton" value="Skip Show" />
                 % endif

themes-default/slim/views/addShows_recommended.mako

@@ -3,7 +3,6 @@
     from medusa import app
 %>
 <%block name="scripts">
-    <script type="text/javascript" src="js/quality-chooser.js?${sbPID}"></script>
 % if enable_anime_options:
     <script type="text/javascript" src="js/blackwhite.js?${sbPID}"></script>
 % endif

themes-default/slim/views/addShows_trendingShows.mako

@@ -3,7 +3,6 @@
     from medusa import app
 %>
 <%block name="scripts">
-<script type="text/javascript" src="js/quality-chooser.js?${sbPID}"></script>
 % if enable_anime_options:
     <script type="text/javascript" src="js/blackwhite.js?${sbPID}"></script>
 % endif

themes-default/slim/views/editShow.mako

@@ -13,7 +13,6 @@
 <meta data-var="show.is_anime" data-content="${show.is_anime}">
 </%block>
 <%block name="scripts">
-    <script type="text/javascript" src="js/quality-chooser.js?${sbPID}"></script>
     <script type="text/javascript" src="js/edit-show.js"></script>
 % if show.is_anime:
     <script type="text/javascript" src="js/blackwhite.js?${sbPID}"></script>
@@ -71,8 +70,7 @@ const startVue = () => {
                             <label for="qualityPreset">
                                 <span class="component-title">Preferred Quality</span>
                                 <span class="component-desc">
-                                    <% allowed_qualities, preferred_qualities = common.Quality.split_quality(int(show.quality)) %>
-                                    <%include file="/inc_qualityChooser.mako"/>
+                                    <quality-chooser/>
                                 </span>
                             </label>
                         </div>

themes-default/slim/views/inc_addShowOptions.mako

@@ -8,8 +8,7 @@
             <label for="customQuality" class="clearfix">
                 <span class="component-title">Preferred Quality</span>
                 <span class="component-desc">
-                    <% allowed_qualities, preferred_qualities = Quality.split_quality(app.QUALITY_DEFAULT) %>
-                    <%include file="/inc_qualityChooser.mako"/>
+                    <quality-chooser/>
                 </span>
             </label>
         </div>

themes-default/slim/views/layouts/main.mako

@@ -115,7 +115,7 @@
         <script type="text/javascript" src="js/browser.js?${sbPID}"></script>
 
         <%
-            ## Add Global Vue component x-templates here
+            ## Add Vue component x-templates here
             ## @NOTE: These will be usable on all pages
         %>
         <script src="js/lib/vue.js"></script>
@@ -127,6 +127,7 @@
         <%include file="/vue-components/file-browser.mako"/>
         <%include file="/vue-components/plot-info.mako"/>
         <%include file="/vue-components/saved-message.mako"/>
+        <%include file="/vue-components/quality-chooser.mako"/>
         <%block name="scripts" />
     </body>
 </html>

themes-default/slim/views/manage_massEdit.mako

@@ -14,7 +14,6 @@
         initial_quality = common.SD
     allowed_qualities, preferred_qualities = common.Quality.split_quality(initial_quality)
 %>
-<script type="text/javascript" src="js/quality-chooser.js?${sbPID}"></script>
 <script>
 let app;
 const startVue = () => {